/* ============================================================
   EPIC HOVER ANIMATIONS  (v2 — full-frame, properly spaced)
   Overlays use viewBox "0 0 160 100" + preserveAspectRatio="none",
   so SVG X units span the full image width (0–160) and Y units the
   full height (0–100). Element BASE positions are set in the SVG
   markup; CSS animates only motion deltas (in user units via px).
   Plays on hover/focus; respects prefers-reduced-motion.
   ============================================================ */

.ar-anim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  background: radial-gradient(120% 90% at 50% 40%, rgba(20,17,15,0) 0%, rgba(20,17,15,0.30) 100%);
}
.ar-anim svg { width: 100%; height: 100%; display: block; overflow: visible; }

.ar-anim [data-art] {
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}
.ar-anim [data-fill] {
  fill: #fff;
  stroke: none;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

/* Reveal on hover/focus */
.ar-project__media:hover .ar-anim,
.ar-project__media:focus-visible .ar-anim,
.ar-project__media:focus-within .ar-anim { opacity: 1; }
.ar-project__media:hover img { transform: scale(1.05); }

/* All animated parts idle until hovered, then run fresh each time */
.ar-anim [class*="anim-"],
.ar-anim .produce-fall, .ar-anim .cap-toss,
.ar-anim .trophy,
.ar-anim .eagle, .ar-anim .wing-l, .ar-anim .wing-r { animation-play-state: paused; }
.ar-project__media:hover  .ar-anim *,
.ar-project__media:focus-within .ar-anim * { animation-play-state: running; }

/* ============================================================
   1) NJ COURTS — balance scale. Motion is done in SMIL inside the
   SVG (see inc/projects.php) so it pivots in local coords reliably.
   CSS here only fades the whole overlay in (handled by .ar-anim).
   The .scale group just needs to be visible; no CSS transforms.
   ============================================================ */
.ar-anim--njcourts .scale { opacity: 0.97; }

/* ============================================================
   2) FARMTAB — produce falls the full height, spinning, spaced out
   ============================================================ */
.ar-anim--farmtab .produce-fall {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: ft-fall 2.6s linear infinite;
}
.ar-anim--farmtab .p1 .produce-fall { animation-delay: 0.0s; animation-duration: 2.6s; }
.ar-anim--farmtab .p2 .produce-fall { animation-delay: 0.9s; animation-duration: 3.0s; }
.ar-anim--farmtab .p3 .produce-fall { animation-delay: 0.4s; animation-duration: 2.4s; }
.ar-anim--farmtab .p4 .produce-fall { animation-delay: 1.4s; animation-duration: 2.8s; }
.ar-anim--farmtab .p5 .produce-fall { animation-delay: 0.6s; animation-duration: 3.2s; }
@keyframes ft-fall {
  0%   { opacity: 0; transform: translateY(-18px) rotate(0deg); }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(118px) rotate(400deg); }
}

/* ============================================================
   3) MIDDLESEX — caps launch up from mid-frame and fall back
   ============================================================ */
.ar-anim--middlesex .cap-toss {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: mc-toss 2.4s var(--ease) infinite;
}
.ar-anim--middlesex .c1 .cap-toss { animation-delay: 0.00s; }
.ar-anim--middlesex .c2 .cap-toss { animation-delay: 0.18s; }
.ar-anim--middlesex .c3 .cap-toss { animation-delay: 0.36s; }
.ar-anim--middlesex .c4 .cap-toss { animation-delay: 0.12s; }
.ar-anim--middlesex .c5 .cap-toss { animation-delay: 0.28s; }
@keyframes mc-toss {
  0%   { opacity: 0; transform: translateY(46px) rotate(0deg) scale(0.85); }   /* below bottom edge */
  12%  { opacity: 1; }
  48%  { opacity: 1; transform: translateY(-54px) rotate(220deg) scale(1); }   /* peak near top */
  86%  { opacity: 1; transform: translateY(46px) rotate(350deg) scale(0.88); } /* fall back below */
  94%  { opacity: 0; }
  100% { opacity: 0; transform: translateY(48px) rotate(360deg) scale(0.85); }
}

/* ============================================================
   4) GARDEN STATE TC — trophy + sparks. Motion is done in SMIL inside
   the SVG (pop-in scale, spark twinkle) so it pivots at each element's
   LOCAL origin reliably. CSS here only does the opacity glow pulse on
   the cup, which needs no transform-box.
   ============================================================ */
.ar-anim--gstc .trophy {
  animation: gstc-trophy-glow 2.4s 0.7s ease-in-out infinite;
}
@keyframes gstc-trophy-glow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50%     { filter: drop-shadow(0 0 5px rgba(255,255,255,0.55)); }
}

/* ============================================================
   5) NJJDA — eagle swoops across the full frame, wings flapping
   ============================================================ */
.ar-anim--njjda .eagle {
  transform-box: fill-box;
  opacity: 0;
  animation: njjda-swoop 3.6s var(--ease) infinite;
}
@keyframes njjda-swoop {
  0%   { opacity: 0; transform: translate(-20px, 18px) scale(0.8) rotate(-4deg); }
  10%  { opacity: 1; }
  35%  { transform: translate(55px, 66px) scale(1.15) rotate(10deg); }   /* dive low-center */
  62%  { transform: translate(105px, 22px) scale(1.0) rotate(-6deg); }   /* pull up */
  90%  { opacity: 1; transform: translate(165px, 6px) scale(0.85) rotate(-8deg); }
  100% { opacity: 0; transform: translate(185px, -4px) scale(0.8) rotate(-8deg); }
}
.ar-anim--njjda .wing-l { transform-box: fill-box; transform-origin: 100% 80%; animation: njjda-flap-l 0.46s ease-in-out infinite; }
.ar-anim--njjda .wing-r { transform-box: fill-box; transform-origin: 0% 80%;   animation: njjda-flap-r 0.46s ease-in-out infinite; }
@keyframes njjda-flap-l { 0%,100% { transform: rotate(-14deg) scaleY(0.92); } 50% { transform: rotate(22deg) scaleY(1.06); } }
@keyframes njjda-flap-r { 0%,100% { transform: rotate(14deg) scaleY(0.92); }  50% { transform: rotate(-22deg) scaleY(1.06); } }

/* ============================================================
   REDUCED MOTION — static, no looping
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ar-project__media:hover .ar-anim,
  .ar-project__media:focus-within .ar-anim { opacity: 1; }
  .ar-anim * { animation: none !important; }
  .ar-anim .scale, .ar-anim .produce-fall,
  .ar-anim .cap-toss, .ar-anim .trophy, .ar-anim .eagle { opacity: 1 !important; }
  .ar-anim--gstc .spark { opacity: 1 !important; }
  .ar-anim--njjda .eagle { transform: translate(70px, 40px) scale(1.4) !important; }
  .ar-anim--middlesex .cap-toss { transform: translateY(-30px) !important; }
}