/* ==========================================================================
   Animations — Pure CSS, no libraries
   Utility classes trigger on `.is-visible` (toggled by IntersectionObserver
   in assets/js/animations.js) so content is meaningful before JS loads.
   ========================================================================== */

/* ---------- Keyframes ---------- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes btn-shine {
  0%   { transform: translateX(-120%) skewX(-15deg); }
  100% { transform: translateX(220%) skewX(-15deg); }
}

/* ---------- Header-specific keyframes ---------- */

@keyframes dropdown-fade-down {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@keyframes drawer-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* ---------- Scroll-reveal utility classes ---------- */

[class*="animate-"] {
  opacity: 0;
}

.animate-fade-up { animation: fade-up .8s var(--ease-premium) forwards; }
.animate-fade-left { animation: fade-left .8s var(--ease-premium) forwards; }
.animate-fade-right { animation: fade-right .8s var(--ease-premium) forwards; }
.animate-zoom { animation: zoom-in .8s var(--ease-premium) forwards; }

[class*="animate-"] {
  animation-play-state: paused;
}

.is-visible[class*="animate-"] {
  animation-play-state: running;
}

/* Stagger helpers for groups of animated siblings */

.delay-1 { animation-delay: .1s; }
.delay-2 { animation-delay: .2s; }
.delay-3 { animation-delay: .3s; }
.delay-4 { animation-delay: .4s; }
.delay-5 { animation-delay: .5s; }

/* ---------- Continuous / ambient motion ---------- */

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

/* ---------- Parallax-ready ----------
   Elements meant to be transform-driven by scroll-linked JS.
   Kept on their own compositor layer to avoid jank. */

.parallax {
  will-change: transform;
  transform: translateZ(0);
}

/* ---------- Hover interactions ---------- */

.hover-lift {
  transition: transform var(--transition), box-shadow var(--transition);
}

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

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

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

/* Button shine sweep on hover */

.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 50%, transparent 100%);
  transform: translateX(-120%) skewX(-15deg);
  pointer-events: none;
}

.btn:hover::before {
  animation: btn-shine .9s var(--ease-premium);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  [class*="animate-"] {
    opacity: 1;
    animation: none !important;
  }

  .animate-float,
  .btn::before {
    animation: none !important;
  }
}