/* ============================================================
   WHAN AMADOR — foglio di stile globale (motore "amador")
   Palette: navy notte + pannelli bianchi sovrapposti.
   Tipografia: Jost (geometrico, ultra-spaziato, Futura-like).
   Sezioni numerate; l'oggetto che ruota è la bottiglia.
   ============================================================ */

:root{
  --navy:     #0b0e2a;   /* midnight */
  --navy-2:   #10143a;
  --navy-3:   #171c4a;
  --paper:    #eef0f4;   /* off-white sezioni chiare */
  --white:    #ffffff;
  --ink:      #0b0e2a;
  --ink-soft: #565a75;
  --line:     rgba(11,14,42,.14);
  --line-inv: rgba(255,255,255,.18);
  --inv:      #eef0f4;
  --inv-soft: #9aa0c0;
  --steel:    #8b93c4;   /* accento freddo tenue */
  --sans:'Jost', 'Century Gothic', 'Futura', -apple-system, sans-serif;
  --w:1320px;
  --gutter:clamp(20px,4vw,64px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
body{
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.62;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--navy); color:#fff }

/* ---------- tipografia geometrica ---------- */
h1,h2,h3{ font-weight:300; line-height:1.02; letter-spacing:.01em }
.display{ font-weight:300; text-transform:uppercase; letter-spacing:.06em; line-height:.98 }
.display-xl{ font-size:clamp(2.6rem,8vw,7.5rem); font-weight:300; text-transform:uppercase; letter-spacing:.04em; line-height:.95 }
h2{ font-size:clamp(1.9rem,4vw,3.4rem); text-transform:uppercase; letter-spacing:.05em }
h3{ font-size:clamp(1.2rem,2vw,1.6rem); text-transform:uppercase; letter-spacing:.08em; font-weight:400 }
.label{ font-size:.68rem; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-soft) }
.dark .label{ color:var(--inv-soft) }
p.lead{ font-size:clamp(1rem,1.4vw,1.2rem); line-height:1.65; color:var(--ink-soft); max-width:56ch; font-weight:400 }
.dark p.lead{ color:var(--inv-soft) }
.num{ font-weight:300; letter-spacing:0; color:var(--steel); font-size:.85rem }

/* ---------- layout ---------- */
.wrap{ max-width:var(--w); margin:0 auto; padding-inline:var(--gutter) }
.wide{ max-width:1680px; margin:0 auto; padding-inline:var(--gutter) }
section{ padding-block:clamp(70px,10vw,150px) }
.dark{ background:var(--navy); color:var(--inv) }
.center{ text-align:center } .center .label{ display:inline-block }
.mt{ margin-top:clamp(26px,4vw,48px) } .mt-s{ margin-top:16px }
.max58{ max-width:58ch } .max44{ max-width:44ch }

/* ---------- header ---------- */
.head{ position:absolute; top:0; left:0; right:0; z-index:60; padding:26px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff }
.head.solid{ position:sticky; background:var(--navy); color:var(--inv) }
.head a{ font-size:.7rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase }
.head .brand{ font-size:1rem; letter-spacing:.34em; font-weight:400 }
.head nav{ display:flex; align-items:center; gap:clamp(16px,2.4vw,34px) }
.head nav a{ opacity:.85; transition:.25s; padding-bottom:3px; border-bottom:1px solid transparent }
.head nav a:hover,.head nav a[aria-current="page"]{ opacity:1; border-color:currentColor }
.head .lang{ display:inline-flex; gap:8px } .head .lang a.on{ color:#fff; opacity:1 }
.burger{ display:none; width:40px; height:34px; border:1px solid currentColor; background:none; cursor:pointer; position:relative }
.burger span,.burger span::before,.burger span::after{ content:""; position:absolute; left:9px; right:9px; height:1px; background:currentColor; transition:.3s }
.burger span{ top:16px } .burger span::before{ top:-5px } .burger span::after{ top:5px }
.mnav{ display:none }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:12px; font-size:.7rem; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; border:1px solid var(--ink); padding:16px 30px; color:var(--ink); background:transparent; cursor:pointer; transition:.35s }
.btn:hover{ background:var(--ink); color:#fff }
.btn.solid{ background:var(--navy); color:#fff; border-color:var(--navy) }
.btn.solid:hover{ background:var(--navy-3); border-color:var(--navy-3) }
.dark .btn{ border-color:var(--inv); color:var(--inv) }
.dark .btn:hover{ background:var(--inv); color:var(--navy) }
.btn-row{ display:flex; flex-wrap:wrap; gap:16px; align-items:center }
.chev{ width:46px; height:46px; border-radius:50%; border:1px solid currentColor; display:inline-flex; align-items:center; justify-content:center; font-size:1rem }

/* ---------- hero con pannello bianco sovrapposto ---------- */
.hero{ position:relative; min-height:clamp(600px,100vh,980px); background:var(--navy); overflow:hidden; display:flex; align-items:flex-end }
.hero .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78 }
.hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,14,42,.55),rgba(11,14,42,.15) 40%,rgba(11,14,42,.7)) }
.hero .tag{ position:absolute; z-index:2; right:var(--gutter); top:32vh; text-align:right; color:#fff }
.hero .tag h2{ font-size:clamp(1.4rem,2.4vw,2.1rem); line-height:1.15 }
.hero .panel{ position:relative; z-index:3; background:var(--white); padding:clamp(34px,5vw,64px) clamp(30px,5vw,70px);
  margin-bottom:0; max-width:min(760px,86vw); }
.hero .panel .display-xl{ color:var(--ink) }
.hero .panel .row{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:22px; flex-wrap:wrap }
.hero .panel .chev{ color:var(--navy) }

/* ---------- pannello bianco sovrapposto (riuso) ---------- */
.overlap{ position:relative }
.overlap .img{ position:relative; overflow:hidden }
.overlap .img img{ width:100%; height:100%; object-fit:cover; min-height:340px }
.overlap .panel{ background:var(--white); padding:clamp(30px,4vw,54px); position:relative; z-index:2 }
.dark .overlap .panel{ background:var(--navy-2) }
.overlap.left .panel{ margin:-90px 0 0 clamp(0px,4vw,60px); max-width:640px }
.overlap.right{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0 }
.overlap.right .panel{ margin-left:-80px }
@media (max-width:820px){ .overlap.right{ grid-template-columns:1fr } .overlap.right .panel{ margin:-70px 20px 0 } .overlap.left .panel{ margin-top:-70px } }

/* ---------- sezione numerata ---------- */
.sec-head{ display:flex; align-items:baseline; gap:22px; flex-wrap:wrap }
.sec-head .idx{ font-size:clamp(2rem,4vw,3.4rem); font-weight:300; color:var(--steel); line-height:1 }
.dark .sec-head .idx{ color:var(--steel) }

/* ---------- ROTANTE: bottiglia (analogo "variable number of") ---------- */
.rotor{ position:relative; background:var(--navy); overflow:hidden; padding-block:clamp(60px,8vw,120px) }
.rotor .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,60px); align-items:center; max-width:var(--w); margin:0 auto; padding-inline:var(--gutter); position:relative; z-index:2 }
.rotor .stage{ position:relative; display:flex; justify-content:center; align-items:center; min-height:clamp(420px,58vh,680px) }
.rotor video,.rotor .stage img{ max-height:76vh; width:auto; filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)) }
.rotor .big{ position:absolute; z-index:1; font-weight:300; color:var(--navy-3); font-size:clamp(9rem,26vw,26rem); line-height:.8; letter-spacing:-.02em; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.5; pointer-events:none }
.rotor .info .label{ color:var(--inv-soft) }
.rotor .stat{ display:flex; gap:34px; margin-top:30px; flex-wrap:wrap }
.rotor .stat b{ display:block; font-size:clamp(2.4rem,4vw,3.6rem); font-weight:300; color:#fff; line-height:1 }
.rotor .stat span{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--inv-soft) }
@media (max-width:820px){ .rotor .grid{ grid-template-columns:1fr } .rotor .stage{ min-height:52vh; order:-1 } }

/* ---------- wines grid ---------- */
.wines{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:2px; background:var(--line) }
.dark .wines{ background:var(--line-inv) }
.wine{ background:var(--paper); padding:30px 22px 26px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; transition:.35s }
.dark .wine{ background:var(--navy) }
.wine:hover{ background:var(--white) } .dark .wine:hover{ background:var(--navy-2) }
.wine .well{ height:280px; display:flex; align-items:center; justify-content:center; margin-bottom:16px }
.wine .well img{ max-height:100%; max-width:66%; width:auto; object-fit:contain; mix-blend-mode:multiply }
.dark .wine .well img{ mix-blend-mode:normal; filter:drop-shadow(0 18px 24px rgba(0,0,0,.5)) }
.wine .idx{ position:absolute; top:14px; left:16px; font-size:.66rem; letter-spacing:.14em; color:var(--steel) }
.wine .tag{ position:absolute; top:14px; right:16px; font-size:.56rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--steel) }
.wine .name{ font-size:1.15rem; letter-spacing:.14em; text-transform:uppercase; font-weight:400; color:var(--ink) }
.dark .wine .name{ color:var(--inv) }
.wine .meta{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:9px }

/* filtro */
.filters{ display:flex; gap:2px; flex-wrap:wrap; margin:30px 0 2px; justify-content:center }
.filters button{ font-size:.66rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; background:transparent; border:1px solid var(--line-inv); color:var(--inv-soft); padding:12px 24px; cursor:pointer; transition:.25s }
.filters button:hover{ color:#fff; border-color:var(--inv) }
.filters button.on{ background:var(--inv); color:var(--navy); border-color:var(--inv) }

/* ---------- wine detail ---------- */
.pdp{ display:grid; grid-template-columns:1fr 1fr; min-height:clamp(560px,86vh,900px) }
.pdp .stage{ position:relative; background:var(--navy); display:flex; align-items:center; justify-content:center; padding:60px 40px; overflow:hidden }
.pdp .stage img{ max-height:640px; width:auto; filter:drop-shadow(0 40px 50px rgba(0,0,0,.6)) }
.pdp .stage .big{ position:absolute; z-index:0; font-size:clamp(10rem,22vw,22rem); color:var(--navy-3); font-weight:300; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.55 }
.pdp .stage img{ position:relative; z-index:1 }
.pdp .info{ background:var(--white); padding:clamp(40px,5vw,86px) clamp(28px,5vw,74px); display:flex; flex-direction:column; justify-content:center }
.pdp .info .name{ font-size:clamp(2.4rem,5vw,4.4rem); margin:16px 0 8px }
.crumbs{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft) }
.crumbs a:hover{ color:var(--navy) }
.spec{ margin-top:32px; border-top:1px solid var(--line) }
.spec div{ display:grid; grid-template-columns:180px 1fr; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:.9rem }
.spec dt{ font-size:.62rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); padding-top:3px }
.spec dd{ color:var(--ink-soft) }
.tbc{ font-size:.72rem; color:var(--steel); border:1px dashed var(--steel); padding:1px 8px; white-space:nowrap }
@media (max-width:820px){ .pdp{ grid-template-columns:1fr } .pdp .stage{ min-height:64vh } }

/* ---------- band ---------- */
.band{ position:relative; min-height:clamp(440px,72vh,720px); display:flex; align-items:center; background:var(--navy); color:#fff; overflow:hidden }
.band .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5 }
.band::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(11,14,42,.9),rgba(11,14,42,.35)) }
.band .wrap{ position:relative; z-index:2 }

/* ---------- services numerati ---------- */
.svc{ border-top:1px solid var(--line-inv) }
.svc .row{ display:grid; grid-template-columns:90px 1fr 1.4fr; gap:24px; padding:34px 0; border-bottom:1px solid var(--line-inv); align-items:baseline }
.svc .row .idx{ font-size:1.8rem; font-weight:300; color:var(--steel) }
.svc .row p{ color:var(--inv-soft); font-size:.95rem }
.svc .row ul{ list-style:none; color:var(--inv-soft); font-size:.9rem; margin-top:10px }
.svc .row li{ padding:6px 0 6px 18px; position:relative } .svc .row li::before{ content:"—"; position:absolute; left:0; color:var(--steel) }
@media (max-width:820px){ .svc .row{ grid-template-columns:60px 1fr } .svc .row p,.svc .row ul{ grid-column:2 } }

/* mosaico */
.mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; gap:2px }
.mosaic figure{ position:relative; overflow:hidden }
.mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.2,.6,.2,1) }
.mosaic figure:hover img{ transform:scale(1.06) }
.mosaic figure:nth-child(1){ grid-column:span 2; grid-row:span 2 }
.mosaic figcaption{ position:absolute; left:0; bottom:0; padding:14px 16px; font-size:.6rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:#fff; background:linear-gradient(0deg,rgba(11,14,42,.85),transparent) }
@media (max-width:820px){ .mosaic{ grid-template-columns:1fr 1fr; grid-auto-rows:150px } .mosaic figure:nth-child(1){ grid-column:span 2; grid-row:span 1 } }

/* FAQ */
.faq details{ border-top:1px solid var(--line) } .faq details:last-child{ border-bottom:1px solid var(--line) }
.faq summary{ font-size:1.1rem; text-transform:uppercase; letter-spacing:.06em; font-weight:400; padding:22px 46px 22px 0; cursor:pointer; list-style:none; position:relative }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; position:absolute; right:6px; top:20px; font-size:1.4rem; color:var(--steel); transition:.3s }
.faq details[open] summary::after{ transform:rotate(45deg) }
.faq p{ padding:0 0 24px; color:var(--ink-soft); max-width:70ch }

/* form */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form .full{ grid-column:1/-1 }
.form label{ display:block; font-size:.62rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--inv-soft); margin-bottom:8px }
.form input,.form select,.form textarea{ width:100%; font:inherit; font-size:.95rem; color:#fff; background:var(--navy-2); border:1px solid var(--line-inv); padding:14px; border-radius:0; -webkit-appearance:none; appearance:none }
.form textarea{ min-height:150px; resize:vertical }
.form :focus{ outline:none; border-color:var(--steel) }
.hp{ position:absolute; left:-9999px; opacity:0; height:0 }
.info-card{ border:1px solid var(--line-inv); padding:34px 30px }
.info-card h3{ margin-bottom:16px } .info-card p{ font-size:.92rem; color:var(--inv-soft); margin-bottom:10px }
.info-card a{ color:#fff } .info-card a:hover{ color:var(--steel) }

/* footer */
.foot{ background:var(--navy); color:var(--inv); padding:60px 0 32px; border-top:1px solid var(--line-inv) }
.foot .brand{ font-size:1.4rem; letter-spacing:.34em; font-weight:300; text-transform:uppercase }
.foot .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; margin:34px 0 44px }
.foot h4{ font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--steel); margin-bottom:14px }
.foot ul{ list-style:none } .foot li{ margin-bottom:9px; font-size:.88rem; color:var(--inv-soft) }
.foot a:hover{ color:#fff }
.foot .fine{ border-top:1px solid var(--line-inv); padding-top:22px; display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; font-size:.72rem; color:var(--inv-soft) }
@media (max-width:820px){ .foot .cols{ grid-template-columns:1fr 1fr } }

.lang-note{ background:var(--navy-3); color:#fff; font-size:.74rem; text-align:center; padding:9px var(--gutter); letter-spacing:.08em }

/* reveal */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.6,.2,1) }
.reveal.in{ opacity:1; transform:none }
.panel.reveal{ transform:translateY(40px) }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none } .mosaic img{ transition:none } }

/* responsive header */
@media (max-width:900px){
  .head nav .desk{ display:none } .burger{ display:block }
  .mnav{ display:flex; position:fixed; inset:0; background:var(--navy); color:var(--inv); z-index:80; flex-direction:column; gap:20px; padding:90px var(--gutter) 40px; transform:translateY(-100%); transition:.4s }
  .mnav.open{ transform:none }
  .mnav a{ font-size:1.4rem; text-transform:uppercase; letter-spacing:.1em; font-weight:300 }
  .mnav .close{ position:absolute; top:26px; right:var(--gutter); background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer }
  .hero .tag{ display:none }
}
@media (max-width:520px){
  .wines{ grid-template-columns:1fr 1fr } .wine .well{ height:210px } .wine .name{ font-size:.95rem }
}

/* ============================================================
   v3 — EFFETTI LUXURY (preloader, cursore, reveal, parallax, marquee, grana)
   ============================================================ */

/* preloader */
.loader{ position:fixed; inset:0; z-index:9999; background:var(--navy); color:var(--inv);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition:opacity .7s ease, visibility .7s; }
.loader.done{ opacity:0; visibility:hidden; }
.loader .lk{ font-size:clamp(1.6rem,4vw,2.6rem); letter-spacing:.5em; font-weight:300; text-transform:uppercase; padding-left:.5em;
  opacity:0; transform:translateY(10px); animation:lkin .9s .1s forwards cubic-bezier(.2,.6,.2,1); }
.loader .bar{ width:min(240px,50vw); height:1px; background:rgba(255,255,255,.18); position:relative; overflow:hidden; }
.loader .bar i{ position:absolute; inset:0 100% 0 0; background:var(--steel); }
.loader .pct{ font-size:.7rem; letter-spacing:.3em; color:var(--inv-soft); }
@keyframes lkin{ to{ opacity:1; transform:none } }

/* cursore personalizzato (solo puntatore fine) */
.cursor,.cursor-dot{ position:fixed; top:0; left:0; z-index:9998; pointer-events:none; border-radius:50%;
  mix-blend-mode:difference; will-change:transform; }
.cursor{ width:38px; height:38px; border:1px solid #fff; margin:-19px 0 0 -19px; transition:width .25s, height .25s, margin .25s, opacity .25s; }
.cursor-dot{ width:5px; height:5px; background:#fff; margin:-2.5px 0 0 -2.5px; }
.cursor.grow{ width:66px; height:66px; margin:-33px 0 0 -33px; }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-dot{ display:none } }

/* grana sottile su tutta la pagina */
.grain{ position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* reveal parola-per-parola */
.word{ display:inline-block; overflow:hidden; vertical-align:top; }
.word > i{ display:inline-block; font-style:inherit; transform:translateY(112%); transition:transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0)*70ms); }
.in .word > i, .anim.in .word > i{ transform:none; }

/* immagini a tendina (clip reveal) + zoom lento */
.overlap .img{ clip-path:inset(0 0 0 0); }
.overlap .img.reveal{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1); }
.overlap .img.reveal.in{ clip-path:inset(0 0 0 0); }
.overlap .img img{ transition:transform 1.4s cubic-bezier(.2,.7,.2,1); transform:scale(1.14); }
.overlap .img.in img{ transform:scale(1); }
.overlap .img:hover img{ transform:scale(1.06); }

/* parallasse (impostata via JS con --py) */
.hero .bg,.band .bg{ will-change:transform; }

/* marquee editoriale */
.marquee{ background:var(--navy); color:var(--inv); border-block:1px solid var(--line-inv); overflow:hidden; padding:26px 0; }
.marquee-track{ display:flex; gap:0; width:max-content; animation:marq 34s linear infinite; }
.marquee span{ font-size:clamp(1.4rem,3vw,2.4rem); font-weight:300; text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; padding:0 .6em; }
.marquee span::after{ content:"·"; color:var(--steel); margin-left:1.2em; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* rotor: alone che segue il cursore */
.rotor .stage::before{ content:""; position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,147,196,.28), transparent 68%); left:var(--gx,50%); top:var(--gy,45%);
  transform:translate(-50%,-50%); pointer-events:none; transition:opacity .4s; }

/* magnetico */
.chev,.btn{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  .loader{ display:none }
  .word > i{ transform:none; transition:none }
  .overlap .img.reveal{ clip-path:none } .overlap .img img{ transform:none }
  .marquee-track{ animation:none } .cursor,.cursor-dot{ display:none }
  .rotor .stage::before{ display:none }
}

/* ============================================================
   v3 — REEL cinematografico a scorrimento (scene full-screen che si
   alternano + trasformazione grappolo → bottiglia). Stile luxury.
   ============================================================ */
.reel{ position:relative; background:var(--navy); }
.reel-stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
.scene{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .9s ease; }
.scene.on{ opacity:1; visibility:visible; }
.scene .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5;
  transform:scale(1.14); transition:transform 1.6s cubic-bezier(.2,.7,.2,1); }
.scene.on .bg{ transform:scale(1.02); }
.scene::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(11,14,42,.85),rgba(11,14,42,.25) 60%,rgba(11,14,42,.6)); }
.scene .scene-in{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; }
.scene .num{ font-size:.7rem; letter-spacing:.34em; text-transform:uppercase; color:var(--steel); }
.scene .word{ font-family:var(--sans); font-weight:300; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(3rem,12vw,11rem); line-height:.9; color:#fff; margin-top:10px;
  transform:translateY(40px); opacity:0; transition:transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s; }
.scene.on .word{ transform:none; opacity:1; }
.scene .sub{ color:var(--inv-soft); max-width:34ch; margin-top:18px;
  transform:translateY(30px); opacity:0; transition:transform 1s .15s, opacity 1s .15s; }
.scene.on .sub{ transform:none; opacity:1; }
.scene .bot{ position:absolute; right:7vw; bottom:0; top:0; margin:auto 0; height:60vh; width:auto; z-index:3;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)); transform:translateY(6%) scale(.94); opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), opacity 1s; }
.scene.on .bot{ transform:none; opacity:1; }
/* progresso a lato */
.reel-idx{ position:absolute; z-index:5; right:clamp(16px,3vw,40px); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:14px; }
.reel-idx b{ width:8px; height:8px; border-radius:50%; border:1px solid var(--inv-soft); transition:.3s; }
.reel-idx b.on{ background:var(--steel); border-color:var(--steel); transform:scale(1.3); }
/* trasformazione grappolo -> bottiglia */
.scene.morph::after{ background:radial-gradient(60% 60% at 50% 48%, rgba(23,28,74,.5), rgba(11,14,42,.92)); }
.morph-wrap{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; }
.morph-wrap img{ position:absolute; height:74vh; width:auto; will-change:transform,opacity,filter; }
.morph-grapes{ }
.morph-bottle{ opacity:0; filter:drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.scene.morph .word{ position:absolute; bottom:8vh; left:0; right:0; text-align:center; z-index:4; }

@media (max-width:820px){
  .scene .bot{ right:0; left:0; margin:auto; height:52vh; opacity:.5 }
  .scene .word{ font-size:clamp(2.6rem,16vw,6rem) }
  .morph-wrap img{ height:54vh }
}
@media (prefers-reduced-motion:reduce){
  .reel{ height:auto !important; }
  .reel-stage{ position:static; height:auto; }
  .scene{ position:relative; opacity:1; visibility:visible; min-height:80vh; }
  .scene .word,.scene .sub,.scene .bot{ opacity:1; transform:none; }
  .morph-bottle{ opacity:1; position:relative; }
  .reel-idx{ display:none; }
}

/* ============================================================
   v3 — PAGINE INTERNE cinematografiche (float bottiglia, banda nota, stagger)
   ============================================================ */
.pdp .stage img{ animation:floaty 7s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
.pdp .stage .big{ animation:drift 14s ease-in-out infinite; }
@keyframes drift{ 0%,100%{ transform:translate(-50%,-50%) } 50%{ transform:translate(-50%,-53%) } }

/* banda editoriale sotto la scheda vino */
.pdp-note{ position:relative; background:var(--navy); color:#fff; overflow:hidden; }
.pdp-note .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.3; }
.pdp-note::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,14,42,.72),rgba(11,14,42,.94)); }
.pdp-note .wrap{ position:relative; z-index:2; padding-block:clamp(80px,12vw,170px); }
.pdp-note .q{ font-weight:300; font-size:clamp(1.5rem,3.6vw,2.8rem); line-height:1.3; max-width:24ch; }
.pdp-note .q::before{ content:"“"; color:var(--steel); }
.pdp-note .q::after{ content:"”"; color:var(--steel); }

@media (prefers-reduced-motion:reduce){
  .pdp .stage img,.pdp .stage .big{ animation:none }
}