/* Apteka Sharm v2 sections (CREATIVE-DIRECTION §7.4-7.6), after motion.css. Motion only under .sa-motion; hidden start
   states only under .sa-js.sa-motion (main.js) or .sa-mjs.sa-motion (motion.js): without them = static final state. */

/* ---------- Hero v2 ---------- */
.sa-in-t{display:block}
.sa-motion .sa-in-t{animation:sa-in-t .5s var(--ease-out) both}
@keyframes sa-in-t{from{translate:0 6px}to{translate:0 0}}
/* Interior heroes (SEO audit F26): the H1 and the hero image are LCP candidates, so they slide in without the fade */
.sa-phero__title.sa-in,.sa-phero__media.sa-in{animation-name:sa-in-t}
/* clip, not hidden: no scroll container, so the stage view() timeline is the page */
.sa-hero--stage{overflow:hidden;overflow:clip}
.sa-hero--stage .sa-hero__grid{gap:0}
.sa-hero__stage{position:relative;width:100%;max-width:520px;margin:28px auto 0}
.sa-hero__stage>.sa-mv,.sa-hero__stage>.sa-hero__still{border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
.sa-hero__still{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--mint-100)}
.sa-hero__still img{width:100%;height:100%;object-fit:cover}
/* <980: rating badge under the film (chat card and products fill its bottom corners) */
.sa-hero__stage .sa-hero__badge--rating{position:relative;left:auto;bottom:auto;width:fit-content;margin:16px auto 0}
.sa-hero__stage .sa-hero__badge--lang{right:-10px;top:-20px}
.sa-hero--column .sa-hero__frame{aspect-ratio:4/5}
.sa-hero__frame>.sa-mv,.sa-hero__frame>.sa-hero__still{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
@media (min-width:980px){
	.sa-hero--stage .sa-hero__grid{grid-template-columns:1fr;justify-items:center;text-align:center}
	.sa-hero--stage .sa-hero__copy{max-width:960px}
	.sa-hero--stage .sa-hero__lead{margin-inline:auto}
	.sa-hero--stage :is(.sa-hero__ctas,.sa-hero__ticks,.sa-hero__ticks li){justify-content:center}
	.sa-hero__stage{max-width:none;width:min(100%,1120px);margin-top:40px;text-align:left}
	.sa-hero__stage>.sa-hero__still{aspect-ratio:16/9}
	.sa-hero__stage .sa-hero__badge--rating{position:absolute;margin:0;left:-20px;bottom:-22px}
	.sa-hero__stage .sa-hero__badge--lang{right:-20px;top:-22px}
	.sa-hero--column .sa-hero__frame{aspect-ratio:5/5.4}
}

/* ---------- Stats: slot rolls, static 1:00 AM + clock hand ---------- */
.sa-stat__v{font-variant-numeric:tabular-nums}
.sa-roll{display:inline-block;width:calc(var(--len,1)*.62em);text-align:center}
.sa-clock{display:inline-block;width:.78em;height:.78em;margin-right:.2em;vertical-align:-.04em}
.sa-clock svg{display:block;width:100%;height:100%}
.sa-clock__h{transform-box:view-box;transform-origin:50% 50%}
.sa-motion .sa-clock__h{transition:rotate .6s var(--spring-glide)}
.sa-mjs.sa-motion .sa-clock:not(.is-in) .sa-clock__h{rotate:-30deg}

/* ---------- Delivery story ---------- */
.sa-story{margin-bottom:clamp(36px,5vw,56px)}
.sa-story__steps{list-style:none;margin:0;padding:0}
.sa-story__step{display:flex;gap:14px;align-items:flex-start;padding:20px 22px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);transition:border-color .3s}
.sa-story__step p{margin:0;font-size:.98rem}
.sa-story__n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--green-900);font:900 .95rem/1 var(--font-body);transition:scale .3s var(--spring-glide)}
.sa-story__step.is-active{border-color:var(--green)}
.sa-story__step.is-active .sa-story__n{scale:1.08}
.sa-story .sa-mv{border-radius:var(--r-lg);box-shadow:var(--shadow)}
@media (max-width:979px){
	.sa-story__media{max-width:520px;margin:0 auto 18px}
	.sa-story__progress{display:flex;gap:6px;max-width:520px;margin:0 auto 14px}
	.sa-story__progress span{position:relative;flex:1;height:4px;border-radius:4px;background:var(--mint-200);overflow:hidden}
	.sa-story__progress span::after{content:"";position:absolute;inset:0;background:var(--green);transform-origin:0 50%;scale:clamp(0,calc(var(--sa-progress,0)*3 - var(--k) + 1),1) 1;transition:scale .3s var(--ease)}
	.sa-story__steps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:0 calc(var(--gutter)*-1);padding:4px var(--gutter) 10px;scroll-padding-inline:var(--gutter)}
	.sa-story__steps::-webkit-scrollbar{display:none}
	.sa-story__step{flex:0 0 max(82vw,calc(100vw - var(--gutter)*2 - 64px));scroll-snap-align:start}
}
@supports (timeline-scope:--a){
	@media (max-width:979px){
		.sa-motion .sa-story{timeline-scope:--steps}
		.sa-motion .sa-story__steps{scroll-timeline:--steps x}
		.sa-motion .sa-story__progress span+span::after{transition:none;animation:sa-seg linear both;animation-timeline:--steps;animation-range:calc((var(--k) - 1)*33.333% + 5%) calc(var(--k)*33.333%)}
	}
}
@keyframes sa-seg{from{scale:0 1}to{scale:1 1}}
@media (min-width:980px){
	.sa-story{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr);gap:56px;align-items:start}
	.sa-story__media{position:sticky;top:calc(var(--header-h) + 24px)}
	.sa-story__progress{display:none}
	.sa-story__steps{display:grid;gap:clamp(18px,6vh,64px);padding-block:6vh 10vh}
	.sa-story--text{display:block}
	.sa-story--text .sa-story__steps{grid-template-columns:repeat(4,1fr);padding:0}
	.sa-story--text .sa-story__step.is-active{border-color:var(--line)}
	.sa-story--text .is-active .sa-story__n{scale:none}
}
@supports (animation-timeline:view()){
	@media (min-width:980px){
		.sa-motion .sa-story:not(.sa-story--text) .sa-story__step{view-timeline:--sa-step;animation:sa-step linear both;animation-timeline:--sa-step;animation-range:cover 41% cover 59%}
		.sa-motion .sa-story:not(.sa-story--text) .sa-story__n{animation:sa-step-n linear both;animation-timeline:--sa-step;animation-range:cover 41% cover 59%}
		.sa-motion .sa-hero__stage{animation:sa-stage linear both;animation-timeline:view();animation-range:exit 0% exit 70%}
	}
}
@keyframes sa-step{0%,100%{border-color:var(--line)}25%,75%{border-color:var(--green)}}
@keyframes sa-step-n{0%,100%{scale:1}25%,75%{scale:1.08}}
@keyframes sa-stage{to{scale:.965}}

/* ---------- Map band ---------- */
.sa-map{margin:0}
.sa-map__plate{position:relative;aspect-ratio:4/3}
.sa-map__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);background:var(--mint-100);box-shadow:var(--shadow)}
.sa-map__pin{position:absolute;z-index:1;left:var(--xs);top:var(--ys);display:flex;flex-direction:column;align-items:center;gap:6px;transform:translate(-50%,-22px);color:var(--ink);text-decoration:none}
@media (min-width:760px){.sa-map__plate{aspect-ratio:5/2}.sa-map__pin{left:var(--x);top:var(--y)}}
.sa-map__disc{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--line);box-shadow:var(--shadow)}
.sa-map__disc::before{content:"";position:absolute;inset:-6px;border:4px solid var(--lime);border-radius:50%;opacity:0;pointer-events:none}
.sa-map__x{width:20px;height:20px}
.sa-map__label{padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font:700 .8rem/1.2 var(--font-body);white-space:nowrap}
.sa-map__pin:hover .sa-map__label{color:var(--green);border-color:var(--green)}
.sa-map__cap{margin-top:10px;color:var(--muted);font-size:.86rem}
.sa-map__more{margin:4px 0 clamp(28px,4vw,44px)}
.sa-map__more a{font-weight:700;color:var(--green-700)}
.sa-motion .sa-map__pin{transition:translate .52s var(--spring-pop) calc(var(--i,0)*80ms),opacity .2s linear calc(var(--i,0)*80ms)}
.sa-mjs.sa-motion .sa-map:not(.is-in) .sa-map__pin{opacity:0;translate:0 -24px}
.sa-mjs.sa-motion .sa-map:not(.is-in) .sa-map__pin:focus-visible{opacity:1;translate:0 0}
.sa-motion .sa-map.is-in .sa-map__disc::before{animation:sa-halo 4s var(--ease-out) calc(.52s + var(--i,0)*80ms) 3}
@keyframes sa-halo{0%{scale:.6;opacity:.5}35%,100%{scale:1.8;opacity:0}}

/* ---------- Ask mini: 6 s cycle, 2.9 runs = 3 plays ending complete ---------- */
.sa-ask{display:block;width:100%;max-width:280px;height:auto;margin:2px 0 12px;color:var(--green-800);overflow:visible}
.sa-ask__dot,.sa-ask__pin{transform-box:fill-box;transform-origin:50% 50%}
.sa-mjs.sa-motion .sa-ask__dot{animation:sa-ask-dot 6s linear 2.9 both paused}
.sa-mjs.sa-motion .sa-ask__path{animation:sa-ask-path 6s linear 2.9 both paused}
.sa-mjs.sa-motion .sa-ask__pin{animation:sa-ask-pin 6s linear 2.9 both paused}
.sa-mjs.sa-motion .sa-ask.is-in *{animation-play-state:running}
@keyframes sa-ask-dot{0%{scale:0;animation-timing-function:var(--spring-pop)}5%,90%{scale:1;opacity:1}100%{scale:1;opacity:0}}
@keyframes sa-ask-path{0%,5%{clip-path:inset(-9px 100% -9px -9px);animation-timing-function:var(--ease)}20%,90%{clip-path:inset(-9px);opacity:1}100%{clip-path:inset(-9px);opacity:0}}
@keyframes sa-ask-pin{0%,20%{scale:.4;opacity:0;translate:0 -12px;animation-timing-function:var(--spring-pop)}25%,90%{scale:1;opacity:1;translate:0 0}100%{scale:1;opacity:0;translate:0 0}}

/* ---------- Fair prices ---------- */
mark.sa-hl{color:inherit;background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 88%/100% 38%;padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sa-mjs.sa-motion .sa-hl{background-size:0% 38%;transition:background-size .7s var(--ease-out)}
.sa-mjs.sa-motion .is-in>.sa-hl{background-size:100% 38%}
@supports (animation-timeline:view()){
	.sa-fair__title{view-timeline:--sa-hl}
	.sa-motion .sa-hl{transition:none;animation:sa-hl linear both;animation-timeline:--sa-hl;animation-range:entry 40% cover 45%}
}
@keyframes sa-hl{from{background-size:0% 38%}to{background-size:100% 38%}}
.sa-fair__means{margin:16px 0 0;background:#fff;border:1px solid var(--mint-300);text-transform:none;letter-spacing:0;font-size:.92rem}
.sa-motion .sa-fair__means{transition:scale .52s var(--spring-pop) 1s,opacity .2s linear 1s}
.sa-mjs.sa-motion .sa-fair__means:not(.is-in){scale:.6;opacity:0}
/* chip on the sweep timeline, just after it ends */
@supports (animation-timeline:view()) and (timeline-scope:--a){
	.sa-fair__intro{timeline-scope:--sa-hl}
	.sa-motion .sa-fair__means{transition:none;animation:sa-chip var(--spring-pop) both;animation-timeline:--sa-hl;animation-range:cover 47% cover 54%}
}
@keyframes sa-chip{from{scale:.6;opacity:0}to{scale:1;opacity:1}}
.sa-mv--fair .sa-mv__box,.sa-mv--fair:not(.sa-mv--cap){border-radius:var(--r-lg);box-shadow:var(--shadow)}
.sa-mv--wide{max-width:960px;margin-inline:auto}
@media (max-width:759px){.sa-mv--fair{max-width:520px}}

/* ---------- Categories ---------- */
.sa-js.sa-motion .sa-cat.sa-reveal .sa-cat__media img{scale:1.06;transition:scale .9s var(--spring-glide),transform .8s var(--ease-out)}
.sa-js.sa-motion .sa-cat.sa-reveal.is-in .sa-cat__media img{scale:1}

/* ---------- Reviews ---------- */
.sa-js.sa-motion .sa-rating.sa-reveal .sa-stars{clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease-out) .25s}
.sa-js.sa-motion .sa-rating.is-in .sa-stars{clip-path:inset(0)}
/* the button needs motion.js M8 */
.sa-marquee__bar{display:none;justify-content:flex-end;margin-top:clamp(24px,4vw,40px)}
@media (prefers-reduced-motion:no-preference){
	.sa-mjs.sa-motion .sa-marquee__bar{display:flex}
	.sa-mjs.sa-motion .sa-marquee__bar+.sa-marquee{margin-top:12px}
}
.sa-marquee__toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink);font:700 .86rem/1.2 var(--font-body);cursor:pointer}
.sa-marquee__toggle[aria-pressed=true]{background:var(--green);border-color:var(--green);color:#fff}
.sa-marquee__icon{width:10px;height:11px;border-inline:3px solid currentColor}
[aria-pressed=true]>.sa-marquee__icon{border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.sa-marquee:focus-within .sa-marquee__track{animation-play-state:paused}
.sa-calm .sa-marquee{overflow-x:auto}
.sa-calm .sa-marquee__track{animation:none}

/* ---------- CTA band ---------- */
.sa-cta__inner::before{content:none}
.sa-cta__inner>.sa-cta__drift{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.sa-cta__drift::before{content:"";position:absolute;inset:0 0 0 -44px;background-image:var(--cross);opacity:.12}
.sa-motion .sa-cta__drift::before{animation:sa-drift 40s linear infinite}
@keyframes sa-drift{to{transform:translateX(44px)}}
.sa-cta__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sa-cta__chip{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);color:#fff;font:700 .86rem/1.2 var(--font-body)}
.sa-motion .sa-cta__chips.is-in .sa-cta__chip{animation:sa-sway 2.4s ease-in-out 3}
.sa-motion .sa-cta__chips.is-in .sa-cta__chip+.sa-cta__chip{animation-delay:.15s;animation-direction:reverse}
@keyframes sa-sway{25%{rotate:-3deg}75%{rotate:3deg}}

/* ---------- Follow: teaser phone, 960 px and up ---------- */
.sa-follow__phone{display:none}
@media (min-width:960px){
	.sa-follow__inner.has-teaser{grid-template-columns:1fr 300px;gap:24px clamp(40px,6vw,96px)}
	.has-teaser>.sa-follow__copy{grid-area:1/1;align-self:end}
	.has-teaser>.sa-social{grid-area:2/1;align-self:start}
	.sa-follow__phone{display:block;grid-area:1/2/3/3;width:300px;padding:10px;border-radius:36px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-lg)}
	.sa-follow__phone .sa-mv{border-radius:27px}
}

/* ---------- Inner pages ---------- */
.sa-pband{padding-top:clamp(28px,4vw,48px)}
.sa-pband .sa-story{margin-bottom:0}
/* hotel delivery: story in the article (page.php) */
.sa-pstory{margin:0 0 1.6em}
.sa-pstory .sa-story{margin-bottom:0}
.sa-phero__photo>.sa-mv{border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.sa-plinth>.sa-mv{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
	.sa-hl{background-size:100% 38%!important}
	:is(.sa-map__pin,.sa-fair__means,.sa-clock__h,.sa-cat__media img,.sa-stars,.sa-hero__stage){translate:none!important;scale:none!important;rotate:none!important;opacity:1!important;clip-path:none!important}
}