/* =========================================================
   RIFT · livello motion
   Tutto ciò che si muove qui ha un compito: indicare dove sei,
   rispondere a quello che fai, o farti giocare con il suono.
   ========================================================= */

/* ---------- navigazione: la testina salta tra le voci ---------- */
nav.main{position:relative}
nav.main a::after{display:none}
.hop{position:absolute;left:0;bottom:9px;height:2px;width:0;background:var(--accent);pointer-events:none;opacity:0;transition:opacity .25s}
.hop.on{opacity:1}
.hop::before{content:"";position:absolute;left:50%;top:-5px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .3s var(--ease)}
.hop.air::before{transform:scale(1)}

/* ---------- menu mobile: le voci entrano una dopo l'altra ---------- */
.sheet nav a{overflow:hidden}
.sheet nav a > span{display:inline-block;transform:translateY(105%);transition:transform .7s var(--ease)}
.menu-open .sheet nav a > span{transform:none}
.menu-open .sheet nav a:nth-child(1) > span{transition-delay:.08s}
.menu-open .sheet nav a:nth-child(2) > span{transition-delay:.13s}
.menu-open .sheet nav a:nth-child(3) > span{transition-delay:.18s}
.menu-open .sheet nav a:nth-child(4) > span{transition-delay:.23s}
.menu-open .sheet nav a:nth-child(5) > span{transition-delay:.28s}

/* ---------- avanzamento: il taglio rosso sotto l'header ---------- */
.scrub{position:fixed;left:0;right:0;top:0;height:2px;z-index:45;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}

/* ---------- timeline laterale: la pagina come una sessione ---------- */
.timeline{position:fixed;right:clamp(14px,1.6vw,28px);top:50%;transform:translateY(-50%);z-index:30;height:min(56vh,520px);width:20px;display:none}
@media (min-width:1360px) and (hover:hover){.timeline{display:block}}
.timeline .track{position:absolute;right:9px;top:0;bottom:0;width:1px;background:var(--line-2)}
.timeline .mark{position:absolute;right:0;width:20px;height:20px;margin-top:-10px;border:0;background:none;cursor:pointer;padding:0}
.timeline .mark::before{content:"";position:absolute;right:5px;top:9px;width:9px;height:1px;background:var(--muted);transition:width .3s var(--ease),background .3s}
.timeline .mark:hover::before,.timeline .mark.past::before{background:var(--fg)}
.timeline .mark:hover::before{width:14px}
.timeline .mark span{position:absolute;right:26px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font:500 .66rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);background:var(--bg);padding:.35rem .5rem;border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.timeline:hover .mark span{opacity:.55;transform:translate(0,-50%)}
.timeline .mark:hover span,.timeline .mark:focus-visible span{opacity:1}
.timeline .head{position:absolute;right:0;width:20px;height:0;pointer-events:none;transform:translateY(var(--y,0))}
.timeline .head::before{content:"";position:absolute;right:2px;top:-1px;width:16px;height:2px;background:var(--accent)}
.timeline .head b{position:absolute;right:24px;top:-8px;font:500 .64rem/1 var(--font-mono);letter-spacing:.06em;color:var(--accent-text);background:var(--bg);padding:.25rem .35rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- barra comandi (⌘K) ---------- */
.cmd-btn{display:inline-flex;align-items:center;gap:.5rem;height:38px;padding:0 .7rem;border:1px solid var(--line);background:none;cursor:pointer;font:500 .7rem/1 var(--font-mono);letter-spacing:.08em;color:var(--muted);transition:border-color .2s,color .2s}
.cmd-btn:hover{border-color:var(--muted);color:var(--fg)}
.cmd-btn .ico{width:15px;height:15px}
.cmd-btn kbd{font:inherit;border:1px solid var(--line-2);padding:.18rem .3rem}
@media (max-width:1060px){.cmd-btn kbd{display:none}}
dialog.cmd{width:min(640px,calc(100% - 24px));max-height:min(72vh,620px);margin:12vh auto auto;padding:0;border:1px solid var(--line-2);background:var(--bg);color:var(--fg);overflow:hidden;display:none;flex-direction:column}
dialog.cmd[open]{display:flex;animation:cmd-in .38s var(--ease)}
dialog.cmd::backdrop{background:rgba(5,5,7,.78);backdrop-filter:blur(3px)}
@keyframes cmd-in{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
.cmd-top{display:flex;align-items:center;gap:.8rem;padding:0 1rem;border-bottom:1px solid var(--line);position:relative}
.cmd-top::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:var(--w,0%);background:var(--accent);transition:width .35s var(--ease)}
.cmd-top .ico{width:18px;height:18px;color:var(--muted);flex:none}
.cmd-top input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--fg);font:500 1.1rem/1 var(--font-body);padding:1.15rem 0;caret-color:var(--accent)}
.cmd-top input::placeholder{color:#7d7a83}
.cmd-top kbd{font:500 .66rem/1 var(--font-mono);color:var(--muted);border:1px solid var(--line-2);padding:.3rem .4rem}
.cmd-list{overflow:auto;padding:.4rem 0 .8rem;flex:1}
.cmd-group{font:500 .64rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:1rem 1rem .5rem}
.cmd-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:.8rem;align-items:center;padding:.7rem 1rem;cursor:pointer;text-decoration:none;color:var(--fg);position:relative}
.cmd-item .ico{width:15px;height:15px;color:var(--muted)}
.cmd-item small{font:400 .72rem/1 var(--font-mono);color:var(--muted)}
.cmd-item[aria-selected="true"]{background:var(--bg-3)}
.cmd-item[aria-selected="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.cmd-item[aria-selected="true"] .ico{color:var(--accent)}
.cmd-item mark{background:none;color:var(--accent-text)}
.cmd-empty{padding:2rem 1rem;color:var(--muted);font:400 .85rem/1.5 var(--font-mono)}
.cmd-foot{display:flex;gap:1.2rem;padding:.7rem 1rem;border-top:1px solid var(--line);font:400 .66rem/1 var(--font-mono);color:var(--muted);letter-spacing:.06em}
.cmd-foot kbd{font:inherit;border:1px solid var(--line-2);padding:.15rem .3rem;margin-right:.3rem}

/* ---------- copertine olografiche: si inclinano e riflettono ---------- */
@media (hover:hover){
  .holo{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease);will-change:transform}
  .holo.tilting{transition:transform .08s linear}
  .holo::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:color-dodge;transition:opacity .4s;
    background:
      radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 42%),
      linear-gradient(calc(var(--ang,115deg)),transparent 20%,rgba(255,74,80,.35) 34%,rgba(255,214,120,.28) 44%,rgba(120,255,214,.26) 54%,rgba(140,150,255,.3) 64%,transparent 78%);
    background-size:100% 100%,240% 240%;background-position:center,var(--bx,50%) var(--by,50%)}
  .holo.tilting::after{opacity:1}
}

/* ---------- footer: la scritta RIFT si strappa sotto il puntatore ---------- */
.wordmark{display:block;width:100%;height:clamp(120px,22vw,320px);margin-top:clamp(28px,4vw,48px);cursor:crosshair;touch-action:pan-y}

/* ---------- bottoni "jelly" ---------- */
.btn,.add,.cart-btn,.cmd-btn,.tabs button,.chips button,.lang button,.tplay,.ab-play,.pc-play{transform-origin:center}

@media (prefers-reduced-motion:reduce){
  .sheet nav a > span{transform:none}
  .holo{transform:none!important}
  .timeline .head{transition:none}
}
@media (max-width:600px){.cmd-btn{display:none}}

/* ---------- video sotto le forme d'onda ----------
   Le onde sono disegnate su fondo scuro; con "screen" il fondo sparisce
   e restano solo le linee sopra il video. */
.stage-video,.world-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.stage-video{filter:grayscale(.35) contrast(1.08) brightness(.55)}
.world-video{z-index:-2;filter:grayscale(.6) brightness(.42);opacity:.75;transition:opacity .8s,filter .8s}
.world:hover .world-video{opacity:.9;filter:grayscale(.4) brightness(.5)}
@media (prefers-reduced-motion:reduce){.stage-video,.world-video{display:none}}

/* ---------- corsia audio della prima schermata ---------- */
.lane{position:relative;height:clamp(76px,10.5vh,108px);border-top:1px solid rgba(237,234,228,.16);margin-bottom:0}
.lane-name,.lane-hint{position:absolute;top:8px;font:500 .66rem/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.lane-name{left:0}
.lane-hint{right:0;opacity:0;transition:opacity .3s}
.stage:hover .lane-hint{opacity:1}
@media (hover:none){.lane-hint{display:none}}
.stage-shade{z-index:1}
.stage-media .stage-canvas{z-index:2}
.stage-rift{z-index:3}
/* pannelli con video: il testo non tocca mai il bordo della ripresa */
.world:has(.world-video),.world:first-child:has(.world-video){padding-inline:clamp(18px,3.5vw,48px)}