/* =========================================
   REVEAL TEXT — v2
   Uso: aggiungi .fx-reveal + una classe effetto
   oppure .split-reveal a qualsiasi elemento.
========================================= */

/* ─── BASE: fx-reveal ─────────────────── */

.fx-reveal {
  opacity: 0;
  transition:
    opacity     1.2s cubic-bezier(.22, 1, .36, 1),
    transform   1.2s cubic-bezier(.22, 1, .36, 1),
    filter      1.2s cubic-bezier(.22, 1, .36, 1),
    clip-path   1.2s cubic-bezier(.22, 1, .36, 1);
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}

/* Stato attivo */
.fx-reveal.in-view {
  opacity:   1;
  transform: none !important;
  filter:    none !important;
  clip-path: none !important;
}

/* ─── VARIANTI EFFETTO ────────────────── */

/* Slide dal basso (default) */
.fx-reveal {
  transform: translateY(60px);
}

/* Blur + leggero zoom */
.fx-blur {
  transform: translateY(30px) scale(.97);
  filter:    blur(14px);
}

/* Clip-path a tendina */
.fx-curtain {
  transform: translateY(20px);
  clip-path: inset(0 0 100% 0);
}

/* Zoom + blur */
.fx-zoom {
  transform: scale(.88);
  filter:    blur(8px);
}

/* Prospettiva 3D */
.fx-rotate {
  transform:
    perspective(900px)
    rotateX(18deg)
    translateY(50px);
  filter: blur(4px);
}

/* Slide da sinistra */
.fx-left {
  transform: translateX(-60px);
  opacity: 0;
}

/* Slide da destra */
.fx-right {
  transform: translateX(60px);
  opacity: 0;
}

/* Letter-spacing compress */
.fx-spacing {
  transform:    translateY(20px);
  letter-spacing: .4em;
  filter:       blur(4px);
}

/* ─── DELAY STAGGER ───────────────────── */

.fx-delay-1 { transition-delay: 100ms; }
.fx-delay-2 { transition-delay: 200ms; }
.fx-delay-3 { transition-delay: 300ms; }
.fx-delay-4 { transition-delay: 450ms; }
.fx-delay-5 { transition-delay: 600ms; }

/* ─── SPLIT REVEAL ────────────────────── */

.split-reveal .word {
  display:  inline-block;
  opacity:  0;
  transform: translateY(70px) rotate(3deg);
  filter:   blur(6px);
  transition:
    transform  .85s cubic-bezier(.22, 1, .36, 1),
    opacity    .85s ease,
    filter     .85s ease;
  backface-visibility: hidden;
}

.split-reveal.in-view .word {
  opacity:   1;
  transform: none;
  filter:    none;
}

/* ─── ACCESSIBILITÀ ───────────────────── */

@media (prefers-reduced-motion: reduce) {
  .fx-reveal,
  .split-reveal .word {
    transition:  none !important;
    transform:   none !important;
    filter:      none !important;
    opacity:     1   !important;
    clip-path:   none !important;
  }
}
