/* ==========================================================================
   SERVITO - sito-extra.css (dal 14 agosto 2026)
   Appendice viva della landing: ogni treno del sito scrive qui, cosi'
   index.html resta fermo e viaggia una volta sola. Caricato DOPO gli
   stili inline: in cascata vince l'ultimo. Tutto il moto e' recintato
   da prefers-reduced-motion e dal gate html.jsok gia' in uso: senza
   JavaScript o con moto ridotto, il sito e' identico a ieri.
   ========================================================================== */

/* ── 1 · IL SIPARIO ──────────────────────────────────────────────────────
   L'apertura da film: le righe del titolo salgono con una piccola
   rotazione che si raddrizza, il sottotitolo e le CTA seguono in coda.
   Gira UNA volta, al primo dipinto: non e' legato allo scroll. */
@media (prefers-reduced-motion: no-preference){
  html.jsok #h1 .l{
    display:inline-block;
    opacity:0;transform:translateY(.55em) rotate(1.1deg);filter:blur(7px);
    animation:sipario .95s cubic-bezier(.16,1,.3,1) both;
  }
  html.jsok #h1 .l:nth-child(2){animation-delay:.14s}
  html.jsok .hsub{opacity:0;animation:sipario-vel .8s ease .34s both}
  html.jsok .cta-row{opacity:0;animation:sipario-vel .8s ease .48s both}
  html.jsok .chips{opacity:0;animation:sipario-vel .8s ease .6s both}
}
@keyframes sipario{
  from{opacity:0;transform:translateY(.55em) rotate(1.1deg);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
@keyframes sipario-vel{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── 2 · LA PROFONDITA' ────────────────────────────────────────────────
   Gli screenshot prendono corpo: il tilt lo guida sito-extra.js sui
   puntatori veri (mai al tocco), qui vivono prospettiva e riflesso.
   La parallasse verticale usa la variabile --par scritta dal motore. */
.sshot, .holo-frame{perspective:900px}
.sshot img, .holo-screen{
  transform-style:preserve-3d;
  will-change:transform;
  transition:box-shadow .35s ease;
}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .sshot img.tilting, .holo-screen.tilting{transition:none}
  .sshot img:hover{box-shadow:0 26px 60px -18px rgba(0,0,0,.65), 0 0 0 1px rgba(196,149,90,.25)}
}
@media (prefers-reduced-motion: no-preference){
  .par-y{transform:translateY(calc(var(--par, 0) * 1px))}
}

/* ── 3 · LA SCENA INCHIODATA (#come, solo schermi larghi) ─────────────
   Il telaio lo monta sito-extra.js a runtime: la sezione si blocca,
   i tre passi si avvicendano guidati dallo scroll. Su mobile e con
   moto ridotto il telaio NON viene montato: resta l'impaginazione
   di sempre. Qui solo i costumi. */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  .scrub-zone{position:relative}
  .scrub-zone .steps{
    position:sticky;top:max(72px, calc(50vh - 290px));
    display:grid;grid-template-columns:1fr;grid-template-rows:1fr;
    min-height:580px;align-items:stretch;
  }
  .scrub-zone .step{
    grid-area:1/1;margin:0;
    opacity:0;transform:translateY(34px) scale(.965);filter:blur(5px);
    transition:opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1), filter .45s ease;
    pointer-events:none;
  }
  .scrub-zone .step.viva{
    opacity:1;transform:none;filter:blur(0);pointer-events:auto;
  }
  .scrub-zone .step.passata{
    opacity:0;transform:translateY(-26px) scale(.975);filter:blur(4px);
  }
  /* Il binario dei tre tempi: tre tacche, quella viva e' d'oro. */
  .scrub-dots{
    position:sticky;top:calc(50vh + 310px);
    display:flex;gap:10px;justify-content:center;padding:18px 0 0;
  }
  .scrub-dots i{
    width:26px;height:4px;border-radius:4px;background:#332c22;
    transition:background .35s ease, width .35s ease;
  }
  .scrub-dots i.on{background:#C4955A;width:44px}
}

/* ── 4 · IL VOLO DEL GIOCATTOLO ──────────────────────────────────────────
   Nella demo, la comanda VOLA in cucina come nell'app vera. Il moto e'
   WAAPI dentro sito-extra.js; qui il fantasma, l'attesa del biglietto
   e la scintilla d'arrivo. */
.toy-ghost{
  position:fixed;z-index:60;pointer-events:none;
  background:linear-gradient(160deg,#241c12,#191410);
  border:1px solid #C4955A;border-radius:12px;
  color:#EDE4D0;font-size:12px;font-weight:700;letter-spacing:.4px;
  padding:8px 14px;box-shadow:0 10px 30px -8px rgba(0,0,0,.7), 0 0 18px rgba(196,149,90,.35);
  white-space:nowrap;
}
.tkt.tk-attesa{opacity:0;transform:translateY(10px) scale(.96)}
.tkt.tk-arrivo{
  animation:tk-posa .5s cubic-bezier(.2,1.25,.4,1) both;
}
@keyframes tk-posa{
  0%{opacity:0;transform:translateY(10px) scale(.9)}
  60%{opacity:1;transform:translateY(-3px) scale(1.03)}
  100%{opacity:1;transform:none}
}
.toy-stella{
  position:fixed;z-index:61;pointer-events:none;width:22px;height:22px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(238,199,138,.95), rgba(196,149,90,0) 70%);
}

/* ── 5 · LA CTA MAGNETICA E LA LAMA DI LUCE ─────────────────────────
   Il bottone d'oro respira: una lama di luce lo attraversa a intervalli
   lunghi (mai frenetica), e sui puntatori veri il bottone si lascia
   attrarre di qualche pixel (sito-extra.js). */
.btn-oro{position:relative;overflow:hidden}
@media (prefers-reduced-motion: no-preference){
  .btn-oro::after{
    content:'';position:absolute;top:-40%;bottom:-40%;left:-30%;width:34%;
    background:linear-gradient(105deg, transparent, rgba(255,244,214,.5), transparent);
    transform:skewX(-18deg) translateX(-140%);
    animation:lama 6.5s ease-in-out 2.2s infinite;
    pointer-events:none;
  }
}
@keyframes lama{
  0%,74%{transform:skewX(-18deg) translateX(-140%)}
  86%{transform:skewX(-18deg) translateX(480%)}
  100%{transform:skewX(-18deg) translateX(480%)}
}
@media (hover:hover){
  .btn-oro.magnete{transition:transform .25s cubic-bezier(.2,.9,.3,1)}
}


/* ══════════════════════════════════════════════════════════════════════
   LA BARRA DEL POLLICE (15 ago 2026): prezzo e demo sempre a portata.
   Solo mobile. Compare superato l'eroe, si ritira sul finale (li' la
   CTA grande esiste gia'). Il bottone riusa .top-cta solid del sito.
   ══════════════════════════════════════════════════════════════════════ */
.cta-pollice{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(12,9,5,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--bordo);
  transform:translateY(110%);transition:transform .3s ease}
.cta-pollice.viva{transform:none}
.cta-pollice .cp-prezzo{line-height:1.2;min-width:0}
.cta-pollice .cp-prezzo b{display:block;font-size:16px;color:var(--oro-l);letter-spacing:.2px}
.cta-pollice .cp-prezzo span{display:block;font-size:11px;color:var(--dim)}
.cta-pollice .top-cta.solid{flex:0 0 auto;font-size:11.5px;padding:12px 18px}
@media (max-width:760px){.cta-pollice{display:flex}}
@media (prefers-reduced-motion: reduce){.cta-pollice{transition:none}}