/* ============================================================
   Stratum — premium-fx.css
   Solo animazione/interazione sopra il design esistente.
   Nessun colore/testo/struttura nuovi: riusa le variabili :root.
   Tutto su transform/opacity/filter (GPU, no reflow).
   ============================================================ */

/* ---- 1. Reveal cinematografico (potenzia [data-reveal] esistente) ---- */
/* Lo stato .visible resta identico: cambia solo come ci si arriva. */
[data-reveal] {
  transform: translateY(28px) scale(.985);
  filter: blur(4px);
  transition:
    opacity   1s cubic-bezier(.2,.7,.2,1),
    transform 1s cubic-bezier(.2,.7,.2,1),
    filter    1s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform, filter;
}
[data-reveal].visible {
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ---- 2. Barra progresso scroll (accento terracotta esistente) ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 101; /* sopra nav (z-index 100) */
  pointer-events: none;
  will-change: transform;
}

/* ---- 3. Microinterazioni: shine sui bottoni ---- */
.btn, .nav-cta, .service-action, .sw-cta, .pilot-cta {
  position: relative;
  overflow: hidden;
}
.btn::after,
.nav-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.btn:hover::after,
.nav-cta:hover::after { left: 130%; }

/* ---- 3b. Underline nav che cresce dal centro ---- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1px;
  background: var(--terracotta-soft);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ---- 3c. Micro-scala su CTA/icone al hover ---- */
.service-action, .sw-cta, .pilot-cta, .link-quiet {
  transition: transform .3s cubic-bezier(.2,.7,.2,1),
              color .25s, border-color .25s, background .3s, all .3s;
}
.service-action:hover, .sw-cta:hover, .pilot-cta:hover {
  transform: scale(1.04);
}

/* ---- 4. Tilt 3D leggero + glow puntatore (classi via JS) ---- */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.fx-tilt.fx-tilting { transition: transform .08s linear; }

/* Glow radiale che segue il puntatore — colore d'accento esistente */
.fx-glow { position: relative; }
.fx-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    260px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
    var(--terracotta-tint),
    transparent 60%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.fx-glow:hover::before { opacity: 1; }

/* ---- 4b. Parallax leggero su elementi decorativi (transform via JS allo scroll) ---- */
.fx-parallax { will-change: transform; }

/* ============================================================
   Accessibilità: chi preferisce meno movimento vede statico.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .scroll-progress { display: none !important; }
  .btn::after, .nav-cta::after { display: none !important; }
  .nav-links a::after { transition: none !important; }
  .service-action:hover, .sw-cta:hover, .pilot-cta:hover { transform: none !important; }
  .fx-tilt { transform: none !important; transition: none !important; }
  .fx-glow::before { display: none !important; }
  /* La parallax (.fx-parallax) e' gestita lato JS, che esce subito in
     reduced-motion: nessuna regola qui, per non azzerare la centratura del mark. */
}