/**
 * Sasha Khan — Animations
 * Keyframe animations and motion effects
 */

/* ═══════════════════════════════════════════════════════════
   FADE ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

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

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

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

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   LOGO ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes logoGlow {
  0% {
    filter: drop-shadow(0 0 20px rgba(212, 175, 55, 0.3));
  }
  100% {
    filter: drop-shadow(0 0 40px rgba(212, 175, 55, 0.5));
  }
}

@keyframes logoPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
  }
}

@keyframes logoReveal {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: blur(0);
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL INDICATOR ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes scrollPulse {
  0%, 100% {
    opacity: 0.5;
    transform: scaleY(1);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.2);
  }
}

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}

/* ═══════════════════════════════════════════════════════════
   DECORATIVE ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes diagonalReveal {
  from {
    opacity: 0;
    stroke-dashoffset: 2000;
  }
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   TRIANGLE ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

@keyframes triangleRevealTop {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 50% 50%);
  }
}

@keyframes triangleRevealBottom {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(50% 50%, 0 100%, 100% 100%);
  }
}

@keyframes triangleRevealLeft {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(0 0, 50% 50%, 0 100%);
  }
}

@keyframes triangleRevealRight {
  from {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
  }
  to {
    clip-path: polygon(100% 0, 50% 50%, 100% 100%);
  }
}

/* ═══════════════════════════════════════════════════════════
   PARALLAX EFFECT KEYFRAMES
   ═══════════════════════════════════════════════════════════ */

@keyframes subtleFloat {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-5px);
  }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION — ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */

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

  .hero-logo__image {
    animation: none;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.4));
  }

  .hero-triangle__title {
    animation: none;
    opacity: 1;
  }

  .hero-scroll-indicator {
    animation: none;
    opacity: 1;
  }

  .hero-scroll-indicator__line {
    animation: none;
  }
}