/* ============================================================
   ANIMATIONS.CSS — Al-Abbas Vocational Preparatory School
   Keyframes, Reveal Animations, Stagger Utilities
   Premium $7000 Quality — Royal Navy & Gold Theme
   ============================================================ */

/* ─────────────────────────────────────────────
   KEYFRAMES — Fade Animations
   ───────────────────────────────────────────── */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Scale Animations
   ───────────────────────────────────────────── */
@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

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

/* ─────────────────────────────────────────────
   KEYFRAMES — Float & Hover
   ───────────────────────────────────────────── */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

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

@keyframes floatHorizontal {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Shimmer & Glow
   ───────────────────────────────────────────── */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes shimmerGold {
  0% {
    background-position: -300% center;
  }
  100% {
    background-position: 300% center;
  }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(200, 168, 78, 0.2),
                0 0 30px rgba(200, 168, 78, 0.1);
  }
  50% {
    box-shadow: 0 0 25px rgba(200, 168, 78, 0.4),
                0 0 50px rgba(200, 168, 78, 0.2),
                0 0 75px rgba(200, 168, 78, 0.1);
  }
}

@keyframes glowPulseSubtle {
  0%, 100% {
    box-shadow: 0 0 10px rgba(200, 168, 78, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(200, 168, 78, 0.25),
                0 0 40px rgba(200, 168, 78, 0.1);
  }
}

@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(200, 168, 78, 0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(200, 168, 78, 0.5),
                 0 0 40px rgba(200, 168, 78, 0.2);
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Spin & Rotate
   ───────────────────────────────────────────── */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotateGentle {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Scroll Indicator
   ───────────────────────────────────────────── */
@keyframes scroll-wheel {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Bounce
   ───────────────────────────────────────────── */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateY(0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translateY(-20px);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translateY(-10px);
  }
  90% {
    transform: translateY(-4px);
  }
}

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

/* ─────────────────────────────────────────────
   KEYFRAMES — Border Glow
   ───────────────────────────────────────────── */
@keyframes borderGlow {
  0%, 100% {
    border-color: rgba(200, 168, 78, 0.15);
    box-shadow: 0 0 5px rgba(200, 168, 78, 0.05);
  }
  50% {
    border-color: rgba(200, 168, 78, 0.4);
    box-shadow: 0 0 20px rgba(200, 168, 78, 0.15);
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Slide
   ───────────────────────────────────────────── */
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Pulse & Ripple
   ───────────────────────────────────────────── */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Counter / Number Animations
   ───────────────────────────────────────────── */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────
   KEYFRAMES — Decorative / Pattern
   ───────────────────────────────────────────── */
@keyframes patternShift {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}

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

/* ─────────────────────────────────────────────
   KEYFRAMES — Preloader
   ───────────────────────────────────────────── */
@keyframes preloaderSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes preloaderPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.7;
  }
}

/* ─────────────────────────────────────────────
   REVEAL ANIMATION CLASSES
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-in-out-premium),
              transform 0.8s var(--ease-in-out-premium);
  will-change: opacity, transform;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s var(--ease-in-out-premium),
              transform 0.8s var(--ease-in-out-premium);
  will-change: opacity, transform;
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s var(--ease-in-out-premium),
              transform 0.8s var(--ease-in-out-premium);
  will-change: opacity, transform;
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.8s var(--ease-in-out-premium),
              transform 0.8s var(--ease-in-out-premium);
  will-change: opacity, transform;
}

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

.reveal-fade {
  opacity: 0;
  transition: opacity 1s var(--ease-in-out-premium);
  will-change: opacity;
}

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

/* ─────────────────────────────────────────────
   ANIMATION UTILITY CLASSES
   ───────────────────────────────────────────── */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

.float-gentle {
  animation: floatGentle 8s ease-in-out infinite;
}

.shimmer-text {
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

.glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

.glow-pulse-subtle {
  animation: glowPulseSubtle 3s ease-in-out infinite;
}

.spin-slow {
  animation: spin 20s linear infinite;
}

.spin-medium {
  animation: spin 8s linear infinite;
}

.bounce-animation {
  animation: bounce 2s infinite;
}

.bounce-subtle {
  animation: bounceSubtle 2s ease-in-out infinite;
}

.border-glow {
  animation: borderGlow 3s ease-in-out infinite;
}

.pulse-animation {
  animation: pulse 2s ease-in-out infinite;
}

.rotate-3d {
  animation: rotate3d 20s linear infinite;
}

.gradient-flow {
  background-size: 400% 400%;
  animation: gradientFlow 8s ease infinite;
}

/* ─────────────────────────────────────────────
   STAGGER ANIMATION DELAYS
   ───────────────────────────────────────────── */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }
.stagger-7 { transition-delay: 0.7s; }
.stagger-8 { transition-delay: 0.8s; }
.stagger-9 { transition-delay: 0.9s; }
.stagger-10 { transition-delay: 1.0s; }

/* Animation delay variants (for keyframe animations) */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }

/* ─────────────────────────────────────────────
   HOVER ANIMATION HELPERS
   ───────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

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

.hover-scale {
  transition: transform var(--transition-smooth);
}

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

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

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

.hover-gold-border {
  transition: border-color var(--transition-smooth);
}

.hover-gold-border:hover {
  border-color: var(--gold-500);
}

/* ─────────────────────────────────────────────
   ACCESSIBILITY — Reduced Motion
   ───────────────────────────────────────────── */
@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;
  }

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

  .float-animation,
  .float-gentle,
  .shimmer-text,
  .glow-pulse,
  .glow-pulse-subtle,
  .spin-slow,
  .spin-medium,
  .bounce-animation,
  .bounce-subtle,
  .border-glow,
  .pulse-animation,
  .rotate-3d,
  .gradient-flow {
    animation: none;
  }
}