/* ================================================================
   ANIMATIONS — Keyframes, Reveal System, Split Text, Transitions
   ================================================================ */

/* ---- Keyframes ---- */
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -20%); }
  40% { transform: translate(-5%, 15%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 10%); }
  80% { transform: translate(3%, 15%); }
  90% { transform: translate(-10%, 10%); }
}

@keyframes marq {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes scrollDown {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: .3; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

@keyframes float {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes clipReveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes textScrambleIn {
  0%   { opacity: 0; filter: blur(8px); }
  50%  { opacity: .5; filter: blur(4px); }
  100% { opacity: 1; filter: blur(0px); }
}

/* ---- Split Text Reveal ---- */
.split-line { overflow: hidden; display: block; }
.split-line .word {
  display: inline-block;
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--expo);
  will-change: transform;
}
.split-line.revealed .word { transform: translateY(0); }

/* ---- Reveal System (Scroll-triggered) ---- */
.rv {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--expo);
}
.rv.vis { opacity: 1; transform: translateY(0); }

/* ---- Stagger delays ---- */
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .14s; }
.rv-d3 { transition-delay: .2s; }
.rv-d4 { transition-delay: .26s; }
.rv-d5 { transition-delay: .32s; }
.rv-d6 { transition-delay: .38s; }
.rv-d7 { transition-delay: .44s; }

/* ---- Scale reveal ---- */
.rv-scale {
  opacity: 0;
  transform: scale(.92);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--expo);
}
.rv-scale.vis { opacity: 1; transform: scale(1); }

/* ---- Horizontal reveals ---- */
.rv-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--expo);
}
.rv-left.vis { opacity: 1; transform: translateX(0); }

.rv-right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--expo);
}
.rv-right.vis { opacity: 1; transform: translateX(0); }

/* ---- Clip-path reveal ---- */
.rv-clip {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--expo);
}
.rv-clip.vis { clip-path: inset(0 0 0 0); }

/* ---- Blur reveal ---- */
.rv-blur {
  opacity: 0;
  filter: blur(6px);
  transition: opacity var(--dur-slow) var(--ease), filter .8s var(--expo);
}
.rv-blur.vis { opacity: 1; filter: blur(0); }

/* ---- Text scramble ---- */
.scramble-text {
  display: inline-block;
}
.scramble-char {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transition: all .4s var(--expo);
}
.scramble-char.revealed {
  opacity: 1;
  filter: blur(0);
}

/* ---- Page System ---- */
.page { display: none; opacity: 0; min-height: 100vh; }
.page.active { display: block; opacity: 1; }

/* ---- Smooth Scroll Wrapper ---- */
.smooth-wrap { will-change: transform; }

/* ---- Horizontal Scroll ---- */
.h-scroll-wrap { overflow: hidden; position: relative; }
.h-scroll-track { display: flex; gap: 20px; will-change: transform; }