/* =================================================================
   RAHUL MISHRA WILDLIFE — ANIMATIONS
   Scroll-triggered reveals, transitions, ambient effects
================================================================= */

/* ----------------------------------------------------------------
   KEYFRAMES
---------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* ----------------------------------------------------------------
   SCROLL REVEAL CLASSES
   Applied by IntersectionObserver in main.js
---------------------------------------------------------------- */

/* Base state: invisible */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up    { transform: translateY(36px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.94); }

/* Triggered state: visible */
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children inside a revealed container */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------
   GOLD DIVIDER LINE — animated on scroll
---------------------------------------------------------------- */
.gold-line {
  display: block;
  width: 48px;
  height: 1px;
  background: var(--clr-gold);
  margin: 1.5rem 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;
}
.gold-line.is-visible { transform: scaleX(1); }

/* ----------------------------------------------------------------
   PARALLAX TILT on category cards (JS driven)
---------------------------------------------------------------- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

/* ----------------------------------------------------------------
   NAV LINK UNDERLINE ANIMATION
---------------------------------------------------------------- */
.nav__link::after {
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------
   HOVER SHINE on btl-card (shimmer sweep)
---------------------------------------------------------------- */
.btl-card {
  position: relative;
  overflow: hidden;
}
.btl-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(201,168,76,0.04) 50%,
    transparent 70%
  );
  transform: skewX(-20deg);
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.btl-card:hover::before { left: 140%; }

/* ----------------------------------------------------------------
   CURSOR GLOW (applied via JS on desktop)
---------------------------------------------------------------- */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(201,168,76,0.06) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 9000;
  transform: translate(-50%, -50%);
  will-change: transform;
  transition: opacity 0.3s ease;
  mix-blend-mode: screen;
}

/* ----------------------------------------------------------------
   MASONRY ITEM — stagger on load
---------------------------------------------------------------- */
.masonry-item {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.masonry-item.is-loaded {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------
   STORY CARD hover lift (supplement to styles.css)
---------------------------------------------------------------- */
.story-card {
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.story-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* ----------------------------------------------------------------
   HERO CONTENT ENTRANCE (sequence on page load)
---------------------------------------------------------------- */
.hero .reveal-up {
  animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero .reveal-up:nth-child(1) { animation-delay: 1.6s; }
.hero .reveal-up:nth-child(2) { animation-delay: 1.85s; }
.hero .reveal-up:nth-child(3) { animation-delay: 2.0s; }
.hero .reveal-up:nth-child(4) { animation-delay: 2.15s; }

/* ----------------------------------------------------------------
   REDUCED MOTION — respect user preference
---------------------------------------------------------------- */
@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;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__slide-img { transform: none !important; }
  .cursor-glow { display: none; }
}