/* Home FIAG: il film al tavolo, i giochi sul panno, dove trovarci, contatti */

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:80;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .8s,visibility .8s}
.loader.out{opacity:0;visibility:hidden}
.loader .lj{position:relative;width:46px;height:180px}
.loader .lj img{width:46px;height:180px;object-fit:contain}
.loader .lj .glow{position:absolute;left:50%;top:-2px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:var(--ember);filter:blur(10px);opacity:var(--lit,0);transition:opacity .3s}
.loader .lbar{width:min(240px,60vw);height:2px;background:var(--ash);overflow:hidden}
.loader .lbar i{display:block;height:100%;width:0;background:var(--ember);transition:width .25s}
.loader .mono{color:var(--smoke)}

/* ---------- film ---------- */
.film{position:relative;height:820vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--night)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stage .vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 35%,rgba(10,12,10,.88) 100%)}
.stage .grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.stage .dim{position:absolute;inset:0;background:var(--night);pointer-events:none}

.chap{position:absolute;left:0;right:0;padding-inline:var(--gutter);pointer-events:none;visibility:hidden}
.chap.on{visibility:visible}
.chap .w{display:inline-block;overflow:hidden;vertical-align:top}
.chap .w>span{display:inline-block;transform:translateY(105%);transition:transform .7s var(--ease);transition-delay:calc(var(--i) * 35ms)}
.chap.on .w>span{transform:none}
.chap .fade{opacity:0;transform:translateY(16px);transition:opacity .6s .25s,transform .6s .25s var(--ease)}
.chap.on .fade{opacity:1;transform:none}

.c-open{top:50%;transform:translateY(-50%);text-align:center}
.c-open img{width:min(460px,72vw);margin:0 auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.7))}
.c-open img{width:min(600px,80vw,50vh)}
.c-open .pre-line{margin:26px auto 0;max-width:30ch;font-size:clamp(18px,1.9vw,24px);line-height:1.35;text-shadow:0 2px 20px #000}
.c-open .pre-line b{display:block;margin-top:6px;color:var(--ember-2)}
.c-open .btn,.c-end .btn{pointer-events:auto}
.c-open .btn{margin-top:22px}
.end-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.end-cta .btn{margin-top:0}

/* ---------- preordine ---------- */
.preorder{background:linear-gradient(180deg,var(--night) 0%,#0f1a13 45%,var(--night) 100%)}
.pre-wrap{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.pre-head h2{margin:12px 0 0;font-family:var(--font-display);font-weight:400;font-size:clamp(52px,8vw,124px);line-height:.9;text-transform:uppercase}
.pre-head h2 b{display:block;font-weight:400;color:#25D366}
.pre-head .lead{margin:22px 0 0;max-width:42ch;font-size:clamp(18px,1.6vw,21px);color:var(--chalk-2)}
.pre-head .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.preorder .steps{margin:0;grid-template-columns:1fr;gap:14px}
.preorder .steps li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px 22px;border-color:rgba(37,211,102,.25);background:rgba(10,12,10,.55)}
.preorder .steps li::before{grid-row:span 2;margin:0;color:#25D366}
.pre-shops{max-width:var(--max);margin:clamp(36px,5vw,56px) auto 0;padding-top:20px;border-top:1px dashed var(--ash);font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--smoke)}
#dove .sec-head p a{color:var(--chalk)}
@media (max-width:900px){.pre-wrap{grid-template-columns:1fr}}
.c-low{bottom:clamp(90px,14vh,150px);left:auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right;padding-right:calc(var(--gutter) + 44px)}
.c-low .names{justify-content:flex-end}
.c-low h2,.c-mid h2,.c-end h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(38px,6vw,92px);line-height:.95;text-transform:uppercase;text-shadow:0 4px 30px rgba(0,0,0,.95);max-width:16ch}
/* titoli spezzati in parole: ogni parola è ritagliata per l'entrata dal basso, e il ritaglio tagliava l'ombra
   lasciando un rettangolo dietro ogni parola. L'ombra va sul titolo intero, che non è ritagliato. */
.chap h2[data-split]{text-shadow:none;filter:drop-shadow(0 3px 10px rgba(0,0,0,.9)) drop-shadow(0 6px 26px rgba(0,0,0,.7))}
.c-low p{margin:16px 0 0 auto;max-width:36ch;font-size:clamp(17px,1.5vw,20px);text-shadow:0 2px 18px #000}
.names{display:flex;flex-wrap:wrap;gap:6px 0;margin:0 0 18px;padding:0;list-style:none}
.names li{font-family:var(--font-display);font-size:clamp(28px,4vw,56px);line-height:1;text-transform:uppercase;text-shadow:0 2px 24px #000}
.names li+li::before{content:"/";color:var(--ember);margin:0 .35em}
.c-mid{top:50%;transform:translateY(-50%);text-align:center}
.c-mid q{display:block;font-family:var(--font-hand);font-size:clamp(28px,4.2vw,62px);line-height:1.15;max-width:20ch;margin:0 auto;quotes:"“" "”";text-shadow:0 4px 30px rgba(0,0,0,.95)}
.c-end{bottom:clamp(90px,15vh,160px);text-align:center}
.c-end h2{margin:0 auto;font-size:clamp(56px,11vw,176px)}
.c-end .btn{margin-top:26px;pointer-events:auto}
.scroll-hint{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--smoke);transition:opacity .5s}
.scroll-hint i{display:block;width:1px;height:42px;background:linear-gradient(var(--chalk),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.chapters{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none}
.chapters li{width:2px;height:22px;background:var(--ash);transition:background .3s,height .3s}
.chapters li.on{background:var(--ember);height:38px}

/* ---------- giochi sul panno ---------- */
.felt{background:radial-gradient(ellipse 85% 65% at 50% 32%,var(--felt) 0%,var(--felt-deep) 58%,var(--night) 100%);overflow:hidden}
.felt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='220' height='220' filter='url(%23f)'/></svg>")}
.felt .crumbs{position:absolute;inset:0;pointer-events:none}
.games{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);max-width:var(--max);margin:0 auto;perspective:1400px}
.box{position:relative;min-width:0;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.box:nth-child(1){--rz:-2.5deg}
.box:nth-child(2){--rz:2deg;margin-top:48px}
.box .lid{position:relative;display:flex;flex-direction:column;gap:20px;height:100%;padding:clamp(24px,3vw,40px);background:var(--night-2);border-radius:6px;text-decoration:none;color:var(--chalk);
  transform:rotate(var(--rz)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease),box-shadow .5s;
  box-shadow:0 30px 50px rgba(0,0,0,.55),0 2px 0 rgba(255,255,255,.04) inset;overflow:hidden}
.box .lid::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.10),transparent 45%);opacity:0;transition:opacity .4s}
.box:hover .lid{box-shadow:0 60px 90px rgba(0,0,0,.7);transform:rotate(0deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(30px)}
.box:hover .lid::after{opacity:1}
.box .top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tag{padding:6px 10px;border:1px solid var(--ash);border-radius:4px;color:var(--smoke)}
.tag.hot{background:var(--ember);border-color:var(--ember);color:var(--night)}
.box .art{height:210px;display:flex;align-items:center;justify-content:center;transform:translateZ(40px)}
.box .art img{max-height:210px;width:auto;transition:transform .6s var(--ease)}
.box:hover .art img{transform:scale(1.05) rotate(-2deg)}
.box .ph{width:100%;height:210px;border:2px dashed var(--ash);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--smoke);text-align:center}
.box h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(30px,3vw,40px);line-height:1;text-transform:uppercase}
.box p{margin:0;color:var(--chalk-2);max-width:46ch}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.specs li{padding:5px 10px;background:var(--felt-deep);border-radius:4px;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em}
.box .go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--ash)}
.box .go b{font-weight:700}
.box .go span.arrow{display:inline-block;transition:transform .3s var(--ease)}
.box:hover .go span.arrow{transform:translateX(6px)}
.box-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding-inline:4px}

/* ---------- come si ordina ---------- */
.steps{position:relative;max-width:var(--max);margin:clamp(80px,10vw,140px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;list-style:none;counter-reset:s}
.steps li{min-width:0;padding:24px;border:1px solid rgba(237,231,219,.14);border-radius:6px;background:rgba(10,12,10,.35)}
.steps li::before{counter-increment:s;content:counter(s);display:block;font-family:var(--font-display);font-size:44px;line-height:1;color:var(--ember);margin-bottom:10px}
.steps h3{margin:0 0 6px;font-size:20px}
.steps p{margin:0;color:var(--chalk-2);font-size:16px}

/* ---------- dove trovarci ---------- */
.stores{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;padding:0;list-style:none}
.store{min-width:0;border-top:2px solid var(--ash);padding-top:20px;transition:border-color .3s}
.store:hover{border-color:var(--ember)}
.store h3{margin:0 0 6px;font-family:var(--font-display);font-weight:400;font-size:28px;text-transform:uppercase}
.store p{margin:0;color:var(--smoke)}
.stores-note{max-width:var(--max);margin:36px auto 0;color:var(--smoke)}
.stores-note a{color:var(--chalk)}

/* ---------- contatti ---------- */
.contact{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.contact h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:clamp(64px,11vw,168px);line-height:.86;text-transform:uppercase}
.contact h2 b{color:var(--ember);font-weight:400;display:block}
.contact .lead{margin:24px 0 0;color:var(--chalk-2);max-width:38ch}
.contact .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.lines{margin:0;padding:0;list-style:none}
.lines li{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--ash)}
.lines .mono{color:var(--smoke)}
.lines .v{font-size:19px;overflow-wrap:anywhere;text-decoration:none}
a.v:hover{color:var(--ember)}
.copy{background:none;border:1px solid var(--ash);border-radius:999px;color:var(--smoke);font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;cursor:pointer;min-height:36px}
.copy:hover{color:var(--chalk);border-color:var(--chalk)}
.motto{max-width:var(--max);margin:clamp(90px,10vw,140px) auto 0;font-family:var(--font-hand);font-size:clamp(24px,3.4vw,44px);line-height:1.2;color:var(--smoke);text-align:center;text-wrap:balance}

@media (max-width:900px){
  .games,.stores,.contact,.steps{grid-template-columns:1fr}
  .box:nth-child(2){margin-top:0}
  /* su telefono le scatole stanno dritte, altrimenti la seconda copre il pulsante della prima */
  .box:nth-child(n){--rz:0deg}
  .box .art{transform:none}
  .box-actions .btn{width:100%}
  .copy{min-height:44px}
  .chapters{display:none}
  .lines li{grid-template-columns:90px minmax(0,1fr) auto}
}
@media (max-width:520px){
  .lines li{grid-template-columns:1fr auto}
  .lines li .mono{grid-column:1/-1}
}
.felt>*:not(.crumbs){position:relative}