/* ═══════════════════════════════════════════════════════
   FDN — Page Transition + Scroll Reveal Utilities
   Clean, scroll-oriented, word-based animations
   ═══════════════════════════════════════════════════════ */


/* ── 1. PAGE TRANSITION OVERLAY ─────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--black, #000);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0s;
}

.page-transition.is-covering {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%));
  animation: circleExpand 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

.page-transition.is-entering {
  opacity: 1;
  visibility: visible;
  clip-path: circle(150% at 50% 50%);
  animation: none;
}

.page-transition.is-revealing {
  opacity: 1;
  visibility: visible;
  clip-path: circle(150% at 50% 50%);
  animation: circleContract 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}

@keyframes circleExpand {
  0%   { clip-path: circle(0% at var(--tx, 50%) var(--ty, 50%)); }
  100% { clip-path: circle(150% at var(--tx, 50%) var(--ty, 50%)); }
}

@keyframes circleContract {
  0%   { clip-path: circle(150% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); opacity: 0; visibility: hidden; }
}


/* ── 2. WORD-BASED BLUR+FADE ANIMATION ──────────────── */
.word-reveal .word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(8px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.word-reveal.is-visible .word {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* Staggered delays — set via JS inline styles */


/* ── 3. SCROLL REVEAL UTILITIES ─────────────────────── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-clip {
  clip-path: inset(8% 8% 8% 8%);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-clip.is-visible {
  clip-path: inset(0% 0% 0% 0%);
}

.reveal-line {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-line.is-visible {
  transform: scaleX(1);
}

/* Stagger children — clean entrance */
.stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }

.stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}