/* ==========================================================================
   ANIMATIONS.CSS — Keyframes & Scroll-Reveal System
   All @keyframes definitions, reveal transition classes, stagger delays,
   and reduced-motion overrides.
   Only transform and opacity are animated for GPU acceleration.
   ========================================================================== */

/* ==========================================================================
   @KEYFRAMES DEFINITIONS
   ========================================================================== */

/* -----------------------------------------------------------------------
   fadeInUp — Standard entrance from below
   ----------------------------------------------------------------------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------------
   fadeInRight — Entrance from right (RTL: starts from -X / visual right)
   ----------------------------------------------------------------------- */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -----------------------------------------------------------------------
   fadeInLeft — Entrance from left (RTL: starts from +X / visual left)
   ----------------------------------------------------------------------- */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -----------------------------------------------------------------------
   scaleIn — Entrance with scale up from slightly smaller
   ----------------------------------------------------------------------- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* -----------------------------------------------------------------------
   float — Gentle Y-axis oscillation for floating elements
   ----------------------------------------------------------------------- */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

/* -----------------------------------------------------------------------
   pulse-glow — Box-shadow green glow pulse
   ----------------------------------------------------------------------- */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(65, 181, 118, 0.15);
  }
  50% {
    box-shadow: 0 0 40px rgba(65, 181, 118, 0.35), 0 0 80px rgba(65, 181, 118, 0.1);
  }
}

/* -----------------------------------------------------------------------
   rotate-gradient — Full 360° rotation for animated borders
   ----------------------------------------------------------------------- */
@keyframes rotate-gradient {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* -----------------------------------------------------------------------
   draw-line — SVG line drawing via stroke-dashoffset
   ----------------------------------------------------------------------- */
@keyframes draw-line {
  from {
    stroke-dashoffset: var(--line-length, 1000);
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* -----------------------------------------------------------------------
   particle-float — Complex multi-point floating path
   ----------------------------------------------------------------------- */
@keyframes particle-float {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    transform: translate(-15px, -20px) scale(1.1);
  }
  50% {
    transform: translate(10px, -40px) scale(0.9);
  }
  75% {
    transform: translate(-20px, -60px) scale(1.05);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(5px, -80px) scale(0.8);
    opacity: 0;
  }
}

/* -----------------------------------------------------------------------
   shimmer — Background-position sweep for loading/highlight effects
   ----------------------------------------------------------------------- */
@keyframes shimmer {
  0% {
    background-position: 300% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* -----------------------------------------------------------------------
   bounce-scroll — Bouncing chevron for scroll cue
   ----------------------------------------------------------------------- */
@keyframes bounce-scroll {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) translateX(50%);
  }
  40% {
    transform: translateY(-10px) translateX(50%);
  }
  60% {
    transform: translateY(-5px) translateX(50%);
  }
}

/* -----------------------------------------------------------------------
   breathe — Subtle scale oscillation (1 → 1.02)
   ----------------------------------------------------------------------- */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* -----------------------------------------------------------------------
   flow-dot — Horizontal translate for flowing dot along a line
   ----------------------------------------------------------------------- */
@keyframes flow-dot {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(var(--flow-distance, 200px));
    opacity: 0;
  }
}

/* -----------------------------------------------------------------------
   letter-space — Letter-spacing from wide to normal
   ----------------------------------------------------------------------- */
@keyframes letter-space {
  from {
    letter-spacing: 0.5em;
    opacity: 0;
  }
  to {
    letter-spacing: normal;
    opacity: 1;
  }
}

/* -----------------------------------------------------------------------
   border-glow — Rotating gradient on border via conic-gradient
   Applied to a pseudo-element that rotates behind the card.
   ----------------------------------------------------------------------- */
@keyframes border-glow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

/* -----------------------------------------------------------------------
   marquee — Continuous horizontal scroll for ticker/marquee elements
   ----------------------------------------------------------------------- */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(50%);
  }
}

/* -----------------------------------------------------------------------
   fade-in — Simple opacity fade
   ----------------------------------------------------------------------- */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -----------------------------------------------------------------------
   gradient-shift — Subtle background gradient position animation
   ----------------------------------------------------------------------- */
@keyframes gradient-shift {
  0% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* -----------------------------------------------------------------------
   glow-line — Glowing line that travels along an element
   ----------------------------------------------------------------------- */
@keyframes glow-line {
  0% {
    transform: translateX(-100%); /* RTL start from right */
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* -----------------------------------------------------------------------
   aurora — Slow moving blur gradient for mesh backgrounds
   ----------------------------------------------------------------------- */
@keyframes aurora-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-30px, -50px) scale(1.1); }
  66% { transform: translate(20px, 20px) scale(0.9); }
}

@keyframes aurora-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, 50px) scale(1.2); }
  66% { transform: translate(-20px, -20px) scale(0.8); }
}

@keyframes aurora-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-50px, 20px) scale(0.9); }
  66% { transform: translate(50px, -20px) scale(1.1); }
}

.mesh-gradient {
  position: absolute;
  inset: -20%;
  z-index: 0;
  overflow: hidden;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.6;
}

.mesh-gradient::before,
.mesh-gradient::after,
.mesh-gradient .mesh-blob {
  content: '';
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.mesh-gradient::before {
  top: 10%;
  right: 20%;
  width: 40vw;
  height: 40vw;
  background: rgba(65, 181, 118, 0.25);
  animation: aurora-1 20s infinite ease-in-out;
}

.mesh-gradient::after {
  bottom: 10%;
  left: 10%;
  width: 50vw;
  height: 50vw;
  background: rgba(200, 169, 110, 0.15); /* Gold */
  animation: aurora-2 25s infinite ease-in-out reverse;
}

.mesh-gradient .mesh-blob {
  top: 40%;
  right: 50%;
  width: 35vw;
  height: 35vw;
  background: rgba(0, 188, 212, 0.15); /* Teal */
  animation: aurora-3 22s infinite ease-in-out;
  transform-origin: center center;
}

/* ==========================================================================
   SCROLL-REVEAL CLASSES
   Applied by IntersectionObserver in JavaScript.
   Base state: hidden. Revealed state: visible.
   ========================================================================== */

/* -----------------------------------------------------------------------
   .reveal — Base reveal (fade in + slide up)
   ----------------------------------------------------------------------- */

.reveal {
  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);
  will-change: opacity, transform;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------
   .reveal-right — Slide in from visual right (RTL: -X)
   ----------------------------------------------------------------------- */

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right.revealed {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------
   .reveal-left — Slide in from visual left (RTL: +X)
   ----------------------------------------------------------------------- */

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left.revealed {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------
   .reveal-scale — Scale entrance from 0.9
   ----------------------------------------------------------------------- */

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

.reveal-scale.revealed {
  opacity: 1;
  transform: none;
}

/* -----------------------------------------------------------------------
   .reveal-text — Cinematic Masked Text Reveal
   ----------------------------------------------------------------------- */

.reveal-text .split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.reveal-text .split-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.reveal-text.revealed .split-word-inner {
  transform: translateY(0);
}

/* -----------------------------------------------------------------------
   Stagger Delays — Applied to child elements for sequential reveals
   ----------------------------------------------------------------------- */

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* -----------------------------------------------------------------------
   Animation Utility Classes — For elements that animate continuously
   ----------------------------------------------------------------------- */

.anim-float {
  animation: float 3s ease-in-out infinite;
}

.anim-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.anim-breathe {
  animation: breathe 4s ease-in-out infinite;
}

.anim-shimmer {
  background: linear-gradient(
    -90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

.anim-rotate-slow {
  animation: rotate-gradient 8s linear infinite;
}

.anim-marquee {
  animation: marquee 20s linear infinite;
}

.anim-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}


/* ==========================================================================
   REDUCED MOTION
   Respects prefers-reduced-motion by disabling all animations and
   transitions, and revealing all elements immediately.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal elements immediately */
  .reveal,
  .reveal-right,
  .reveal-left,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Remove stagger delays */
  .reveal-delay-1,
  .reveal-delay-2,
  .reveal-delay-3,
  .reveal-delay-4,
  .reveal-delay-5,
  .reveal-delay-6 {
    transition-delay: 0s;
  }

  /* Remove continuous animations */
  .anim-float,
  .anim-pulse-glow,
  .anim-breathe,
  .anim-shimmer,
  .anim-rotate-slow,
  .anim-marquee,
  .anim-gradient-shift {
    animation: none;
  }
}