/* ============================================================
   AFTERHOURS — MOTH FLY-IN (page load)
   The flying clone is positioned fixed, on top of everything,
   and never intercepts clicks. Motion is gated in moth-flyin.js
   via prefers-reduced-motion and a once-per-session flag.
   ============================================================ */

#moth-flyin {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Nav moth is hidden until the flight lands (JS adds/removes this) */
.nav__logo .moth.moth--hold { opacity: 0; }

/* ── Layered, lifelike flutter ──
   Wings: fast asymmetric flap (squeeze + tilt). Body: slow bob.
   The two layers run at different rates so the motion reads
   organic instead of robotic. */
@keyframes moth-flutter-fast {
  0%   { transform: rotateZ(-5deg) scaleX(1.0)  scaleY(1.0); }   /* upstroke top */
  40%  { transform: rotateZ(6deg)  scaleX(0.72) scaleY(1.08); }  /* down-flap (squeeze) */
  55%  { transform: rotateZ(6deg)  scaleX(0.78) scaleY(1.05); }  /* brief hold */
  100% { transform: rotateZ(-5deg) scaleX(1.0)  scaleY(1.0); }   /* recovery */
}
@keyframes moth-bob {
  0%, 100% { transform: translateY(0)    translateX(0); }
  25%      { transform: translateY(-4px) translateX(1px); }
  50%      { transform: translateY(-2px) translateX(-1px); }
  75%      { transform: translateY(-5px) translateX(0); }
}
/* glow/blur pulse synced to the 200ms wing cycle — blur peaks on the flap */
@keyframes moth-wing-blur {
  0%, 100% { filter: drop-shadow(0 0 16px var(--blue)) blur(0); }
  40%      { filter: drop-shadow(0 0 28px var(--blue)) blur(0.8px); }
}

#moth-flyin .moth-flyin__flutter {
  will-change: transform, filter;
  animation: moth-bob 600ms ease-in-out infinite,
             moth-wing-blur 200ms linear infinite;
}
#moth-flyin .moth-flyin__wings {
  will-change: transform;
  transform-origin: center center;
  animation: moth-flutter-fast 200ms ease-in-out infinite;
}

/* ── Landing morph ──
   JS adds this for the final beat: flutter stops and the glow
   halo fades down toward the nav moth's subtle glow. */
#moth-flyin.moth-flyin--landing .moth-flyin__wings,
#moth-flyin.moth-flyin--landing .moth-flyin__flutter {
  animation: none !important;
}
#moth-flyin.moth-flyin--landing .moth-flyin__flutter {
  filter: drop-shadow(0 0 6px rgba(89, 0, 255, 0.35));
  transition: filter 280ms ease;
}

@media (prefers-reduced-motion: reduce) {
  #moth-flyin { display: none !important; }
  #moth-flyin .moth-flyin__flutter,
  #moth-flyin .moth-flyin__wings { animation: none !important; }
  .nav__logo .moth.moth--hold { opacity: 1 !important; }
}