/* =====================================================
   GLOBAL REVEAL SYSTEM (ALL PAGES)
===================================================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    animation: revealFadeUp 1s ease forwards;
  }
  
  .delay-1 { animation-delay: 0.2s; }
  .delay-2 { animation-delay: 0.4s; }
  .delay-3 { animation-delay: 0.6s; }
  
  @keyframes revealFadeUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* ================= SCROLL REVEAL ================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }
  
  .reveal.active {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Delays */
  .delay-1 { transition-delay: 0.15s; }
  .delay-2 { transition-delay: 0.3s; }
  .delay-3 { transition-delay: 0.45s; }
  
  
  /* =====================================================
     PAGE TRANSITIONS
  ===================================================== */
  
  .page {
    animation: pageFadeIn 0.4s ease;
  }
  
  .fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  @keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* =====================================================
     SVG TIMELINE LINE DRAW (ABOUT PAGE)
  ===================================================== */
  
  .timeline-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
  }
  
  .timeline-line line {
    stroke: #0d6efd;
    stroke-width: 2;
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: drawTimeline 2s ease forwards;
  }
  
  @keyframes drawTimeline {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  /* =====================================================
     FLOATING ANIMATION (BLOBS / DECOR ELEMENTS)
  ===================================================== */
  
  .float {
    animation: floatY 8s ease-in-out infinite;
  }
  
  @keyframes floatY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
  }
  
  /* =====================================================
     PULSE EFFECT (OPTIONAL – CTA / ICONS)
  ===================================================== */
  
  .pulse {
    animation: pulseGlow 2s infinite;
  }
  
  @keyframes pulseGlow {
    0%   { box-shadow: 0 0 0 0 rgba(13,110,253,0.6); }
    70%  { box-shadow: 0 0 0 15px rgba(13,110,253,0); }
    100% { box-shadow: 0 0 0 0 rgba(13,110,253,0); }
  }
  
  /* =====================================================
     GRADIENT BACKGROUND ANIMATION (OPTIONAL)
  ===================================================== */
  
  .gradient-animate {
    background-size: 200% 200%;
    animation: gradientBG 8s ease infinite;
  }
  
  @keyframes gradientBG {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* =====================================================
     ACCESSIBILITY – REDUCED MOTION
  ===================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    * {
      animation: none !important;
      transition: none !important;
    }
  }
/* ================= MARQUEE ANIMATION HOME ================= */

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