/* ==========================================================================
   RAUSHEENA GROUP — ANIMATION LAYER
   Keyframes + scroll-reveal utility classes driven by js/animations.js
   (IntersectionObserver toggles `.is-visible`; GSAP handles the richer,
   scroll-scrubbed effects declared inline via data-attributes.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes rgFadeUp{
  from{ opacity: 0; transform: translateY(14px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes rgLoadBar{
  from{ width: 0%; }
  to{ width: 100%; }
}
@keyframes rgMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@keyframes rgFloat{
  0%, 100%{ transform: translateY(0px) translateX(0px); }
  50%{ transform: translateY(-16px) translateX(6px); }
}
@keyframes rgFloatSlow{
  0%, 100%{ transform: translateY(0px) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(3deg); }
}
@keyframes rgPulseRing{
  0%{ box-shadow: 0 0 0 0 rgba(0,174,239,0.35); }
  100%{ box-shadow: 0 0 0 16px rgba(0,174,239,0); }
}
@keyframes rgSpin{
  to{ transform: rotate(360deg); }
}
@keyframes rgShimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}

/* --------------------------------------------------------------------------
   Scroll-reveal primitives
   Elements start hidden via [data-reveal]; JS adds .is-visible on enter.
   -------------------------------------------------------------------------- */
[data-reveal]{
  opacity: 0;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal="up"]{ transform: translateY(48px); }
[data-reveal="down"]{ transform: translateY(-40px); }
[data-reveal="left"]{ transform: translateX(-56px); }
[data-reveal="right"]{ transform: translateX(56px); }
[data-reveal="scale"]{ transform: scale(0.92); }
[data-reveal="fade"]{ transform: none; }

[data-reveal].is-visible{
  opacity: 1;
  transform: translate(0,0) scale(1);
}

/* Stagger children automatically when parent has [data-reveal-group] */
[data-reveal-group] > *{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal-group].is-visible > *{ opacity: 1; transform: translateY(0); }
[data-reveal-group].is-visible > *:nth-child(1){ transition-delay: 0.02s; }
[data-reveal-group].is-visible > *:nth-child(2){ transition-delay: 0.10s; }
[data-reveal-group].is-visible > *:nth-child(3){ transition-delay: 0.18s; }
[data-reveal-group].is-visible > *:nth-child(4){ transition-delay: 0.26s; }
[data-reveal-group].is-visible > *:nth-child(5){ transition-delay: 0.34s; }
[data-reveal-group].is-visible > *:nth-child(6){ transition-delay: 0.42s; }
[data-reveal-group].is-visible > *:nth-child(7){ transition-delay: 0.50s; }
[data-reveal-group].is-visible > *:nth-child(n+8){ transition-delay: 0.56s; }

/* Masked image reveal (used for feature figures) */
.mask-reveal{ position: relative; overflow: hidden; }
.mask-reveal::before{
  content: ""; position: absolute; inset: 0; background: var(--rg-charcoal-3);
  transform-origin: right; z-index: 2; transform: scaleX(1);
  transition: transform 1s var(--ease-soft);
}
.mask-reveal.is-visible::before{ transform: scaleX(0); }
.mask-reveal img{ transform: scale(1.15); transition: transform 1.4s var(--ease-soft); }
.mask-reveal.is-visible img{ transform: scale(1); }

/* Floating decorative elements (hero / section backdrops) */
.float-el{ animation: rgFloat 7s ease-in-out infinite; }
.float-el.slow{ animation: rgFloatSlow 9s ease-in-out infinite; }
.float-el.delay-1{ animation-delay: 0.6s; }
.float-el.delay-2{ animation-delay: 1.3s; }
.float-el.delay-3{ animation-delay: 2.1s; }

/* Magnetic buttons (JS adds transform via inline style on mousemove) */
.magnetic{ transition: transform 0.35s var(--ease-out); }

/* Number counter pulse ring, used behind stat icons if present */
.pulse-ring{ animation: rgPulseRing 2.4s ease-out infinite; }

/* Shimmer skeleton (used while cert-thumbnails lazy-load, optional) */
.shimmer{
  background: linear-gradient(90deg, var(--rg-charcoal-2) 25%, var(--rg-charcoal-3) 37%, var(--rg-charcoal-2) 63%);
  background-size: 400% 100%;
  animation: rgShimmer 1.6s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
/* Content is visible until the reveal observer has actually initialized. */
html:not(.motion-ready) [data-reveal],
html:not(.motion-ready) [data-reveal-group] > * { opacity: 1; transform: none; }
html:not(.motion-ready) .mask-reveal::before { display: none; }
html:not(.motion-ready) .mask-reveal img { transform: none; }
[data-reveal].is-visible { will-change: auto; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee:not(.is-in-view) .marquee-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-group] > *{ opacity: 1 !important; transform: none !important; }
  .mask-reveal::before{ display: none; }
  .mask-reveal img{ transform: none !important; }
  .float-el{ animation: none !important; }
  .hero-media img{ transform: none !important; }
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none !important; }
  .marquee-track > [aria-hidden="true"] { display: none; }
}