/* ============================================================
   RIIF — Animations & Motion
   ============================================================ */

@import url('./variables.css');

/* ============================================================
   1. CSS KEYFRAME DEFINITIONS
   ============================================================ */

/* --- Fade --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Slide --- */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideLeft {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Scale --- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.75); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.88);
  }
}

/* --- Pulse --- */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(0.92);
  }
}

@keyframes pulseShadow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(79, 70, 229, 0);
  }
}

@keyframes pulseRing {
  0% {
    transform: scale(0.92);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* --- Float --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(1deg); }
  66%       { transform: translateY(4px) rotate(-1deg); }
}

@keyframes bobbing {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* --- Rotate --- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

/* --- Gradient Animation --- */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientFlow {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* --- Shimmer (skeleton loading) --- */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- Bounce --- */
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.08); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes bounceUp {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%       { transform: translateY(-25%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* --- Typing cursor --- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --- Progress bar fill --- */
@keyframes fillBar {
  from { width: 0%; }
  to   { width: var(--bar-width, 100%); }
}

/* --- Marquee / Scroll ticker --- */
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- Glow pulse --- */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.3),
                0 0 60px rgba(124, 58, 237, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(79, 70, 229, 0.5),
                0 0 100px rgba(124, 58, 237, 0.2);
  }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(56, 189, 248, 0.5); }
  50%       { text-shadow: 0 0 40px rgba(56, 189, 248, 0.9), 0 0 80px rgba(56, 189, 248, 0.4); }
}

/* --- Counter increment --- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Morph background shape --- */
@keyframes morphBlob {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
}

/* --- Particle drift --- */
@keyframes particleDrift {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.6;
  }
  100% {
    transform: translate(var(--dx, 40px), var(--dy, -80px)) rotate(360deg);
    opacity: 0;
  }
}

/* ============================================================
   2. ANIMATION UTILITY CLASSES
   ============================================================ */

/* Preset animation appliers */
.animate-fade-in         { animation: fadeIn          var(--duration-300) var(--ease-out) both; }
.animate-fade-in-up      { animation: fadeInUp        var(--duration-500) var(--ease-out) both; }
.animate-fade-in-down    { animation: fadeInDown      var(--duration-500) var(--ease-out) both; }
.animate-slide-up        { animation: slideUp         var(--duration-500) var(--ease-out) both; }
.animate-slide-down      { animation: slideDown       var(--duration-500) var(--ease-out) both; }
.animate-slide-left      { animation: slideLeft       var(--duration-500) var(--ease-out) both; }
.animate-slide-right     { animation: slideRight      var(--duration-500) var(--ease-out) both; }
.animate-scale-in        { animation: scaleIn         var(--duration-300) var(--ease-spring) both; }
.animate-scale-in-bounce { animation: scaleInBounce   var(--duration-500) var(--ease-spring) both; }
.animate-bounce-in       { animation: bounceIn        var(--duration-500) var(--ease-bounce) both; }
.animate-float           { animation: float           3s var(--ease-in-out) infinite; }
.animate-float-slow      { animation: floatSlow       6s var(--ease-in-out) infinite; }
.animate-bobbing         { animation: bobbing         2s var(--ease-in-out) infinite; }
.animate-spin            { animation: spin            1s var(--ease-linear) infinite; }
.animate-pulse           { animation: pulse           2s var(--ease-in-out) infinite; }
.animate-pulse-shadow    { animation: pulseShadow     2s var(--ease-in-out) infinite; }
.animate-glow            { animation: glowPulse       3s var(--ease-in-out) infinite; }
.animate-morph           { animation: morphBlob       8s var(--ease-in-out) infinite; }
.animate-gradient        { animation: gradientShift   4s var(--ease-linear) infinite; background-size: 200% auto; }

/* Delay helpers */
.delay-100  { animation-delay: 100ms; }
.delay-200  { animation-delay: 200ms; }
.delay-300  { animation-delay: 300ms; }
.delay-400  { animation-delay: 400ms; }
.delay-500  { animation-delay: 500ms; }
.delay-600  { animation-delay: 600ms; }
.delay-700  { animation-delay: 700ms; }
.delay-800  { animation-delay: 800ms; }
.delay-1000 { animation-delay: 1000ms; }
.delay-1200 { animation-delay: 1200ms; }
.delay-1500 { animation-delay: 1500ms; }

/* Duration helpers */
.duration-200  { animation-duration: 200ms; }
.duration-300  { animation-duration: 300ms; }
.duration-500  { animation-duration: 500ms; }
.duration-700  { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }

/* Stagger helper (use with nth-child in JS) */
.stagger > * { animation-fill-mode: both; }
.stagger > *:nth-child(1)  { animation-delay: 0ms; }
.stagger > *:nth-child(2)  { animation-delay: 80ms; }
.stagger > *:nth-child(3)  { animation-delay: 160ms; }
.stagger > *:nth-child(4)  { animation-delay: 240ms; }
.stagger > *:nth-child(5)  { animation-delay: 320ms; }
.stagger > *:nth-child(6)  { animation-delay: 400ms; }
.stagger > *:nth-child(7)  { animation-delay: 480ms; }
.stagger > *:nth-child(8)  { animation-delay: 560ms; }

/* ============================================================
   3. GSAP-READY INITIAL STATE CLASSES
   ============================================================ */

/* These elements start invisible — GSAP will animate them in */

.gsap-fade-in {
  opacity: 0;
}

.gsap-fade-in.gsap-animated {
  opacity: 1;
  transition: opacity var(--duration-700) var(--ease-out);
}

.gsap-slide-up {
  opacity: 0;
  transform: translateY(50px);
}

.gsap-slide-up.gsap-animated {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-700) var(--ease-out),
              transform var(--duration-700) var(--ease-out);
}

.gsap-slide-down {
  opacity: 0;
  transform: translateY(-50px);
}

.gsap-slide-down.gsap-animated {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--duration-700) var(--ease-out),
              transform var(--duration-700) var(--ease-out);
}

.gsap-slide-left {
  opacity: 0;
  transform: translateX(50px);
}

.gsap-slide-left.gsap-animated {
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--duration-700) var(--ease-out),
              transform var(--duration-700) var(--ease-out);
}

.gsap-slide-right {
  opacity: 0;
  transform: translateX(-50px);
}

.gsap-slide-right.gsap-animated {
  opacity: 1;
  transform: translateX(0);
  transition: opacity var(--duration-700) var(--ease-out),
              transform var(--duration-700) var(--ease-out);
}

.gsap-scale-in {
  opacity: 0;
  transform: scale(0.88);
}

.gsap-scale-in.gsap-animated {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--duration-500) var(--ease-spring),
              transform var(--duration-500) var(--ease-spring);
}

/* GSAP split text line wrapper */
.gsap-line {
  overflow: hidden;
  display: block;
}

.gsap-line__inner {
  display: block;
  transform: translateY(100%);
  transition: transform var(--duration-700) var(--ease-out);
}

.gsap-line.gsap-animated .gsap-line__inner {
  transform: translateY(0);
}

/* ============================================================
   4. AOS (Animate On Scroll) CUSTOM OVERRIDES
   ============================================================ */

/* Override default AOS easing */
[data-aos] {
  transition-timing-function: var(--ease-out) !important;
}

[data-aos="fade-up"] {
  transform: translateY(32px);
}

[data-aos="fade-down"] {
  transform: translateY(-32px);
}

[data-aos="fade-left"] {
  transform: translateX(32px);
}

[data-aos="fade-right"] {
  transform: translateX(-32px);
}

[data-aos="zoom-in"] {
  transform: scale(0.92);
}

[data-aos="zoom-out"] {
  transform: scale(1.08);
}

/* AOS done state */
[data-aos].aos-animate {
  transform: none;
  opacity: 1;
}

/* AOS duration via CSS var */
[data-aos][data-aos-duration="300"]  { transition-duration: 300ms; }
[data-aos][data-aos-duration="400"]  { transition-duration: 400ms; }
[data-aos][data-aos-duration="500"]  { transition-duration: 500ms; }
[data-aos][data-aos-duration="600"]  { transition-duration: 600ms; }
[data-aos][data-aos-duration="700"]  { transition-duration: 700ms; }
[data-aos][data-aos-duration="800"]  { transition-duration: 800ms; }
[data-aos][data-aos-duration="1000"] { transition-duration: 1000ms; }

/* ============================================================
   5. HOVER TRANSITION CLASSES
   ============================================================ */

.hover-lift {
  transition: transform var(--duration-300) var(--ease-spring),
              box-shadow var(--duration-300) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover);
}

.hover-lift-sm {
  transition: transform var(--duration-200) var(--ease-spring);
}

.hover-lift-sm:hover {
  transform: translateY(-3px);
}

.hover-scale {
  transition: transform var(--duration-200) var(--ease-spring);
}

.hover-scale:hover {
  transform: scale(1.04);
}

.hover-scale-sm:hover {
  transform: scale(1.02);
}

.hover-glow {
  transition: box-shadow var(--duration-300) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: var(--shadow-primary);
}

.hover-brightness {
  transition: filter var(--duration-200) var(--ease-out);
}

.hover-brightness:hover {
  filter: brightness(1.08);
}

/* Image zoom on parent hover */
.hover-zoom-img img {
  transition: transform var(--duration-700) var(--ease-smooth);
}

.hover-zoom-img:hover img {
  transform: scale(1.06);
}

/* Underline grow */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: width var(--duration-300) var(--ease-out);
}

.hover-underline:hover::after {
  width: 100%;
}

/* Color shift */
.hover-color-primary {
  transition: color var(--duration-200) var(--ease-out);
}

.hover-color-primary:hover {
  color: var(--color-primary);
}

/* ============================================================
   6. LOADING SPINNER
   ============================================================ */

.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2.5px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: spin 0.7s linear infinite;
}

.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}

.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

.spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: white;
}

/* Gradient spinner (using conic-gradient + mask) */
.spinner-gradient {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary-600) 0%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: spin 0.8s linear infinite;
}

/* Dots spinner */
.spinner-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.spinner-dots span {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: bounceUp 1.2s var(--ease-in-out) infinite;
}

.spinner-dots span:nth-child(1) { animation-delay: 0s; }
.spinner-dots span:nth-child(2) { animation-delay: 0.15s; }
.spinner-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ============================================================
   7. SKELETON LOADING
   ============================================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-light) 25%,
    var(--color-border-light) 50%,
    var(--color-bg-light) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s var(--ease-linear) infinite;
  border-radius: var(--radius-md);
  color: transparent;
  user-select: none;
}

.skeleton--text {
  height: 1em;
  border-radius: var(--radius-sm);
}

.skeleton--heading {
  height: 1.5em;
  border-radius: var(--radius-sm);
}

.skeleton--avatar {
  border-radius: 50%;
  aspect-ratio: 1;
}

.skeleton--card {
  border-radius: var(--radius-card);
  height: 200px;
}

/* ============================================================
   8. ANIMATED GRADIENT BACKGROUNDS
   ============================================================ */

/* Moving gradient background (for sections/banners) */
.bg-gradient-animated {
  background: linear-gradient(
    -45deg,
    #4F46E5,
    #7C3AED,
    #38BDF8,
    #4F46E5
  );
  background-size: 400% 400%;
  animation: gradientShift 10s var(--ease-linear) infinite;
}

.bg-gradient-animated--fast {
  animation-duration: 5s;
}

.bg-gradient-animated--slow {
  animation-duration: 20s;
}

/* Aurora gradient blob */
.aurora-bg {
  position: relative;
  overflow: hidden;
}

.aurora-bg::before,
.aurora-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.aurora-bg::before {
  width: 50%;
  padding-bottom: 50%;
  background: rgba(79, 70, 229, 0.25);
  top: -20%;
  right: -10%;
  animation: floatSlow 8s var(--ease-in-out) infinite;
}

.aurora-bg::after {
  width: 40%;
  padding-bottom: 40%;
  background: rgba(56, 189, 248, 0.2);
  bottom: -15%;
  left: -5%;
  animation: floatSlow 10s var(--ease-in-out) infinite reverse;
}

/* ============================================================
   9. PARTICLE / GLOW EFFECTS
   ============================================================ */

/* Glow dot — place anywhere */
.glow-dot {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
}

.glow-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.4;
  animation: pulseRing 2s var(--ease-out) infinite;
}

.glow-dot--sky {
  background: var(--color-sky-400);
}

.glow-dot--sky::before {
  background: var(--color-sky-400);
}

.glow-dot--success {
  background: var(--color-success);
}

.glow-dot--success::before {
  background: var(--color-success);
}

/* Floating particles container */
.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: particleDrift 8s var(--ease-in-out) infinite;
}

.particle:nth-child(1)  { left: 10%; top: 80%; --dx: 30px;  --dy: -120px; animation-delay: 0s;    animation-duration: 7s;  }
.particle:nth-child(2)  { left: 25%; top: 70%; --dx: -20px; --dy: -100px; animation-delay: 1s;    animation-duration: 9s;  }
.particle:nth-child(3)  { left: 40%; top: 90%; --dx: 50px;  --dy: -140px; animation-delay: 2s;    animation-duration: 8s;  }
.particle:nth-child(4)  { left: 55%; top: 75%; --dx: -40px; --dy: -90px;  animation-delay: 0.5s;  animation-duration: 11s; }
.particle:nth-child(5)  { left: 70%; top: 85%; --dx: 20px;  --dy: -110px; animation-delay: 1.5s;  animation-duration: 7s;  }
.particle:nth-child(6)  { left: 85%; top: 65%; --dx: -30px; --dy: -130px; animation-delay: 3s;    animation-duration: 9s;  }
.particle:nth-child(7)  { left: 15%; top: 55%; --dx: 40px;  --dy: -80px;  animation-delay: 2.5s;  animation-duration: 6s;  }
.particle:nth-child(8)  { left: 50%; top: 60%; --dx: -15px; --dy: -120px; animation-delay: 0.8s;  animation-duration: 10s; }
.particle:nth-child(9)  { left: 75%; top: 50%; --dx: 25px;  --dy: -100px; animation-delay: 1.8s;  animation-duration: 8s;  }
.particle:nth-child(10) { left: 90%; top: 70%; --dx: -35px; --dy: -90px;  animation-delay: 3.5s;  animation-duration: 7s;  }

/* Glow orb (large diffuse circle) */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  opacity: 0.5;
}

.glow-orb--primary {
  background: radial-gradient(circle, var(--color-primary-500), transparent 70%);
}

.glow-orb--sky {
  background: radial-gradient(circle, var(--color-sky-400), transparent 70%);
}

.glow-orb--purple {
  background: radial-gradient(circle, var(--color-purple-600), transparent 70%);
}

/* ============================================================
   10. TRANSITION PRESETS
   ============================================================ */

/* Fade-up on scroll — pair with IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.5s var(--ease-spring),
              transform 0.5s var(--ease-spring);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger for reveal children */
.reveal-stagger > *:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2)  { transition-delay: 80ms; }
.reveal-stagger > *:nth-child(3)  { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4)  { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5)  { transition-delay: 320ms; }
.reveal-stagger > *:nth-child(6)  { transition-delay: 400ms; }
.reveal-stagger > *:nth-child(7)  { transition-delay: 480ms; }
.reveal-stagger > *:nth-child(8)  { transition-delay: 560ms; }

/* ============================================================
   11. PROGRESS / SKILL BAR
   ============================================================ */

.progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  width: 0;
  transition: width 1.2s var(--ease-out);
}

.progress-bar__fill.is-animated {
  width: var(--bar-width, 75%);
}

/* ============================================================
   12. COUNTER ANIMATION
   ============================================================ */

.counter-value {
  display: inline-block;
  animation: countUp var(--duration-500) var(--ease-out) both;
}

/* ============================================================
   13. CURSOR GLOW (cosmetic — attach to hero)
   ============================================================ */

.cursor-glow {
  pointer-events: none;
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  z-index: 0;
  transition: opacity var(--duration-300) var(--ease-out);
}

/* ============================================================
   14. GRADIENT TEXT SHIMMER EFFECT
   ============================================================ */

.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--color-primary-600) 0%,
    var(--color-violet-400) 30%,
    var(--color-sky-400) 60%,
    var(--color-primary-600) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: gradientShift 4s var(--ease-linear) infinite;
}

/* ============================================================
   15. REDUCED MOTION SUPPORT
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .gsap-fade-in,
  .gsap-slide-up,
  .gsap-slide-down,
  .gsap-slide-left,
  .gsap-slide-right,
  .gsap-scale-in {
    opacity: 1;
    transform: none;
  }
}