/* Apteka Sharm v2: motion core (CREATIVE-DIRECTION §2.6, §7). Generic modules only; section layout lives in sections-v2.css.
   Gating classes on <html>: sa-motion (full motion), sa-calm (reduced motion: static, posters), sa-lite (Save-Data/2G/3G: no video bytes until Play),
   sa-mjs (motion.js runs: hidden start states that only motion.js resolves are keyed on .sa-mjs.sa-motion, so nothing stays hidden without it). */

/* ---------- Tokens: springs sampled from Remotion's Easing.spring (one set for films and web) ---------- */
:root {
	--spring-glide: linear(0, 0.0276, 0.0936, 0.1793, 0.2724, 0.3653, 0.4533, 0.5338, 0.6059, 0.6691, 0.7239, 0.7708, 0.8106, 0.8441, 0.8721, 0.8954, 0.9147, 0.9306, 0.9437, 0.9544, 0.9632, 0.9703, 0.9761, 0.9807, 0.9845, 0.9876, 0.9901, 0.992, 0.9936, 0.9949, 1);
	--spring-pop: linear(0, 0.0426, 0.1486, 0.2898, 0.4439, 0.5946, 0.7308, 0.8461, 0.9379, 1.006, 1.0524, 1.0802, 1.0929, 1.0942, 1.0875, 1.0759, 1.0618, 1.0472, 1.0334, 1.0211, 1.011, 1.0032, 0.9975, 0.9938, 0.9918, 0.991, 0.9912, 0.9921, 0.9933, 0.9947, 1);
	--spring-sticker: linear(0, 0.0434, 0.1541, 0.305, 0.473, 0.6395, 0.7912, 0.9196, 1.0203, 1.0924, 1.1376, 1.1594, 1.1622, 1.1508, 1.1301, 1.1041, 1.0765, 1.05, 1.0265, 1.007, 0.9922, 0.982, 0.976, 0.9736, 0.974, 0.9764, 0.9802, 0.9845, 0.989, 0.9932, 1);
	--ease-in: cubic-bezier(.7, 0, .84, 0);
	--dur-glide: 600ms;
	--dur-pop: 520ms;
	--dur-exit: 220ms;
	--dur-micro: 120ms;
}
@supports not (transition-timing-function: linear(0, 1)) {
	:root { --spring-glide: cubic-bezier(.16, 1, .3, 1); --spring-pop: cubic-bezier(.34, 1.3, .64, 1); --spring-sticker: cubic-bezier(.34, 1.56, .64, 1); }
}

.sa-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- M1 Video figure (parts/motion-video.php): zero CLS, poster first ---------- */
.sa-mv, .sa-mv__box { position: relative; aspect-ratio: var(--ar-sm, var(--ar)); overflow: hidden; background: var(--mint-100); }
.sa-mv { display: block; margin: 0; isolation: isolate; }
@media (min-width: 980px) { .sa-mv, .sa-mv__box { aspect-ratio: var(--ar); } }
/* Per-figure breakpoint (sa_motion_video 'bp' => 760): --ar from 760 px up */
@media (min-width: 760px) { [data-sa-mv-bp="760"], [data-sa-mv-bp="760"] .sa-mv__box { aspect-ratio: var(--ar); } }
.sa-mv.sa-mv--cap { aspect-ratio: auto; overflow: visible; background: none; }
.sa-mv__box { border-radius: inherit; }
.sa-mv__cap { margin-top: 10px; color: var(--muted); font-size: .86rem; }
.sa-mv picture { position: absolute; inset: 0; border-radius: inherit; }
.sa-mv__poster, .sa-mv__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sa-mv__poster { z-index: 1; }
.sa-mv.is-playing .sa-mv__poster, .sa-mv.is-started .sa-mv__poster { opacity: 0; }
.sa-motion .sa-mv__poster { transition: opacity 200ms linear; }
.sa-mv__toggle {
	position: absolute; z-index: 2; right: 14px; bottom: 14px; width: 40px; height: 40px; padding: 0;
	display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255, 255, 255, .88); color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s;
}
.sa-mv__toggle:hover { transform: scale(1.08); }
.sa-mv__toggle[hidden] { display: none; }
.sa-mv__toggle svg { width: 16px; height: 16px; fill: currentColor; }
/* Label and icon follow the play request (.is-on, set on 'play'), not the first frame (.is-playing only fades the poster) */
.sa-mv:not(.is-on) [data-when="playing"], .sa-mv:not(.is-on) .sa-mv__i-pause,
.sa-mv.is-on [data-when="paused"], .sa-mv.is-on .sa-mv__i-play { display: none; }
.sa-mv__buffer { position: absolute; z-index: 2; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; opacity: 0; pointer-events: none; }
.sa-mv.is-waiting .sa-mv__buffer { opacity: 1; }
.sa-motion .sa-mv.is-waiting .sa-mv__buffer rect { animation: sa-xm-wait 1.2s ease-in-out infinite var(--xd, 0ms); }
@keyframes sa-xm-wait { 50% { opacity: .3; } }

/* ---------- M9 Crossmark: centre pops, then the arms glide out from it, 50 ms apart ---------- */
.sa-crossmark { display: inline-block; width: 1em; height: 1em; color: var(--green); vertical-align: middle; }
.sa-crossmark svg { display: block; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
.sa-crossmark rect { transform-box: fill-box; transform-origin: center; }
.sa-crossmark [x="1"]:not([y="1"], [y="2"]) { --xd: 120ms; --xt: 0 100%; }
.sa-crossmark [x="2"] { --xd: 170ms; --xt: -100% 0; }
.sa-crossmark [y="2"] { --xd: 220ms; --xt: 0 -100%; }
.sa-crossmark [y="1"]:not([x="1"], [x="2"]) { --xd: 270ms; --xt: 100% 0; }
.sa-motion .sa-crossmark rect { transition: translate var(--dur-pop) var(--spring-pop) var(--xd, 0ms), scale var(--dur-pop) var(--spring-pop), opacity 150ms linear var(--xd, 0ms); }
.sa-mjs.sa-motion :is([data-sa-inview]:not(.is-in) .sa-crossmark, .sa-crossmark[data-sa-inview]:not(.is-in)) rect { opacity: 0; translate: var(--xt, 0 0); }
.sa-mjs.sa-motion :is([data-sa-inview]:not(.is-in) .sa-crossmark, .sa-crossmark[data-sa-inview]:not(.is-in)) [x="1"][y="1"] { opacity: 1; scale: 0; }

/* ---------- M2 Reveals (main.js adds .is-in): spring glide, stagger --i × 60 ms capped at 5 ---------- */
.sa-motion.sa-js .sa-reveal {
	--sa-rd: calc(min(var(--i, 0), 5) * 60ms);
	transition: translate 650ms var(--spring-glide) var(--sa-rd), opacity 400ms linear var(--sa-rd), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background-color .3s, scale 80ms;
}
.sa-motion.sa-js .sa-reveal:not(.is-in) { transform: none; translate: 0 18px; }

/* ---------- M3 Kinetic headings (words split by motion.js) ---------- */
.sa-motion [data-sa-kinetic] .sa-w {
	display: inline-block; max-width: 100%; translate: 0 .5em; opacity: 0;
	transition: translate var(--dur-glide) var(--spring-glide), opacity 400ms linear; transition-delay: calc(var(--w, 0) * 45ms);
}
.sa-motion [data-sa-kinetic].is-in .sa-w { translate: none; opacity: 1; }

/* ---------- M4 Slot counters: per-digit cells, the text never changes ---------- */
.sa-roll { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-roll__d { position: relative; display: inline-block; width: .62em; height: 1em; line-height: 1em; text-align: center; vertical-align: baseline; clip-path: inset(0); }
.sa-roll__p { visibility: hidden; }
.sa-roll__s { position: absolute; left: 0; right: 0; top: 0; white-space: pre; }
.sa-motion .sa-roll__s { transition: translate 900ms var(--spring-glide) calc(var(--k, 0) * 70ms); }
.sa-roll.is-in .sa-roll__s, .sa-calm .sa-roll__s { translate: 0 calc(var(--to, 0) * -1em); }

/* ---------- M6/M8 Ambient pause (off-screen or user paused) ---------- */
:is([data-sa-ambient], .sa-marquee).is-paused, :is([data-sa-ambient], .sa-marquee).is-paused *,
:is([data-sa-ambient], .sa-marquee).is-paused::before, :is([data-sa-ambient], .sa-marquee).is-paused::after,
:is([data-sa-ambient], .sa-marquee).is-paused *::before, :is([data-sa-ambient], .sa-marquee).is-paused *::after { animation-play-state: paused !important; }

/* ---------- M10 View transitions: 200 ms crossfade, header and bar stay still ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 200ms; animation-timing-function: var(--ease); }
	.sa-header { view-transition-name: sa-header; }
	.sa-mbar { view-transition-name: sa-mbar; }
}

/* ---------- M11 Micro-interactions ---------- */
@media (hover: hover) and (pointer: fine) {
	.sa-motion :is(.sa-btn--wa, .sa-float-wa):hover .sa-brand--whatsapp { animation: sa-wa-pop 380ms var(--spring-pop); }
}
@keyframes sa-wa-pop { 50% { scale: 1.12; } }
@media (hover: none), (pointer: coarse) {
	.sa-motion .sa-btn { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s, scale 80ms; }
	.sa-motion :is(.sa-btn, .sa-card, .sa-cat, .sa-product, .sa-why__item, .sa-branch--card):active { scale: .98; }
}

/* ---------- Calm (reduced motion): everything visible and static, posters shown ---------- */
.sa-calm :is(.sa-mv__poster, .sa-w, .sa-roll__s, .sa-crossmark rect) { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
	:is(.sa-reveal, .sa-w, .sa-crossmark rect) { translate: none !important; scale: none !important; opacity: 1 !important; }
	.sa-roll__s { translate: 0 calc(var(--to, 0) * -1em) !important; }
	:is(.sa-mv__poster, .sa-w, .sa-roll__s, .sa-crossmark rect) { transition: none !important; animation: none !important; }
	.sa-mv.is-waiting .sa-mv__buffer rect { animation: none; }
}