/* ==========================================================================
   LyamFlow — Landing / Base
   Reset minimo, tipografia, accessibilità, sfondo cosmico.
   Tutto è confinato in `.lf` così il foglio può convivere con un tema
   WordPress o con Elementor senza sovrascriverne nulla.
   ========================================================================== */

/* ------------------------------------------------------------------ Reset */
.lf *,
.lf *::before,
.lf *::after {
  box-sizing: border-box;
}

.lf {
  margin: 0;
  position: relative;
  isolation: isolate;
  font-family: var(--lf-font);
  font-size: var(--lf-t-body);
  line-height: 1.6;
  color: var(--lf-fg);
  background: var(--lf-bg);
  /* Le stesse feature OpenType del gestionale: i numeri restano allineati */
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'ss01';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

.lf img,
.lf svg,
.lf canvas,
.lf video {
  display: block;
  max-width: 100%;
}

.lf p,
.lf h1,
.lf h2,
.lf h3,
.lf h4,
.lf h5,
.lf figure,
.lf blockquote,
.lf dl,
.lf dd {
  margin: 0;
}

.lf ul,
.lf ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lf button,
.lf input,
.lf select,
.lf textarea {
  font: inherit;
  color: inherit;
}

.lf button {
  background: none;
  border: 0;
  cursor: pointer;
}

/* Reset a specificità zero (:where): i link ereditano il colore del contesto,
   ma qualunque componente — .lf-btn--primary, .lf-btn--ghost… — può ancora
   imporre il proprio senza dover alzare la specificità. */
:where(.lf a) {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------------------------------- Tipografia */
.lf h1,
.lf h2,
.lf h3,
.lf h4 {
  font-family: var(--lf-font-display);
  font-weight: 600;
  letter-spacing: var(--lf-track-normal);
  line-height: 1.08;
  text-wrap: balance;
}

.lf__mega {
  font-size: var(--lf-t-mega);
  letter-spacing: var(--lf-track-mega);
  line-height: 0.92;
  font-weight: 600;
}

.lf__h1 {
  font-size: var(--lf-t-h1);
  letter-spacing: var(--lf-track-mega);
  line-height: 0.96;
}

.lf__h2 {
  font-size: var(--lf-t-h2);
  letter-spacing: var(--lf-track-tight);
  line-height: 1.02;
}

.lf__h3 {
  font-size: var(--lf-t-h3);
  letter-spacing: var(--lf-track-tight);
}

.lf__lead {
  font-size: var(--lf-t-lead);
  line-height: 1.55;
  color: var(--lf-muted);
  text-wrap: pretty;
}

.lf__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* Testo con gradiente: leggibile anche senza background-clip (fallback colore) */
.lf__grad {
  color: hsl(205 100% 86%);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .lf__grad {
    background: var(--lf-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ----------------------------------------------------------- Impaginazione */
.lf__container {
  width: 100%;
  max-width: var(--lf-maxw);
  margin-inline: auto;
  padding-inline: var(--lf-gutter);
}

.lf__container--narrow {
  max-width: var(--lf-maxw-narrow);
}

.lf__section {
  position: relative;
  padding-block: var(--lf-section);
  z-index: var(--lf-z-content);
}

/* Occhiello di sezione: piccolo, maiuscolo, spaziato — come il logo dell'app */
.lf__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--lf-t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--lf-track-wide);
  color: var(--lf-muted);
}

.lf__eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--lf-azure));
}

.lf__section-head {
  max-width: 46rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.lf__section-head .lf__lead {
  margin-top: 1.5rem;
}

.lf__section-head--center {
  margin-inline: auto;
  text-align: center;
}

.lf__section-head--center .lf__eyebrow::before {
  display: none;
}

/* --------------------------------------------------------------- Divisori */
.lf__rule {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--lf-line-bright) 20%,
    var(--lf-line-bright) 80%,
    transparent
  );
}

/* ------------------------------------------------------------- Sfondo base */
/* Reinterpreta .dark .cosmic-bg dell'app come atmosfera di pagina intera. */
.lf__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--lf-z-bg);
  pointer-events: none;
  background-color: var(--lf-bg);
  background-image:
    radial-gradient(38% 42% at 8% 12%, hsl(205 100% 55% / 0.16), transparent 64%),
    radial-gradient(34% 38% at 94% 26%, hsl(265 88% 62% / 0.14), transparent 66%),
    radial-gradient(60% 40% at 50% 100%, hsl(286 92% 60% / 0.08), transparent 62%);
}

/* Grana: toglie il "banding" dai gradienti giganti e dà pelle fotografica. */
.lf__noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: var(--lf-noise);
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

/* Griglia decorativa: identica a .grid-bg dell'app (56px, maschera radiale). */
.lf__grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, hsl(223 14% 30% / 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, hsl(223 14% 30% / 0.4) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* ------------------------------------------------------------ Accessibilità */
.lf__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenuto: visibile solo da tastiera */
.lf__skip {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: calc(var(--lf-z-loader) + 10);
  padding: 0.75rem 1.25rem;
  border-radius: var(--lf-r-md);
  background: var(--lf-surface);
  border: 1px solid var(--lf-line);
  font-size: var(--lf-t-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--lf-dur-fast) var(--lf-ease);
}

.lf__skip:focus-visible {
  transform: translateY(0);
}

/* Anello di focus: stesso comportamento di .focus-ring nel gestionale */
.lf :focus-visible {
  outline: 2px solid var(--lf-ring);
  outline-offset: 3px;
  border-radius: var(--lf-r-sm);
}

.lf :focus:not(:focus-visible) {
  outline: none;
}

/* ------------------------------------------------- Stato iniziale animazioni */
/*
 * Chi arriva senza JS (o con JS rotto) deve leggere tutto: gli stati "prima
 * dell'animazione" esistono solo quando la classe .lf--js è stata messa dallo
 * script inline in <head>. Nessun contenuto invisibile per errore.
 */
.lf--js [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

.lf--js [data-reveal='up'] {
  transform: translate3d(0, 2.5rem, 0);
}

.lf--js [data-reveal='fade'] {
  transform: none;
}

.lf--js [data-reveal='scale'] {
  transform: scale(0.94);
}

.lf--js [data-reveal='blur'] {
  filter: blur(14px);
}

.lf--js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  /* Animazione finita: togliere will-change restituisce memoria al compositor. */
  will-change: auto;
  transition:
    opacity 1s var(--lf-ease),
    transform 1s var(--lf-ease),
    filter 1s var(--lf-ease);
  transition-delay: var(--lf-delay, 0s);
}

/* ------------------------------------------------------- Reduced motion */
/*
 * Rispetta la preferenza di sistema esattamente come fa l'app: le animazioni
 * decorative spariscono, i contenuti restano tutti al loro posto.
 */
@media (prefers-reduced-motion: reduce) {
  .lf *,
  .lf *::before,
  .lf *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .lf--js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .lf__aurora,
  .lf__particles {
    display: none !important;
  }
}

/* ------------------------------------------------------------ Scrollbar */
@media (pointer: fine) {
  .lf ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  .lf ::-webkit-scrollbar-track {
    background: transparent;
  }
  .lf ::-webkit-scrollbar-thumb {
    background: hsl(218 11% 62% / 0.25);
    border-radius: var(--lf-r-full);
    border: 3px solid transparent;
    background-clip: content-box;
  }
  .lf ::-webkit-scrollbar-thumb:hover {
    background: hsl(218 11% 62% / 0.4);
    background-clip: content-box;
  }
}

/* Stampa: la landing deve restare leggibile anche su carta. */
@media print {
  .lf__backdrop,
  .lf__noise,
  .lf__aurora,
  .lf__particles,
  .lf__loader,
  .lf__nav {
    display: none !important;
  }
  .lf {
    background: #fff;
    color: #000;
  }
}