/* =====================================================================
   Home · intro a tutto schermo ("ricerca delle metafasi": vetrino, scansione, oculare)
   Canvas, posa del vetrino, opacita' della graticola e banda della scritta sono
   gestiti da js/page-home.js. Solo transform e opacity.
   ===================================================================== */
.intro {
  position: relative; isolation: isolate;
  height: 100vh; height: 100svh; min-height: 620px;
  overflow: hidden;
  background:
    radial-gradient(70% 80% at 64% 46%, rgba(84, 228, 255, 0.10), transparent 62%),
    radial-gradient(50% 60% at 82% 80%, rgba(91, 124, 255, 0.10), transparent 70%),
    radial-gradient(40% 50% at 30% 20%, rgba(185, 255, 74, 0.04), transparent 70%),
    var(--bg);
}
/* dissolvenza fissa sul bordo inferiore: nessuna cucitura con la sezione successiva */
.intro::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 24%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(5, 8, 22, 0), var(--bg)); }
.intro-stage { position: absolute; inset: 0; z-index: -1; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Il vetrino (prima fase): canvas proprio, posa 3D calcolata da JS a ogni fotogramma */
.slide3d { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; }
.slide3d::before {
  content: ""; position: absolute; left: 22%; right: -6%; top: -70%; bottom: -70%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(84, 228, 255, 0.16), rgba(84, 228, 255, 0.05) 55%, transparent);
}
.slide3d canvas { display: block; border-radius: 4px; box-shadow: 0 46px 90px -34px rgba(0, 0, 0, 0.95), 0 0 70px -14px rgba(84, 228, 255, 0.16); }

/* Leggibilita' del testo (la scansione resta a tutto campo) */
.intro-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3, 5, 14, 0.82) 0%, rgba(3, 5, 14, 0.45) 38%, transparent 62%);
}

/* Reticolo dell'oculare (graticola): compare quando la scansione finisce (opacita' da JS) */
.js .intro-graticule { opacity: 0; }
.intro-graticule {
  --gs: min(78vh, 62vw);
  position: absolute; z-index: 1; pointer-events: none;
  width: var(--gs); height: var(--gs); left: calc(64% - var(--gs) / 2); top: calc(48% - var(--gs) / 2);
}
.intro-graticule .g-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(84, 228, 255, 0.16);
}
.intro-graticule .g-ticks {
  position: absolute; inset: -14px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(84, 228, 255, 0.34) 0deg 0.35deg, transparent 0.35deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - 10px), #000 calc(50% - 9px), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - 10px), #000 calc(50% - 9px), #000 calc(50% - 1px), transparent 50%);
  animation: g-spin 120s linear infinite;
}
.intro-graticule .g-inner { position: absolute; inset: 31%; border-radius: 50%; border: 1px dashed rgba(185, 255, 74, 0.16); transition: opacity 800ms ease; }
.intro-graticule .g-h, .intro-graticule .g-v { position: absolute; background: rgba(84, 228, 255, 0.12); }
.intro-graticule .g-h { left: -6%; right: -6%; top: 50%; height: 1px; }
.intro-graticule .g-v { top: -6%; bottom: -6%; left: 50%; width: 1px; }
.intro-graticule .g-scale {
  position: absolute; left: 50%; top: 50%; width: 38%; height: 9px; transform: translate(-50%, -4px);
  background:
    repeating-linear-gradient(90deg, rgba(84, 228, 255, 0.55) 0 1px, transparent 1px 10%) left center / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, rgba(84, 228, 255, 0.3) 0 1px, transparent 1px 2%) left center / 100% 5px no-repeat;
  transition: opacity 800ms ease;
}
/* a 100x anello tratteggiato e scala si attenuano */
.intro-graticule.is-high .g-inner, .intro-graticule.is-high .g-scale { opacity: 0.35; }
@keyframes g-spin { to { transform: rotate(360deg); } }

/* Letture strumentali agli angoli */
.intro-readout {
  position: absolute; z-index: 2; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(152, 170, 200, 0.75);
}
.intro-readout b { font-weight: 500; color: var(--cyan); font-variant-numeric: tabular-nums; }
.intro-readout.r-tr { right: max(var(--gutter), calc((100% - var(--container)) / 2)); top: calc(var(--header-h) + 1.6rem); text-align: right; }
.intro-readout.r-br { right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: 2rem; text-align: right; }

/* Scritta LEAFYX di sfondo (come nel footer, ma viva): contorno sottile + riempimento appena percettibile;
   una banda di luce la attraversa ogni tanto, come la scansione di un vetrino. Dietro titolo e campo. */
.intro-mark {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 3.5%; /* sopra la sfumatura di fondo (.intro::after); il testo, che segue nel DOM, resta sopra */
  display: flex; justify-content: center; pointer-events: none; user-select: none;
}
.intro-mark-word {
  display: block;
  font-size: clamp(4.5rem, 1rem + 17vw, 19rem); font-weight: 600; letter-spacing: -0.07em; line-height: 0.82;
  color: transparent;
  -webkit-text-stroke: 1px rgba(84, 228, 255, 0.17);
  background:
    linear-gradient(100deg, transparent 0 42%, rgba(84, 228, 255, 0.22) 47%, rgba(185, 255, 74, 0.30) 50%, rgba(84, 228, 255, 0.22) 53%, transparent 58% 100%) -120% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, rgba(84, 228, 255, 0.10), rgba(84, 228, 255, 0.012) 88%);
  -webkit-background-clip: text; background-clip: text;
  animation: mark-scan 12s cubic-bezier(0.45, 0, 0.25, 1) 2.4s infinite;
}
/* .is-manual: la banda non gira da sola, la posiziona js/page-home.js (segue la testina, passa a ogni 100x) */
.intro-mark.is-manual .intro-mark-word { animation: none; }
@keyframes mark-scan {
  0%   { background-position: -120% 0, 0 0; }
  45%  { background-position: 220% 0, 0 0; }
  100% { background-position: 220% 0, 0 0; }
}

/* Testo */
.intro-inner {
  position: relative; z-index: 3; height: 100%;
  width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: var(--header-h);
}
.intro-title {
  max-width: 22ch;
  font-size: clamp(2rem, 1rem + 2.7vw, 3.7rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em;
}
.intro-title .accent { color: var(--lime); }
.intro-sub { max-width: 44ch; margin-top: 1.4rem; font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.12rem); line-height: 1.55; color: var(--text-2); }
.intro-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2.2rem; }
.intro-links .text-link { font-size: 1rem; }

.intro-cue {
  position: absolute; left: 50%; bottom: 2rem; z-index: 3; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 0.7rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.intro-cue i { position: relative; display: block; width: 1px; height: 46px; background: var(--line-strong); overflow: hidden; }
.intro-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--cyan); transform-origin: top; animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Il titolo dell'hero prodotto (ora h2) mantiene la scala del titolo principale */
.hero .hero-title { font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.6rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; }

@media (max-width: 980px) {
  .intro-mark { bottom: auto; top: calc(var(--header-h) + 6vh); }
  .intro-graticule { --gs: min(92vw, 52vh); left: calc(50% - var(--gs) / 2); top: calc(var(--header-h) + 13vh); }
  .intro-stage::after {
    background: linear-gradient(180deg, rgba(3, 5, 14, 0.1) 0%, rgba(3, 5, 14, 0.12) 40%, rgba(3, 5, 14, 0.8) 58%, rgba(3, 5, 14, 0.55) 80%, var(--bg) 100%);
  }
  .intro-inner { justify-content: flex-end; padding-bottom: 7.5rem; }
  .intro-readout.r-tr { left: var(--gutter); right: auto; top: calc(var(--header-h) + 0.5rem); text-align: left; }
  .intro-readout.r-br { display: none; }
}
@media (max-width: 680px) {
  .intro-cue { bottom: 1.4rem; }
  .intro-readout.r-br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-graticule .g-ticks, .intro-cue i::after, .intro-mark-word { animation: none; }
}