/* =========================================
   ARNOREX ANIMATION SYSTEM
   Cinematic Premium Motion Engine
========================================= */

/* =========================================
   GLOBAL ANIMATION VARIABLES
========================================= */

:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 600ms;
  --duration-cinematic: 1200ms;
}

/* =========================================
   FADE ANIMATIONS
========================================= */

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;

    transform:
      translateY(40px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;

    transform:
      translateY(-40px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;

    transform:
      translateX(-40px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;

    transform:
      translateX(40px);
  }

  to {
    opacity: 1;

    transform:
      translateX(0);
  }
}

/* =========================================
   SCALE ANIMATIONS
========================================= */

@keyframes scaleIn {
  from {
    opacity: 0;

    transform:
      scale(0.92);
  }

  to {
    opacity: 1;

    transform:
      scale(1);
  }
}

@keyframes pulseGlow {
  0% {
    box-shadow:
      0 0 0 rgba(255,184,0,0);
  }

  50% {
    box-shadow:
      0 0 35px rgba(255,184,0,0.28);
  }

  100% {
    box-shadow:
      0 0 0 rgba(255,184,0,0);
  }
}

/* =========================================
   FLOATING EFFECTS
========================================= */

@keyframes float {
  0% {
    transform:
      translateY(0px);
  }

  50% {
    transform:
      translateY(-12px);
  }

  100% {
    transform:
      translateY(0px);
  }
}

@keyframes floatSlow {
  0% {
    transform:
      translateY(0px)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-20px)
      rotate(1deg);
  }

  100% {
    transform:
      translateY(0px)
      rotate(0deg);
  }
}

/* =========================================
   ROTATION EFFECTS
========================================= */

@keyframes rotateSlow {
  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }
}

/* =========================================
   SHIMMER EFFECT
========================================= */

@keyframes shimmer {
  0% {
    background-position:
      -1200px 0;
  }

  100% {
    background-position:
      1200px 0;
  }
}

/* =========================================
   GRADIENT FLOW
========================================= */

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

  50% {
    background-position:
      100% 50%;
  }

  100% {
    background-position:
      0% 50%;
  }
}

/* =========================================
   BLUR GLOW
========================================= */

@keyframes glowPulse {
  0% {
    filter:
      brightness(1);
  }

  50% {
    filter:
      brightness(1.15);
  }

  100% {
    filter:
      brightness(1);
  }
}

/* =========================================
   BUTTON RIPPLE
========================================= */

@keyframes ripple {
  from {
    transform:
      scale(0);

    opacity: 0.7;
  }

  to {
    transform:
      scale(4);

    opacity: 0;
  }
}

/* =========================================
   LOADING SPINNER
========================================= */

@keyframes spin {
  from {
    transform:
      rotate(0deg);
  }

  to {
    transform:
      rotate(360deg);
  }
}

/* =========================================
   UTILITIES — FADE
========================================= */

.animate-fade-in {
  animation:
    fadeIn var(--duration-normal)
    var(--ease-premium);
}

.animate-fade-up {
  animation:
    fadeUp var(--duration-normal)
    var(--ease-premium);
}

.animate-fade-down {
  animation:
    fadeDown var(--duration-normal)
    var(--ease-premium);
}

.animate-fade-left {
  animation:
    fadeLeft var(--duration-normal)
    var(--ease-premium);
}

.animate-fade-right {
  animation:
    fadeRight var(--duration-normal)
    var(--ease-premium);
}

/* =========================================
   UTILITIES — SCALE
========================================= */

.animate-scale-in {
  animation:
    scaleIn var(--duration-normal)
    var(--ease-premium);
}

/* =========================================
   UTILITIES — FLOAT
========================================= */

.animate-float {
  animation:
    float 5s ease-in-out infinite;
}

.animate-float-slow {
  animation:
    floatSlow 8s ease-in-out infinite;
}

/* =========================================
   UTILITIES — GLOW
========================================= */

.animate-glow {
  animation:
    glowPulse 3s ease-in-out infinite;
}

.animate-pulse-glow {
  animation:
    pulseGlow 2.5s ease-in-out infinite;
}

/* =========================================
   UTILITIES — ROTATION
========================================= */

.animate-rotate {
  animation:
    rotateSlow 20s linear infinite;
}

.animate-spin {
  animation:
    spin 1s linear infinite;
}

/* =========================================
   SHIMMER LOADING
========================================= */

.shimmer {
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.04) 25%,
      rgba(255,255,255,0.12) 50%,
      rgba(255,255,255,0.04) 75%
    );

  background-size:
    1200px 100%;

  animation:
    shimmer 2s infinite linear;
}

/* =========================================
   HOVER LIFT EFFECT
========================================= */

.hover-lift {
  transition:
    transform var(--duration-normal)
    var(--ease-premium),

    box-shadow var(--duration-normal)
    var(--ease-premium);
}

.hover-lift:hover {
  transform:
    translateY(-8px);

  box-shadow:
    var(--shadow-lg);
}

/* =========================================
   HOVER GLOW EFFECT
========================================= */

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

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

/* =========================================
   GLASS CARD HOVER
========================================= */

.glass-hover {
  transition:
    background var(--duration-normal)
    var(--ease-premium),

    border var(--duration-normal)
    var(--ease-premium),

    transform var(--duration-normal)
    var(--ease-premium);
}

.glass-hover:hover {
  transform:
    translateY(-6px);

  background:
    rgba(255,255,255,0.09);

  border-color:
    rgba(255,184,0,0.24);
}

/* =========================================
   PAGE ENTER ANIMATION
========================================= */

.page-enter {
  animation:
    fadeUp 700ms var(--ease-premium);
}

/* =========================================
   HERO GRADIENT ANIMATION
========================================= */

.gradient-animated {
  background-size:
    300% 300%;

  animation:
    gradientFlow 10s ease infinite;
}

/* =========================================
   REDUCE 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;
  }

  }