/* Palette e tipografia dal brand book (cap. 04-05).
   Proporzioni d'uso: blu 50%, soft white 20%, bianco 10%, nero 10%, giallo 5%. */
:root {
  --blu: #1c0f49;
  --blu-chiaro: #2b2170;      /* anello e bordi su fondo blu */
  --soft: #dcdcdc;
  --bianco: #ffffff;
  --nero: #151616;
  --giallo: #ffa614;

  --titoli: 'IBM Plex Sans', system-ui, sans-serif;
  --testo: 'Inter', system-ui, sans-serif;

  --margine: clamp(16px, 3.1vw, 62px);
  color-scheme: light;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blu);
  color: var(--bianco);
  font: 400 clamp(16px, 1.15vw, 20px)/1.4 var(--testo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--giallo);
  outline-offset: 3px;
}

/* Headline: IBM Plex Sans Bold, line height 0.967, tracking -20 */
.headline {
  margin: 0;
  font: 700 clamp(64px, 12.5vw, 240px)/0.967 var(--titoli);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.headline.piccola { font-size: clamp(44px, 6.4vw, 120px); }

/* ---------- barra superiore, come l'intestazione dei documenti di brand ---------- */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--margine);
  font-size: 13px;
  mix-blend-mode: difference;
  color: var(--bianco);
  pointer-events: none;
}
@media (max-width: 560px) { .barra-centro { display: none; } }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, #2d1f6e 0%, transparent 70%),
    var(--blu);
}
#scena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s ease;
}
#scena.pronta { opacity: 1; }

.hero-testo {
  position: absolute;
  inset: auto var(--margine) var(--margine) var(--margine);
  pointer-events: none;
}
.hero-testo a { pointer-events: auto; }
.sopratitolo {
  margin: 0 0 12px;
  font: 300 clamp(20px, 2.2vw, 40px)/1 var(--titoli);
}
.hero-piede {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(16px, 2vw, 32px);
}
.data {
  margin: 0;
  font: 700 clamp(14px, 1.2vw, 20px)/1.2 var(--titoli);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.look-up {
  position: absolute;
  top: 50%;
  right: var(--margine);
  writing-mode: vertical-rl;
  font-size: 13px;
  text-decoration: none;
  opacity: .7;
}
.look-up:hover { opacity: 1; }
@media (max-width: 720px) { .look-up { display: none; } }

.bottone {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 700 15px/1 var(--testo);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.bottone:hover { background: var(--bianco); color: var(--blu); border-color: var(--bianco); }
.bottone.pieno { background: var(--bianco); color: var(--blu); border-color: var(--bianco); }
.bottone.pieno:hover { background: var(--giallo); border-color: var(--giallo); color: var(--blu); }
.bottone[disabled] { opacity: .5; cursor: progress; }

/* ---------- l'attesa: titolo bianco su soft white, come le pagine del brand book ---------- */
.attesa {
  position: relative;
  background: var(--soft);
  color: var(--nero);
  padding: clamp(96px, 12vw, 200px) var(--margine) clamp(40px, 5vw, 80px);
  overflow: hidden;
}
.colonne {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 64px;
  margin-left: 33%;
}
@media (max-width: 900px) {
  .colonne { grid-template-columns: 1fr; margin-left: 0; }
}
.titoletto {
  margin: 0;
  font: 700 clamp(18px, 1.4vw, 24px)/1.2 var(--testo);
  text-transform: uppercase;
}
.testo p { margin: 0 0 1em; max-width: 34em; }
.gigante {
  margin: clamp(80px, 12vw, 200px) 0 0;
  font: 700 clamp(88px, 21vw, 420px)/0.8 var(--titoli);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bianco);
  white-space: nowrap;
}

/* ---------- ingresso allo scroll ---------- */
.rivela {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.rivela.visibile { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rivela { opacity: 1; transform: none; transition: none; }
}

/* ---------- main visual su Creative Yellow (guida, p. 8) ---------- */
.visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px var(--margine);
  padding: clamp(64px, 7vw, 120px) var(--margine) 0;
  background: var(--giallo);
  color: var(--nero);
  overflow: hidden;
}
.sottotitolo {
  margin: 0 0 28px;
  font: 300 clamp(28px, 3.4vw, 60px)/1 var(--titoli);
}
.visual-testo p:not(.sottotitolo) { max-width: 30em; margin: 0 0 1em; font-size: clamp(17px, 1.4vw, 24px); }
.visual-foto { margin: 0; }
.visual-foto img {
  display: block;
  width: 100%;
  height: clamp(520px, 62vw, 1100px);
  object-fit: cover;
  object-position: 50% 30%;
}
.visual-titolo {
  position: absolute;
  left: var(--margine);
  right: 0;
  bottom: -0.12em;
  margin: 0;
  font: 700 clamp(44px, 9.4vw, 190px)/0.9 var(--titoli);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bianco);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 720px) {
  .visual { grid-template-columns: 1fr; }
  .visual-foto img { height: 120vw; }
}

/* ---------- galleria surreale (guida, p. 17) ---------- */
.galleria {
  background: var(--soft);
  color: var(--nero);
  padding: clamp(96px, 11vw, 200px) var(--margine) clamp(64px, 8vw, 140px);
}
.galleria-testa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 64px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 110px);
}
.galleria-testa .headline { color: var(--blu); }
.galleria-testa p { max-width: 30em; margin: 0; }
.quadri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--margine);
  align-items: start;
}
.quadro { position: relative; margin: 0; }
.q1 { margin-top: 36%; }
.q2 { margin-top: 12%; }
.quadro img {
  display: block;
  width: 100%;
  height: auto;           /* altrimenti vince l'attributo height dell'img */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.q3 img { object-position: 30% 50%; }
.quadro svg {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  fill: none;
  stroke: var(--bianco);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.quadro svg path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.6s .4s cubic-bezier(.2,.7,.2,1);
}
.quadro.visibile svg path { stroke-dashoffset: 0; }
.quadro figcaption {
  margin-top: 14px;
  font: 700 clamp(15px, 1.2vw, 20px)/1.2 var(--titoli);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .galleria-testa, .quadri { grid-template-columns: 1fr; }
  .q1, .q2 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .quadro svg path { stroke-dashoffset: 0; transition: none; }
}

/* ---------- manifesti blu con linee ---------- */
.manifesti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--margine);
  padding: 0 var(--margine) clamp(64px, 8vw, 140px);
  background: var(--soft);
  align-items: start;
}
.manifesto {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--blu);
  overflow: hidden;
}
.m1 { margin-top: 30%; }
.m2 { margin-top: 12%; }
.manifesto svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--bianco);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.manifesto svg path {
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  transition: stroke-dashoffset 2.4s cubic-bezier(.2,.7,.2,1);
}
.manifesto.visibile svg path { stroke-dashoffset: 0; }
.manifesto figcaption {
  position: absolute;
  left: 6%;
  bottom: 5%;
  font: 700 clamp(24px, 2.6vw, 52px)/0.967 var(--titoli);
  right: 6%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .manifesti { grid-template-columns: 1fr; }
  .m1, .m2 { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .manifesto svg path { stroke-dashoffset: 0; transition: none; }
}

/* ---------- fiera ---------- */
.fiera {
  padding: clamp(64px, 8vw, 140px) var(--margine);
  background: var(--nero);
}
.fiera-etichetta { margin: 0; font: 300 clamp(20px, 2.2vw, 40px)/1 var(--titoli); }
.fiera-dati {
  margin: 12px 0 24px;
  font: 700 clamp(40px, 7vw, 130px)/0.967 var(--titoli);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.fiera-nota { margin: 0; max-width: 34em; }

/* ---------- iscrizione: la piscina con la nuvola accanto al modulo ---------- */
.iscrizione {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--blu);
}
.iscrizione-foto { margin: 0; position: relative; }
.iscrizione-foto img {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100svh;
  object-fit: cover;
  object-position: 50% 35%;
}
.iscrizione-corpo {
  display: grid;
  gap: 48px;
  align-content: center;
  padding: clamp(80px, 9vw, 160px) var(--margine);
}
.iscrizione-intro p { max-width: 30em; margin-top: 28px; }
@media (max-width: 900px) {
  .iscrizione { grid-template-columns: 1fr; }
  .iscrizione-foto img { position: static; height: 70vh; }
}

form { display: grid; gap: 22px; align-content: start; }
.campo { display: grid; gap: 8px; }
.campo label { font-size: 14px; opacity: .8; }
.opzionale { font-size: 12px; opacity: .6; margin-left: 4px; }
input:not([type="checkbox"]), select {
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.45);
  border-radius: 0;
  background: transparent;
  color: var(--bianco);
  font: 400 18px/1.3 var(--testo);
  appearance: none;
}
select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' fill='none'/%3E%3C/svg%3E") right 4px center no-repeat; }
select option { color: var(--nero); }
input:focus, select:focus { border-bottom-color: var(--bianco); outline: none; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-bottom-color: var(--giallo); }

.spunta {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14px;
  cursor: pointer;
}
.spunta input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--giallo); }

.miele { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.errore { margin: 0; min-height: 1.4em; color: var(--giallo); font-size: 14px; }
form .bottone { justify-self: start; padding: 18px 34px; font-size: 16px; }

.grazie { align-self: center; outline: none; }
.grazie-testo { max-width: 30em; margin-top: 28px; }

/* ---------- piede ---------- */
.piede {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 24px var(--margine);
  border-top: 1px solid var(--blu-chiaro);
  font-size: 13px;
  opacity: .8;
}

/* ---------- la nuvola risponde al tocco ---------- */
.fumetto {
  position: fixed;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bianco);
  color: var(--blu);
  font: 700 15px/1 var(--titoli);
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(-50%, -140%);
  animation: fumetto 1.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes fumetto {
  0%   { opacity: 0; transform: translate(-50%, -100%) scale(.8); }
  15%  { opacity: 1; transform: translate(-50%, -160%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -260%); }
}

/* =====================================================================
   Variante B: il viaggio guidato dallo scroll
   ===================================================================== */
.headline.media { font-size: clamp(48px, 8.5vw, 170px); }

.viaggio { position: relative; height: 800vh; background: var(--blu); }
.palco {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, #2d1f6e 0%, transparent 70%),
    var(--blu);
}
.palco #scena { position: absolute; inset: 0; width: 100%; height: 100%; }

.scena {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  overflow: hidden;
}
.scena img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.s1 img { object-position: 50% 35%; }
.s3 img { object-position: 35% 50%; transform-origin: 32% 38%; }  /* lo zoom va verso la sfera */
.s2, .s3 { clip-path: circle(0% at 50% 50%); }

/* un velo di blu sotto le didascalie, perché si leggano su qualsiasi foto */
.scena::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(28, 15, 73, .72) 0%, rgba(28, 15, 73, 0) 55%);
}

.velo { position: absolute; inset: 0; background: #f4f2ee; opacity: 0; pointer-events: none; }

.intro, .didascalia {
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  bottom: var(--margine);
  pointer-events: none;
}
.intro .scorri {
  margin: 20px 0 0;
  font: 700 clamp(14px, 1.2vw, 20px)/1.2 var(--titoli);
  text-transform: uppercase;
}
.didascalia { opacity: 0; }
.didascalia p:not(.headline) { max-width: 30em; margin: 16px 0 0; }
.d4 { visibility: hidden; }
.d4 .bottone { margin-top: 24px; pointer-events: auto; }

.tappe {
  position: absolute;
  right: var(--margine);
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  text-align: right;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.tappe li { opacity: .5; transition: opacity .4s; text-shadow: 0 1px 10px rgba(28, 15, 73, .7); }
.tappe li.attiva { opacity: 1; }
.tappe li.attiva::after { content: ' —'; }
@media (max-width: 720px) { .tappe { display: none; } }

.avanzamento {
  position: absolute;
  left: calc(var(--margine) / 2 - 1px);
  top: 20%;
  bottom: 20%;
  width: 2px;
  background: rgba(255, 255, 255, .15);
}
.avanzamento span {
  display: block;
  height: 100%;
  background: var(--bianco);
  transform-origin: top;
  transform: scaleY(0);
}