/* Colori del brand — valori ufficiali Pantone per schermo, da non modificare */
:root {
  --giallo: #FFC72C; /* PANTONE 123 C */
  --blu: #004C97;    /* PANTONE 2945 C */
  --nav-h: 64px;
}
@media (max-width: 767px) { :root { --nav-h: 56px; } }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--blu); color: #fff; }
/* le ancore del menu non finiscono sotto la barra fissa (le sezioni animate hanno già il loro spazio) */
section[id]:not(.bdv):not(.seq) { scroll-margin-top: var(--nav-h); }

/* Titoli: Archivo allargato, come il font del biglietto */
.display { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 125%; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; }

/* Sezioni: su blu testo bianco/giallo, su giallo testo blu */
.on-blu   { background: var(--blu); color: #fff; --accent: var(--giallo); --focus: #fff; --fg: #fff; --line: rgba(255,255,255,.2); --field-border: #fff; }
.on-giallo { background: var(--giallo); color: var(--blu); --accent: var(--blu); --focus: var(--blu); --fg: var(--blu); --line: rgba(0,76,151,.25); --field-border: var(--blu); }
.accent { color: var(--accent); }

:focus-visible { outline: 3px solid var(--focus, #fff); outline-offset: 3px; border-radius: 4px; }

/* Etichetta con parentesi, ripresa dal biglietto (WEBSITE / MY NAME …) */
.tag {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
.tag::after {
  content: ""; align-self: stretch; min-width: 10em; height: 8px; margin-top: 10px;
  border: 1.5px solid currentColor; border-bottom: 0;
}
.tag::before {
  content: ""; position: absolute; left: 50%; bottom: 8px; width: 1.5px; height: 5px;
  margin-left: -.75px; background: currentColor;
}

/* Pulsanti */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .75rem 1.25rem; border-radius: 6px; border: 2px solid var(--accent);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .5; cursor: progress; }
a, button, label { touch-action: manipulation; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn--pieno { background: var(--accent); color: var(--blu); }
.on-giallo .btn--pieno { color: var(--giallo); }
.btn--pieno:hover { background: transparent; color: var(--accent); }
.btn--vuoto { background: transparent; color: var(--accent); }
.btn--vuoto:hover { background: var(--accent); color: var(--blu); }
.on-giallo .btn--vuoto:hover { color: var(--giallo); }

/* Header */
.site-header { height: var(--nav-h); background: var(--blu); }
.nav-link { position: relative; padding: .5rem 0; color: #fff; text-decoration: none; font-weight: 500; }
.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--giallo); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav-link:hover::after, .nav-link[aria-current="true"]::after { transform: scaleX(1); }
.nav-link[aria-current="true"] { color: var(--giallo); }
.mobile-menu a[aria-current="true"] { color: var(--giallo); }
.lang button { min-width: 44px; min-height: 44px; padding: 0 .5rem; border-radius: 4px; font-weight: 600; font-size: .85rem; letter-spacing: .06em; color: #fff; }
.lang button[aria-pressed="true"] { background: var(--giallo); color: var(--blu); }
.mobile-menu[hidden] { display: none; }
.mobile-menu { border-bottom: 2px solid var(--giallo); box-shadow: 0 24px 40px rgba(0,0,0,.35); }

/* =========================================================
   BIGLIETTO 3D (hero) — rotazione legata allo scroll
   ========================================================= */
.bdv {
  --w: min(78vw, 560px, calc(46svh * 1.5454));
  --h: calc(var(--w) * 155.906 / 240.945);    /* proporzioni reali 85x55 mm */
  --t: calc(var(--w) * 0.012);                /* spessore */
  --edge: var(--giallo);
  position: relative;
  height: 260vh;
}
@media (max-width: 767px) { .bdv { height: 200vh; --w: min(88vw, calc(40svh * 1.5454)); } }
.bdv__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(20px, 4.5svh, 44px);
  padding: calc(var(--nav-h) + 12px) 16px 16px;
  perspective: 1600px;
}
.bdv__stage { position: relative; flex: none; width: var(--w); height: var(--h); transform-style: preserve-3d; }
.bdv__card { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.bdv__face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: calc(var(--w) * 0.014);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--giallo);
}
.bdv__face img { display: block; width: 100%; height: 100%; }
.bdv__face--front { transform: translateZ(calc(var(--t) / 2)); }
.bdv__face--back  { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
.bdv__face::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 65%);
  transform: translateX(var(--sheen, -80%));
  mix-blend-mode: soft-light; pointer-events: none;
}
.bdv__face--back::after { transform: translateX(calc(var(--sheen, -80%) * -1)); }
.bdv__face::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: #000; opacity: var(--shade, 0);
}
.bdv__edge { position: absolute; background: var(--edge); }
.bdv__edge--l, .bdv__edge--r { top: 1.5%; height: 97%; width: var(--t); left: 50%; margin-left: calc(var(--t) / -2); }
.bdv__edge--l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 1px)); }
.bdv__edge--r { transform: rotateY(90deg)  translateZ(calc(var(--w) / 2 - 1px)); }
.bdv__edge--t, .bdv__edge--b { left: 1.5%; width: 97%; height: var(--t); top: 50%; margin-top: calc(var(--t) / -2); }
.bdv__edge--t { transform: rotateX(90deg)  translateZ(calc(var(--h) / 2 - 1px)); }
.bdv__edge--b { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 1px)); }
.bdv__shadow {
  position: absolute; left: 12%; right: 12%; bottom: calc(var(--h) * -0.16);
  height: calc(var(--h) * 0.14); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,0));
  filter: blur(6px); will-change: transform, opacity;
}
.bdv__title { text-align: center; }

/* Pulsanti che compaiono a fine rotazione; al loro posto, prima, l'invito a scorrere */
.bdv__bottom { position: relative; width: min(100%, 560px); min-height: 104px; }
.bdv__cta, .bdv__hint { transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1), visibility .45s; }
.bdv__cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  opacity: 0; visibility: hidden; transform: translateY(14px);
}
.bdv__cta .btn { white-space: nowrap; padding-inline: .9rem; }
.bdv__cta .btn:first-child { grid-column: 1 / -1; }
@media (min-width: 640px) { .bdv__cta { grid-template-columns: repeat(3, auto); justify-content: center; } .bdv__cta .btn:first-child { grid-column: auto; } }
.bdv.is-done .bdv__cta { opacity: 1; visibility: visible; transform: none; }
.bdv__hint { position: absolute; inset: 0 0 auto; text-align: center; }
.bdv.is-turning .bdv__hint { opacity: 0; visibility: hidden; }
.bdv__hint span { display: inline-block; animation: hint 1.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Telefono in orizzontale: meno spazi */
@media (max-height: 500px) {
  .bdv { --w: min(60vw, calc(52svh * 1.5454)); }
  .bdv__sticky { gap: 10px; padding-top: calc(var(--nav-h) + 4px); }
  .bdv__title { font-size: 1.25rem !important; }
  .bdv__bottom { min-height: 48px; }
  .bdv__cta { grid-template-columns: repeat(3, auto); justify-content: center; }
  .bdv__cta .btn:first-child { grid-column: auto; }
  .bdv__cta .btn { min-height: 40px; padding: .4rem .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bdv { height: auto; }
  .bdv__sticky { position: relative; height: auto; padding-top: calc(var(--nav-h) + 8vh); padding-bottom: 10vh; cursor: pointer; }
  .bdv .bdv__cta { opacity: 1; visibility: visible; transform: none; }
  .bdv__hint { display: none; }
  .bdv__hint span { animation: none; }
}

/* =========================================================
   STICKMAN "TANNERY → BRAND" — sequenza di frame sullo scroll
   ========================================================= */
.seq { position: relative; height: 360vh; }
@media (max-width: 767px) { .seq { height: 300vh; } }
.seq__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3.5svh, 36px);
  padding-top: var(--nav-h);
}
.seq__stage { position: relative; width: 100%; }
.seq__canvas { display: block; width: 100%; }
.seq__poster { display: block; width: 100%; height: auto; }
.seq.is-ready .seq__poster { display: none; }
.seq:not(.is-ready) .seq__canvas { display: none; }

.seq__steps { position: relative; min-height: 8em; list-style: none; margin: 0; padding: 0; }
.seq__step {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s cubic-bezier(.2,.8,.2,1), transform .45s cubic-bezier(.2,.8,.2,1);
}
.seq__step.is-active { opacity: 1; transform: none; }
.seq__progress { height: 3px; background: rgba(0,76,151,.18); border-radius: 3px; overflow: hidden; }
.seq__progress span { display: block; height: 100%; width: 100%; background: currentColor; transform-origin: left; transform: scaleX(var(--p, 0)); }

@media (prefers-reduced-motion: reduce) {
  .seq { height: auto; }
  .seq__sticky { position: relative; height: auto; padding: calc(var(--nav-h) + 6vh) 0 10vh; }
  .seq .seq__canvas, .seq__progress { display: none !important; }
  .seq .seq__poster { display: block !important; }
  .seq__steps { min-height: 0; display: grid; gap: 1.5rem; }
  .seq__step { position: static; opacity: 1; transform: none; }
}

/* Chi sono: foto con cornice gialla sfalsata, come le linee del biglietto */
.chi__foto { position: relative; margin: 0; }
.chi__foto::before {
  content: ""; position: absolute; inset: 12px -12px -12px 12px; z-index: 0;
  border: 2px solid var(--giallo); border-radius: 6px; pointer-events: none;
}
.chi__foto img { position: relative; z-index: 1; object-position: 40% 50%; background: rgba(255,255,255,.08); }

/* Telefoni bassi (es. iPhone SE): tutto il contenuto della scena resta nello schermo */
@media (max-height: 720px) {
  .seq__sticky { gap: 12px; }
  .seq .display.text-2xl { font-size: 1.3rem; }
  .seq__steps { min-height: 7.2em; }
}

/* Cosa faccio: invito a scorrere */
.seq__arrow { display: inline-block; animation: hint 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .seq__hint { display: none; } }

/* Form */
.field label { display: block; margin-bottom: .4rem; font-weight: 500; font-size: .95rem; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem; border-radius: 6px;
  background: #fff; color: var(--blu); border: 2px solid var(--field-border, #fff); font: inherit; font-size: 1rem;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.field__err { margin-top: .4rem; font-size: .9rem; color: var(--accent); font-weight: 600; }
.field__err:empty { display: none; }
.field .check { display: flex; margin: 0; gap: .75rem; align-items: flex-start; font-size: .95rem; }
.field .check input { flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; margin-top: 1px; accent-color: var(--blu); }
.field .check a { color: inherit; font-weight: 600; text-decoration: underline; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status { padding: .9rem 1rem; border-radius: 6px; border: 2px solid var(--accent); color: var(--fg); }
.form-status a { color: inherit; font-weight: 600; text-decoration: underline; }

.contact-link { display: flex; align-items: center; gap: .9rem; padding: .9rem 0; border-bottom: 1.5px solid var(--line); color: var(--fg); text-decoration: none; }
.contact-link svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
.contact-link:hover .contact-link__val { text-decoration: underline; text-underline-offset: 3px; }
.contact-link__lbl { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.contact-link__val { display: block; font-weight: 600; font-size: 1.05rem; word-break: break-word; transition: color .2s ease; }

/* Testo mostrato solo nella lingua attiva (pagina privacy) */
html[lang="it"] [data-lang="en"], html[lang="en"] [data-lang="it"] { display: none; }

/* Pagina privacy */
.priv h2 { font-family: 'Archivo', system-ui, sans-serif; font-stretch: 125%; font-weight: 800; font-size: 1.4rem; line-height: 1.15; color: var(--giallo); padding-top: 1.25rem; }
.priv a { color: var(--giallo); text-decoration: underline; }