/* ============================================
   animations.css - Keyframes & Animation Classes
   ============================================ */

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

@keyframes borderGlow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

@keyframes glowPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

/* === FLOATING === */
@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.1;
  }
  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}

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

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

.float-animation-delayed {
  animation: float 3s ease-in-out 1.5s infinite;
}

/* === REVEAL ANIMATIONS === */
.reveal {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

.reveal-fade-up {
  transform: translateY(60px);
}

.reveal-fade-down {
  transform: translateY(-60px);
}

.reveal-fade-left {
  transform: translateX(-60px);
}

.reveal-fade-right {
  transform: translateX(60px);
}

.reveal-scale {
  transform: scale(0.8);
}

.reveal-rotate {
  transform: rotate(-10deg) scale(0.9);
}

/* === STATS COUNTER === */
.stat-number.animated {
  animation: countUp 2s ease forwards;
}

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

/* === BUTTON RIPPLE === */
.ripple {
  position: absolute;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: rippleAnim 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* === NAVBAR ANIMATIONS === */
.navbar-hidden {
  transform: translateX(-50%) translateY(-100%);
  transition: transform var(--transition-slow);
}

.navbar-visible {
  transform: translateX(-50%) translateY(0);
  transition: transform var(--transition-slow);
}

/* === GALLERY LIGHT REFLECTION === */
@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(25deg);
  }
  100% {
    transform: translateX(100%) rotate(25deg);
  }
}

/* === SECTION TRANSITION === */
.section-enter {
  animation: sectionEnter 1s ease forwards;
}

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

/* === MAGNETIC BUTTON === */
.magnetic {
  transition: transform 0.3s ease;
}

/* === DARK MODE TRANSITION === */
.theme-transitioning,
.theme-transitioning * {
  transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease !important;
}

/* === GLOW EFFECTS === */
.glow {
  box-shadow: 0 0 30px var(--accent-glow);
}

.glow-text {
  text-shadow: 0 0 40px var(--accent-glow);
}

/* === HAMBURGER MENU === */
@keyframes menuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === SCROLL TRIGGERED === */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
}

.stagger-children.visible > * {
  animation: staggerFadeIn 0.6s ease forwards;
}

.stagger-children.visible > *:nth-child(1) { animation-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { animation-delay: 0.2s; }
.stagger-children.visible > *:nth-child(4) { animation-delay: 0.3s; }
.stagger-children.visible > *:nth-child(5) { animation-delay: 0.4s; }
.stagger-children.visible > *:nth-child(6) { animation-delay: 0.5s; }

@keyframes staggerFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === HERO TITLE LETTER ANIMATION === */
.hero-title .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(40deg);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero-title .char.revealed {
  opacity: 1;
  transform: translateY(0) rotateX(0);
}