/* ==========================================================================
   VARIEGATO · Halloween Costume Party
   Mobile first: gli stili di base sono pensati per il telefono,
   le media query (min-width) adattano tablet e computer.
   ========================================================================== */

/* ---------- Font ---------- */
@font-face {
  font-family: "Another Danger";
  src: url("../assets/fonts/another-danger.woff2") format("woff2"),
       url("../assets/fonts/another-danger.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  src: url("../assets/fonts/oswald-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cinzel (SIL Open Font License): le scritte dei pulsanti fantasy */
@font-face {
  font-family: "Cinzel";
  src: url("../assets/fonts/cinzel-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* spostamento animabile del medaglione quando compaiono i testi */
@property --med-shift { syntax: "<length>"; inherits: true; initial-value: 0px; }

/* ---------- Token ---------- */
:root {
  color-scheme: dark;

  --font-display: "Another Danger", "Oswald", Impact, "Arial Narrow", sans-serif;
  --font-body: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-fantasy: "Cinzel", "Trajan Pro", "Times New Roman", serif;

  --ink: #f6efe9;
  --ink-dim: #cdbdb9;
  --blood-hi: #ff4f55;
  --blood: #c4121d;
  --room-blue: #3f8cff;
  --room-red: #f02c37;

  --vh: 1vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* home: unità della scena = 1 pixel della foto originale (735 x 1045) */
  --u: max(calc(100vw / 735), calc(var(--vh) * 100 / 1045));
  --logo-w: min(80vw, calc(var(--vh) * 42 * 925 / 803), 540px);
  --bear-h: clamp(62px, calc(var(--vh) * 14.5), 150px);
  --ground: calc(max(12px, calc(var(--vh) * 2.4)) + var(--safe-bottom));

  /* pagina 2: misure del medaglione, aggiornate da main.js in base allo schermo */
  --med-w: 86vw;
  --med-top: 0px;
  --text-top: 70%;
  --med-shift-revealed: 0px;
  --fx: 0%;
  --ft: 0%;
  --fb: 0%;

  /* pulsanti fantasy (targa in metallo): larghezza sul telefono */
  --btn-w: min(330px, calc(100vw - 44px));
}
@supports (height: 100svh) {
  :root { --vh: 1svh; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #000;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg, canvas { display: block; max-width: 100%; }
img { -webkit-touch-callout: none; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* tre pagine a tutto schermo: si vede solo quella attiva */
.home,
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
}
.home { z-index: 2; }
.stage { z-index: 1; background: #000; }
.js .stage { visibility: hidden; }
[data-view="stage"] .home,
[data-view="info"] .home { visibility: hidden; }
[data-view="stage"] .stage { visibility: visible; }

/* ==========================================================================
   PAGINA 1 · HOME — cielo con nuvole gommose
   ========================================================================== */
.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #5872af 0%, #5f78b4 22%, #6782ba 48%, #7490c2 72%, #8aa4cf 100%);
}
/* ogni nuvola: --w larghezza, --x/--y angolo in alto a sinistra, in pixel della foto originale */
.cl {
  position: absolute;
  left: calc(50% + (var(--x) - 367.5) * var(--u));
  top: calc(50% + (var(--y) - 522.5) * var(--u));
  width: calc(var(--w) * var(--u));
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* nuvole soffici ai bordi: in verticale restano tagliate come nella foto,
   sugli schermi larghi si appoggiano ai bordi dello schermo */
.cl--tl   { --w: 315.5; left: min(0px, calc(50% - 367.5 * var(--u))); top: min(0px, calc(50% - 522.5 * var(--u))); }
.cl--rtop { --w: 134.25; --y: 99.75;  left: auto; right: min(0px, calc(50% - 367.5 * var(--u))); }
.cl--rmid { --w: 104.75; --y: 429.25; left: auto; right: min(0px, calc(50% - 367.5 * var(--u))); }
.cl--e1   { --w: 53.75; --y: 390.75; left: min(0px, calc(50% - 367.5 * var(--u))); }
.cl--e2   { --w: 32.5;  --y: 633.5;  left: min(0px, calc(50% - 367.5 * var(--u))); }
.cl--puff { --w: 70.5;  --x: 285.5; --y: 352.75; }

/* nuvole lucide: in verticale incorniciano logo e pulsante */
.cl--g1 { --w: 325;    --x: 512;  --y: 18; }     /* grande, in alto a destra */
.cl--g2 { --w: 319.5;  --x: -96;  --y: 515; }    /* grande, a sinistra del pulsante */
.cl--g3 { --w: 215.75; --x: 560;  --y: 600; }    /* media, a destra in basso */
.cl--g4 { --w: 131;    --x: 98;   --y: 92; }     /* media, in alto a sinistra */
.cl--g5 { --w: 91;     --x: 258;  --y: 742; }
.cl--g6 { --w: 74.25;  --x: 520;  --y: 470; }
.cl--g7 { --w: 65;     --x: 420;  --y: 96; }
.cl--g8 { --w: 35.5;   --x: 150;  --y: 462; }

.floor {
  position: absolute;
  left: 50%;
  top: calc(50% + (722 - 522.5) * var(--u));
  width: calc(735 * var(--u));
  height: calc(323 * var(--u));
  transform: translateX(-50%);
  pointer-events: none;
}
/* il "pavimento" di nuvole si ripete a specchio sugli schermi larghi */
.floor__tile {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
.floor__tile--m1 { left: -100%; transform: scaleX(-1); }
.floor__tile--p1 { left: 100%;  transform: scaleX(-1); }
.floor__tile--m2 { left: -200%; }
.floor__tile--p2 { left: 200%; }

/* le nuvole lucide galleggiano piano */
.js .gl { animation: float-a 9s ease-in-out infinite; will-change: transform; }
.js .cl--g2 { animation-name: float-b; animation-duration: 11s; animation-delay: -3s; }
.js .cl--g3 { animation-duration: 8s; animation-delay: -5s; }
.js .cl--g4 { animation-name: float-b; animation-duration: 7s; animation-delay: -1s; }
.js .cl--g5 { animation-duration: 6.5s; animation-delay: -2s; }
.js .cl--g6 { animation-name: float-b; animation-duration: 7.5s; animation-delay: -4s; }
.js .cl--g7 { animation-duration: 6s; animation-delay: -1.5s; }
.js .cl--g8 { animation-name: float-b; animation-duration: 5.5s; }
@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, calc(var(--u) * -9), 0) rotate(1.2deg); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, calc(var(--u) * -6), 0) rotate(-1deg); }
  50%      { transform: translate3d(calc(var(--u) * 4), calc(var(--u) * 5), 0) rotate(.8deg); }
}

/* ---------- logo e pulsante ---------- */
.hero {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* in basso lo spazio per gli orsetti che camminano */
  padding: calc(var(--safe-top) + var(--vh) * 3) 16px calc(var(--bear-h) * 1.02 + var(--ground) + var(--vh) * 3);
  pointer-events: none;
}
.hero__brand { margin: 0; line-height: 0; }
.hero__logo {
  width: var(--logo-w);
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(60, 10, 70, .38)) drop-shadow(0 0 2px rgba(255, 255, 255, .4));
  user-select: none;
  -webkit-user-drag: none;
}
.js .hero__logo { animation: logo-in 1.3s var(--ease-out) both; }
@keyframes logo-in {
  from { opacity: 0; transform: translateY(-14px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* pulsante "gelatina" nel magenta del logo */
.enter {
  --press: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(max(300px, 25vw), 76vw, 440px);
  height: clamp(52px, calc(var(--vh) * 7.4), 68px);
  /* sopra il pulsante lo spazio per i due orsetti in piedi */
  margin-top: calc(var(--bear-h) * 1.1);
  padding: 0 38px;
  border-radius: 999px;
  background:
    radial-gradient(90% 60% at 50% 112%, rgba(255, 150, 205, .55), rgba(255, 150, 205, 0) 70%),
    linear-gradient(180deg, #ff9ccb 0%, #f2559f 30%, #d82a78 60%, #a3155a 88%, #86104a 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .75),
    inset 0 -7px 14px rgba(105, 8, 52, .55),
    inset 0 0 0 1px rgba(255, 210, 232, .45),
    0 0 0 3px rgba(255, 255, 255, .28),
    0 14px 26px -10px rgba(120, 10, 70, .75),
    0 0 34px rgba(255, 110, 180, .35);
  color: #fff;
  font-family: var(--font-body);
  font-size: clamp(17px, calc(var(--vh) * 1.6 + 9px), 23px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .32em;
  text-indent: .32em;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(110, 0, 48, .5), 0 0 16px rgba(255, 190, 225, .65);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform-origin: 50% 100%;
  transform: translateY(calc(var(--press) * 3px)) scale(calc(1 + var(--press) * .05), calc(1 - var(--press) * .1));
  transition: filter .3s ease;
}
/* riflesso lucido della gelatina */
.enter::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 8%;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .06));
  pointer-events: none;
}
/* brillio che attraversa il pulsante di tanto in tanto */
.enter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%);
  background-size: 250% 100%;
  background-position: 120% 0;
  pointer-events: none;
}
.js .enter::after { animation: shine 4.5s ease-in-out 1.6s infinite; }
@keyframes shine {
  0%, 62%   { background-position: 120% 0; }
  92%, 100% { background-position: -20% 0; }
}
.enter__label { position: relative; }
.enter:active { --press: .6; }
.enter:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
.is-leaving .enter { --press: .8; filter: brightness(1.15); }
@media (hover: hover) {
  .enter:hover { filter: brightness(1.08) saturate(1.05); }
}

/* ---------- orsetti ---------- */
.bears {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bear,
.bear__sprite {
  position: absolute;
  left: 0;
  top: 0;
}
.bear { width: 0; height: 0; }
.bear__sprite {
  background-image: url("../assets/img/orsetti-hd.webp");
  background-repeat: no-repeat;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
/* il fotogramma precedente sfuma quando la posa cambia di colpo */
.bear__sprite--ghost { opacity: 0; }

/* ==========================================================================
   PAGINA 2 · MEDAGLIONE
   ========================================================================== */
.stage {
  --med-shift: 0px;
  isolation: isolate;
  transition: --med-shift 1.2s var(--ease-out);
}
.stage.is-revealed { --med-shift: var(--med-shift-revealed); }
.stage:focus { outline: none; }
/* la catena arriva dal buio */
.stage::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--vh) * 10 + var(--safe-top));
  background: linear-gradient(#000, rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* catena + medaglione scendono insieme e poi oscillano appena */
.hang {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}
.js .hang { transform: translate3d(0, calc(var(--vh) * -112), 0); }
.stage.is-in .hang {
  transform: none;
  transition: transform 2.1s cubic-bezier(.2, 1.08, .32, 1);
}
.hang__swing {
  position: absolute;
  inset: 0;
  transform-origin: 50% calc(var(--vh) * -50);
}
.stage.is-in .hang__swing { animation: swing 4.2s ease-in-out 1.1s both; }
@keyframes swing {
  0%   { transform: rotate(0deg); }
  18%  { transform: rotate(.42deg); }
  40%  { transform: rotate(-.3deg); }
  62%  { transform: rotate(.17deg); }
  82%  { transform: rotate(-.07deg); }
  100% { transform: rotate(0deg); }
}

/* il video intero del medaglione (verticale 9:16) con la sua trasparenza:
   sul telefono è largo quanto lo schermo, così la catena che gli gira intorno
   entra dai lati dello schermo */
.medallion {
  position: absolute;
  z-index: 3;
  left: var(--med-x, 50%);
  top: var(--med-top);
  width: var(--med-w);
  max-width: none;
  aspect-ratio: 768 / 1368;
  transform: translate3d(-50%, var(--med-shift), 0);
  pointer-events: none;
}
.medallion__glow {
  position: absolute;
  top: 54%;
  left: 50%;
  width: 125%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(175, 10, 26, .36), rgba(110, 0, 14, .14) 55%, transparent);
  animation: glow 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}
.medallion__poster,
.medallion__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}
/* la locandina (mentre il video si carica) sfuma ai bordi come il video */
.medallion__poster,
.no-webgl .medallion .medallion__video {
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 var(--fx), #000 calc(100% - var(--fx)), transparent),
    linear-gradient(180deg, transparent, #000 var(--ft), #000 calc(100% - var(--fb)), transparent);
  mask-composite: intersect;
}
.medallion__canvas { opacity: 0; }
.medallion.is-live .medallion__canvas { opacity: 1; }
.medallion.is-live .medallion__poster { opacity: 0; transition: opacity .25s ease .1s; }

/* il video sorgente viene letto da WebGL */
.medallion__video {
  position: fixed;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  opacity: .01;
  pointer-events: none;
}
/* senza WebGL: la metà a colori del video, fusa sul nero */
.no-webgl .medallion__canvas { display: none; }
.no-webgl .medallion .medallion__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  object-fit: cover;
  object-position: 0 50%;
  mix-blend-mode: screen;
}

.stage__content {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(var(--text-top) + var(--med-shift));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
  text-align: center;
  transition: opacity .5s ease, visibility 0s linear 0s;
}
/* telefono in orizzontale: titolo e pulsanti nella metà destra */
.stage.is-wide .stage__content {
  left: 47%;
  top: var(--text-top);
}
.stage.is-wide .cta { flex-direction: column; gap: 2px; }
[data-view="info"] .stage__content {
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
}

.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(42px, min(13vw, calc(var(--vh) * 8.4)), 150px);
  line-height: .95;
  padding: .34em .38em .28em;
  margin: -.34em -.38em -.28em;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--blood);
  background: linear-gradient(180deg, #ff6262 0%, #e31b27 40%, #9e0a15 78%, #5c040a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: blur(0px) drop-shadow(0 0 22px rgba(255, 26, 46, .38));
}
.subtitle {
  margin-top: .38em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(17px, min(5vw, calc(var(--vh) * 3.3)), 46px);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--ink);
  filter: blur(0px) drop-shadow(0 2px 10px rgba(0, 0, 0, .85));
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin-top: clamp(8px, calc(var(--vh) * 1.8), 30px);
}

/* comparsa di titolo e pulsanti (solo con JS attivo) */
.js .title,
.js .subtitle,
.js .stage__content .cta {
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out);
}
.js .title    { filter: blur(10px) drop-shadow(0 0 22px rgba(255, 26, 46, 0)); }
.js .subtitle { filter: blur(8px) drop-shadow(0 2px 10px rgba(0, 0, 0, 0)); }
.js .stage__content .cta { filter: blur(6px); }

.js .stage.is-revealed .title {
  opacity: 1;
  transform: none;
  filter: blur(0px) drop-shadow(0 0 22px rgba(255, 26, 46, .38));
  transition-delay: .2s;
}
.js .stage.is-revealed .subtitle {
  opacity: 1;
  transform: none;
  filter: blur(0px) drop-shadow(0 2px 10px rgba(0, 0, 0, .85));
  transition-delay: .5s;
}
.js .stage.is-revealed .stage__content .cta {
  opacity: 1;
  transform: none;
  filter: blur(0px);
  transition-delay: .8s;
}
.js .stage:not(.is-revealed) .stage__content { pointer-events: none; }

/* ---------- Pulsanti fantasy: targa d'argento con il sangue che cola ---------- */
.btn {
  --w: var(--btn-w);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  width: var(--w);
  aspect-ratio: 1200 / 297;
  /* la scritta sta nel pannello rosso, un po' sopra il centro (sotto colano le gocce) */
  padding: 0 14% 2.6%;
  background: url("../assets/img/pulsante.webp") center / 100% 100% no-repeat;
  color: #e4e4e4;
  font-family: var(--font-fantasy);
  font-size: calc(var(--w) * .047);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform .3s var(--ease-out), filter .35s ease;
}
/* la scritta corta ha spazio per lettere più grandi */
.btn--big { font-size: calc(var(--w) * .056); }
/* un riflesso di luce attraversa il metallo e il sangue (solo dentro la targa) */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 235, 235, .3) 50%, transparent 60%) 140% 0 / 280% 100% no-repeat;
  -webkit-mask: url("../assets/img/pulsante.webp") center / 100% 100% no-repeat;
  mask: url("../assets/img/pulsante.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.js .btn::after { animation: glint 6.5s ease-in-out 2.2s infinite; }
.js .btn + .btn::after { animation-delay: 2.9s; }
@keyframes glint {
  0%, 70%   { background-position: 140% 0; }
  92%, 100% { background-position: -40% 0; }
}
.btn__label {
  position: relative;
  padding: .12em 0;
}
/* lettere d'argento cesellate, come nella targa */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .btn__label {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, 0) 46%, rgba(0, 0, 0, .32) 100%),
      url("../assets/img/argento.webp") 0 50% / 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .95)) drop-shadow(0 0 3px rgba(50, 0, 0, .9));
  }
  .js .btn__label { animation: silver 9s ease-in-out infinite alternate; }
}
@keyframes silver {
  from { background-position: 0 0, 0% 50%; }
  to   { background-position: 0 0, 100% 50%; }
}
.btn__icon {
  position: relative;
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: #dedede;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .95)) drop-shadow(0 0 3px rgba(50, 0, 0, .9));
}
.btn:active {
  transform: translateY(1px) scale(.97);
  filter: brightness(.94) drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
.btn:focus-visible {
  outline: 2px solid #d9d9d9;
  outline-offset: 2px;
  border-radius: 999px;
}
@media (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12) drop-shadow(0 12px 16px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(200, 10, 24, .55));
  }
}

/* ==========================================================================
   PAGINA 3 · INFO E PREZZI
   ========================================================================== */
.info { position: relative; }
.js .info {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease-out), visibility 0s linear .6s;
}
[data-view="info"] .info {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity .6s var(--ease-out), visibility 0s;
}
.info:focus { outline: none; }
/* sfumatura in alto: il testo che scorre non si sovrappone al pulsante audio */
.js .info::after {
  content: "";
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: calc(64px + var(--safe-top));
  background: linear-gradient(rgba(0, 0, 0, .88), rgba(0, 0, 0, 0));
  pointer-events: none;
}
/* fondo nero, con un bagliore rosso dietro al medaglione */
.js .info { background: #000; }
.js .info::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--hero-w) * 1.4);
  background: radial-gradient(closest-side, rgba(150, 8, 22, .34), rgba(90, 0, 12, .12) 60%, transparent);
  pointer-events: none;
}

.info__inner {
  --gap: clamp(28px, calc(var(--vh) * 5), 56px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  width: 100%;
  max-width: 980px;
  min-height: calc(100% + 1px);
  margin: 0 auto;
  padding: calc(72px + var(--safe-top)) 16px calc(40px + var(--safe-bottom));
}

.js .info .info__hero,
.js .info .lineup,
.js .info .tickets,
.js .info .venue,
.js .info .cta--info,
.js .info .back {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
}
[data-view="info"] .info .info__hero,
[data-view="info"] .info .lineup,
[data-view="info"] .info .tickets,
[data-view="info"] .info .venue,
[data-view="info"] .info .cta--info,
[data-view="info"] .info .back {
  opacity: 1;
  transform: none;
}
[data-view="info"] .info .info__hero { transition-delay: .1s; }
[data-view="info"] .info .lineup     { transition-delay: .3s; }
[data-view="info"] .info .tickets    { transition-delay: .45s; }
[data-view="info"] .info .venue      { transition-delay: .6s; }
[data-view="info"] .info .cta--info  { transition-delay: .72s; }
[data-view="info"] .info .back       { transition-delay: .82s; }

/* medaglione in cima, largo quanto lo schermo sul telefono: la catena sale fino
   al bordo della pagina ed entra dai lati; le scritte delle due sale si appoggiano sulle gocce */
.info {
  /* sul telefono in verticale tutta la larghezza; in orizzontale conta l'altezza dello schermo */
  --hero-w: min(100vw, calc(var(--vh) * 62));
}
.info__hero {
  position: relative;
  z-index: 0;
  flex: none;
  width: var(--hero-w);
  max-width: none;
  aspect-ratio: 768 / 1368;
  margin-top: calc(-72px - var(--safe-top) - var(--hero-w) * 1.78125 * .1);
  margin-bottom: calc(var(--hero-w) * 1.78125 * -.13 - var(--gap) * .5);
  pointer-events: none;
}
.info .lineup { position: relative; z-index: 1; }
.info__poster,
.info__medallion {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
}
.info__medallion { opacity: 0; }
.info__hero.is-live .info__medallion { opacity: 1; }
.info__hero.is-live .info__poster { opacity: 0; }
/* senza WebGL: metà a colori del video fusa sul nero */
.info__medallion--2d { mix-blend-mode: screen; }

/* prezzi */
.tickets {
  width: 100%;
  max-width: 720px;
  padding: 20px 18px;
  border: 1px solid rgba(255, 62, 72, .24);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(22, 2, 6, .8), rgba(8, 0, 2, .86));
  box-shadow: 0 30px 80px -30px rgba(170, 0, 22, .6), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.tickets__date {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  color: var(--blood-hi);
  font-size: clamp(14px, 3.8vw, 19px);
  font-weight: 600;
  letter-spacing: .3em;
  white-space: nowrap;
}
.tickets__date::before,
.tickets__date::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 72, 82, .65));
}
.tickets__date::after { transform: scaleX(-1); }
.prices {
  margin: 0;
  padding: 0;
  list-style: none;
}
.price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}
.price + .price {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(225, 32, 48, .8) 20%, rgba(225, 32, 48, .8) 80%, transparent) 1;
}
.price__name {
  color: #fff;
  font-size: clamp(17px, 4.6vw, 25px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: .05em;
}
.price__desc {
  margin-top: .32em;
  color: var(--ink-dim);
  font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .06em;
}
.price__value {
  flex: none;
  color: #fff;
  font-size: clamp(32px, 8.6vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(255, 32, 48, .6), 0 2px 0 rgba(0, 0, 0, .6);
}

/* line-up: Blue Room e Red Room una di fianco all'altra */
.lineup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 0 clamp(10px, 4vw, 52px);
  width: 100%;
  max-width: 860px;
}
.lineup__divider {
  align-self: stretch;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--room-blue) 22%, var(--room-red) 78%, transparent);
  opacity: .75;
}
.room { text-align: center; }
.room__title {
  margin-bottom: .4em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(27px, 8.1vw, 66px);
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
}
.room--blue .room__title {
  color: var(--room-blue);
  filter: drop-shadow(0 0 16px rgba(63, 140, 255, .5));
}
.room--red .room__title {
  color: var(--room-red);
  filter: drop-shadow(0 0 16px rgba(255, 40, 52, .5));
}
.room__list {
  display: grid;
  gap: .32em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.room__artist {
  font-size: clamp(13px, 3.7vw, 21px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .05em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95);
}
.room__artist--l  { font-size: clamp(14px, 4.1vw, 25px); }
.room__artist--xl { font-size: clamp(15px, 4.4vw, 30px); font-weight: 600; }

/* loghi e location */
.venue {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.venue__logos {
  display: flex;
  align-items: center;
  gap: clamp(22px, 6vw, 44px);
}
.venue__logos img { width: auto; height: clamp(36px, 9vw, 52px); }
.venue__logos picture + picture img { height: clamp(44px, 11vw, 66px); }
.venue__place {
  font-size: clamp(16px, 4.4vw, 22px);
  font-weight: 600;
  letter-spacing: .08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .95);
}
.venue__place span {
  display: block;
  margin-top: .25em;
  color: var(--ink-dim);
  font-size: .72em;
  font-weight: 400;
  letter-spacing: .14em;
}

.cta--info { margin-top: 0; }

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: .24em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .2s ease, background-color .2s ease;
}
.back:active { color: #fff; background: rgba(255, 255, 255, .08); }
.back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  .back:hover { color: #fff; background: rgba(255, 255, 255, .06); }
}

/* ==========================================================================
   Pulsante audio (solo nelle pagine con la musica)
   ========================================================================== */
.sound {
  position: fixed;
  z-index: 60;
  top: calc(12px + var(--safe-top));
  right: calc(12px + env(safe-area-inset-right, 0px));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px 0 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(12, 6, 14, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  font: 500 11px/1 var(--font-body);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .3s ease, border-color .3s ease, opacity .5s ease, visibility 0s linear 0s;
}
[data-view="home"] .sound {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.sound:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sound[aria-pressed="false"] .sound__waves { display: none; }
.sound[aria-pressed="true"] .sound__off { display: none; }
.sound[aria-pressed="true"] { border-color: rgba(255, 70, 80, .6); }
.sound[aria-pressed="true"] .sound__waves path { animation: wave 1.3s ease-in-out infinite; }
.sound[aria-pressed="true"] .sound__waves path + path { animation-delay: .2s; }
@keyframes wave {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
.audio-hint .sound { animation: callout 1.8s ease-in-out infinite; }
@keyframes callout {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 40, 52, .55); }
  60%      { box-shadow: 0 0 0 12px rgba(255, 40, 52, 0); }
}
@media (hover: hover) {
  .sound:hover { background: rgba(12, 6, 14, .65); }
}

/* ==========================================================================
   Transizione 1 → 2: fulmini e nube nera
   ========================================================================== */
.storm {
  position: fixed;
  inset: 0;
  z-index: 45;
  visibility: hidden;
  pointer-events: none;
}
.storm.is-on {
  visibility: visible;
  pointer-events: auto;
}
.storm__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.storm__fallback { display: none; }
/* senza WebGL (o con "riduci movimento"): bagliori dei due fulmini e dissolvenza nel nero */
.storm.is-css .storm__canvas { display: none; }
.storm.is-css .storm__fallback {
  display: block;
  position: absolute;
  inset: 0;
}
.storm__bolt,
.storm__smoke {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0;
}
.storm__bolt {
  width: 50%;
  background-size: cover;
  background-position: 50% 50%;
  mix-blend-mode: screen;
}
.storm__bolt--red  { left: 0;  background-image: url("../assets/img/fulmine-rosso.jpg"); }
.storm__bolt--pink { right: 0; background-image: url("../assets/img/fulmine-rosa.jpg"); }
.storm__smoke {
  left: 0;
  right: 0;
  background: radial-gradient(140% 100% at 50% 40%, #050206 40%, #000 100%);
}
.storm.is-css.is-on .storm__bolt--red  { animation: bolt-css 1.5s ease-out .1s both; }
.storm.is-css.is-on .storm__bolt--pink { animation: bolt-css 1.3s ease-out .32s both; }
.storm.is-css.is-on .storm__smoke      { animation: smoke-css 2.6s ease-in-out .5s both; }
.storm.is-css.is-reverse.is-on .storm__bolt { animation: none; }
.storm.is-css.is-reverse.is-on .storm__smoke { animation: smoke-out-css 1s ease-in-out both; }
/* "riduci movimento": niente lampi, solo una dissolvenza nel nero */
.storm.is-css.is-calm.is-on .storm__bolt { animation: none; }
.storm.is-css.is-calm.is-on .storm__smoke { animation: smoke-css 1.2s ease-in-out both; }
.storm.is-css.is-calm.is-reverse.is-on .storm__smoke { animation: smoke-out-css .9s ease-in-out both; }
@keyframes bolt-css {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  60%  { opacity: .75; }
  100% { opacity: 0; }
}
@keyframes smoke-css {
  0%   { opacity: 0; }
  42%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes smoke-out-css {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   Transizione 2 ↔ 3 (clip sfocata dal video "pagina-2")
   ========================================================================== */
.transition {
  position: fixed;
  inset: 0;
  z-index: 40;
  visibility: hidden;
  pointer-events: none;
}
.transition.is-on {
  visibility: visible;
  pointer-events: auto;
}
.transition__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: background-color .32s linear, -webkit-backdrop-filter .32s linear, backdrop-filter .32s linear;
}
.transition.is-in .transition__backdrop {
  background-color: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.transition.is-dark .transition__backdrop {
  background-color: #000;
  transition-duration: .3s;
}
.transition.is-out .transition__backdrop {
  background-color: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition-duration: .6s;
}
.transition__video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: 104%;
  max-width: none;
  aspect-ratio: 400 / 720;
  object-fit: cover;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.12);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  transition: opacity .3s linear, transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.transition.with-video.is-in .transition__video {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.transition.with-video.is-out .transition__video {
  opacity: 0;
  transition: opacity .6s linear, transform 1.8s cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Bordi del browser (barra di stato e zona della barra in basso)
   Safari su iOS 26 non usa più theme-color: li colora con lo sfondo dell'elemento fisso che
   tocca il bordo dello schermo. Queste due strisce, sopra a tutto, gli danno il colore della
   pagina visibile (main.js lo cambia con la pagina). Con background-clip: text e senza testo
   non disegnano nulla. Perché Safari le legga devono essere larghe quanto lo schermo,
   più basse di metà schermo e alte più di 10px.
   ========================================================================== */
.edge {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 90;
  height: 16px;
  pointer-events: none;
}
.edge--top    { top: 0; }
.edge--bottom { bottom: 0; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .edge {
    -webkit-background-clip: text;
    background-clip: text;
  }
  .edge--top    { background-color: #5872af; }   /* il cielo in alto */
  .edge--bottom { background-color: #bd86a7; }   /* le nuvole rosa in basso */
  .edge-dark .edge { background-color: #000; }
}

/* ==========================================================================
   Schermi più grandi
   ========================================================================== */
/* tablet e computer: i due pulsanti uno di fianco all'altro */
@media (min-width: 720px) {
  :root { --btn-w: min(360px, calc(50vw - 40px)); }
  .cta {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
  }
  .sound { height: 40px; padding: 0 15px 0 11px; font-size: 12px; }
  .info { --hero-w: min(78vw, 560px, calc(var(--vh) * 62)); }
  .tickets { padding: 30px 40px; border-radius: 22px; }
  .price { padding: 18px 0; gap: 16px; }
}
@media (min-width: 900px) {
  .info__inner { padding-top: calc(96px + var(--safe-top)); }
  .info__hero { margin-top: calc(-96px - var(--safe-top) - var(--hero-w) * 1.78125 * .1); }
}

/* telefoni bassi (es. iPhone SE con le barre del browser): pulsanti un po' più piccoli */
@media (orientation: portrait) and (max-height: 600px) {
  :root { --btn-w: min(292px, calc(100vw - 60px)); }
}

/* schermi orizzontali: la scena è alta quanto lo schermo e le nuvole lucide
   si distribuiscono ai lati del logo */
@media (orientation: landscape) {
  :root {
    --u: calc(var(--vh) * 100 / 1045);
    --logo-w: min(80vw, calc(var(--vh) * 40 * 925 / 803), 540px);
  }
  .cl--g1 { --x: 690;  --y: 170; }
  .cl--g2 { --x: -180; --y: 470; }
  .cl--g3 { --x: 830;  --y: 640; }
  .cl--g4 { --x: -60;  --y: 130; }
  .cl--g5 { --x: 80;   --y: 760; }
  .cl--g6 { --x: 690;  --y: 560; }
  .cl--g7 { --x: 560;  --y: 70; }
  .cl--g8 { --x: 120;  --y: 380; }
  .cl--puff { --x: 150; --y: 40; }
}
/* telefoni in orizzontale: poco spazio in altezza */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --logo-w: min(80vw, calc(var(--vh) * 36 * 925 / 803), 540px);
    --bear-h: clamp(54px, calc(var(--vh) * 15), 150px);
    --btn-w: min(300px, calc(50vw - 30px));
  }
  .enter { height: 46px; }
  .cta { flex-direction: row; gap: 4px 14px; }
}

/* ==========================================================================
   Movimento ridotto
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .gl,
  .js .enter::after,
  .js .btn::after,
  .js .btn__label,
  .medallion__glow,
  .audio-hint .sound,
  .sound[aria-pressed="true"] .sound__waves path,
  .stage.is-in .hang__swing { animation: none !important; }
  .js .hero__logo { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}