/* ==========================================================================
   LyamFlow — Landing / Componenti riusabili
   Bottoni, badge, card di vetro, dispositivi, loader, nav, marquee,
   accordion. Sono gli stessi archetipi del design system dell'app
   (Button.tsx, Badge.tsx, Card.tsx) portati su fondo scuro.
   ========================================================================== */

/* ==========================================================================
   1. Bottoni — geometria di src/components/ui/Button.tsx
      (rounded-xl, h-11/h-13, gap-2, active:scale-[0.98], focus-ring)
   ========================================================================== */
.lf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.75rem; /* h-11 */
  padding-inline: 1.25rem;
  border-radius: var(--lf-r-md);
  font-size: var(--lf-t-sm);
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.35s var(--lf-ease),
    box-shadow 0.35s var(--lf-ease),
    background-color 0.25s var(--lf-ease),
    border-color 0.25s var(--lf-ease),
    color 0.25s var(--lf-ease);
}

.lf-btn:active {
  transform: scale(0.975);
}

.lf-btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.4s var(--lf-ease);
}

.lf-btn--lg {
  height: 3.25rem; /* h-13 */
  padding-inline: 1.75rem;
  font-size: 1rem;
  border-radius: var(--lf-r-lg);
}

.lf-btn--sm {
  height: 2.25rem;
  padding-inline: 0.875rem;
  font-size: var(--lf-t-xs);
  border-radius: var(--lf-r-sm);
}

/* Primario: superficie chiara su fondo scuro — l'inverso esatto del gestionale
   in tema chiaro, così il marchio resta riconoscibile. */
.lf-btn--primary {
  background: hsl(210 20% 97%);
  color: hsl(222 47% 11%);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.3),
    inset 0 -1px 0 hsl(222 47% 11% / 0.12);
}

.lf-btn--primary:hover {
  box-shadow:
    var(--lf-sh-elevated),
    0 0 44px -8px hsl(205 100% 70% / 0.5);
}

/* Riflesso che attraversa il bottone al passaggio del mouse */
.lf-btn--primary::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    105deg,
    transparent 30%,
    hsl(205 100% 78% / 0.55) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  transition: transform 0.85s var(--lf-ease);
}

.lf-btn--primary:hover::after {
  transform: translateX(120%);
}

/* Secondario in vetro: come .glass + hairline */
.lf-btn--glass {
  background: hsl(210 40% 98% / 0.05);
  border: 1px solid var(--lf-line-bright);
  color: var(--lf-fg);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.lf-btn--glass:hover {
  background: hsl(210 40% 98% / 0.1);
  border-color: hsl(210 40% 98% / 0.24);
}

.lf-btn--ghost {
  color: var(--lf-fg-dim);
  padding-inline: 0.875rem;
}

.lf-btn--ghost:hover {
  color: var(--lf-fg);
  background: hsl(210 40% 98% / 0.06);
}

/* Bordo gradiente animato: riservato alle CTA che devono "vincere" la pagina */
.lf-btn--aurora {
  background: hsl(224 20% 8% / 0.6);
  color: var(--lf-fg);
  border: 1px solid transparent;
  background-clip: padding-box;
}

.lf-btn--aurora::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -2;
  border-radius: inherit;
  background: var(--lf-grad-brand);
  background-size: 260% 100%;
  animation: lf-pan 7s linear infinite;
}

.lf-btn--aurora::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: hsl(224 24% 6%);
  transition: background 0.3s var(--lf-ease);
}

.lf-btn--aurora:hover::after {
  background: hsl(224 24% 9%);
}

.lf-btn:hover svg.lf-btn__arrow {
  transform: translateX(3px);
}

@keyframes lf-pan {
  to {
    background-position: 260% 0;
  }
}

/* Bottone magnetico: JS scrive --lf-magnet-x/y, il CSS fa il resto.
   Separare le due cose tiene l'animazione sul compositor. */
.lf-magnet {
  --lf-magnet-x: 0px;
  --lf-magnet-y: 0px;
  transform: translate3d(var(--lf-magnet-x), var(--lf-magnet-y), 0);
}

.lf-magnet:active {
  transform: translate3d(var(--lf-magnet-x), var(--lf-magnet-y), 0) scale(0.975);
}

/* ==========================================================================
   2. Badge — src/components/ui/Badge.tsx (rounded-full, ring-1 ring-inset)
   ========================================================================== */
.lf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--lf-r-full);
  font-size: var(--lf-t-2xs);
  font-weight: 550;
  letter-spacing: 0.01em;
  color: var(--lf-fg-dim);
  box-shadow: inset 0 0 0 1px var(--lf-line-bright);
  background: hsl(210 40% 98% / 0.04);
}

.lf-badge svg {
  width: 0.75rem;
  height: 0.75rem;
}

.lf-badge--brand {
  color: hsl(205 100% 82%);
  background: hsl(205 100% 58% / 0.1);
  box-shadow: inset 0 0 0 1px hsl(205 100% 58% / 0.24);
}

.lf-badge--success {
  color: hsl(152 60% 72%);
  background: hsl(152 50% 44% / 0.12);
  box-shadow: inset 0 0 0 1px hsl(152 50% 44% / 0.26);
}

.lf-badge--warning {
  color: hsl(38 92% 74%);
  background: hsl(38 88% 56% / 0.12);
  box-shadow: inset 0 0 0 1px hsl(38 88% 56% / 0.26);
}

.lf-badge--danger {
  color: hsl(0 80% 78%);
  background: hsl(0 63% 50% / 0.12);
  box-shadow: inset 0 0 0 1px hsl(0 63% 50% / 0.26);
}

/* Pillola pulsante "in diretta" */
.lf-dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--lf-r-full);
  background: var(--lf-success);
  flex: none;
}

.lf-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: lf-ping 2.2s var(--lf-ease) infinite;
}

@keyframes lf-ping {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* ==========================================================================
   3. Card di vetro — evoluzione di Card.tsx (rounded-2xl, hairline, shadow)
   ========================================================================== */
.lf-card {
  position: relative;
  border-radius: var(--lf-r-2xl);
  background: var(--lf-glass);
  border: 1px solid var(--lf-line-soft);
  backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
  -webkit-backdrop-filter: blur(var(--lf-glass-blur)) saturate(var(--lf-glass-saturate));
  box-shadow: var(--lf-sh-elevated);
  overflow: hidden;
  isolation: isolate;
}

/* Bordo superiore luminoso: preso di peso da .booking-panel::before */
.lf-card--lit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, hsl(205 100% 66% / 0.8), hsl(205 100% 66% / 0) 24%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/*
 * Spotlight che segue il puntatore. Le coordinate arrivano da JS come
 * variabili CSS: nessun re-layout, solo un gradiente che si sposta.
 */
.lf-spot {
  --lf-spot-x: 50%;
  --lf-spot-y: 0%;
  --lf-spot-o: 0;
}

.lf-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--lf-spot-o);
  transition: opacity 0.45s var(--lf-ease);
  background: radial-gradient(
    24rem 24rem at var(--lf-spot-x) var(--lf-spot-y),
    hsl(205 100% 70% / 0.13),
    transparent 62%
  );
}

/* Inclinazione 3D: JS scrive gli angoli, il CSS li applica in un solo transform */
.lf-tilt {
  --lf-rx: 0deg;
  --lf-ry: 0deg;
  --lf-tz: 0px;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--lf-rx)) rotateY(var(--lf-ry))
    translateZ(var(--lf-tz));
  transition: transform 0.5s var(--lf-ease);
}

.lf-tilt.is-active {
  transition: transform 0.14s linear;
}

/* ==========================================================================
   4. Dispositivi — cornici realistiche disegnate in CSS puro.
      Dentro ci va l'interfaccia vera di LyamFlow (app-ui.css), non un'immagine:
      pesa meno di uno screenshot e resta nitida su qualsiasi schermo.
   ========================================================================== */
.lf-device {
  position: relative;
  perspective: 1600px;
}

/* --- MacBook Pro ------------------------------------------------------- */
.lf-mac {
  position: relative;
  width: 100%;
  border-radius: clamp(0.75rem, 1.4vw, 1.25rem);
  padding: clamp(0.5rem, 0.9vw, 0.8rem);
  background: linear-gradient(160deg, hsl(220 12% 34%), hsl(220 14% 12%) 42%, hsl(220 12% 22%));
  box-shadow: var(--lf-sh-device);
}

/* Riflesso di vetro sulla scocca */
.lf-mac::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, hsl(0 0% 100% / 0.45), transparent 34%, hsl(0 0% 100% / 0.12));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.lf-mac__screen {
  position: relative;
  border-radius: clamp(0.4rem, 0.8vw, 0.7rem);
  overflow: hidden;
  background: var(--lf-bg-soft);
  aspect-ratio: 16 / 10;
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.9);
}

/* Notch */
.lf-mac__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(4rem, 11%, 8rem);
  height: clamp(0.9rem, 1.5%, 1.3rem);
  border-radius: 0 0 0.5rem 0.5rem;
  background: hsl(220 14% 6%);
  z-index: 5;
}

/* Vetro: riflesso diagonale sopra al contenuto, opacità bassissima */
.lf-mac__glare {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    hsl(0 0% 100% / 0.09) 0%,
    hsl(0 0% 100% / 0.02) 26%,
    transparent 46%
  );
}

.lf-mac__base {
  position: relative;
  height: clamp(0.5rem, 0.9vw, 0.85rem);
  margin-inline: -4%;
  border-radius: 0 0 0.6rem 0.6rem;
  background: linear-gradient(180deg, hsl(220 10% 30%), hsl(220 12% 15%));
  box-shadow: 0 22px 40px -18px rgb(0 0 0 / 0.85);
}

.lf-mac__base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14%;
  height: 0.28rem;
  border-radius: 0 0 0.4rem 0.4rem;
  background: hsl(220 12% 10%);
}

/* --- iPhone ------------------------------------------------------------ */
/* ==========================================================================
   Palco del telefono 3D
   --------------------------------------------------------------------------
   Il palco tiene sovrapposti il canvas WebGL e il telefono in CSS. Parte con
   il secondo visibile: se il modello non arriva — dispositivo modesto, niente
   WebGL, movimento ridotto — quello che si vede è già quello giusto.
   ========================================================================== */
.lf-phone3d {
  position: relative;
  width: 100%;
  max-width: 15rem;
  /* Stessa proporzione del telefono CSS, più aria per la rotazione */
  aspect-ratio: 9 / 19.5;
}

.lf-phone3d__canvas {
  position: absolute;
  inset: 0;
  /*
   * Misure esplicite e non `auto`: il canvas è un elemento rimpiazzato, quindi
   * con `width: auto` prende la propria dimensione intrinseca invece di
   * riempire il riquadro — e siccome quella gliela scrive il renderer partendo
   * da quanto misura, si rimpicciolirebbe a ogni frame.
   *
   * Il canvas coincide con il palco: che il telefono ci stia dentro tutto non
   * lo garantisce un margine di sicurezza in CSS, lo garantisce la distanza
   * della camera calcolata in `computeFit()`.
   */
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 0;
  transition: opacity 1.2s var(--lf-ease);
}

.lf-phone3d.is-ready .lf-phone3d__canvas {
  opacity: 1;
}

/*
 * Il telefono CSS è fuori dal flusso: se restasse dentro sarebbe lui a
 * dettare l'altezza del palco (è alto quanto un telefono intero) e
 * `aspect-ratio` qui sopra non conterebbe nulla — con la conseguenza che la
 * misura del riquadro, e quindi quella del modello 3D, non sarebbe più
 * governabile. Esce in dissolvenza quando il modello è pronto.
 */
/* Selettore discendente e non la sola classe: l'elemento porta anche
   `.lf-phone`, che più sotto dichiara `position: relative` e con pari
   specificità vincerebbe per ordine. */
.lf-phone3d > .lf-phone3d__fallback {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84%;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.8s var(--lf-ease),
    transform 0.8s var(--lf-ease);
}

.lf-phone3d.is-ready .lf-phone3d__fallback {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  pointer-events: none;
}

.lf-phone {
  position: relative;
  width: 100%;
  max-width: 15rem;
  border-radius: 2.6rem;
  padding: 0.45rem;
  background: linear-gradient(155deg, hsl(220 10% 40%), hsl(220 14% 10%) 46%, hsl(220 10% 26%));
  box-shadow: var(--lf-sh-device);
}

.lf-phone__screen {
  position: relative;
  border-radius: 2.2rem;
  overflow: hidden;
  aspect-ratio: 9 / 19.5;
  background: var(--lf-bg-soft);
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.9);
}

/* Dynamic Island */
.lf-phone__island {
  position: absolute;
  top: 0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 1.35rem;
  border-radius: var(--lf-r-full);
  background: #000;
  z-index: 6;
}

.lf-phone__home {
  position: absolute;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 0.25rem;
  border-radius: var(--lf-r-full);
  background: hsl(0 0% 100% / 0.45);
  z-index: 6;
}

/* --- iPad Pro ---------------------------------------------------------- */
.lf-pad {
  position: relative;
  width: 100%;
  border-radius: 1.5rem;
  padding: 0.7rem;
  background: linear-gradient(155deg, hsl(220 10% 38%), hsl(220 14% 11%) 48%, hsl(220 10% 24%));
  box-shadow: var(--lf-sh-device);
}

.lf-pad__screen {
  position: relative;
  border-radius: 0.9rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--lf-bg-soft);
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.9);
}

/* --- Monitor ultrawide ------------------------------------------------- */
.lf-ultrawide {
  position: relative;
  width: 100%;
  border-radius: 1rem;
  padding: 0.6rem 0.6rem 0.6rem;
  background: linear-gradient(165deg, hsl(220 12% 28%), hsl(220 14% 10%) 50%, hsl(220 12% 20%));
  box-shadow: var(--lf-sh-device);
}

.lf-ultrawide__screen {
  position: relative;
  border-radius: 0.6rem;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--lf-bg-soft);
  box-shadow: inset 0 0 0 1px hsl(0 0% 0% / 0.9);
}

.lf-ultrawide__stand {
  width: 18%;
  height: 2.6rem;
  margin: 0 auto;
  background: linear-gradient(180deg, hsl(220 10% 24%), hsl(220 12% 14%));
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
}

.lf-ultrawide__foot {
  width: 42%;
  height: 0.6rem;
  margin: 0 auto;
  border-radius: var(--lf-r-full);
  background: linear-gradient(180deg, hsl(220 10% 26%), hsl(220 12% 12%));
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.9);
}

/* Alone dietro ai dispositivi: la luce "di scena" */
.lf-device__glow {
  position: absolute;
  inset: -12% -8% -22%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(45% 45% at 30% 30%, hsl(205 100% 58% / 0.34), transparent 70%),
    radial-gradient(50% 50% at 74% 60%, hsl(265 88% 62% / 0.3), transparent 72%);
  filter: blur(56px);
}

/* Riflesso a pavimento sotto al dispositivo */
.lf-device__reflection {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14%;
  height: 26%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, hsl(205 100% 70% / 0.16), transparent 70%);
  filter: blur(26px);
}

/* ==========================================================================
   5. Loader iniziale
   ========================================================================== */
.lf__loader {
  position: fixed;
  inset: 0;
  z-index: var(--lf-z-loader);
  display: grid;
  place-items: center;
  background: var(--lf-void);
  /* Il sipario si apre dal basso: clip-path animato, niente reflow */
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--lf-ease);
}

.lf__loader.is-done {
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
}

.lf__loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  transition:
    opacity 0.5s var(--lf-ease),
    transform 0.7s var(--lf-ease);
}

.lf__loader.is-done .lf__loader-inner {
  opacity: 0;
  transform: translateY(-1.5rem);
}

.lf__loader-mark {
  width: 4.5rem;
  height: 4.5rem;
}

/* Il monogramma si disegna: stessa "L" del LogoMark dell'app */
.lf__loader-mark path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: lf-draw 1.4s var(--lf-ease) forwards;
}

.lf__loader-mark path:nth-of-type(2) {
  stroke-dasharray: 12;
  stroke-dashoffset: 12;
  animation-delay: 0.45s;
}

@keyframes lf-draw {
  to {
    stroke-dashoffset: 0;
  }
}

.lf__loader-bar {
  position: relative;
  width: min(16rem, 52vw);
  height: 2px;
  border-radius: var(--lf-r-full);
  background: hsl(210 40% 98% / 0.1);
  overflow: hidden;
}

.lf__loader-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--lf-grad-brand);
  transition: transform 0.4s var(--lf-ease);
}

.lf__loader-pct {
  font-family: var(--lf-font-mono);
  font-size: var(--lf-t-2xs);
  letter-spacing: var(--lf-track-wide);
  color: var(--lf-faint);
}

/* ==========================================================================
   6. Navigazione
   ========================================================================== */
.lf__progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: calc(var(--lf-z-nav) + 5);
  background: var(--lf-grad-brand);
  transform: scaleX(var(--lf-progress));
  transform-origin: left;
  pointer-events: none;
}

/* Sempre a schermo: è da qui che si accede al gestionale e si apre la demo. */
.lf__nav {
  position: fixed;
  top: clamp(0.75rem, 1.6vw, 1.25rem);
  left: 50%;
  z-index: var(--lf-z-nav);
  width: min(var(--lf-maxw), calc(100% - 2 * var(--lf-gutter)));
  transform: translate3d(-50%, 0, 0);
}

.lf__nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.5rem;
  padding-inline: 0.5rem 0.5rem;
  border-radius: var(--lf-r-full);
  border: 1px solid transparent;
  transition:
    background-color 0.5s var(--lf-ease),
    border-color 0.5s var(--lf-ease),
    box-shadow 0.5s var(--lf-ease),
    backdrop-filter 0.5s var(--lf-ease);
}

/* Il vetro compare solo dopo l'hero: sopra all'eroe la barra deve sparire */
.lf__nav.is-stuck .lf__nav-inner {
  background: hsl(224 20% 8% / 0.72);
  border-color: var(--lf-line-soft);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--lf-sh-elevated);
}

.lf__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-inline: 0.5rem;
}

.lf__brand-mark {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.lf__brand-name {
  font-family: var(--lf-font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: var(--lf-track-normal);
  line-height: 1;
}

.lf__brand-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 550;
  text-transform: uppercase;
  letter-spacing: var(--lf-track-wide);
  color: var(--lf-muted);
}

.lf__nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.lf__nav-link {
  position: relative;
  padding: 0.5rem 0.875rem;
  border-radius: var(--lf-r-full);
  font-size: var(--lf-t-xs);
  font-weight: 500;
  color: var(--lf-muted);
  transition: color 0.25s var(--lf-ease);
}

.lf__nav-link:hover,
.lf__nav-link[aria-current='true'] {
  color: var(--lf-fg);
}

/* Pillola che scorre dietro alla voce attiva */
.lf__nav-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: hsl(210 40% 98% / 0.07);
  opacity: 0;
  transform: scale(0.86);
  transition:
    opacity 0.3s var(--lf-ease),
    transform 0.3s var(--lf-ease);
}

.lf__nav-link:hover::before {
  opacity: 1;
  transform: scale(1);
}

.lf__nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Menu mobile */
.lf__burger {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--lf-r-full);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--lf-line-bright);
}

.lf__burger span {
  display: block;
  width: 1rem;
  height: 1.5px;
  border-radius: 2px;
  background: var(--lf-fg);
  transition: transform 0.4s var(--lf-ease), opacity 0.2s var(--lf-ease);
}

.lf__burger span + span {
  margin-top: 0.28rem;
}

.lf__burger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(0.39rem) rotate(45deg);
}
.lf__burger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}
.lf__burger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-0.39rem) rotate(-45deg);
}

.lf__drawer {
  position: fixed;
  inset: 0;
  z-index: calc(var(--lf-z-nav) - 1);
  display: grid;
  align-content: center;
  gap: 0.5rem;
  padding: var(--lf-gutter);
  background: hsl(224 24% 4% / 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s var(--lf-ease),
    visibility 0.45s;
}

.lf__drawer.is-open {
  opacity: 1;
  visibility: visible;
}

.lf__drawer a {
  padding: 0.875rem 1rem;
  border-radius: var(--lf-r-lg);
  font-family: var(--lf-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: var(--lf-track-tight);
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.5s var(--lf-ease),
    transform 0.5s var(--lf-ease);
}

.lf__drawer.is-open a {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.05s * var(--i, 0) + 0.1s);
}

/* Le azioni si staccano dalle voci di navigazione: sono un'altra cosa. */
.lf__drawer-action {
  margin-top: 0.5rem;
  border: 1px solid var(--lf-line-bright);
  text-align: center;
  font-size: 1.35rem;
}

.lf__drawer-action:first-of-type {
  margin-top: 1.25rem;
}

.lf__drawer-action--demo {
  border-color: transparent;
  background: var(--lf-fg);
  color: hsl(222 47% 11%);
}

/* ==========================================================================
   7. Marquee infinito
   ========================================================================== */
.lf-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lf-marquee__track {
  display: flex;
  flex: none;
  gap: var(--lf-marquee-gap, 1.5rem);
  padding-right: var(--lf-marquee-gap, 1.5rem);
  min-width: 100%;
  animation: lf-marquee var(--lf-marquee-dur, 48s) linear infinite;
  animation-direction: var(--lf-marquee-dir, normal);
  will-change: transform;
}

.lf-marquee:hover .lf-marquee__track,
.lf-marquee:focus-within .lf-marquee__track {
  animation-play-state: paused;
}

@keyframes lf-marquee {
  to {
    transform: translate3d(-100%, 0, 0);
  }
}

/* ==========================================================================
   8. Accordion (FAQ)
   ========================================================================== */
.lf-acc__item {
  border-bottom: 1px solid var(--lf-line-soft);
}

.lf-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: clamp(1.25rem, 2.2vw, 1.75rem) 0;
  text-align: left;
  font-family: var(--lf-font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 550;
  letter-spacing: var(--lf-track-normal);
  color: var(--lf-fg-dim);
  transition: color 0.3s var(--lf-ease);
}

.lf-acc__btn:hover,
.lf-acc__btn[aria-expanded='true'] {
  color: var(--lf-fg);
}

.lf-acc__icon {
  position: relative;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--lf-r-full);
  border: 1px solid var(--lf-line-bright);
  transition:
    background-color 0.35s var(--lf-ease),
    border-color 0.35s var(--lf-ease),
    transform 0.5s var(--lf-ease);
}

.lf-acc__btn[aria-expanded='true'] .lf-acc__icon {
  background: hsl(205 100% 58% / 0.14);
  border-color: hsl(205 100% 58% / 0.4);
  transform: rotate(180deg);
}

/* Il "+" che diventa "−": due tratti, uno solo si nasconde */
.lf-acc__icon::before,
.lf-acc__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.6rem;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--lf-ease), opacity 0.25s var(--lf-ease);
}

.lf-acc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.lf-acc__btn[aria-expanded='true'] .lf-acc__icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}

/*
 * Apertura fluida senza misurare l'altezza in JS: grid 0fr → 1fr.
 * Funziona ovunque supporti le transizioni su grid-template-rows;
 * dove non lo fa, il pannello resta comunque apribile (nessun contenuto perso).
 */
.lf-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s var(--lf-ease);
}

.lf-acc__panel[data-open='true'] {
  grid-template-rows: 1fr;
}

.lf-acc__panel > div {
  overflow: hidden;
}

.lf-acc__panel p {
  padding-bottom: 1.75rem;
  max-width: 52ch;
  color: var(--lf-muted);
  font-size: var(--lf-t-sm);
  line-height: 1.7;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition:
    opacity 0.45s var(--lf-ease) 0.1s,
    transform 0.45s var(--lf-ease) 0.1s;
}

.lf-acc__panel[data-open='true'] p {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   9. Utility di movimento decorativo
   ========================================================================== */
/* Blob liquidi che si deformano lentamente (morphing shapes) */
.lf-blob {
  position: absolute;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  filter: blur(48px);
  opacity: 0.5;
  animation: lf-morph 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes lf-morph {
  0% {
    border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    border-radius: 63% 37% 41% 59% / 56% 63% 37% 44%;
    transform: translate3d(3%, -4%, 0) rotate(120deg) scale(1.08);
  }
  100% {
    border-radius: 37% 63% 56% 44% / 63% 37% 59% 41%;
    transform: translate3d(-3%, 3%, 0) rotate(240deg) scale(0.96);
  }
}

/* Fascio di luce che attraversa una sezione (beam) */
.lf-beam {
  position: absolute;
  width: 1px;
  background: linear-gradient(180deg, transparent, hsl(205 100% 70% / 0.85), transparent);
  animation: lf-beam 4.5s var(--lf-ease-in-out) infinite;
  pointer-events: none;
}

@keyframes lf-beam {
  0% {
    opacity: 0;
    transform: translateY(-100%) scaleY(0.4);
  }
  30%,
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100%) scaleY(1);
  }
}

/* Oggetto che galleggia (floating) */
.lf-float {
  animation: lf-float var(--lf-float-dur, 7s) ease-in-out infinite alternate;
}

@keyframes lf-float {
  to {
    transform: translate3d(0, var(--lf-float-y, -14px), 0);
  }
}

/* Alone che respira */
.lf-pulse {
  animation: lf-pulse 5s ease-in-out infinite;
}

@keyframes lf-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.9;
  }
}