/* ═══════════════════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════ */

@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.3; }
}

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

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(201, 168, 76, 0.1); }
  50%      { box-shadow: 0 0 40px rgba(201, 168, 76, 0.25); }
}

@keyframes lineExpand {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes counterReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Grain is static — no animation to avoid edge flickering */


/* ═══════════════════════════════════════════
   UTILITY ANIMATION CLASSES
   ═══════════════════════════════════════════ */

/* Elements waiting to be revealed by GSAP */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
}

/* When GSAP reveals them */
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════
   TEXT SCRAMBLE STYLES
   ═══════════════════════════════════════════ */

.char-scramble {
  display: inline-block;
  min-width: 0.3em;
}

.char-scramble--active {
  color: var(--c-accent);
  opacity: 0.7;
}

.char-scramble--settled {
  color: inherit;
  opacity: 1;
}


/* ═══════════════════════════════════════════
   HOVER / INTERACTIVE STATES
   ═══════════════════════════════════════════ */

.magnetic {
  position: relative;
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}

/* Word break for long CJK-like strings */
.hero__title br {
  display: block;
}

@media (max-width: 600px) {
  .hero__title br {
    display: inline;
  }
  .hero__title br::after {
    content: ' ';
  }
}