/* Schermata "Stiamo arrivando in Italia" */
:root { --g: #111413; --g2: #1c201f; --paper: #ecede9; --muted: #a3a9a5; --o: #ff4f00; --ease: cubic-bezier(0.22, 1, 0.36, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--g); color: var(--paper); }
body { font-family: "Clash Grotesk", "Helvetica Neue", Arial, sans-serif; font-size: 1.0625rem; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--o); outline-offset: 3px; }
::selection { background: var(--o); color: var(--g); }

.m { height: 100svh; min-height: 520px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(130px, 13vw, 200px); padding: clamp(20px, 3vw, 40px) clamp(20px, 4vw, 64px); gap: clamp(16px, 3vw, 56px); }
.m__main { display: grid; grid-template-rows: auto 1fr auto; gap: 24px; min-width: 0; }

.m__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lock { display: grid; gap: 3px; }
.lock b { font-weight: 500; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: center; gap: 0.32em; }
.lock b svg { width: 1.1em; height: 1.1em; }
.lock b i { font-style: normal; color: var(--o); }
.lock small { color: var(--muted); font-size: 0.8125rem; padding-left: 2rem; }
.m__where { color: var(--muted); font-size: 0.9375rem; }

/* Logo in movimento: «quota» fisso e «99» che sale come un contachilometri */
.hero { align-self: center; min-height: 0; align-content: start; display: grid; gap: clamp(20px, 3vw, 36px); }
.word { margin: 0; display: flex; align-items: baseline; font-weight: 400; font-size: clamp(3.5rem, min(19vw, 19vh), 11rem); line-height: 0.86; letter-spacing: -0.06em; white-space: nowrap; }
.word .q { opacity: 0; transform: translateY(24px); animation: in 900ms var(--ease) 150ms forwards; }
.odo { position: relative; display: inline-flex; margin-left: 0.04em; color: rgb(236 237 233 / 0.42); transition: color 500ms ease; }
.odo.done { color: var(--o); }
.col { display: inline-block; height: 0.86em; overflow: hidden; }
.col span { display: block; transition: transform 140ms var(--ease); will-change: transform; }
.col span i { display: block; height: 0.86em; font-style: normal; }
.pulse { position: relative; }
.odo.done::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -6%; height: 0.06em; background: var(--o); transform-origin: left; animation: sweep 900ms var(--ease) both; }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes in { to { opacity: 1; transform: none; } }

.payoff { margin: calc(-1 * clamp(0px, 0.6vw, 8px)) 0 0 0.1em; font-size: clamp(1.25rem, 2.6vw, 2.25rem); letter-spacing: -0.02em; color: var(--paper); opacity: 0; animation: in 900ms var(--ease) 350ms forwards; }
.txt { display: grid; gap: 14px; max-width: 46ch; opacity: 0; transform: translateY(16px); animation: in 900ms var(--ease) 500ms forwards; }
.txt h1 { margin: 0; font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; }
.txt p { margin: 0; color: var(--muted); }

.cta { position: relative; z-index: 3; background: var(--g); display: grid; gap: 14px; justify-items: start; opacity: 0; animation: in 900ms var(--ease) 800ms forwards; }
.btn { appearance: none; border: 0; border-radius: 0; background: var(--o); color: var(--g); font: 500 1.0625rem/1 inherit; font-family: inherit; min-height: 52px; padding: 0 26px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: transform 140ms var(--ease), background-color 160ms ease; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #e04500; } }
.btn--ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px rgb(236 237 233 / 0.28); } /* bordo del controllo: taste-skill-ignore */
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: rgb(236 237 233 / 0.08); } }

.gate { display: grid; grid-template-columns: minmax(0, 320px) auto; gap: 8px; align-items: end; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 420ms var(--ease), opacity 260ms ease; }
.gate[data-open="true"] { max-height: 240px; opacity: 1; }
.gate label { grid-column: 1 / -1; font-size: 0.9375rem; color: var(--muted); }
.gate input { width: 100%; height: 52px; background: var(--g2); color: var(--paper); border: 0; border-radius: 0; padding: 0 16px; font: inherit; box-shadow: inset 0 0 0 1px rgb(236 237 233 / 0.24); } /* bordo del campo: taste-skill-ignore */
.gate input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 3px var(--o); } /* anello del campo: taste-skill-ignore */
.err { min-height: 1.4em; color: #ff8a5c; font-size: 0.9375rem; }

/* Righello: il segno di quota sale lungo la scala */
.ruler { position: relative; z-index: 1; align-self: stretch; min-height: 320px; }
.ruler svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tick { stroke: rgb(236 237 233 / 0.28); stroke-width: 1.5; }
.tick.l { stroke: rgb(236 237 233 / 0.6); }
.lab { fill: rgb(236 237 233 / 0.55); font: 500 12px "Clash Grotesk", Arial, sans-serif; }
.mark { will-change: transform; }
.mark .line { stroke: var(--o); stroke-width: 2; }
.mark .tri { fill: var(--o); }
.mark text { fill: var(--paper); font: 500 14px "Clash Grotesk", Arial, sans-serif; }

.fine { color: var(--muted); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 6px 24px; }

@media (max-width: 720px) {
  .m { grid-template-columns: minmax(0, 1fr) 88px; padding: 18px 16px; }
  .m__where { display: none; }
  .gate { grid-template-columns: 1fr; }
  .btn { width: 100%; justify-content: center; }
  .cta { justify-items: stretch; }
  .lab { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .word .q, .payoff, .txt, .cta { animation: none; opacity: 1; transform: none; }
  .col span { transition: none; }
  .odo.done::after { animation: none; }
}
.fine a { display: inline-block; min-height: 28px; line-height: 28px; }

.lock small { display: none; }

/* una sola schermata: se manca altezza o si apre la password, il testo lungo si ritira */
@media (max-height: 680px) { .txt p { display: none; } .hero { gap: 16px; } }
@media (max-width: 720px) { [data-gate="true"] .txt p { display: none; } }
.col { padding: 0 0.07em 0 0; margin-right: -0.07em; }