/* ============================================================
   DECODING MEDIA — Animations Stylesheet
   Keyframe definitions & page-load animation classes
   ============================================================ */

/* ------------------------------------------------------------
   Keyframe Animations
   ------------------------------------------------------------ */

/* Fade in from above — used for navbar entrance */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade in from below — used for hero content stagger */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in — used for buttons and interactive elements */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Infinite horizontal scroll — used for hero marquee */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ------------------------------------------------------------
   Page Load Animation Classes
   Staggered entrance sequence for cinematic reveal
   ------------------------------------------------------------ */

/* Navbar — immediate entrance from top */
.anim-nav {
  animation: fadeInDown 600ms ease-out both;
}

/* Hero label — first content element */
.anim-hero-label {
  opacity: 0;
  animation: fadeInUp 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms both;
}

/* Hero title — primary headline */
.anim-hero-title {
  opacity: 0;
  animation: fadeInUp 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms both;
}

/* Hero subtitle — secondary text */
.anim-hero-subtitle {
  opacity: 0;
  animation: fadeInUp 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms both;
}

/* Hero tagline — italic accent line */
.anim-hero-tagline {
  opacity: 0;
  animation: fadeInUp 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 800ms both;
}

/* Hero description — body copy */
.anim-hero-desc {
  opacity: 0;
  animation: fadeInUp 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1000ms both;
}

/* Hero buttons — final CTA entrance */
.anim-hero-buttons {
  opacity: 0;
  animation: scaleIn 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 1200ms both;
}