/* ============================================================
   DOCLANE — animations.css
   All @keyframes and motion-driven classes live here.
   Keep this file the single source of truth for animation —
   component structure/colors belong in styles.css instead.

   Table of contents:
     1. Reduced-motion guard
     2. Scroll reveal (section reveal)
     3. Hero fade-in
     4. Floating particles
     5. DNA rotation (decorative, non-hero use)
     6. Card hover glow
     7. Timeline draw-in
     8. Gradient movement
     9. Button ripple
     10. Loader
     11. Scroll progress + back-to-top transitions
     12. Parallax helper
   ============================================================ */

/* ---------------------------------------------------------- */
/* 1. REDUCED-MOTION GUARD                                      */
/*    Every animation in this file is disabled when the user    */
/*    has asked the OS for reduced motion.                      */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------------------------------------------------------- */
/* 2. SCROLL REVEAL                                              */
/*    Applied by animations.js via IntersectionObserver:        */
/*    element starts hidden, gains .in when it enters view.     */
/* ---------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.reveal.in{opacity:1;transform:translateY(0);}

.stagger .reveal:nth-child(1){transition-delay:0s;}
.stagger .reveal:nth-child(2){transition-delay:.08s;}
.stagger .reveal:nth-child(3){transition-delay:.16s;}
.stagger .reveal:nth-child(4){transition-delay:.24s;}
.stagger .reveal:nth-child(5){transition-delay:.32s;}
.stagger .reveal:nth-child(6){transition-delay:.4s;}

/* ---------------------------------------------------------- */
/* 3. HERO FADE-IN                                               */
/*    One-time entrance for the hero copy on first paint.       */
/* ---------------------------------------------------------- */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
.hero-copy > *{
  animation:heroFadeUp .9s var(--ease-out) both;
}
.hero-copy .eyebrow{animation-delay:.05s;}
.hero-copy h1{animation-delay:.12s;}
.hero-copy .lead{animation-delay:.22s;}
.hero-copy .hero-actions{animation-delay:.3s;}
.hero-copy .hero-meta{animation-delay:.38s;}

/* ---------------------------------------------------------- */
/* 4. FLOATING PARTICLES                                         */
/*    Lightweight decorative dots — used on the CTA band and    */
/*    dark sections, intentionally kept out of the hero so the  */
/*    DNA illustration there stays calm and static.             */
/* ---------------------------------------------------------- */
@keyframes particleFloat{
  0%   { transform:translate3d(0,0,0); opacity:.35; }
  50%  { transform:translate3d(6px,-14px,0); opacity:.7; }
  100% { transform:translate3d(0,0,0); opacity:.35; }
}
.particle-field{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.particle-field span{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--ocean-300);
  animation:particleFloat 6s ease-in-out infinite;
}

/* ---------------------------------------------------------- */
/* 5. DNA ROTATION (decorative use — footer mark, loader,       */
/*    technology-page illustration — NOT the homepage hero)     */
/* ---------------------------------------------------------- */
@keyframes dnaSpin{
  0%   { transform:rotateY(0deg); }
  100% { transform:rotateY(360deg); }
}
.dna-spin{
  animation:dnaSpin 10s linear infinite;
  transform-style:preserve-3d;
}

/* ---------------------------------------------------------- */
/* 6. CARD HOVER GLOW                                            */
/*    Adds a soft ocean-colored glow behind cards on hover,     */
/*    layered on top of the existing lift transform.            */
/* ---------------------------------------------------------- */
.glow-hover, .contact-method{
  position:relative;transition:transform var(--dur-base) ease, box-shadow var(--dur-base) ease;
}
.glow-hover::before,
.contact-method::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;
  background:var(--gradient-primary);opacity:0;
  transition:opacity var(--dur-base) ease;
  filter:blur(16px);
}
.glow-hover:hover,
.contact-method:hover{
  transform:translateY(-4px);
}
.glow-hover:hover::before,
.contact-method:hover::before{
  opacity:.25;
}

/* ---------------------------------------------------------- */
/* 7. TIMELINE DRAW-IN                                           */
/*    The connecting rail "grows" downward and the dot pulses   */
/*    once when a timeline row enters view (class added by JS). */
/* ---------------------------------------------------------- */
@keyframes railGrow{
  from{ transform:scaleY(0); }
  to{ transform:scaleY(1); }
}
@keyframes dotPulse{
  0%   { box-shadow:0 0 0 0 rgba(126,198,232,.5); }
  70%  { box-shadow:0 0 0 10px rgba(126,198,232,0); }
  100% { box-shadow:0 0 0 0 rgba(126,198,232,0); }
}
.tl-row .tl-rail .ln{transform-origin:top;transform:scaleY(0);transition:transform .6s var(--ease-out);}
.tl-row.in .tl-rail .ln{transform:scaleY(1);}
.tl-row.in .tl-rail .pt{animation:dotPulse 1.4s ease-out .1s 1;}

/* ---------------------------------------------------------- */
/* 8. GRADIENT MOVEMENT                                          */
/*    Slow animated gradient shift for dark/CTA surfaces.       */
/* ---------------------------------------------------------- */
@keyframes gradientShift{
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
.gradient-animated{
  background-size:200% 200%;
  animation:gradientShift 12s ease infinite;
}

/* ---------------------------------------------------------- */
/* 9. BUTTON RIPPLE                                               */
/*    JS (animations.js) inserts a .ripple span at the click     */
/*    coordinates; this keyframe expands and fades it.          */
/* ---------------------------------------------------------- */
@keyframes rippleExpand{
  from{ transform:scale(0); opacity:.45; }
  to  { transform:scale(2.6); opacity:0; }
}
.btn{position:relative;overflow:hidden;}
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,0.65);
  transform:scale(0);
  animation:rippleExpand .6s ease-out forwards;
  pointer-events:none;
}
.btn-ghost .ripple{background:rgba(21,96,130,0.25);}

/* ---------------------------------------------------------- */
/* 10. LOADER                                                     */
/* ---------------------------------------------------------- */
@keyframes loaderBar{
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(250%); }
}
.page-loader .loader-bar span{
  width:50%;
  animation:loaderBar 1.1s ease-in-out infinite;
}
@keyframes loaderPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%    { transform:scale(1.06); opacity:.85; }
}
.page-loader .loader-mark{animation:loaderPulse 1.6s ease-in-out infinite;}

.page-loader{
  transition:opacity .5s ease, visibility .5s ease;
}
.page-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}

/* ---------------------------------------------------------- */
/* 11. SCROLL PROGRESS + BACK-TO-TOP                              */
/* ---------------------------------------------------------- */
.scroll-progress{transition:width .12s linear;}
.back-to-top{transition:opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;}

/* ---------------------------------------------------------- */
/* 12. PARALLAX HELPER                                           */
/*    animations.js sets --parallax-y on scroll for elements    */
/*    carrying this class (used on hero background blobs).      */
/* ---------------------------------------------------------- */
.parallax-el{
  transform:translate3d(0, var(--parallax-y, 0), 0);
  will-change:transform;
}