/* ==========================================================================
   Animations & Motion
   Spring-based entrance animations + hover micro-interactions
   ========================================================================== */

/* --------------------------------------------------------------------------
   Spring Easing Approximations (CSS linear())
   --------------------------------------------------------------------------
   Snappy spring: damping 30, stiffness 400, mass 1, delay 0s
   Gentle spring: damping 56, stiffness 220, mass 1, delay 0.4s
   -------------------------------------------------------------------------- */

:root {
  --ease-spring-snappy: linear(0, 0.36, 0.66, 0.86, 0.96, 1.0, 0.995, 1.0);
  --ease-spring-gentle: linear(0, 0.11, 0.34, 0.56, 0.73, 0.85, 0.93, 0.97, 0.99, 1.0, 0.995, 1.0);
  --duration-snappy: 0.5s;
  --duration-gentle: 0.8s;
}


/* ==========================================================================
   Task 1: Entrance Animations
   ========================================================================== */

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

/* Snappy: pure fade-in (no scale) */
@keyframes entrance-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Gentle: fade + scale from 80% with perspective depth */
@keyframes entrance-scale {
  from {
    opacity: 0;
    transform: scale(0.8) perspective(1200px);
  }
  to {
    opacity: 1;
    transform: scale(1) perspective(1200px);
  }
}


/* --------------------------------------------------------------------------
   Base: Hidden state for elements waiting to enter viewport
   -------------------------------------------------------------------------- */

/* Snappy entrance targets (pure fade) */
.entrance-fade {
  opacity: 0;
}

/* Gentle entrance targets (fade + scale) */
.entrance-scale {
  opacity: 0;
  transform: scale(0.8) perspective(1200px);
}

/* --------------------------------------------------------------------------
   Visible state: triggered by IntersectionObserver adding .is-visible
   -------------------------------------------------------------------------- */

/* Snappy: immediate fade-in */
.entrance-fade.is-visible {
  animation: entrance-fade var(--duration-snappy) var(--ease-spring-snappy) forwards;
}

/* Gentle: delayed fade + scale */
.entrance-scale.is-visible {
  animation: entrance-scale var(--duration-gentle) var(--ease-spring-gentle) 0.4s forwards;
}

/* --------------------------------------------------------------------------
   Portfolio card stagger: each card delays 0.1s more
   -------------------------------------------------------------------------- */
.portfolio-card.entrance-scale:nth-child(1).is-visible { animation-delay: 0.4s; }
.portfolio-card.entrance-scale:nth-child(2).is-visible { animation-delay: 0.5s; }
.portfolio-card.entrance-scale:nth-child(3).is-visible { animation-delay: 0.6s; }
.portfolio-card.entrance-scale:nth-child(4).is-visible { animation-delay: 0.7s; }
.portfolio-card.entrance-scale:nth-child(5).is-visible { animation-delay: 0.8s; }
.portfolio-card.entrance-scale:nth-child(6).is-visible { animation-delay: 0.9s; }
.portfolio-card.entrance-scale:nth-child(7).is-visible { animation-delay: 1.0s; }
.portfolio-card.entrance-scale:nth-child(8).is-visible { animation-delay: 1.1s; }

/* Mobile: reduce stagger delays so cards appear faster when scrolling */
@media (max-width: 519.98px) {
  .portfolio-card.entrance-scale:nth-child(n).is-visible {
    animation-delay: 0.1s;
  }
}


/* ==========================================================================
   Task 2: Hover Micro-Interactions (CSS-only)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Portfolio card hover: subtle lift + shadow
   -------------------------------------------------------------------------- */
.portfolio-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.portfolio-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 8px 16px 0px rgba(39, 39, 39, 0.05);
}

/* --------------------------------------------------------------------------
   Client badge hover: arrow slides in from right
   (Already defined in ops-deck.css — reinforced here for specificity)
   -------------------------------------------------------------------------- */
.clients__badge-arrow {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.clients__badge:hover .clients__badge-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   Button/link hover: subtle lift
   -------------------------------------------------------------------------- */
.pill-btn,
.portfolio-card__link,
.contact__circle-btn,
.nav__pill {
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.pill-btn:hover,
.portfolio-card__link:hover,
.nav__pill:hover {
  transform: translateY(-1px);
}

.contact__circle-btn:hover {
  transform: translateY(-1px);
}


/* ==========================================================================
   Reduced Motion: Disable all animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Remove entrance animation hidden states */
  .entrance-fade,
  .entrance-scale {
    opacity: 1;
    transform: none;
  }

  /* Disable entrance animations */
  .entrance-fade.is-visible,
  .entrance-scale.is-visible,
  .portfolio-card.entrance-scale:nth-child(n).is-visible {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Disable hover transitions */
  .portfolio-card,
  .pill-btn,
  .portfolio-card__link,
  .contact__circle-btn,
  .nav__pill,
  .clients__badge-arrow {
    transition: none;
  }

  .portfolio-card:hover {
    transform: none;
    box-shadow: none;
  }

  .pill-btn:hover,
  .portfolio-card__link:hover,
  .nav__pill:hover,
  .contact__circle-btn:hover {
    transform: none;
  }

  /* Disable marquee scrolling */
  .engagement__track,
  .hero__numbers-track,
  .contact__ticker-track,
  .ops-deck__tags-track,
  .footer-area__svg-circle {
    animation: none;
  }
}