/* APEXLANE — landing istituzionale 2.0 (brief "Brand Concept & Creative Direction", ottobre 2026)
   Palette ufficiale invariata: navy/antracite #242937, arancione #E46830, bianco #FFFFFF.
   Versione "accesa": più contrasto (fondi più profondi, testo più luminoso), più arancione come luce,
   bagliori e gradienti costruiti solo con le tre tinte del brand. */

.page-landing {
  --navy: #242937;          /* colore portante (brief) */
  --navy-deep: #1A1E29;     /* tonalità più scure complementari */
  --navy-deeper: #101319;
  --navy-lift: #323950;
  --anthracite: #2A2F3F;    /* superfici */
  --orange-glow: rgba(228, 104, 48, 0.55);
  --orange-soft: rgba(228, 104, 48, 0.16);
  --text-2: rgba(255, 255, 255, 0.86);
  --text-3: rgba(255, 255, 255, 0.68);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.26);
  background: var(--navy-deeper);
}
.page-landing .topbar {
  background: linear-gradient(to bottom, rgba(16, 19, 25, 0.94), rgba(16, 19, 25, 0.78));
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(228, 104, 48, 0.45);
}
.page-landing .lang a[aria-current="page"] { color: var(--orange); }

/* ---------- Bottoni più accesi (stessi colori) ---------- */
.page-landing .cta-arena {
  border-color: var(--orange);
  background: linear-gradient(90deg, rgba(228, 104, 48, 0.22), rgba(228, 104, 48, 0.06));
  box-shadow: 0 0 0 0 var(--orange-glow);
  transition: background-color 200ms ease, color 200ms ease, box-shadow 300ms ease, border-color 200ms ease;
}
.page-landing .cta-arena:hover { background: var(--orange); color: var(--navy-deeper); box-shadow: 0 10px 36px -8px var(--orange-glow); }
.page-landing .cta-waitlist { box-shadow: 0 10px 36px -12px var(--orange-glow); }

/* =========================================================
   HERO — solo logo, entrata d'impatto
   ========================================================= */
.page-landing .hero {
  background:
    radial-gradient(90% 55% at 50% 50%, rgba(50, 57, 80, 0.95) 0%, rgba(36, 41, 55, 0.85) 35%, transparent 75%),
    var(--navy-deeper);
}
.page-landing .hero__atmos {
  background:
    radial-gradient(70% 38% at 50% 108%, rgba(228, 104, 48, 0.42), transparent 70%),
    radial-gradient(45% 30% at 50% 50%, rgba(228, 104, 48, 0.10), transparent 70%),
    radial-gradient(140% 90% at 50% 50%, transparent 52%, rgba(8, 10, 14, 0.85) 100%);
}
.page-landing .hero__center { position: relative; padding: 96px var(--gutter) 120px; text-align: center; }
.page-landing .hero__brand { width: min(88vw, 900px); }
.page-landing .hero__brand::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 25%, var(--orange) 50%, rgba(255, 255, 255, 0.5) 75%, transparent);
  box-shadow: 0 0 18px var(--orange-glow);
}

/* livelli dell'impatto: lampo che taglia lo schermo, flash, onda d'urto */
.hero__slash, .hero__flash, .hero__shock { position: absolute; pointer-events: none; opacity: 0; }
.hero__slash {
  left: -10%; right: -10%; top: 50%; height: 3px; margin-top: -1.5px; z-index: 1;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 35%, #FFFFFF 50%, var(--orange) 65%, transparent 100%);
  box-shadow: 0 0 24px 4px var(--orange-glow);
}
.hero__flash {
  left: 50%; top: 50%; width: min(140vw, 1500px); aspect-ratio: 2.2; transform: translate(-50%, -50%); z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), rgba(228, 104, 48, 0.45) 38%, transparent 72%);
  mix-blend-mode: screen;
}
.hero__shock {
  left: 50%; top: 50%; width: min(70vw, 760px); aspect-ratio: 3.2; transform: translate(-50%, -50%); z-index: 0;
  border: 2px solid var(--orange); border-radius: 50%;
  box-shadow: 0 0 30px var(--orange-glow), inset 0 0 30px var(--orange-glow);
}

@media (prefers-reduced-motion: no-preference) {
  .js .page-landing .hero__logo {
    animation:
      logo-slam 760ms cubic-bezier(0.16, 1, 0.3, 1) 430ms both,
      logo-glow 3.6s ease-in-out 2.4s infinite alternate;
  }
  .js .page-landing .hero__brand { animation: impact-shake 420ms linear 820ms both; }
  .js .hero__slash { animation: slash 560ms cubic-bezier(0.7, 0, 0.3, 1) 120ms both; }
  .js .hero__flash { animation: flash 950ms ease-out 800ms both; }
  .js .hero__shock { animation: shock 1100ms cubic-bezier(0.16, 1, 0.3, 1) 820ms both; }
  .js .page-landing .hero__brand::after { animation: lane-in 900ms var(--ease-out) 950ms both; }
  .js .page-landing .hero .logo-shine::after { animation: shine 1100ms var(--ease-out) 1350ms both; }
  .js .page-landing .hero__cue { animation: fade-in 800ms ease-out 2000ms both; }
}
@keyframes slash {
  0%   { opacity: 0; transform: translateX(-110%) scaleY(0.6); }
  25%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(110%) scaleY(1.4); }
}
@keyframes logo-slam {
  0%   { opacity: 0; transform: translateX(-16%) scale(1.5) skewX(-16deg); filter: blur(16px) brightness(2.4); }
  45%  { opacity: 1; }
  55%  { transform: translateX(1.4%) scale(0.965) skewX(3deg); filter: blur(0) brightness(1.7); }
  72%  { transform: translateX(-0.5%) scale(1.012) skewX(-1deg); filter: brightness(1.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes impact-shake {
  0%, 100% { transform: none; }
  15% { transform: translate(-7px, 3px); }
  30% { transform: translate(6px, -3px); }
  45% { transform: translate(-4px, 2px); }
  60% { transform: translate(3px, -1px); }
  80% { transform: translate(-1px, 1px); }
}
@keyframes flash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes shock {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  4%   { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.3); }
}
@keyframes logo-glow {
  from { filter: drop-shadow(0 0 0 rgba(228, 104, 48, 0)); }
  to   { filter: drop-shadow(0 0 26px rgba(228, 104, 48, 0.5)); }
}

/* =========================================================
   SEZIONI
   ========================================================= */
.sec { position: relative; padding-block: var(--section-pad); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; }
.name {
  background:
    radial-gradient(60% 50% at 0% 30%, rgba(228, 104, 48, 0.14), transparent 70%),
    linear-gradient(to bottom, var(--navy-deeper), var(--navy-deep) 30%);
}
.pillars {
  background:
    radial-gradient(55% 45% at 100% 100%, rgba(228, 104, 48, 0.14), transparent 70%),
    var(--navy);
}
.arena {
  background:
    radial-gradient(55% 45% at 85% 20%, rgba(228, 104, 48, 0.18), transparent 70%),
    linear-gradient(to bottom, var(--navy-deep), var(--navy-deeper));
}
/* riga di luce arancione in cima a ogni sezione */
.sec::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, var(--orange) 50%, transparent);
  opacity: 0.6;
}
.name { border-top: 0; }
.name::before { display: none; }

.kicker {
  display: flex; align-items: center; gap: 14px; margin-bottom: clamp(20px, 3vw, 28px);
  font: 600 0.75rem/1 var(--f-label); letter-spacing: 0.3em; color: var(--white);
}
.kicker span { color: var(--orange); }
.kicker::before { content: ""; width: 40px; height: 2px; background: var(--orange); box-shadow: 0 0 10px var(--orange-glow); order: -1; }
.sec__title {
  font: 800 italic clamp(2.5rem, 0.9rem + 6vw, 6.25rem)/0.9 var(--f-display);
  letter-spacing: -0.01em; text-wrap: balance;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.sec__title span { color: var(--orange); text-shadow: 0 0 40px rgba(228, 104, 48, 0.35); }
.sec__title--solo { font-size: clamp(3.25rem, 1rem + 8vw, 8rem); }
.body { color: var(--text-2); font-size: 1.0625rem; line-height: 1.65; }
.body + .body { margin-top: 14px; }

/* ---------- 02 Il nome ---------- */
.name__diagram { margin: 0 auto clamp(36px, 5vw, 64px); max-width: 1440px; padding-left: var(--gutter); }
.name__diagram svg { width: 100%; height: auto; overflow: visible; }
.name__track { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 110; }
.name__center { fill: none; stroke: rgba(255, 255, 255, 0.38); stroke-width: 2; stroke-dasharray: 14 12; }
.name__line { fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round; opacity: 1; filter: drop-shadow(0 0 10px rgba(228, 104, 48, 0.85)); }
.name__ring { fill: none; stroke: var(--white); stroke-width: 2; opacity: 0.75; }
.name__apex { fill: var(--white); filter: drop-shadow(0 0 14px rgba(228, 104, 48, 1)); }
.name__leader { stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.5; }
.name__tag { font: 600 28px var(--f-label); letter-spacing: 0.22em; fill: var(--white); }
.name__tag--accent { fill: var(--orange); }
@media (max-width: 640px) { .name__tag { font-size: 40px; } }

.name__words { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 800px) { .name__words { grid-template-columns: 1fr 1fr; } }
.word__title { font: 800 italic clamp(4rem, 2rem + 8vw, 8rem)/0.85 var(--f-display); letter-spacing: -0.01em; }
.word:first-child .word__title { color: var(--orange); text-shadow: 0 0 50px rgba(228, 104, 48, 0.35); }
.word__meta { margin: 12px 0 14px; font: 600 0.75rem/1.3 var(--f-label); letter-spacing: 0.24em; color: var(--orange); }

.equation {
  position: relative; margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(24px, 3.5vw, 40px) clamp(24px, 4vw, 48px);
  background: linear-gradient(100deg, rgba(228, 104, 48, 0.26), rgba(228, 104, 48, 0.06) 50%, var(--navy-deeper) 90%);
  border: 1px solid rgba(228, 104, 48, 0.35);
}
.equation::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--orange); box-shadow: 0 0 18px var(--orange-glow); }
.equation__line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px;
  font: 800 italic clamp(1.75rem, 1rem + 2.6vw, 3.25rem)/1 var(--f-display);
}
.equation__line b { color: var(--orange); font-weight: 800; }
.equation__line strong { font-weight: 800; color: var(--orange); text-shadow: 0 0 30px rgba(228, 104, 48, 0.4); }
.equation__result { display: inline-flex; align-items: baseline; gap: 16px; white-space: nowrap; }

.equation__note { margin-top: 16px; color: var(--text-2); max-width: 54em; }

/* ---------- 03 I pilastri ---------- */
.pillars__grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 700px) { .pillars__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .pillars__grid { grid-template-columns: repeat(4, 1fr); } }
.pillar {
  position: relative; display: grid; align-content: start; gap: 8px; padding: clamp(26px, 3vw, 40px);
  background: linear-gradient(to bottom, var(--anthracite), var(--navy-deep));
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.pillar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--orange); box-shadow: 0 0 16px var(--orange-glow);
  transform: scaleX(0.18); transform-origin: 0 50%; transition: transform 500ms var(--ease-out);
}
.pillar:hover::before { transform: scaleX(1); }
.pillar:hover { box-shadow: inset 0 0 0 1px rgba(228, 104, 48, 0.35); }
.pillar__num { font: 800 italic clamp(2.75rem, 2rem + 2vw, 3.75rem)/0.9 var(--f-display); color: var(--orange); text-shadow: 0 0 30px rgba(228, 104, 48, 0.45); }
.pillar__name { margin-top: 12px; font: 800 italic clamp(1.75rem, 1.3rem + 1vw, 2.25rem)/1 var(--f-display); letter-spacing: 0.01em; }
.pillar__meta { margin-bottom: 8px; font: 600 0.6875rem/1.3 var(--f-label); letter-spacing: 0.22em; color: var(--orange); }

/* ---------- 04 SIMRACE ARENA ---------- */
.arena__intro { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .arena__intro { grid-template-columns: 0.85fr 1.15fr; } }
.arena__copy { display: grid; gap: 18px; justify-items: start; }
.arena__logo { width: min(72vw, 380px); height: auto; filter: drop-shadow(0 0 30px rgba(228, 104, 48, 0.28)); }
.arena__meta { font: 600 0.75rem/1.3 var(--f-label); letter-spacing: 0.26em; color: var(--orange); }
.arena__copy .lede { color: var(--white); }
.arena__ctas { margin-top: 8px; }
.arena__shot { margin: 0; }
.arena__shot img {
  width: 100%; height: auto; border-radius: 10px;
  border: 1px solid rgba(228, 104, 48, 0.45);
  box-shadow: 0 50px 110px -40px var(--orange-glow), 0 0 0 6px rgba(255, 255, 255, 0.03);
}
.arena__shot figcaption { margin-top: 14px; font: 600 0.6875rem/1.5 var(--f-label); letter-spacing: 0.16em; color: var(--text-3); }

.arena__features {
  display: grid; gap: 1px; margin-top: clamp(56px, 7vw, 96px);
  background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 700px) { .arena__features { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .arena__features { grid-template-columns: repeat(3, 1fr); } }
.feature {
  position: relative; display: grid; align-content: start; gap: 10px;
  padding: clamp(24px, 2.8vw, 36px);
  background: linear-gradient(to bottom, var(--anthracite), var(--navy-deep));
  transition: box-shadow 300ms ease;
}
.feature::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--orange); box-shadow: 0 0 14px var(--orange-glow);
  transform: scaleY(0.25); transform-origin: 50% 0; transition: transform 500ms var(--ease-out);
}
.feature:hover::before { transform: scaleY(1); }
.feature:hover { box-shadow: inset 0 0 0 1px rgba(228, 104, 48, 0.35); }
.feature__num { font: 600 0.8125rem/1 var(--f-label); letter-spacing: 0.2em; color: var(--orange); }
.feature__name { font: 800 italic clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem)/1 var(--f-display); letter-spacing: 0.01em; }

/* ---------- Footer ---------- */
.page-landing .footer { position: relative; background: var(--navy-deeper); }
.page-landing .footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange) 50%, transparent);
  box-shadow: 0 0 16px var(--orange-glow);
}
.page-landing .footer__label { color: var(--orange); }

/* =========================================================
   ANIMAZIONI ALLO SCROLL — ogni testo entra mentre scorri.
   Misurate e coerenti: l'entrata più forte resta quella del logo.
   Con "riduci movimento" tutto è subito visibile (regole di main.css).
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .page-landing .reveal {
    transition:
      opacity 900ms var(--ease-out) var(--d, 0ms),
      transform 1100ms var(--ease-out) var(--d, 0ms),
      clip-path 1100ms var(--ease-out) var(--d, 0ms),
      letter-spacing 1200ms var(--ease-out) var(--d, 0ms);
  }
  /* titoli: si svelano dal basso come una tendina, con una leggera spinta in corsivo */
  .js .reveal--title { opacity: 1; transform: none; }
  .js .reveal--title .reveal-mask {
    display: block; clip-path: inset(0 0 105% 0); transform: translateY(0.35em) skewY(3deg);
    transition: clip-path 1100ms var(--ease-out) var(--d, 0ms), transform 1100ms var(--ease-out) var(--d, 0ms);
  }
  .js .reveal--title.is-in .reveal-mask { clip-path: inset(-0.25em -0.4em -0.35em -0.4em); transform: none; }
  .js .reveal--title .reveal-mask > span {
    display: inline-block; opacity: 0; transform: translateY(0.3em);
    transition: opacity 800ms var(--ease-out) calc(var(--d, 0ms) + 260ms), transform 1000ms var(--ease-out) calc(var(--d, 0ms) + 260ms);
  }
  .js .reveal--title.is-in .reveal-mask > span { opacity: 1; transform: none; }
  /* etichette: prima si traccia la linea arancione, poi il testo */
  .js .reveal--kicker { transform: translate3d(-12px, 0, 0); }
  .js .reveal--kicker::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 700ms var(--ease-out) 120ms; }
  .js .reveal--kicker.is-in::before { transform: scaleX(1); }
  /* blocchi laterali e card */
  .js .reveal--left { transform: translate3d(-56px, 0, 0); }
  .js .reveal--right { transform: translate3d(56px, 0, 0); }
  .js .reveal--card { transform: translate3d(0, 44px, 0) scale(0.97); }
  .js .reveal--fade { transform: none; }
  /* screen dell'app: si "alza" in prospettiva */
  .js .reveal--shot { transform: perspective(1600px) rotateX(24deg) translateY(70px); transform-origin: 50% 100%; }
  .js .reveal--shot.is-in { transform: perspective(1600px) rotateX(6deg); }
  /* claim di chiusura: le lettere si stringono in posizione */
  .js .reveal--claim { letter-spacing: 0.32em; }
  .js .reveal--claim.is-in { letter-spacing: 0.01em; }
}

/* il contenitore della "tendina" non deve prendere lo stile della parte evidenziata del titolo */
.sec__title .reveal-mask { color: inherit; text-shadow: none; }