/* ═══════════════════════════════════════════════════════════════
   Step Into Wonder — 1:1 rebuild of Figma template #3
   Type   : Italiana (display) + Jost (UI)
   Motion : compositor-only (transform/opacity). No scroll hijack: the page
            scrolls natively, one sticky stage reads its own progress.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Italiana';
  src:url('../fonts/Italiana-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Jost';
  src:url('../fonts/Jost-latin-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --display:'Italiana', 'Didot', 'Bodoni MT', serif;
  --ui:'Jost', 'Futura', system-ui, sans-serif;

  /* sampled from the reference frames */
  --white:#fff;
  --lede:#e9e4e1;
  --dim:rgba(255,255,255,.62);
  --accent:#f0805c;

  --blush:#f3c6c5;
  --mint:#e2f3c6;
  --sky:#c8e8f6;
  --cream:#f4e9c6;
  --lilac:#cac5f4;

  --ink:#2a2530;

  --gut:5.8vw;              /* nav / page gutter */
  --p:0;                    /* portal scroll progress 0-1 */
  --q:0;                    /* reality scroll progress 0-1 */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#0b070d; color:var(--white);
  font-family:var(--ui); font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block; max-width:100%; height:auto}
ul{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
a{color:inherit; text-decoration:none}

.skip{position:absolute; left:-9999px; top:0; z-index:99}
.skip:focus{left:1rem; top:1rem; padding:.6rem 1rem; background:#fff; color:#000; border-radius:6px}

:where(a,button):focus-visible{
  outline:2px solid var(--white); outline-offset:4px; border-radius:4px;
}

/* ───────── nav ───────── */
.nav{position:fixed; inset:0 0 auto; z-index:40; padding:2.6vh var(--gut) 0}
.nav__inner{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  column-gap:clamp(1rem,4vw,4rem);
}
.nav__group{display:flex; justify-content:space-between; gap:clamp(1rem,3vw,3rem)}
.nav__group--end{justify-content:space-between}
.nav a{
  font-size:clamp(.72rem,1.02vw,1.16rem); font-weight:300;
  letter-spacing:.012em; color:var(--dim);
  transition:color .35s ease;
}
.nav a:hover,.nav a.is-active{color:var(--white)}
.nav__mark{display:grid; place-items:center; width:clamp(24px,2.44vw,44px)}
.nav__mark svg{
  width:100%; height:auto; fill:#f6e7dd;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  transition:rotate .8s cubic-bezier(.4,0,.2,1);
}
.nav__mark:hover svg{rotate:60deg}

/* ───────── shared display type ───────── */
.display{
  font-family:var(--display); font-weight:400;
  text-transform:uppercase;
  line-height:.95; letter-spacing:.008em;
  margin:0; text-wrap:balance;
  text-shadow:0 2px 34px rgba(20,6,26,.45);
}
.display__sm,.display__lg{display:block}
.display__sm{font-size:clamp(2.2rem,4.44vw,5.3rem); letter-spacing:.02em}
.display__lg{font-size:clamp(2.9rem,5.62vw,6.7rem); letter-spacing:.105em}
.chev{color:var(--accent); font-family:var(--ui); font-weight:300; padding:0 .12em; vertical-align:.06em}

/* the compass needle riding inside the letter O */
.nb{white-space:nowrap}          /* keeps BEY-o-ND from breaking across lines */
.needle-o{position:relative; display:inline-block}
.needle{
  position:absolute; left:50%; top:50%;
  width:.17em; height:.56em;
  transform:translate(-50%,-50%) rotate(18deg);
  fill:currentColor; opacity:.92; pointer-events:none;
}

/* ═══════════ one pinned camera ═══════════
   The whole story happens inside a single sticky stage, so the reader is never
   "lowered" into a next section - the arch grows past the camera and the sky
   behind it is already there. Phase variables come from main.js.
   --copy hero text · --dolly push through the arch · --fade arch dissolves
   --rise sky arrives · --head h2 · --cards the five cards            */
.cinema__track{height:400vh}
.cinema__stage{
  position:sticky; top:0; height:100svh; overflow:clip;
  display:grid; place-items:center;
  background:#0b070d;
}
.anchor{position:absolute; inset:0; pointer-events:none}

/* layer 0 — the other side of the arch */
.reality__scene{
  position:absolute; inset:0; z-index:0;
  opacity:var(--rise,0);
  transform:scale(calc(1.22 - var(--rise,0) * .22));
  transform-origin:51% 44%;
  will-change:transform,opacity;
}
/* layer 1 — the arch */
.portal__scene{
  position:absolute; inset:0; z-index:1;
  transform:scale(calc(1 + var(--dolly,0) * 3.4));
  transform-origin:51% 44%;
  opacity:calc(1 - var(--fade,0));
  will-change:transform,opacity;
}
.portal__scene img{width:100%; height:100%; object-fit:cover; object-position:50% 52%}
.portal__vignette{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  opacity:calc(1 - var(--fade,0));
  background:
    radial-gradient(78% 62% at 50% 46%, transparent 38%, rgba(8,4,12,.42) 100%),
    linear-gradient(180deg, rgba(8,4,12,.46) 0%, transparent 26%);
}
/* layer 2 — hero copy */
.portal__content{
  position:absolute; inset:0; z-index:3; width:100%; height:100%;
  opacity:var(--copy,1);
  transform:translateY(calc((1 - var(--copy,1)) * -4vh)) scale(calc(1 + (1 - var(--copy,1)) * .06));
  will-change:transform,opacity;
}

.portal__content .display{position:absolute; left:14.3vw; top:23.6vh}
.lede{
  position:absolute; left:18.1vw; top:44.4vh;
  margin:0; max-width:14vw;
  font-size:clamp(.94rem,1.19vw,1.38rem); line-height:1.4;
  font-weight:300; color:var(--lede);
  text-shadow:0 1px 18px rgba(20,6,26,.55);
}

/* ── hero reel ── */
.reel{position:absolute; right:0; top:31vh; width:min(37vw,640px)}
.reel__rail{
  display:flex; gap:1.6vw; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:0 0 0 .5vw; scrollbar-width:none; overscroll-behavior-x:contain;
}
.reel__rail::-webkit-scrollbar{display:none}
.tile{
  position:relative; flex:0 0 auto; scroll-snap-align:start;
  width:clamp(150px,13.8vw,270px); aspect-ratio:1/1.145;
  border-radius:clamp(16px,1.6vw,30px); overflow:hidden; isolation:isolate;
  background:rgba(255,255,255,.09);
  box-shadow:0 20px 50px -18px rgba(10,4,14,.7), inset 0 0 0 1px rgba(255,255,255,.22);
}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.tile::after{            /* legibility scrim, painted over the photo */
  content:''; position:absolute; inset:auto 0 0; height:66%; z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(8,4,12,.46) 46%,rgba(8,4,12,.88));
}
.tile__cta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:.65em;
  padding:0 1em 1.05em; text-align:left; line-height:1.16;
  font-size:clamp(.74rem,.92vw,1.05rem); font-weight:300; color:#f1f3f3;
  text-shadow:0 1px 10px rgba(10,4,14,.85);
}
.play{
  flex:0 0 auto; display:grid; place-items:center;
  width:2.55em; height:2.55em; border-radius:50%; background:#fff;
  transition:transform .3s cubic-bezier(.3,1.2,.5,1);
}
.play::after{
  content:''; border-style:solid; border-width:.42em 0 .42em .68em;
  border-color:transparent transparent transparent var(--accent);
  margin-left:.16em;
}
.tile__cta:hover .play{transform:scale(1.12)}
.tile__cta--stat b{font-family:var(--display); font-size:2.05em; font-weight:400; line-height:.8}

.reel__dots{display:flex; gap:.55vw; margin:1.3vh 0 0 .5vw}
.reel__dots button{
  width:clamp(16px,1.5vw,30px); height:3px; border-radius:2px;
  background:rgba(255,255,255,.42); transition:background .3s ease;
}
.reel__dots button[aria-selected="true"]{background:#fff}

/* ── enter badge ── */
.enter{
  position:absolute; left:50%; bottom:9.3vh; translate:-50% 0;
  display:grid; place-items:center;
  width:clamp(70px,5.1vw,104px); aspect-ratio:1;
}
.enter__ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:spin 22s linear infinite;
}
.enter__ring text{
  font-family:var(--ui); font-size:9.6px; font-weight:400;
  letter-spacing:.185em; fill:rgba(255,255,255,.85);
}
.enter__chevrons{
  display:grid; place-items:center; gap:.14em; overflow:hidden;
  width:44%; aspect-ratio:1; border-radius:50%;
  background:rgba(255,255,255,.94);
  font-size:clamp(70px,5.1vw,104px);
}
.enter__chevrons i{
  width:.1em; height:.1em;
  border-right:1.5px solid #2a2530; border-bottom:1.5px solid #2a2530;
  rotate:45deg; opacity:.8;
}
.enter__chevrons i:first-child{rotate:225deg}
.enter:hover .enter__chevrons{background:#fff}
@keyframes spin{to{rotate:360deg}}

/* ═══════════ 2. CREATE BEYOND REALITY (same pinned stage) ═══════════ */
.reality__scene img{width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.reality__scene::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,14,42,.62) 0%,rgba(28,14,42,.24) 26%,transparent 42%);
}
.reality__head{
  position:absolute; z-index:5; left:50%; top:17.4vh; translate:-50% 0;
  width:min(88vw,1180px); text-align:center;
  opacity:var(--head,0);
  transform:translateY(calc((1 - var(--head,0)) * 4vh));
  will-change:transform,opacity;
}
.display--h2{font-size:clamp(2.1rem,5.6vw,6.6rem); line-height:1; letter-spacing:.008em}
.reality__sub{
  margin:1.35em auto 0; max-width:46ch;
  font-size:clamp(.9rem,1.12vw,1.3rem); line-height:1.45; font-weight:300;
  color:#fdf9fe; text-shadow:0 1px 16px rgba(30,10,44,.5);
}

/* ── orbital wheel ── */
.wheel{
  position:absolute; inset:0; z-index:4; overflow:clip;
  opacity:var(--cards,0);
  transform:translateY(calc((1 - var(--cards,0)) * 5vh));
  will-change:transform,opacity;
}
.wheel__hub{
  --R:66vw;
  --cw:clamp(170px,15.2vw,290px);
  --ch:clamp(190px,17.4vw,330px);
  position:absolute; left:50%; top:74vh; width:0; height:0;
}
.pill{
  position:absolute; left:0; top:0;
  width:var(--cw); height:var(--ch);
  margin-left:calc(var(--cw) / -2); margin-top:calc(var(--ch) * -1);
  transform-origin:50% calc(var(--R) + var(--ch));
  transform:translateY(var(--dy,0px)) rotate(var(--ang,0deg));
  will-change:transform;
}
.pill__in{
  position:relative;
  width:100%; height:100%; padding:1.45em 1.25em 1.2em;
  display:flex; flex-direction:column;
  border-radius:clamp(18px,2vw,38px);
  background:var(--tint); color:var(--ink);
  transform:scale(var(--sc,1));
  box-shadow:0 26px 60px -24px rgba(48,22,60,.55);
}
.pill h3{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(1.15rem,1.72vw,2.15rem); line-height:1.14; letter-spacing:.004em;
}
.pill p{
  margin:.7em 0 0; max-width:16ch;
  font-size:clamp(.7rem,.82vw,.96rem); line-height:1.36;
  font-weight:300; color:#4b4553;
}
.pill__go{
  position:absolute; right:.9em; top:.9em;
  width:2.15em; height:2.15em; border-radius:50%;
  background:rgba(255,255,255,.42);
  display:grid; place-items:center;
}
.pill__go::after{
  content:''; width:.62em; height:.62em;
  border-top:1.4px solid rgba(60,50,70,.75); border-right:1.4px solid rgba(60,50,70,.75);
  rotate:45deg; margin:0 0 .1em -.1em;
}
/* the generated cloudscape already carries the marble plinth */
.wheel__plinth{display:none}

/* ───────── mobile ───────── */
@media (max-width:900px){
  :root{--gut:6vw}
  .nav{padding-top:2vh}
  .nav__group--start li:nth-child(3),.nav__group--end li:nth-child(1){display:none}

  /* the phone crop puts the bright opening right behind the copy */
  .portal__vignette{
    background:
      radial-gradient(92% 52% at 50% 30%, transparent 26%, rgba(8,4,12,.5) 100%),
      linear-gradient(180deg, rgba(8,4,12,.55) 0%, rgba(8,4,12,.1) 20%,
                      transparent 30%, rgba(8,4,12,.34) 56%, rgba(8,4,12,.7) 100%);
  }
  .portal__content .display{left:var(--gut); top:19vh}
  .lede{left:var(--gut); top:39vh; bottom:auto; max-width:26ch}
  .reel{right:0; top:auto; bottom:19vh; width:100%}
  .reel__rail{padding-left:var(--gut)}
  .reel__dots{margin-left:var(--gut)}
  .enter{bottom:4vh}

  .reality__head{top:10vh}

  /* the orbital wheel needs width it does not have on a phone:
     below 900px the same five cards become a snap rail instead. */
  .wheel{display:flex; align-items:flex-end; padding-bottom:12vh}
  .wheel__hub{
    position:static; display:flex; gap:4vw; width:100%; height:auto;
    padding:0 var(--gut); overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; overscroll-behavior-x:contain;
    --cw:min(62vw,280px); --ch:min(74vw,330px);
  }
  .wheel__hub::-webkit-scrollbar{display:none}
  .pill{
    position:static; flex:0 0 auto; scroll-snap-align:center;
    width:var(--cw); height:var(--ch); margin:0;
    transform:none !important;
  }
  .pill__in{transform:none !important}
}

@media (max-width:520px){
  .cinema__track{height:400vh}
  .display__sm{font-size:2.35rem}
  .display__lg{font-size:3.6rem}
}

/* ───────── reduced motion: no dolly, no spin, no wheel ───────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .portal__scene{transform:none; opacity:1}
  .portal__content{opacity:1; transform:none}
  .enter__ring{animation:none}
  .pill{transform:rotate(var(--ang-static,0deg))}
}

/* ═══════════════════════════════════════════════════════════════════════
   ADAPTARE flowmatic.ro — se adauga PESTE foaia sablonului de pe
   green.flowmatic.ro, care e mai sus, neatinsa, rand cu rand.

   Regula acestui fisier: nimic care schimba aspectul sablonului. Doar
   (1) piese pe care sablonul nu le avea, (2) corecturi impuse de faptul ca
   romana e mai lunga decat engleza. Fiecare abatere e explicata.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. Semnul din mijlocul barei. Sablonul avea o floare SVG de 44px; noi punem
      sigla reala Flowmatic, care e un logotip lat. Nu se recoloreaza, nu se
      taie, nu se modifica: se foloseste intreaga, doar la alta latime. */
.nav__mark{width:clamp(104px,10.4vw,168px)}
.nav__mark img{width:100%; height:auto; filter:drop-shadow(0 2px 10px rgba(0,0,0,.45))}

/* 2. Bara plutitoare se retrage cand intra subsolul in ecran. Sablonul n-avea
      subsol, deci n-avea problema asta: bara fixa ar sta peste sigla din
      subsol si s-ar citi doua Flowmatic unul peste altul. */
.nav{transition:opacity .35s ease, transform .35s ease}
.nav.nav--away{opacity:0; transform:translateY(-110%); pointer-events:none}

/* 3. Cartonasele si cardurile duc la paginile reale ale site-ului. Sablonul
      avea butoane fara destinatie. Legatura acopera tot cartonasul, sub text. */
.tile__link{position:absolute; inset:0; z-index:2; display:block}
.tile__cta{z-index:3; pointer-events:none}
.pill__in{text-decoration:none}

/* 4. Scara tipografica a sablonului ramane NEATINSA, inclusiv pe telefon.
      Romana e cu ~20% mai lunga decat engleza, deci s-a scurtat TEXTUL, nu
      s-au micsorat literele: „SITE-URI › CARE / VÂND" are aceeasi masa ca
      „Step › Into / WONDER", iar paragraful din erou sta in aceeasi coloana de
      14vw. Masurat pe pixelii randati: cu textul lung, primul rand de titlu
      ajungea la 671px si intra in arcada luminata (contrast 1.7:1, fata de
      3.8:1 cat masoara sablonul pe randul lui). Scurtat, revine in fasia
      intunecata din stanga. Vezi
      [[feedback_measure_contrast_on_rendered_pixels_and_check_overflow_vertically]]. */

/* 5. FONTURILE, completate pentru romana.

   (a) Fontul de interfata: sablonul aducea doar subsetul latin al lui Jost.
       Fara latin-ext, „si", „pozitii", „masoara" cadeau pe fontul de sistem,
       litera cu litera. Subsetul latin al sablonului ramane declarat mai sus;
       aici se adauga doar continuarea.

   (b) Fontul de TITLU: Italiana are doar subsetul latin si NU exista latin-ext
       pentru ea pe Google Fonts, deci n-avea Ă ă Ș ș Ț ț. Un titlu cu „ț" cadea
       pe fontul de sistem DOAR pentru acel semn. S-a construit un SUPLIMENT
       (`_work/italiana_ro.py`, 1,1 KB) cu cele sase litere: Ș ș Ț ț sunt litera
       de baza + VIRGULA fontului dedesubt (construcția corecta pentru romana,
       cu desenul lui Italiana), iar breve-ul de la Ă ă e singurul contur
       desenat, cu amprenta luata de la accentele pe care fontul le are deja
       (dieresis, macron). Fisierul original al sablonului rămâne referit si
       byte-identic; suplimentul intra doar pe cele sase semne, prin
       `unicode-range`. Garda `_work/glyphcheck.py` verifica acum ambele. */
@font-face{
  font-family:'Italiana';
  src:url('../fonts/Italiana-ro-supl.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0102-0103,U+0218-021B;
}
@font-face{
  font-family:'Jost';
  src:url('../fonts/Jost-latinext-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 6. Subsol. Piesa noua: pagina principala a unui site real trebuie sa duca mai
      departe la Privacy / Cookies / Termeni si la datele de contact. Culorile
      si fonturile sunt cele ale sablonului. */
.foot{
  position:relative; z-index:6;
  background:#0b070d; border-top:1px solid rgba(255,255,255,.09);
  padding:clamp(3rem,6vw,5.5rem) var(--gut) clamp(2rem,3vw,3rem);
}
.foot__in{max-width:1180px; margin:0 auto}
.foot__mark{display:block; width:160px; margin:0 0 1.3rem}
.foot__line{
  margin:0 0 clamp(2rem,4vw,3rem); max-width:46ch;
  font-size:clamp(.86rem,1vw,1.06rem); line-height:1.6; color:var(--dim);
}
.foot__cols{
  display:grid; gap:clamp(1.6rem,3vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.foot__h{
  margin:0 0 .9rem; font-family:var(--display); font-weight:400;
  font-size:1.16rem; letter-spacing:.06em; text-transform:uppercase; color:#fff;
}
.foot__cols li{margin:0 0 .55rem}
.foot__cols a,.foot__cols span{font-size:.94rem; color:var(--dim); transition:color .3s ease}
.foot__cols a:hover{color:#fff}
.foot__bar{
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between;
  margin-top:clamp(2.2rem,4vw,3.4rem); padding-top:1.4rem;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.84rem; color:rgba(255,255,255,.45);
}
.foot__bar ul{display:flex; gap:1.2rem}
.foot__bar a:hover{color:#fff}

/* 7. Trecerea din scena in subsol. Apare DOAR in ultima parte a derularii:
      altfel banda intunecata ar sta peste marginea de jos a cardurilor tot
      timpul cat sunt pe ecran si le-ar stinge. */
.cinema__stage::after{
  content:''; position:absolute; inset:auto 0 0; height:16vh; z-index:7;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(11,7,13,.72) 62%,#0b070d);
  opacity:clamp(0, calc((var(--p,0) - .955) * 22), 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   8. ROATA DE SERVICII (cerut de Alex: „cand ajung la acele cartonase vreau
      acolo sa am toate servicile. dau click pe cartonas si ma baga pe pagina
      serviciului. in cartonas sa fie o poza reprezentativa a serviciului un
      titlu si o scurta descriere" + „sa pot da scroll pana trece fiecare
      cartonas de 2 ori si dupa sa cobor pe footer").

      Scena e mai lunga ca sa incapa doua treceri complete. Ferestrele de faza
      din scriptul paginii sunt recalculate ca eroul sa pastreze exact aceeasi
      distanta de derulare ca in sablon: doar roata primeste timpul in plus.
      ═══════════════════════════════════════════════════════════════════════ */
.cinema__track{height:860vh}

/* cardul: poza sus, pe toata latimea, apoi titlu si descriere. Forma, colturile,
   umbra, culorile pastel si rotirea ramin ale sablonului. */
.pill__in{padding:0; overflow:hidden; text-decoration:none}
.pill__shot{
  position:relative; width:100%; overflow:hidden;
  background:rgba(0,0,0,.06);
  /* poza ia spatiul ramas dupa text: cardurile au toate aceeasi inaltime, iar
     un titlu care se rupe pe doua randuri nu mai lasa un gol pastel jos si nu
     mai iese din card. */
  flex:1 1 auto; min-height:0;
}
.pill__shot img{width:100%; height:100%; object-fit:cover; display:block}
.pill__txt{padding:.9em 1.05em 1.05em; min-width:0; flex:0 0 auto}
.pill h3{
  font-size:clamp(1rem,1.42vw,1.72rem); line-height:1.12;
  padding-right:0;                       /* sageata sta acum peste poza */
}
.pill p{
  margin:.5em 0 0; max-width:none;
  font-size:clamp(.67rem,.78vw,.92rem); line-height:1.38;
}
/* sageata: peste poza, in colt, ca sa se vada ca cardul e o legatura */
.pill__go{
  top:.75em; right:.75em;
  background:rgba(255,255,255,.86);
  box-shadow:0 2px 10px rgba(20,10,26,.25);
}
.pill__in:hover .pill__go{background:#fff}
/* cardul are nevoie de mai multa inaltime decat in sablon, fiindca are si poza.
   Maximul e ales ca marginea de sus a cardurilor sa NU urce peste titlul 2. */
.wheel__hub{--ch:clamp(262px,21.6vw,348px)}

@media (max-width:900px){
  /* pe telefon roata e deja banda cu fixare (regula sablonului). Al doilea set
     de carduri n-are rost intr-o banda pe care o tragi cu degetul: se ascunde,
     ca sa rulezi cele 7 servicii o singura data. */
  .pill--dup{display:none}
  .wheel__hub{--cw:min(66vw,290px); --ch:min(80vw,354px)}
}

/* 9. Fara animatie: un evantai static de 14 carduri ar fi ilizibil, deci roata
      devine banda cu fixare, exact ca pe telefon, iar dublura se ascunde. */
@media (prefers-reduced-motion:reduce){
  .wheel{display:flex; align-items:flex-end; padding-bottom:12vh; opacity:1; transform:none}
  .wheel__hub{
    position:static; display:flex; gap:4vw; width:100%; height:auto;
    padding:0 var(--gut); overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; overscroll-behavior-x:contain;
    --cw:min(62vw,290px); --ch:min(74vw,354px);
  }
  .wheel__hub::-webkit-scrollbar{display:none}
  .pill{
    position:static; flex:0 0 auto; scroll-snap-align:center;
    width:var(--cw); height:var(--ch); margin:0; transform:none !important;
  }
  .pill--dup{display:none}
  .cinema__track{height:240vh}
}