@import url('../assets/fonts/fonts.css');

/* ============ proprietà animabili (cielo) ============ */
@property --sky   { syntax: '<color>'; inherits: true; initial-value: #6D1832; }
@property --glow  { syntax: '<color>'; inherits: true; initial-value: rgba(255,189,89,.16); }
@property --glow2 { syntax: '<color>'; inherits: true; initial-value: rgba(30,0,10,.45); }
@property --gx    { syntax: '<percentage>'; inherits: true; initial-value: 82%; }
@property --gy    { syntax: '<percentage>'; inherits: true; initial-value: 8%; }
@property --gs    { syntax: '<length>'; inherits: true; initial-value: 1000px; }

:root {
  --bg: #6D1832;
  --deep: #3E0B1C;
  --gold: #FFBD59;
  --gold-l: #FFE2A6;
  --gold-d: #E29440;
  --cream: #F8EBDA;
  --dim: rgba(248,235,218,.74);
  --faint: rgba(248,235,218,.42);
  --line: rgba(255,189,89,.38);
  --card: rgba(38,4,15,.42);
  --goldgrad: linear-gradient(178deg, #FFEDC4 6%, #FFC768 40%, #EFA046 72%, #FFD997 100%);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; }
body { position: fixed; inset: 0; }   /* sul telefono la slide da 1920px non deve allargare la pagina */
body.nocursor, body.nocursor * { cursor: none !important; }

#stage {
  position: absolute; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--k, 1));
  overflow: hidden;
  color: var(--cream);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 28px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ============ fondo ============ */
.sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(var(--gs) var(--gs) at var(--gx) var(--gy), var(--glow), transparent 70%),
    radial-gradient(1300px 900px at 0% 105%, var(--glow2), transparent 72%),
    var(--sky);
  transition: --sky 1.8s var(--ease-io), --glow 1.8s var(--ease-io), --glow2 1.8s var(--ease-io),
              --gx 2.2s var(--ease-io), --gy 2.2s var(--ease-io), --gs 2.2s var(--ease-io);
}
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 120% at 50% 45%, transparent 55%, rgba(18,0,7,.42) 100%); }
.grain { position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
#dust { position: absolute; inset: 0; width: 1920px; height: 1080px; pointer-events: none; transition: opacity 1.2s; }
#dust.off { opacity: 0; }

/* ============ slide ============ */
.slide { position: absolute; inset: 0; visibility: hidden; transition: opacity .65s var(--ease-io); }
.slide.out { opacity: 0; transition: opacity .5s cubic-bezier(.5,0,.9,.6); }
.slide.pre { opacity: 0; transition: none; }
.slide.cur { visibility: visible; }
.slide:not(.cur) *, .slide:not(.cur) *::before, .slide:not(.cur) *::after { animation-play-state: paused !important; }
.abs { position: absolute; }

/* ============ tipografia ============ */
.kicker { font: 700 22px/1 'Archivo'; font-stretch: 75%; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 18px; }
.kicker::before { content: ''; width: 56px; height: 2px; background: currentColor; }
.disp { font-family: 'Fraunces', serif; font-weight: 800;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0; letter-spacing: -.03em; line-height: .9; margin: 0; }
.it { font-style: italic; font-weight: 500; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.serif { font-family: 'Fraunces', serif; font-variation-settings: 'opsz' 72, 'SOFT' 100; }
.gold { background-image: var(--goldgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.body { font-size: 30px; line-height: 1.4; color: var(--dim); margin: 0; font-weight: 400; }
.body b, .small b { color: var(--cream); font-weight: 600; }
.small { font-size: 23px; line-height: 1.42; color: var(--dim); margin: 0; }
.lbl { font: 700 18px/1 'Archivo'; font-stretch: 75%; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.num { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; color: var(--gold);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border: 1.5px solid var(--line);
  border-radius: 999px; font: 600 19px/1 'Archivo'; font-stretch: 85%; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-l); }
.rule { height: 1.5px; background: linear-gradient(90deg, var(--gold), transparent); }

/* ============ comparse (entrate / uscite) ============ */
.rv { opacity: 0; transform: translate3d(0, 44px, 0); filter: blur(8px);
  transition: opacity .8s var(--ease), transform 1.15s var(--ease), filter .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 95ms + 80ms); }
.rv.from-r { transform: translate3d(90px, 0, 0); }
.rv.from-l { transform: translate3d(-90px, 0, 0); }
.rv.zoom { transform: scale(.9); }
.rv.on { opacity: 1; transform: none; filter: blur(0); }
.rv.mask { opacity: 1; filter: none; transform: none; clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--ease), opacity .6s; transition-delay: calc(var(--d, 0) * 95ms + 80ms); }
.rv.mask.on { clip-path: inset(0 0 0 0); }
.slide.out .rv { opacity: 0; transform: translate3d(-130px, -14px, 0); filter: blur(12px);
  transition-duration: .42s, .55s, .42s; transition-delay: calc(var(--d, 0) * 20ms); }
.slide.out .rv.mask { clip-path: inset(0 100% 0 0); opacity: 0; transition-duration: .5s, .5s; }

/* titoli lettera per lettera */
.split .w { display: inline-block; white-space: nowrap; }
.split .ch { display: inline-block; padding: .14em .07em .18em; margin: -.14em -.07em -.18em;
  opacity: 0; transform: translate3d(0, .7em, 0) rotate(7deg);
  transition: transform 1.15s var(--ease), opacity .55s var(--ease);
  transition-delay: calc(var(--d, 0) * 95ms + var(--i) * 26ms + 80ms); }
.split.on .ch { opacity: 1; transform: none; }
.slide.out .split .ch { opacity: 0; transform: translate3d(-.5em, 0, 0) skewX(-8deg);
  transition-duration: .4s; transition-delay: calc(var(--i) * 9ms); }
.split.gold, .split .gold { background-image: none; }
.split.gold .ch, .split .gold .ch { background-image: var(--goldgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ============ foto ============ */
.ph { position: absolute; overflow: hidden; background: #2a0710; outline: 1.5px solid var(--line); outline-offset: 12px; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block; animation: kb 24s ease-in-out infinite alternate; }
.ph.kb2 img { animation-name: kb2; animation-duration: 28s; }
@keyframes kb  { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.17) translate(-2.2%, -1.6%); } }
@keyframes kb2 { from { transform: scale(1.16) translate(-2%, 1.2%); } to { transform: scale(1.04) translate(1.5%, 0); } }
.polaroid { position: absolute; background: var(--cream); padding: 14px 14px 46px; box-shadow: 0 30px 60px rgba(20,0,8,.45); }
.polaroid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.polaroid span { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center;
  font: italic 500 22px/1 'Fraunces'; color: #6D1832; }

/* oggetti 3D (WebM con trasparenza) */
.obj { position: absolute; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(20,0,8,.45)); }

/* ============ cornice fissa ============ */
#top { position: absolute; left: 120px; right: 120px; top: 40px; height: 76px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  transition: opacity .9s var(--ease), transform .9s var(--ease); }
#top.hide, #bot.hide { opacity: 0; transform: translateY(-16px); pointer-events: none; }
#bot.hide { transform: translateY(16px); }
.brand { display: flex; align-items: center; gap: 22px; }
.brand img { height: 76px; display: block; }
.brand .bt { border-left: 1.5px solid var(--line); padding-left: 22px; display: grid; gap: 8px; }
.brand .bt b { font: 700 17px/1 'Archivo'; font-stretch: 75%; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.brand .bt span { font: italic 400 20px/1 'Fraunces'; color: var(--dim); }
.where { display: flex; align-items: center; gap: 22px; }
.where #ctitle { font: 700 17px/1 'Archivo'; font-stretch: 75%; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.where .count { display: flex; align-items: baseline; gap: 6px; border-left: 1.5px solid var(--line); padding-left: 22px; }
.where .count b { font: italic 400 58px/1 'Fraunces'; font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; color: var(--gold); min-width: 64px; text-align: right; }
.where .count span { font: 500 20px/1 'Archivo'; color: var(--faint); }
#bot { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; z-index: 30; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.progress { position: absolute; left: 120px; right: 120px; top: 0; height: 2px; background: rgba(255,189,89,.16); }
.progress i { display: block; height: 100%; width: var(--p, 0%); background: var(--gold); transition: width 1.4s var(--ease); box-shadow: 0 0 12px rgba(255,189,89,.8); }
.ticker { position: absolute; left: 0; right: 0; top: 26px; overflow: hidden; white-space: nowrap; }
.ticker .tk { display: inline-block; animation: tick 70s linear infinite;
  font: 600 16px/1 'Archivo'; font-stretch: 80%; letter-spacing: .34em; text-transform: uppercase; color: rgba(255,189,89,.5); }
@keyframes tick { to { transform: translateX(-50%); } }

/* transizione: polvere d'oro su nero, fusa in "screen" */
#trans { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen;
  pointer-events: none; z-index: 60; opacity: 0; }
#trans.on { opacity: 1; }
#black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 90; transition: opacity .6s; }
#black.on { opacity: 1; }
#help { position: absolute; right: 60px; bottom: 100px; z-index: 95; width: 560px; padding: 34px 40px;
  background: rgba(30,3,12,.92); border: 1.5px solid var(--line); border-radius: 18px;
  font-size: 22px; line-height: 1.7; color: var(--dim); opacity: 0; transform: translateY(20px);
  transition: .4s var(--ease); pointer-events: none; }
#help.on { opacity: 1; transform: none; }
#help b { color: var(--gold); font-weight: 700; display: inline-block; min-width: 190px; }
#help h4 { margin: 0 0 12px; font: 700 18px/1 'Archivo'; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

/* ============ 1 · apertura ============ */
.s-open { z-index: 20; background: var(--bg); transition: opacity .8s var(--ease-io); }
.s-open.fade { opacity: 0; }
.vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.vid.vis { visibility: visible; }
#v-intro { z-index: 1; } #v-loop { z-index: 2; } #v-uscita { z-index: 3; }
.hint { position: absolute; left: 0; right: 0; bottom: 90px; text-align: center; z-index: 5;
  font: 600 17px/1 'Archivo'; font-stretch: 80%; letter-spacing: .4em; text-transform: uppercase; color: var(--gold);
  opacity: .5; animation: breathe 2.6s ease-in-out infinite; transition: opacity .5s; }
.s-open.started .hint { opacity: 0; animation: none; }
@keyframes breathe { 50% { opacity: .18; } }

/* ============ 2 · agorà ============ */
.s-agora .title { left: 120px; top: 168px; }
.s-agora .title .kicker { margin-bottom: 26px; }
.s-agora .title h2 { font-size: 250px; }
.s-agora .title .sub { margin-top: 18px; font-size: 54px; color: var(--cream); }
.sunbox { left: 960px; top: 150px; width: 840px; height: 420px; }
.sunbox svg { position: absolute; inset: 0; overflow: visible; }
.sunbox .arc { fill: none; stroke: rgba(255,189,89,.45); stroke-width: 2; stroke-dasharray: 2 12; stroke-linecap: round; }
.sunbox .hz { stroke: rgba(255,189,89,.35); stroke-width: 1.5; }
.sunbox .tag { position: absolute; transform: translate(-50%, 0); font: 700 16px/1 'Archivo'; font-stretch: 75%;
  letter-spacing: .3em; text-transform: uppercase; color: var(--faint); transition: color .8s; white-space: nowrap; }
.s-agora.st-1 .tag.t1, .s-agora.st-2 .tag.t2, .s-agora.st-3 .tag.t3 { color: var(--gold); }
.sun { position: absolute; left: 0; top: 0; width: 120px; height: 120px;
  offset-path: path('M 20 380 Q 420 -150 820 380'); offset-rotate: 0deg; offset-anchor: 50% 50%;
  offset-distance: 0%; opacity: 0; transition: offset-distance 1.9s var(--ease-io), opacity 1s; }
.sun i { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #FFF4D6, #FFC768 45%, #EE9A3E 80%);
  box-shadow: 0 0 60px 18px rgba(255,190,90,.55), 0 0 160px 60px rgba(255,170,70,.25); }
.sun::before { content: ''; position: absolute; inset: -70px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,200,110,.42) 0 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 46%, #000 50%, transparent 72%);
  mask: radial-gradient(circle, transparent 46%, #000 50%, transparent 72%);
  animation: spin 30s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.s-agora.st-1 .sun { offset-distance: 17%; opacity: 1; }
.s-agora.st-2 .sun { offset-distance: 50%; opacity: 1; }
.s-agora.st-3 .sun { offset-distance: 83%; opacity: 1; }
.s-agora.st-4 .sun { offset-distance: 100%; opacity: 0; }
.s-agora .sunbox svg, .s-agora .sunbox .tag { transition: opacity 1s; }
.s-agora.st-4 .sunbox svg, .s-agora.st-4 .sunbox .tag { opacity: 0; }
.phases { left: 120px; right: 120px; top: 612px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }
.phase { position: relative; }
.phase .ph { position: relative; height: 222px; outline-offset: 8px; }
.phase h3 { display: flex; align-items: baseline; gap: 16px; margin: 28px 0 10px; font-size: 56px; }
.phase h3 .num { font-size: 30px; }
.s-agora.st-1 .phase.on:not(.p1), .s-agora.st-2 .phase.on:not(.p2), .s-agora.st-3 .phase.on:not(.p3) { opacity: .38; filter: saturate(.4); }
.tickets { left: 1000px; top: 170px; display: flex; gap: 40px; }
.ticket { position: relative; width: 370px; height: 372px; padding: 30px 34px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255,189,89,.16), rgba(40,4,16,.55) 55%);
  border: 1.5px solid var(--gold);
  -webkit-mask: radial-gradient(circle 20px at 0 66%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
                radial-gradient(circle 20px at 100% 66%, transparent 97%, #000 100%) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 20px at 0 66%, transparent 97%, #000 100%) left / 51% 100% no-repeat,
        radial-gradient(circle 20px at 100% 66%, transparent 97%, #000 100%) right / 51% 100% no-repeat; }
.ticket .d { font-size: 176px; line-height: .8; margin: 14px 0 0; }
.ticket .m { font-size: 46px; margin-top: 6px; color: var(--cream); }
.ticket hr { position: absolute; left: 30px; right: 30px; top: 66%; margin: 0; border: 0; border-top: 2px dashed var(--line); }
.ticket .where2 { position: absolute; left: 34px; right: 34px; bottom: 30px; display: flex; align-items: baseline; gap: 12px; }
.ticket .where2 b { font: 800 32px/1 'Archivo'; font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.ticket .where2 span { font: italic 400 26px/1 'Fraunces'; color: var(--gold); }

/* ============ 3 · notte del futuro ============ */
.s-notte .title { left: 120px; top: 170px; width: 900px; }
.s-notte .title h2 { font-size: 172px; margin-top: 26px; }
.s-notte .lead { left: 120px; top: 600px; width: 800px; }
.s-notte .stat { left: 120px; top: 800px; display: flex; align-items: center; gap: 30px; }
.s-notte .stat .big { font-size: 210px; line-height: .75; }
.s-notte .stat .x { display: grid; gap: 10px; }
.s-notte .stat .x b { font: 500 46px/1 'Fraunces'; font-style: italic; color: var(--cream); }
.moon { right: 150px; top: 150px; width: 150px; height: 150px; border-radius: 50%;
  box-shadow: inset -34px 12px 0 0 #FFE9BF; filter: drop-shadow(0 0 26px rgba(255,226,170,.55)); animation: moonglow 6s ease-in-out infinite; }
@keyframes moonglow { 50% { filter: drop-shadow(0 0 46px rgba(255,226,170,.8)); } }
.const { left: 1010px; top: 260px; width: 800px; height: 700px; }
.const svg { position: absolute; inset: 0; overflow: visible; }
.const line { stroke: rgba(255,214,150,.55); stroke-width: 1.6; stroke-dasharray: 600; stroke-dashoffset: 600;
  transition: stroke-dashoffset 2.2s var(--ease-io); }
.const.on line { stroke-dashoffset: 0; }
.const line:nth-child(2) { transition-delay: .3s; } .const line:nth-child(3) { transition-delay: .6s; }
.const line:nth-child(4) { transition-delay: .9s; } .const line:nth-child(5) { transition-delay: 1.2s; }
.const line:nth-child(6) { transition-delay: 1.5s; }
.const .node { position: absolute; transform: translate(-50%, -50%); text-align: center; }
.const .node .st { width: 46px; height: 46px; margin: 0 auto 14px; background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 14px #FFD17E); animation: twinkle 3.2s ease-in-out infinite; }
.const .node:nth-child(3) .st { animation-delay: -1s; } .const .node:nth-child(4) .st { animation-delay: -2s; } .const .node:nth-child(5) .st { animation-delay: -.5s; }
@keyframes twinkle { 50% { transform: scale(.72) rotate(18deg); opacity: .7; } }
.const .node b { display: block; font: italic 500 44px/1 'Fraunces'; color: var(--cream); white-space: nowrap; }
.const .node span { display: block; margin-top: 8px; }
.const .node.center .st { width: 74px; height: 74px; }
.const .node.center b { color: var(--gold); }

/* ============ 4 · musica ============ */
.s-musica .title { left: 120px; top: 168px; width: 760px; }
.s-musica .title h2 { font-size: 132px; margin-top: 24px; }
.s-musica .stat { left: 120px; top: 496px; display: flex; align-items: center; gap: 26px; }
.s-musica .stat .big { font-size: 190px; line-height: .78; }
.s-musica .stat b { font: italic 500 44px/1.05 'Fraunces'; color: var(--cream); }
.points { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 46px; }
.points .pt .lbl { display: block; margin-bottom: 10px; }
.s-musica .points { left: 120px; top: 690px; width: 720px; }
.s-musica .main { left: 930px; top: 168px; width: 870px; height: 520px; }
.s-musica .pol { width: 300px; height: 380px; left: 870px; top: 560px; rotate: -6deg; }
.eq { display: flex; align-items: flex-end; gap: 7px; height: 130px; }
.eq i { flex: 1; height: 100%; background: linear-gradient(0deg, var(--gold-d), var(--gold-l)); border-radius: 3px 3px 0 0;
  transform-origin: bottom; animation: eq 1.1s ease-in-out infinite alternate; opacity: .9; }
@keyframes eq { 0% { transform: scaleY(.12); } 100% { transform: scaleY(var(--h, .9)); } }
.s-musica .eq { left: 1220px; top: 790px; width: 580px; }
.s-musica .eqlbl { left: 1220px; top: 948px; }

/* ============ 5 · libri ============ */
.s-libri .title { left: 120px; top: 168px; }
.s-libri .title h2 { font-size: 230px; margin-top: 22px; }
.s-libri .title .sub { font-size: 52px; color: var(--cream); margin-top: 6px; }
.s-libri .obj { left: 1340px; top: 90px; width: 480px; height: 480px; }
.cards3 { left: 120px; right: 120px; top: 540px; display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 40px; }
.card { position: relative; padding: 34px 36px 36px; background: var(--card); border: 1.5px solid rgba(255,189,89,.22); border-radius: 6px; }
.card::before { content: ''; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 4px; background: var(--goldgrad); }
.card h3 { margin: 14px 0 14px; font-size: 48px; }
.card .num { font-size: 34px; }
.card .hl { margin-top: 18px; font: italic 500 30px/1.15 'Fraunces'; }
.search { margin-top: 20px; }
.search .bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 999px; background: rgba(255,235,210,.94); color: #3a0a18; font: 500 24px/1 'Archivo'; }
.search .bar svg { flex: none; }
.search .caret { display: inline-block; width: 2px; height: 26px; background: #6D1832; margin-left: 2px; animation: blink 1s steps(1) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }
.search .res { margin-top: 12px; padding: 14px 20px; border-left: 3px solid var(--gold); background: rgba(255,189,89,.08);
  display: flex; justify-content: space-between; align-items: baseline; opacity: 0; transform: translateY(8px); transition: .5s var(--ease); }
.search .res.show { opacity: 1; transform: none; }
.search .res b { font: italic 500 26px/1.1 'Fraunces'; color: var(--cream); }
.search .res span { font: 600 16px/1 'Archivo'; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.search .note { margin-top: 10px; font: italic 400 17px/1 'Fraunces'; color: var(--faint); }

/* ============ 6 · digitalizzazione ============ */
.s-digit .title { left: 120px; top: 168px; width: 900px; }
.s-digit .title h2 { font-size: 168px; margin-top: 24px; }
.s-digit .lead { left: 120px; top: 560px; width: 860px; }
.goals { left: 120px; top: 790px; width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.goal { border-top: 1.5px solid var(--line); padding-top: 18px; }
.goal .num { font-size: 30px; display: block; margin-bottom: 8px; }
.goal b { font: 600 26px/1.2 'Archivo'; color: var(--cream); }
.s-digit .foot { left: 120px; top: 955px; }
.bt-vis { left: 1120px; top: 180px; width: 680px; height: 700px; }
.books { position: absolute; left: 140px; top: 120px; width: 400px; height: 400px; }
.books i { position: absolute; left: 0; height: 58px; border-radius: 6px; animation: bk 8s var(--ease-io) infinite;
  box-shadow: inset 0 -8px 0 rgba(0,0,0,.18), 0 10px 20px rgba(20,0,8,.35); }
.books i::after { content: ''; position: absolute; right: 18px; top: 10px; bottom: 10px; width: 64%;
  background: repeating-linear-gradient(0deg, rgba(255,240,215,.9) 0 3px, rgba(230,205,170,.9) 3px 6px); border-radius: 0 3px 3px 0; }
.books i:nth-child(1) { top: 330px; width: 390px; left: 4px;  background: linear-gradient(90deg, #8a2240, #5a1027); animation-delay: 0s; }
.books i:nth-child(2) { top: 268px; width: 360px; left: 22px; background: var(--goldgrad); animation-delay: .08s; }
.books i:nth-child(3) { top: 206px; width: 376px; left: 8px;  background: linear-gradient(90deg, #f3e2c8, #d8bf9b); animation-delay: .16s; }
.books i:nth-child(4) { top: 144px; width: 340px; left: 34px; background: linear-gradient(90deg, #8a2240, #5a1027); animation-delay: .24s; }
.books i:nth-child(5) { top: 82px;  width: 356px; left: 18px; background: var(--goldgrad); animation-delay: .32s; }
.books i:nth-child(6) { top: 20px;  width: 320px; left: 40px; background: linear-gradient(90deg, #f3e2c8, #d8bf9b); animation-delay: .40s; }
@keyframes bk {
  0%, 32% { transform: none; opacity: 1; }
  46% { transform: translate(40px, 30px) scale(.35, .2); opacity: 0; }
  88% { transform: translate(0, -260px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.tablet { position: absolute; left: 190px; top: 70px; width: 300px; height: 420px; border-radius: 30px;
  border: 12px solid transparent; background: linear-gradient(#2a0712, #3b0a1b) padding-box, var(--goldgrad) border-box;
  box-shadow: 0 0 80px rgba(255,190,90,.35); animation: tab 8s var(--ease-io) infinite; padding: 34px 28px; }
.tablet i { display: block; height: 10px; margin-bottom: 16px; border-radius: 5px; background: rgba(255,214,150,.6); transform-origin: left; animation: tl 8s var(--ease) infinite; }
.tablet i.h { height: 26px; width: 70%; background: var(--gold); margin-bottom: 26px; }
.tablet i:nth-child(3) { width: 92%; } .tablet i:nth-child(4) { width: 80%; } .tablet i:nth-child(5) { width: 96%; }
.tablet i:nth-child(6) { width: 60%; } .tablet i:nth-child(7) { width: 88%; } .tablet i:nth-child(8) { width: 74%; }
@keyframes tab { 0%, 40% { transform: scale(.7) rotate(-6deg); opacity: 0; } 52%, 84% { transform: none; opacity: 1; } 96%, 100% { transform: scale(.85) translateY(30px); opacity: 0; } }
@keyframes tl { 0%, 52% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.weight { position: absolute; left: 60px; right: 60px; bottom: 40px; }
.weight .track { height: 14px; border-radius: 7px; background: rgba(255,189,89,.14); overflow: hidden; }
.weight .track i { display: block; height: 100%; width: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--gold-d), var(--gold-l));
  transform-origin: left; animation: wgt 8s var(--ease-io) infinite; }
@keyframes wgt { 0%, 36% { transform: scaleX(1); } 54%, 86% { transform: scaleX(.28); } 100% { transform: scaleX(1); } }

/* ============ 7 · podcast ============ */
.s-podcast .title { left: 120px; top: 168px; width: 560px; }
.s-podcast .title h2 { font-size: 150px; margin-top: 24px; }
.s-podcast .title .sub { font-size: 40px; margin-top: 16px; color: var(--cream); }
.s-podcast .obj { left: 70px; top: 470px; width: 500px; height: 500px; }
.s-podcast .wave { left: 120px; top: 930px; width: 470px; height: 50px; gap: 5px; }
.pcards { left: 660px; right: 120px; top: 168px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pcard { height: 610px; }
.pcard .head { display: flex; justify-content: space-between; align-items: flex-start; }
.pcard .num { font-size: 70px; line-height: .8; }
.pcard h3 { margin: 18px 0 22px; font-size: 64px; }
.pcard dl { margin: 0; display: grid; gap: 20px; }
.pcard dt { margin-bottom: 6px; }
.pcard dd { margin: 0; font-size: 25px; line-height: 1.4; color: var(--dim); }
.flow { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 6px; white-space: nowrap; }
.flow span { padding: 9px 10px; border-radius: 8px; border: 1.5px solid var(--line); font: 600 18px/1 'Archivo'; font-stretch: 85%;
  color: var(--cream); animation: flow 4s infinite; }
.flow em { font-style: normal; color: var(--gold); font-size: 18px; }
.flow span:nth-of-type(2) { animation-delay: 1s; } .flow span:nth-of-type(3) { animation-delay: 2s; } .flow span:nth-of-type(4) { animation-delay: 3s; }
@keyframes flow { 0%, 22% { background: var(--gold); color: #3a0a18; border-color: var(--gold); } 26%, 100% { background: transparent; } }
.quote { left: 660px; right: 120px; top: 860px; display: flex; align-items: center; gap: 30px; }
.quote .q { font: italic 500 36px/1.2 'Fraunces'; color: var(--cream); }
.quote .q b { font-weight: 600; }
.quote .lbl { flex: none; }
.s-podcast.st-3 .pcard { opacity: .9; }

/* ============ 8 · gali-miche card ============ */
.cardvis { left: 40px; top: 210px; width: 860px; height: 678px; }
.cardvis video, .cardvis img.vfb { position: absolute; inset: 0; width: 100%; height: 100%; }
.cardvis .halo { position: absolute; left: 50%; top: 52%; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,189,89,.16) 0 4deg, transparent 4deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%);
  animation: spin 50s linear infinite; }
.s-card .title { left: 930px; top: 168px; width: 870px; }
.s-card .title h2 { font-size: 136px; margin-top: 24px; }
.s-card .desc { left: 930px; top: 520px; width: 820px; }
.s-card .desc .chips { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.partners { left: 930px; top: 490px; width: 870px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pt2 { position: relative; padding: 20px 24px 22px; background: var(--card); border: 1.5px solid rgba(255,189,89,.22); border-radius: 6px; overflow: hidden; }
.pt2::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,226,166,.16), transparent); animation: sheen 6s ease-in-out infinite; }
.pt2:nth-child(2)::after { animation-delay: .6s; } .pt2:nth-child(3)::after { animation-delay: 1.2s; } .pt2:nth-child(4)::after { animation-delay: 1.8s; }
.pt2:nth-child(5)::after { animation-delay: 2.4s; } .pt2:nth-child(6)::after { animation-delay: 3s; }
@keyframes sheen { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.pt2 .pc { font: 800 74px/.9 'Fraunces'; font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.03em; }
.pt2 .pc small { font-size: .42em; letter-spacing: 0; }
.pt2 .nm { margin-top: 10px; font: 800 22px/1.1 'Archivo'; font-stretch: 80%; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.pt2 .dt { margin-top: 8px; font-size: 18px; line-height: 1.35; color: var(--dim); }
.pt2.wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 6px 26px; align-items: start; }
.pt2.full { grid-column: span 3; display: flex; align-items: center; gap: 28px; }
.pt2.full .chip { font-size: 16px; padding: 8px 14px; }

/* ============ 9 · tornei ============ */
.marq { left: 0; right: 0; white-space: nowrap; pointer-events: none; }
.marq div { display: inline-block; animation: tick 80s linear infinite;
  font: 900 190px/1 'Fraunces'; font-variation-settings: 'opsz' 144, 'SOFT' 100; letter-spacing: -.02em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,189,89,.15); }
.marq.rev div { animation-direction: reverse; animation-duration: 95s; }
.s-tornei .title { left: 120px; top: 168px; }
.s-tornei .title h2 { font-size: 260px; margin-top: 18px; }
.s-tornei .title .sub { font-size: 44px; color: var(--cream); margin-top: 4px; }
.tlist { left: 120px; top: 560px; width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.tlist li { list-style: none; display: grid; grid-template-columns: 56px 1fr; align-items: baseline; padding: 15px 0; border-bottom: 1.5px solid rgba(255,189,89,.2); }
.tlist .num { font-size: 26px; }
.tlist b { font: 700 40px/1 'Fraunces'; font-variation-settings: 'opsz' 72, 'SOFT' 100; color: var(--cream); }
.tlist span.lbl { font-size: 15px; }
.tlist li.star b { background-image: var(--goldgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tlist ul { margin: 0; padding: 0; }
.s-tornei .polaroid { animation: float 7s ease-in-out infinite; }
.s-tornei .polaroid:nth-of-type(2) { animation-delay: -2.3s; } .s-tornei .polaroid:nth-of-type(3) { animation-delay: -4.6s; }
@keyframes float { 50% { translate: 0 -14px; } }
.s-tornei .obj { left: 1360px; top: 560px; width: 470px; height: 470px; }

/* ============ 10 · feste ============ */
.spots { left: 50%; top: 50%; width: 2600px; height: 2600px; margin: -1300px 0 0 -1300px; animation: spin 60s linear infinite; pointer-events: none; opacity: .55; }
.spots i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, rgba(255,230,180,.9), rgba(255,189,89,0) 70%); }
.s-feste .title { left: 120px; top: 168px; }
.s-feste .title h2 { font-size: 140px; margin-top: 22px; }
.s-feste .obj { left: 600px; top: -40px; width: 360px; height: 360px; }
.events { left: 120px; top: 520px; width: 720px; }
.ev { display: grid; grid-template-columns: 54px 1fr; padding: 9px 0; border-bottom: 1.5px solid rgba(255,189,89,.18); }
.ev .num { font-size: 26px; padding-top: 8px; }
.ev b { display: block; font: 700 36px/1.05 'Fraunces'; font-variation-settings: 'opsz' 72, 'SOFT' 100; color: var(--cream); transition: color .7s; }
.ev span { display: block; margin-top: 4px; font-size: 19px; line-height: 1.3; color: var(--dim); }
.s-feste.st-1 .ev.on:not(.e1), .s-feste.st-2 .ev.on:not(.e2), .s-feste.st-3 .ev.on:not(.e3),
.s-feste.st-4 .ev.on:not(.e4), .s-feste.st-5 .ev.on:not(.e5) { opacity: .34; filter: none; }
.s-feste.st-1 .ev.e1 b, .s-feste.st-2 .ev.e2 b, .s-feste.st-3 .ev.e3 b, .s-feste.st-4 .ev.e4 b, .s-feste.st-5 .ev.e5 b {
  background-image: var(--goldgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mosaic { left: 900px; top: 168px; width: 900px; height: 800px; }
.mg { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 1.1s var(--ease), transform 1.6s var(--ease); }
.mg .ph { outline-offset: 8px; }
.mg .a { left: 0; top: 0; width: 540px; height: 800px; }
.mg .b { left: 570px; top: 0; width: 330px; height: 385px; }
.mg .c { left: 570px; top: 415px; width: 330px; height: 385px; }
.s-feste.st-0 .mg.g0, .s-feste.st-1 .mg.g1, .s-feste.st-2 .mg.g2, .s-feste.st-3 .mg.g3, .s-feste.st-4 .mg.g4, .s-feste.st-5 .mg.g5 { opacity: 1; transform: none; }
.mg .cap { position: absolute; left: 22px; bottom: 20px; z-index: 2; }

/* ============ 11 · merch ============ */
.s-merch .title { left: 120px; top: 168px; width: 1000px; }
.s-merch .title h2 { font-size: 150px; margin-top: 22px; }
.s-merch .title .sub { margin-top: 18px; font-size: 32px; color: var(--cream); }
.s-merch .credit { left: 120px; top: 560px; display: flex; align-items: center; gap: 22px; }
.s-merch .credit img { height: 40px; display: block; margin-top: 4px; }
.s-merch .credit em { font: 400 34px/1 'Archivo'; font-style: normal; color: var(--gold); margin: 0 -4px; }
.s-merch .credit b { font: italic 900 30px/1 'Archivo'; font-stretch: 85%; letter-spacing: .02em; text-transform: uppercase; color: var(--cream); }
.s-merch .credit span { font: italic 400 26px/1 'Fraunces'; color: var(--dim); }
.mblocks { left: 120px; top: 650px; width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 48px; }
.mb { border-top: 1.5px solid var(--line); padding-top: 16px; }
.mb h4 { margin: 0 0 8px; display: flex; gap: 14px; align-items: baseline; font: 700 32px/1 'Fraunces'; font-variation-settings: 'opsz' 72, 'SOFT' 100; color: var(--cream); }
.mb h4 .num { font-size: 24px; }
.mb p { margin: 0; font-size: 21px; line-height: 1.38; color: var(--dim); }
/* i quattro modelli (immagini in assets/merch: per i mockup con la grafica basta sostituire i file) */
.mgrid { left: 1180px; top: 168px; width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px; }
.mm { margin: 0; animation: float 7s ease-in-out infinite; }
.mm:nth-child(2) { animation-delay: -1.8s; } .mm:nth-child(3) { animation-delay: -3.6s; } .mm:nth-child(4) { animation-delay: -5.4s; }
.mm img { display: block; width: 100%; aspect-ratio: 540 / 592; object-fit: cover; border-radius: 10px;
  box-shadow: 0 24px 50px -18px rgba(20,0,6,.75); }
.mm figcaption { margin-top: 14px; font: italic 900 30px/1 'Archivo'; font-stretch: 85%; text-transform: uppercase; color: var(--cream); }
  border: 1.5px solid var(--line); background: radial-gradient(circle, rgba(255,189,89,.16), transparent 70%); }

/* ============ 12 · chiusura ============ */
.s-close .vwrap { position: absolute; inset: 0; transition: transform 1.8s var(--ease);
  -webkit-mask: radial-gradient(48% 50% at 50% 50%, #000 62%, transparent 100%); mask: radial-gradient(48% 50% at 50% 50%, #000 62%, transparent 100%); }
.s-close.st-1 .vwrap { transform: translateX(-440px) scale(.9); }
#v-chiusura { z-index: 1; } #v-loop2 { z-index: 2; }
.s-close .ctext { left: 1010px; top: 200px; width: 800px; }
.s-close .grazie { font-size: 210px; }
.s-close .vota { margin-top: 70px; }
.s-close .vota .lbl { font-size: 26px; letter-spacing: .5em; }
.s-close .vota h2 { font-size: 170px; margin-top: 18px; }
.s-close .motto { margin-top: 44px; display: flex; align-items: center; gap: 20px; font: italic 400 34px/1 'Fraunces'; color: var(--dim); }
.s-close .motto .rule { width: 90px; }

/* note per chi parla: mai visibili sul proiettore */
.notes { display: none; }

/* solo per le prove (?nt): niente transizioni */
.nt *, .nt *::before, .nt *::after { transition: none !important; }
.split .ch.k { margin-right: -.2em; }

/* ================= diretta sui telefoni (js/sync.js) ================= */
.live-badge { position: fixed; top: 10px; right: 12px; z-index: 200; padding: 6px 12px; border-radius: 999px;
  font: 600 12px/1 'Archivo', system-ui, sans-serif; letter-spacing: .04em; color: var(--cream);
  background: rgba(20,2,8,.62); border: 1px solid rgba(255,189,89,.35); backdrop-filter: blur(6px);
  transition: opacity .6s; cursor: pointer; user-select: none; }
.live-badge[data-state="ok"] { color: #9be59b; }
.live-badge[data-state="wait"] { color: var(--gold); }
.live-badge[data-state="err"] { color: #ff8a8a; }
.live-pubblico .live-badge[data-state="ok"] { opacity: 0; pointer-events: none; transition-delay: 2.5s; }
.live-regia .live-badge[data-state="ok"] { opacity: .55; }
.live-regia .live-badge:hover { opacity: 1; }

/* attesa: finché la regia non entra */
.live-wait { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: min(16px, 3vh); padding: 16px; text-align: center; background: radial-gradient(circle at 70% 20%, #8a2a45, var(--bg, #6D1832) 60%);
  color: var(--cream); font-family: 'Archivo', system-ui, sans-serif; transition: opacity .7s; }
.live-wait.off { opacity: 0; pointer-events: none; }
.live-wait img { width: auto; height: min(170px, 26vh, 40vw); }
.live-wait .lw-t { margin: 0; max-width: 16em; font: 700 clamp(26px, 7vw, 44px)/1.12 'Fraunces', serif; color: var(--gold); }
.live-wait .lw-s { margin: 0; max-width: 320px; font-size: 14px; line-height: 1.45; opacity: .75; }
.live-wait.pending .lw-t, .live-wait.pending .lw-s { visibility: hidden; }
.live-wait .lw-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--gold); animation: lwpulse 1.6s ease-in-out infinite; }
@keyframes lwpulse { 50% { opacity: .25; } }

.live-rotate { display: none; }
@media (orientation: portrait) {
  .live-pubblico .live-rotate { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(20,2,8,.7); color: var(--cream);
    font: 600 14px/1.2 'Archivo', system-ui, sans-serif; pointer-events: none; }
  .live-pubblico .live-rotate p { margin: 0; }
  .live-pubblico .live-rotate .lr-ico { font-size: 22px; animation: lrspin 2.4s var(--ease-io) infinite; }
}
@keyframes lrspin { 0%, 30% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }
.live-pubblico body.nocursor, .live-pubblico #stage { cursor: default; }

.live-qr { position: absolute; inset: 0; z-index: 96; display: grid; place-items: center; background: rgba(30,3,12,.82);
  opacity: 0; pointer-events: none; transition: opacity .4s; }
.live-qr.on { opacity: 1; pointer-events: auto; }
.live-qr .lq-box { padding: 48px 56px 40px; border-radius: 18px; background: var(--cream, #f8ebda); color: #3a0816; text-align: center; }
.live-qr .lq-code { width: 560px; height: 560px; }
.live-qr .lq-code svg { width: 100%; height: 100%; }
.live-qr .lq-t { margin: 22px 0 6px; font: 700 40px/1.1 'Fraunces', serif; }
.live-qr .lq-u { margin: 0; font: 600 30px/1.2 'Archivo', sans-serif; letter-spacing: .02em; opacity: .75; }

/* regia: schermata iniziale con QR e "Inizia presentazione" */
.live-start { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; gap: clamp(24px, 6vw, 90px);
  padding: 24px 16px; flex-wrap: wrap; background: radial-gradient(circle at 70% 20%, #8a2a45, var(--bg, #6D1832) 60%);
  color: var(--cream); font-family: 'Archivo', system-ui, sans-serif; transition: opacity .6s; overflow: auto; }
.live-start.off { opacity: 0; pointer-events: none; }
.live-start .ls-qr { padding: 18px 18px 12px; border-radius: 16px; background: var(--cream); color: #3a0816; text-align: center; }
.live-start .ls-code { width: min(340px, 70vw, 52vh); aspect-ratio: 1; }
.live-start .ls-code svg { width: 100%; height: 100%; display: block; }
.live-start .ls-qr p { margin: 8px 0 0; font: 600 15px/1.2 'Archivo', sans-serif; opacity: .75; word-break: break-all; }
.live-start .ls-side { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 420px; text-align: center; }
.live-start .ls-side img { height: min(110px, 16vh); width: auto; }
.live-start .ls-t { margin: 0; font: 700 14px/1 'Archivo', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.live-start .ls-n { margin: 0; font-size: 16px; opacity: .85; }
.live-start .ls-go { padding: 22px 46px; border: 0; border-radius: 999px; background: var(--goldgrad); color: #3a0816; cursor: pointer;
  font: 800 clamp(20px, 3vw, 28px)/1 'Archivo', system-ui, sans-serif; box-shadow: 0 12px 40px rgba(20,0,8,.45); transition: transform .15s; }
.live-start .ls-go:hover { transform: scale(1.04); }
.live-start.pending .ls-go { opacity: .45; cursor: wait; }
.live-start .ls-s { margin: 0; font-size: 13px; line-height: 1.5; opacity: .7; }
.live-stop { position: fixed; top: 10px; right: 12px; z-index: 210; display: none; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,138,138,.7);
  background: rgba(120,14,30,.85); color: #ffd0d0; font: 700 14px/1 'Archivo', system-ui, sans-serif; cursor: pointer; opacity: .85;
  box-shadow: 0 4px 16px rgba(20,0,8,.4); transition: opacity .2s, background .2s; }
.live-stop.on { display: block; }
.live-stop:hover { opacity: 1; background: #b0182f; color: #fff; }
.live-regia .live-badge { right: 140px; top: 15px; }
.live-start .ls-msg { margin: 0; max-width: 380px; font-size: 14px; line-height: 1.4; }
.live-start .ls-msg:empty { display: none; }
.live-start .ls-msg[data-state="ok"] { padding: 10px 14px; border-radius: 10px; background: rgba(60,160,90,.22); border: 1px solid rgba(155,229,155,.5); color: #c9f5c9; }
.live-start .ls-msg[data-state="wait"] { color: var(--gold); }

/* ================= telefoni ================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* le slide non in onda sono spente del tutto: niente livelli grafici né animazioni in memoria */
html.lite .slide:not(.cur) { display: none; }
/* frecce ai lati + invito a girare lo schermo */
.nav-hint { position: fixed; top: 50%; z-index: 140; width: 34px; height: 64px; margin-top: -32px; display: flex; align-items: center; justify-content: center;
  font: 300 40px/1 system-ui, sans-serif; color: var(--cream); background: rgba(20,2,8,.28); opacity: .55; pointer-events: none; }
.nav-hint.nh-l { left: 0; border-radius: 0 12px 12px 0; }
.nav-hint.nh-r { right: 0; border-radius: 12px 0 0 12px; }
html.live-pubblico .nav-hint { display: none; }
@media (orientation: portrait) {
  html.lite .live-rotate { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: rgba(20,2,8,.7); color: var(--cream);
    font: 600 14px/1.2 'Archivo', system-ui, sans-serif; pointer-events: none; }
  html.lite .live-rotate p { margin: 0; }
  html.lite .live-rotate .lr-ico { font-size: 22px; animation: lrspin 2.4s var(--ease-io) infinite; }
}

/* iPhone / iPad. Di norma restano tutte le animazioni: si spegne solo la clip di transizione in fusione. */
html.ios-noclip #trans, html.ios .grain { display: none !important; }
/* ?effetti=min: versione ridotta al minimo, da usare solo se un iPhone fa ancora fatica */
html.ios-min .rv, html.ios-min .slide.out .rv { filter: none !important; }
html.ios-min .ph img { animation: none !important; }
html.ios-min .obj, html.ios-min .moon, html.ios-min .const .node .st { filter: none !important; }
html.ios-min .moon { animation: none !important; box-shadow: inset -34px 12px 0 0 #FFE9BF, 0 0 40px 6px rgba(255,226,170,.35); }
html.ios-min .spots, html.ios-min .sun::before, html.ios-min .cardvis .halo { animation: none !important; }
html.ios-min .s-tornei .polaroid, html.ios-min .mm { animation: none !important; }

/* apertura per chi guarda da solo: invito a continuare dopo l'intro, pulsante "Salta intro" dalla seconda visita */
.s-open.cont .hint { opacity: .5; animation: breathe 2.6s ease-in-out infinite; }
.skip-intro { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 160; display: none;
  padding: 11px 20px; border-radius: 999px; border: 1px solid rgba(255,189,89,.55); background: rgba(20,2,8,.6); color: var(--cream);
  font: 600 15px/1 'Archivo', system-ui, sans-serif; letter-spacing: .03em; cursor: pointer; }
.skip-intro.on { display: block; }
.skip-intro:hover { background: rgba(60,8,22,.85); border-color: var(--gold); }