/* ==========================================================================
   AE Creative — Keyframes, scroll-reveal system, reduced-motion
   Extracted verbatim from the original inline <style> block. Behavior
   (IntersectionObserver toggling `.in`) now lives in assets/js/animations.js

   Phase 4 additions: hero fade-in keyframe, reveal stagger utilities, and
   box-shadow on the hover-lift utilities (using the pre-existing --e-2/
   --e-3 tokens from main.css, never applied to anything until now). The
   global reduced-motion override below (`*{transition:none!important;
   animation:none!important}`) already blankets every new transition/
   animation added in this pass — nothing extra was needed to make them
   respect prefers-reduced-motion.
   ========================================================================== */

/* html.cae-js is added by main.js once JavaScript has taken over; without
   it (no-JS fallback) all .rv content stays visible by default.
   Opacity and transform run on slightly different durations (opacity
   settles first, the movement finishes a touch after) — a small,
   standard refinement that reads as smoother than animating both in
   perfect lockstep. Distance reduced from the original 26px to 18px to
   keep the motion subtle ("avoid excessive motion"). */
html.cae-js .rv{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .9s var(--ease);
}
html.cae-js .rv.in{
  opacity:1;
  transform:none;
}

/* ---- Reveal stagger utilities ----
   Opt-in transition-delay steps for a small cascade of elements that
   reveal together (e.g. the hero's badge/heading/subtitle/CTA/trust
   row) instead of popping in simultaneously. Selectors are written as
   `html.cae-js .rv.rv-delay-N` (not just `.rv-delay-N`) so their
   specificity matches/exceeds the `html.cae-js .rv` transition rule
   above — otherwise that rule's shorthand `transition` (which sets an
   implicit 0s delay) would win regardless of source order and silently
   cancel the stagger. */
html.cae-js .rv.rv-delay-1{transition-delay:.08s}
html.cae-js .rv.rv-delay-2{transition-delay:.16s}
html.cae-js .rv.rv-delay-3{transition-delay:.24s}
html.cae-js .rv.rv-delay-4{transition-delay:.32s}
html.cae-js .rv.rv-delay-5{transition-delay:.4s}

@keyframes cae-drift{
  0%{transform:translate(0,0)}
  50%{transform:translate(2%,3%)}
  100%{transform:translate(0,0)}
}

@keyframes cae-scroll{
  0%{transform:translateY(0);opacity:1}
  70%{opacity:1}
  100%{transform:translateY(14px);opacity:0}
}

@keyframes cae-pulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* Hero video fade-in on load — opacity only, no scale/zoom. `both` fill
   mode holds opacity:0 before the animation starts and opacity:1 after
   it ends. If the reduced-motion override below cancels the animation,
   the element simply falls back to its default (fully opaque, no
   fade) — see the media query. */
@keyframes cae-hero-fade-in{
  from{opacity:0}
  to{opacity:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.cae-js .rv{opacity:1;transform:none}
}

/* ---- Hover-lift utilities ----
   Shared "card rises on hover" motion, factored into a scale so any new
   card/tile can opt in without redeclaring the transition + transform.
   -4 = small cards, -5 = portfolio tiles, -6 = large split cards.
   Shadows use the existing --e-2 (small lift) / --e-3 (larger lift)
   tokens from main.css's design system — not new colors, just the
   first time they're actually applied to anything. */
.hover-lift-4{transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.hover-lift-4:hover,.hover-lift-4:focus-visible{border-color:var(--brand-line);transform:translateY(-4px);box-shadow:var(--e-2)}
.hover-lift-4--noborder{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.hover-lift-4--noborder:hover,.hover-lift-4--noborder:focus-visible{transform:translateY(-4px);box-shadow:var(--e-2)}
.hover-lift-5{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.hover-lift-5:hover,.hover-lift-5:focus-visible{transform:translateY(-5px);box-shadow:var(--e-3)}
.hover-lift-6{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.hover-lift-6:hover,.hover-lift-6:focus-visible{transform:translateY(-6px);box-shadow:var(--e-3)}