/* ═══════════════════════════════════════════════════════════════
   IRIS EVENTS & ADVERTISING
   FILE: assets/css/animations.css
   DESC: All @keyframes definitions and animation utility classes.
         No layout or colour rules — animations only.
         Loaded by ALL pages after global.css.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. ENTRY ANIMATIONS
   Used: index.html — hero eyebrow, title, sub,
         actions, scroll indicator
   ───────────────────────────────────────── */
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────
   2. SCROLL INDICATOR PULSE
   Used: index.html — .scroll-line
   ───────────────────────────────────────── */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 1;   transform: scaleY(1.2); }
}

/* ─────────────────────────────────────────
   3. HERO STAGE LIGHTS — SWING
   Used: index.html — .sl1 through .sl5
   ───────────────────────────────────────── */
@keyframes swing1 {
  0%, 100% { transform: rotate(-8deg); }
  50%       { transform: rotate(8deg); }
}

@keyframes swing2 {
  0%, 100% { transform: rotate(5deg); }
  50%       { transform: rotate(-12deg); }
}

/* ─────────────────────────────────────────
   4. FLOATING PARTICLES
   Used: index.html — .particle (generated via JS)
   ───────────────────────────────────────── */
@keyframes floatUp {
  0%   { transform: translateY(100vh) scale(0);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-20vh) scale(1.5); opacity: 0; }
}

/* ─────────────────────────────────────────
   5. GRID / BACKGROUND DRIFT
   Used: index.html — .hero-grid
         All inner pages — .page-hero-grid
   ───────────────────────────────────────── */
@keyframes gridDrift {
  from { transform: translateY(0); }
  to   { transform: translateY(60px); }
}

/* ─────────────────────────────────────────
   6. TICKER / ANNOUNCEMENT BAR SCROLL
   Used: index.html — .ticker-inner
   ───────────────────────────────────────── */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────
   7. CLIENT MARQUEE SCROLL
   Used: index.html — .clients-track
         clients.html — .marquee-track
   ───────────────────────────────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─────────────────────────────────────────
   8. GLOW PULSE
   Used: index.html — .about-float-card
         about.html  — .story-float
   ───────────────────────────────────────── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(123,47,190,0.3); }
  50%       { box-shadow: 0 0 50px rgba(168,85,247,0.6); }
}

/* ─────────────────────────────────────────
   9. ANIMATION APPLY — TICKER
   ───────────────────────────────────────── */
.ticker-inner       { animation: ticker       25s linear infinite; }
.clients-track      { animation: marquee      20s linear infinite; }
.marquee-track      { animation: marqueeScroll 28s linear infinite; }
.marquee-track.reverse { animation-direction: reverse; }

/* ─────────────────────────────────────────
   10. ANIMATION APPLY — PAGE HERO GRID
   ───────────────────────────────────────── */
.page-hero-grid     { animation: gridDrift 20s linear infinite; }
.hero-grid          { animation: gridDrift 20s linear infinite; }

/* ─────────────────────────────────────────
   11. ANIMATION APPLY — HERO ENTRY
   Used: index.html hero section
   ───────────────────────────────────────── */
.hero-eyebrow  { animation: fadeSlideDown .8s ease .2s  both; }
.hero-title    { animation: fadeSlideUp   .9s ease .35s both; }
.hero-sub      { animation: fadeSlideUp   .9s ease .5s  both; }
.hero-actions  { animation: fadeSlideUp   .9s ease .65s both; }
.hero-scroll   { animation: fadeIn        1s  ease 1.2s both; }
.scroll-line   { animation: scrollPulse   2s ease-in-out infinite; }

/* ─────────────────────────────────────────
   12. ANIMATION APPLY — STAGE LIGHTS
   Used: index.html
   ───────────────────────────────────────── */
.sl1 { animation: swing1 8s  ease-in-out infinite; }
.sl2 { animation: swing2 6s  ease-in-out infinite; }
.sl3 { animation: swing1 10s ease-in-out infinite reverse; }
.sl4 { animation: swing2 7s  ease-in-out infinite; }
.sl5 { animation: swing1 9s  ease-in-out infinite 1s; }