/* ==========================================================================
   RESURREXION — Text & motion effects
   ========================================================================== */

/* --- Split-letter reveal ------------------------------------------------ */
[data-split] { overflow: hidden; }
/* Each word is an inline-block so line-breaks happen between words only. */
[data-split] .word {
  display: inline-block;
  white-space: nowrap;
}
[data-split] .char {
  display: inline-block;
  transform: translateY(110%) rotate(6deg);
  opacity: 0;
  transition: transform 0.85s var(--ease), opacity 0.6s var(--ease);
  transition-delay: calc(var(--i) * 0.028s);
  will-change: transform;
}
/* Reveal once the element is in view (.in added by the observer).
   Works whether or not the element also carries [data-reveal]. */
[data-split].in .char { transform: translateY(0) rotate(0); opacity: 1; }
/* Elements with data-split but NOT data-reveal still need an observer hook;
   JS adds .in to all [data-reveal]; for split-only nodes JS also observes them. */

/* Hero title reveals on load regardless of observer */
.hero__title .char { transform: translateY(110%); opacity: 0; transition: transform 0.9s var(--ease), opacity 0.5s var(--ease); transition-delay: calc(var(--i) * 0.04s + 0.2s); }
.hero.loaded .hero__title .char { transform: translateY(0); opacity: 1; }

/* --- Glitch ------------------------------------------------------------- */
.has-glitch { position: relative; }
.has-glitch.glitching { animation: glitch-skew 0.4s var(--ease-in-out); }
.has-glitch.glitching::before,
.has-glitch.glitching::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
}
@keyframes glitch-skew {
  0%, 100% { transform: none; }
  20% { transform: translateX(-3px) skewX(-3deg); }
  40% { transform: translateX(3px) skewX(2deg); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px) skewX(-1deg); }
}

/* Subtle continuous light flicker on hero photo for atmosphere */
@keyframes haze-flicker {
  0%, 100% { opacity: 1; }
  48% { opacity: 0.97; }
  50% { opacity: 0.92; }
  52% { opacity: 0.99; }
}
.hero__media img { animation: haze-flicker 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }

/* Scramble text uses tabular figures so width doesn't jump */
[data-scramble] { font-variant-numeric: tabular-nums; }

/* Reveal helper for counters */
[data-counter] { display: inline-block; }