/* Solo la landing (index.html). Tema notte dell'app su una griglia sottile, telefoni inclinati che si muovono scorrendo.
   I token restano quelli di style.css (stessi di src/components/theme.ts). --p (0→1) è l'avanzamento di ogni sezione,
   scritto da landing.js. */
:root {
  --plum: #1E1833;
  --glass: rgba(255,255,255,0.08);
  --glass-edge: rgba(255,255,255,0.14);
  --accent-text: #C9B8FF;
}

body.landing {
  display: block;
  color: var(--night-muted);
  background-color: var(--night);
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    radial-gradient(circle at 80% 8%, rgba(124,92,255,0.40) 0%, rgba(124,92,255,0) 32%),
    radial-gradient(circle at 10% 40%, rgba(124,92,255,0.22) 0%, rgba(124,92,255,0) 30%),
    linear-gradient(180deg, var(--night) 0%, var(--plum) 45%, var(--night) 100%);
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%, 100% 100%;
  overflow-x: hidden;
}
.wide { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.landing section, .landing .hero { position: relative; overflow-x: clip; }

/* Barra in alto */
.top { position: sticky; top: 0; z-index: 20; background: rgba(14,13,18,0.6); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,0.06); }
.top .wide { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 15px; }
.pill:hover { text-decoration: none; background: var(--accent2); }

.eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); color: var(--accent-text); font-weight: 600; font-size: 14px; }
.landing h1, .landing h2 { color: var(--night-ink); font-weight: 700; margin: 0; }
.landing h1 em { font-style: normal; color: var(--accent-text); }

.store { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 24px 0 18px; border-radius: 18px; background: var(--night-ink); color: var(--night); box-shadow: 0 14px 30px rgba(124,92,255,0.35); }
.store:hover { text-decoration: none; background: #FFFFFF; }
.store svg { width: 26px; height: 26px; }
.store span { display: flex; flex-direction: column; font-size: 20px; line-height: 1.1; font-weight: 700; }
.store small { font-size: 12px; font-weight: 600; opacity: 0.7; }

/* Telefono: cornice in titanio, schermo con la cattura vera */
.slot { position: absolute; width: var(--w); will-change: transform; }
.phone {
  width: 100%;
  aspect-ratio: 600 / 1226;
  padding: calc(var(--w) * 0.028);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(145deg, #E4E1EC 0%, #7A7590 18%, #2B2837 45%, #4A4560 70%, #C9C5D6 100%);
  box-shadow: 0 50px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.35);
}
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--w) * 0.145); background: #000; box-shadow: 0 0 0 calc(var(--w) * 0.012) #050407; }
.screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Schermata col QR */
.qr-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--w) * 0.07);
  background: linear-gradient(160deg, #C4B3FF 0%, var(--accent) 50%, #4A2BD6 100%);
  color: #FFFFFF; text-align: center;
}
.screen .qr-logo { width: 26%; height: auto; border-radius: 24%; box-shadow: 0 10px 24px rgba(30,24,51,0.35); }
.screen .qr-code { width: 72%; height: auto; filter: invert(1); }
.qr-screen b { font-size: calc(var(--w) * 0.075); letter-spacing: -0.3px; }

/* Entrata dei telefoni al caricamento */
.js .phone { animation: rise 1.1s cubic-bezier(.2,.8,.2,1) both; }
.js .s1 .phone { animation-delay: .15s; }
.js .s3 .phone { animation-delay: .25s; }
.js .s4 .phone { animation-delay: .4s; }
@keyframes rise { from { opacity: 0; transform: translateY(30%) scale(.92); } }

/* Apertura */
.hero { padding: 36px 0 0; }
.hero-copy { text-align: center; position: relative; z-index: 5; }
.hero h1 { font-size: clamp(40px, 5.6vw, 68px); line-height: 1; letter-spacing: -2.5px; margin: 22px auto 0; max-width: 11em; }
.hero-copy > p { font-size: 19px; max-width: 30em; margin: 16px auto 24px; }
.fan { position: relative; height: clamp(520px, 62vw, 780px); margin-top: 8px; }
.s1 { --w: clamp(170px, 24vw, 320px); left: 4%; top: -14%; z-index: 2;
  transform: translate(calc(var(--p) * -12vw), calc(var(--p) * 14vh)) rotate(calc(-22deg - var(--p) * 14deg)); }
.s2 { --w: clamp(190px, 26vw, 340px); left: 50%; top: 9%; z-index: 3;
  transform: translate(-50%, calc(var(--p) * -10vh)) rotate(calc(var(--p) * -5deg)); }
.s3 { --w: clamp(170px, 24vw, 320px); right: 4%; top: -16%; z-index: 2;
  transform: translate(calc(var(--p) * 12vw), calc(var(--p) * 10vh)) rotate(calc(24deg + var(--p) * 14deg)); }
.s4 { --w: clamp(200px, 30vw, 400px); right: -6%; top: 52%; z-index: 4;
  transform: translate(calc(var(--p) * -8vw), calc(var(--p) * -24vh)) rotate(calc(-64deg + var(--p) * 20deg)); }

/* Racconto con il telefono fermo */
.story { height: 500vh; }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; width: 100%; }
.captions { list-style: none; margin: 0; padding: 0; display: grid; position: relative; z-index: 4; }
.captions li { grid-area: 1 / 1; opacity: 0; transform: translateY(28px); transition: opacity .5s, transform .5s; pointer-events: none; }
.captions li.on { opacity: 1; transform: none; pointer-events: auto; }
.captions span { color: var(--accent-text); font-weight: 700; font-size: 15px; }
.captions h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.04; letter-spacing: -1.4px; margin: 14px 0 16px; }
.captions p { font-size: 18px; max-width: 26em; margin: 0; }
.story-stage { position: relative; height: min(78vh, 720px); }
.main { --w: clamp(200px, 21vw, 300px); left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%) rotate(calc(-7deg + var(--p) * 14deg)); }
.back { --w: clamp(160px, 16vw, 240px); top: 50%; z-index: 1; filter: brightness(.55) saturate(.8); }
.b1 { left: -4%; transform: translateY(calc(-50% + (0.5 - var(--p)) * 40vh)) rotate(-24deg); }
.b2 { right: -4%; transform: translateY(calc(-50% + (var(--p) - 0.5) * 40vh)) rotate(22deg); }
.stack img { position: absolute; inset: 0; opacity: 0; transform: scale(1.06); transition: opacity .55s, transform .7s; }
.stack img.on { opacity: 1; transform: none; }
.dots { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; gap: 8px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.22); transition: width .3s, background .3s; }
.dots i.on { width: 26px; background: var(--accent); }

/* Borsa */
.dj { padding: 120px 0 40px; }
.dj-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 24px; align-items: center; }
.dj-copy { position: relative; z-index: 5; }
.dj h2 { font-size: clamp(36px, 5.5vw, 68px); line-height: 1.02; letter-spacing: -2px; margin: 20px 0 18px; max-width: 12em; }
.dj-copy p { font-size: 19px; max-width: 30em; margin: 0; }
.dj-stage { position: relative; height: clamp(560px, 56vw, 720px); }
.d1 { --w: clamp(190px, 21vw, 290px); left: 4%; top: 8%; z-index: 2;
  transform: translateY(calc((0.5 - var(--p)) * 36vh)) rotate(calc(-16deg + var(--p) * 8deg)); }
.d2 { --w: clamp(190px, 21vw, 290px); right: 4%; top: 14%; z-index: 3;
  transform: translateY(calc((var(--p) - 0.5) * 36vh)) rotate(calc(16deg - var(--p) * 8deg)); }
.key { position: absolute; z-index: 4; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--night);
  box-shadow: 0 20px 40px rgba(0,0,0,0.45); will-change: transform; }
.k1 { width: 104px; height: 104px; font-size: 26px; background: var(--pink);  left: 8%;  top: 20%; transform: translateY(calc((0.5 - var(--p)) * 30vh)) rotate(-8deg); }
.k2 { width: 84px;  height: 84px;  font-size: 22px; background: var(--mint);  left: 42%; top: 72%; transform: translateY(calc((var(--p) - 0.5) * 24vh)); }
.k3 { width: 128px; height: 128px; font-size: 20px; background: var(--amber); right: 6%; top: 58%; transform: translateY(calc((0.5 - var(--p)) * 26vh)) rotate(8deg); }
.k4 { width: 76px;  height: 76px;  font-size: 20px; background: var(--lilac); right: 12%; top: 6%; transform: translateY(calc((var(--p) - 0.5) * 30vh)); }

/* Finale col QR */
.final { padding: 80px 0 40px; }
.final-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.final h2 { font-size: clamp(38px, 5.5vw, 68px); line-height: 1.02; letter-spacing: -2px; }
.final-grid p { font-size: 19px; max-width: 24em; margin: 18px 0 32px; }
.final-stage { position: relative; height: clamp(520px, 52vw, 700px); }
.f1 { --w: clamp(230px, 24vw, 330px); left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + max(0, 0.55 - var(--p)) * 60vh)) rotate(calc(max(0, 0.55 - var(--p)) * 60deg - 4deg)); }
.landing footer { padding-top: 64px; color: var(--night-muted); }
.landing footer a { color: var(--accent-text); }

@media (max-width: 800px) {
  .wide { padding: 0 16px; }
  .hero { padding-top: 36px; }
  .hero-copy > p, .dj-copy p, .final-grid p { font-size: 17px; }
  .fan { height: 128vw; margin-top: 32px; }
  .s1, .s3 { --w: 40vw; }
  .s1 { left: -6%; }
  .s3 { right: -6%; }
  .s2 { --w: 46vw; }
  .s4 { --w: 52vw; right: -14%; top: 56%; }
  .story-grid { grid-template-columns: 1fr; gap: 16px; align-content: center; }
  .captions h2 { font-size: 28px; letter-spacing: -0.8px; margin: 8px 0 8px; }
  .captions p { font-size: 16px; }
  .story-stage { height: 60svh; }
  .main { --w: min(46vw, 30svh); }
  .back { --w: min(34vw, 22svh); }
  .b1 { left: 2%; }
  .b2 { right: 2%; }
  .dots { bottom: 14px; }
  .dj { padding-top: 64px; }
  .dj-grid { grid-template-columns: 1fr; }
  .dj-stage { height: 120vw; }
  .d1, .d2 { --w: 44vw; }
  .d1 { left: 4%; }
  .d2 { right: 4%; }
  .k1 { width: 72px; height: 72px; font-size: 19px; left: 2%; }
  .k2 { width: 60px; height: 60px; font-size: 16px; }
  .k3 { width: 88px; height: 88px; font-size: 15px; right: 2%; }
  .k4 { width: 56px; height: 56px; font-size: 15px; }
  .final-grid { grid-template-columns: 1fr; }
  .final-stage { height: 120vw; max-height: 620px; }
  .f1 { --w: 56vw; }
}

/* Movimento ridotto: telefoni fermi, cambiano solo le schermate */
@media (prefers-reduced-motion: reduce) {
  .landing [data-scroll] { --p: 0.5 !important; }
  .js .phone { animation: none; }
}