/* ============================================================
   AS Apps Developer Portal — Animations
   ============================================================
   GPU-accelerated keyframes, scroll-reveal utilities,
   and ambient background animations.
   All animations respect prefers-reduced-motion.
   ============================================================ */

/* ================================================================
   KEYFRAME DEFINITIONS
   ================================================================ */

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

/* ── Fade In Up ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Fade In Down ── */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Fade In Left ── */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Fade In Right ── */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Scale In ── */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale3d(0.9, 0.9, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* ── Blur In ── */
@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* ── Float (ambient) ── */
@keyframes float {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

/* ── Gentle Breathe (ambient) ── */
@keyframes breathe {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* ── Pulse Glow ── */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.2);
  }
  50% {
    box-shadow: 0 0 40px rgba(37, 99, 235, 0.4);
  }
}

/* ── Aurora Shift ── */
@keyframes auroraShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ── Gradient Rotate (for mesh backgrounds) ── */
@keyframes gradientRotate {
  0% {
    transform: rotate(0deg) scale(1.5);
  }
  100% {
    transform: rotate(360deg) scale(1.5);
  }
}

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

/* ── Count Up (used with JS counter) ── */
@keyframes countPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1);
  }
}

/* ================================================================
   SCROLL REVEAL UTILITY CLASSES
   ================================================================
   Elements start hidden. The JS IntersectionObserver adds
   `.is-visible` to trigger the animation.
   ================================================================ */

.reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.is-visible {
  opacity: 1;
}

/* ── Reveal Variants ── */
.reveal--up {
  transform: translate3d(0, 40px, 0);
}
.reveal--up.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal--down {
  transform: translate3d(0, -30px, 0);
}
.reveal--down.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal--left {
  transform: translate3d(-40px, 0, 0);
}
.reveal--left.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal--right {
  transform: translate3d(40px, 0, 0);
}
.reveal--right.is-visible {
  transform: translate3d(0, 0, 0);
}

.reveal--scale {
  transform: scale3d(0.9, 0.9, 1);
}
.reveal--scale.is-visible {
  transform: scale3d(1, 1, 1);
}

.reveal--blur {
  filter: blur(10px);
}
.reveal--blur.is-visible {
  filter: blur(0);
}

/* ── Staggered Delays (for grid children) ── */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }
.reveal-delay-5 { transition-delay: 500ms; }
.reveal-delay-6 { transition-delay: 600ms; }
.reveal-delay-7 { transition-delay: 700ms; }
.reveal-delay-8 { transition-delay: 800ms; }

/* ================================================================
   AMBIENT / DECORATIVE ANIMATIONS
   ================================================================ */

/* ── Floating element ── */
.anim-float {
  animation: float 6s ease-in-out infinite;
}

/* ── Breathing glow ── */
.anim-breathe {
  animation: breathe 4s ease-in-out infinite;
}

/* ── Aurora background shift ── */
.anim-aurora {
  background-size: 200% 200%;
  animation: auroraShift 15s ease infinite;
}

/* ── Slow spin (for decorative orbs) ── */
.anim-spin-slow {
  animation: gradientRotate 20s linear infinite;
}

/* ── Pulse glow (for CTAs) ── */
.anim-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* ================================================================
   TRANSITION UTILITIES
   ================================================================ */

.transition-all {
  transition: all var(--transition-base);
}

.transition-colors {
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base);
}

.transition-transform {
  transition: transform var(--transition-base);
}

.transition-opacity {
  transition: opacity var(--transition-base);
}

/* ── Hover lift ── */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* ── Hover scale ── */
.hover-scale {
  transition: transform var(--transition-fast);
}
.hover-scale:hover {
  transform: scale(1.03);
}

/* ── Hover glow ── */
.hover-glow {
  transition: box-shadow var(--transition-base);
}
.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}