/* ============================================================
   EAGLES PHOTOGRAPHY — MOTION CSS
   Initial GSAP states (prevent FOUC), CSS keyframes,
   scroll progress bar, page transition curtain,
   reduced-motion overrides
   ============================================================ */

/* ============================================================
   SCROLL PROGRESS BAR
   ============================================================ */
.ep-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-amber);
  z-index: var(--z-progress);
  pointer-events: none;
  will-change: width;
  /* No transition — updated every RAF tick */
}

/* ============================================================
   PAGE TRANSITION CURTAIN
   ============================================================ */
.ep-curtain {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: var(--z-curtain);
  /* Starts below viewport; GSAP slides it up on navigate */
  transform: translateY(100%);
  pointer-events: none;
  will-change: transform;
}

.ep-curtain__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-logo);
  font-size: 52px;
  color: var(--color-amber);
  opacity: 0.85;
  user-select: none;
}

/* ============================================================
   HERO LOAD SEQUENCE — initial states
   GSAP animates these on DOMContentLoaded.
   Set here so elements are invisible before JS runs.
   ============================================================ */

/* Top navbar: fades in from top.
   Scoped to the homepage only — the hero load sequence
   (initHeroSequence) animates these in, and it runs on
   index.html alone. On every other page the navbar + right
   nav must be visible immediately, so they keep their natural
   (un-transformed) state there. */
.page-home .ep-navbar {
  opacity: 0;
  transform: translateY(-20px);
}

/* Right nav: slides in from right (homepage load only) */
.page-home .right-nav {
  transform: translateX(90px);
  opacity: 0;
}

/* Each hero word (Anton text fragments) — clip reveal */
.ep-word {
  display: inline-block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(80px);
  will-change: clip-path, transform;
}

/* Hero descriptor text + CTA links */
.ep-hero-desc {
  opacity: 0;
  transform: translateY(20px);
}

.ep-hero-ctas {
  opacity: 0;
  transform: translateX(-30px);
}

.ep-hero-ctas a {
  opacity: 0;
  transform: translateX(-24px);
}

/* Rotating stat badge */
.ep-hero-badge {
  opacity: 0;
  transform: rotate(-180deg);
  will-change: transform, opacity;
}

/* ============================================================
   SCROLL-TRIGGERED REVEALS
   GSAP ScrollTrigger toggles these to their final states.
   ============================================================ */

/* Single element reveal (opacity + y) */
.ep-reveal {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
}

/* Parent triggers children stagger */
.ep-stagger > * {
  opacity: 0;
  transform: translateY(50px);
  will-change: transform, opacity;
}

/* ============================================================
   SERVICE COLUMNS — stagger from bottom
   ============================================================ */
.ep-svc-col {
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}

.ep-svc-col .ep-pill {
  opacity: 0;
  transform: scale(0.9);
}

/* ============================================================
   ABOUT 4-COLOR HERO BLOCKS
   Each slides in from its edge
   ============================================================ */
.ep-about-col-1 { transform: translateX(-100%); }
.ep-about-col-2 { transform: translateY(-100%); }
.ep-about-col-3 { transform: translateY(100%); }
.ep-about-col-4 { transform: translateX(100%); }

/* ============================================================
   STORY TEXT HIGHLIGHT CHIPS
   Dark background slides in from left on scroll
   ============================================================ */
.ep-highlight {
  position: relative;
  display: inline;
}

.ep-highlight::before {
  content: '';
  position: absolute;
  inset: -2px -6px;
  background: var(--color-ink);
  z-index: -1;
  border-radius: 3px;
  /* clipPath animates: right side collapses to 0 */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.ep-highlight.is-revealed::before {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.6s var(--ease-expo-out);
}

/* ============================================================
   "HEY" FOOTER TEXT — shadow offset initial state
   GSAP animates the text-shadow on scroll
   ============================================================ */
.ep-footer-hey {
  text-shadow:
    0px 0px 0 var(--color-teal),
    0px 0px 0 var(--color-pink),
    0px 0px 0 var(--color-orange),
    0px 0px 0 var(--color-amber);
  will-change: text-shadow;
}

.ep-footer-hey.is-revealed {
  text-shadow:
    1px 1px 0 var(--color-teal),
    3px 3px 0 var(--color-pink),
    5px 5px 0 var(--color-orange),
    7px 7px 0 var(--color-amber);
  transition: text-shadow 0.8s var(--ease-expo-out);
}

/* ============================================================
   TESTIMONIAL CARD STACK — initial z-positions
   GSAP choreographs navigation transitions
   ============================================================ */
.ep-tcard {
  will-change: transform, opacity;
}

.ep-tcard[data-pos="1"] {
  z-index: 3;
  transform: translateX(-50%) translateY(0px) scale(1);
}

.ep-tcard[data-pos="2"] {
  z-index: 2;
  transform: translateX(-50%) translateY(16px) scale(0.97);
}

.ep-tcard[data-pos="3"] {
  z-index: 1;
  transform: translateX(-50%) translateY(32px) scale(0.94);
}

/* ============================================================
   CSS KEYFRAMES
   ============================================================ */

/* WhatsApp bubble pulse ring */
@keyframes ep-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Chatbot bubble gentle float */
@keyframes ep-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-5px); }
}

/* Checkmark SVG stroke draw */
@keyframes ep-draw {
  to { stroke-dashoffset: 0; }
}

/* Count-up number pop */
@keyframes ep-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Mobile menu link reveal — for non-JS fallback */
@keyframes ep-clip-reveal {
  from { clip-path: inset(0 0 100% 0); transform: translateY(60px); }
  to   { clip-path: inset(0 0 0% 0);   transform: translateY(0px); }
}

/* Marquee (CSS fallback — GSAP overrides this) */
@keyframes ep-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   MARQUEE HOVER STATE
   JS toggles .is-paused class on the track wrapper
   ============================================================ */
.ep-marquee-track.is-paused {
  animation-play-state: paused;
}

/* ============================================================
   WORK ITEM HOVER — image scale + overlay clip
   CSS handles the simple transforms; GSAP handles
   more complex choreography elsewhere
   ============================================================ */
.ep-work-item {
  --overlay-clip: inset(100% 0 0 0);
}

.ep-work-item:hover {
  --overlay-clip: inset(0% 0 0 0);
}

.ep-work-item img {
  transition: transform 0.6s var(--ease-expo-out);
}

.ep-work-item:hover img {
  transform: scale(1.05);
}

.ep-work-overlay {
  clip-path: var(--overlay-clip);
  transition: clip-path 0.4s ease;
}

.ep-work-overlay-inner {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.3s ease 0.15s,
    transform 0.3s ease 0.15s;
}

.ep-work-item:hover .ep-work-overlay-inner {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   FORM SUBMIT SUCCESS ANIMATION
   GSAP drives this — CSS sets starting state
   ============================================================ */
.ep-form-wrap {
  position: relative;
}

.ep-success-card {
  display: none;  /* GSAP shows it after form slides out */
  opacity: 0;
  transform: translateY(60px);
}

.ep-success-card.ep-visible {
  display: block;
}

/* SVG checkmark stroke animation */
.ep-checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: ep-draw 0.6s var(--ease-expo-out) 0.3s forwards;
}

.ep-checkmark-tick {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: ep-draw 0.4s var(--ease-expo-out) 0.7s forwards;
}

/* ============================================================
   REDUCED MOTION — override all motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Reset all initial states immediately */
  .ep-navbar,
  .right-nav,
  .ep-word,
  .ep-hero-desc,
  .ep-hero-ctas,
  .ep-hero-ctas a,
  .ep-hero-badge,
  .ep-reveal,
  .ep-stagger > *,
  .ep-svc-col,
  .ep-svc-col .ep-pill,
  .ep-about-col-1,
  .ep-about-col-2,
  .ep-about-col-3,
  .ep-about-col-4 {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  /* Disable pulse and float */
  @keyframes ep-pulse  { from, to { opacity: 0; transform: none; } }
  @keyframes ep-float  { from, to { transform: none; } }

  /* Instant transitions */
  .ep-work-item img,
  .ep-work-overlay,
  .ep-work-overlay-inner {
    transition: none;
  }

  /* Disable curtain */
  .ep-curtain { display: none !important; }
}