/* AI_TAG: FRONTEND_GRAPHICS | Flyby + quick-stop animations and debug panel */
:root{
  /* Flyby duration: 25 seconds */
  --flyby-duration: 25000ms;
  /* Linear keeps speed constant so there is no mid-flight slow-down */
  --flyby-ease: linear;
  --quickstop-enter: 1400ms;
  --quickstop-land: 500ms;
  --quickstop-exit: 1200ms;
  --pigeon-scale: 0.18; /* much smaller scale for background flyby */
}

/* Canvas layer for transient animations */
#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:visible}

/* Pigeon instance container */
.flyby-pigeon{position:absolute;left:0;top:16vh;width:136px;height:136px;transform:translate3d(0,0,0) scale(var(--pigeon-scale));will-change:transform,opacity;z-index:50;contain:layout style size;overflow:visible}
.flyby-pigeon svg{width:100%;height:100%;display:block;position:relative;z-index:2}
.flyby-pigeon .env-html{ z-index: 1; }

/* Motion paths */
@keyframes flybyAcross{
  /* 0% = t=20s, 2.5% = t=19.5s (enter), 97.5% = t=0.5s (start exit), 100% = t=0s */
  /* Start off-screen by one scaled width (136px) plus viewport offset */
  0%{ transform: translate(calc(-20vw - (136px * var(--pigeon-scale))), -6vh) scale(var(--pigeon-scale)); opacity: 0; }
  2.5%{ opacity: 1; }
  50%{ transform: translate(50vw, -6vh) scale(var(--pigeon-scale)); opacity: 1; }
  98%{ opacity: 1; }
  100%{ transform: translate(118vw, -6vh) scale(var(--pigeon-scale)); opacity: 0; }
}

/* Quick stop: enter glide, land, idle bob, exit */
@keyframes quickEnter{
  0%{ transform: translate(-30vw, -2vh) scale(var(--pigeon-scale)); opacity:0; }
  30%{ opacity:1; }
  100%{ transform: translate(0, 0) scale(var(--pigeon-scale)); opacity:1; }
}
@keyframes quickLand{
  0%{ transform: translateY(0) scale(var(--pigeon-scale)) }
  100%{ transform: translateY(4px) scale(var(--pigeon-scale)) }
}
@keyframes sitBob{ 0%,100%{ transform: translateY(0) scale(var(--pigeon-scale)) } 50%{ transform: translateY(-2px) scale(var(--pigeon-scale)) } }

.flyby-anim{ animation: flybyAcross var(--flyby-duration) var(--flyby-ease) forwards; }
.quick-enter{ animation: quickEnter var(--quickstop-enter) ease-out forwards; }
.quick-land{ animation: quickLand var(--quickstop-land) ease-in forwards; }
.sit-bob{ animation: sitBob 2600ms ease-in-out infinite; }

/* Exit the quick stop: fly out of the screen similar to flyby */
@keyframes quickExit{
  0%{ transform: translate(0, 0) scale(var(--pigeon-scale)); opacity:1; }
  100%{ transform: translate(120vw, -10vh) scale(var(--pigeon-scale)); opacity: 0; }
}
.quick-exit{ animation: quickExit var(--quickstop-exit) var(--flyby-ease) forwards; }

/* Right-side debug menu */
#flybyDebug{ position: fixed; top: 88px; right: 8px; width: 220px; background: rgba(13,20,30,.9); border: 1px solid #243141; border-radius: 12px; padding: 10px; z-index: 500; color: #cfe0f2; box-shadow: 0 8px 24px rgba(0,0,0,.35); max-height: 70vh; overflow: auto; -webkit-overflow-scrolling: touch; }
#flybyDebug h4{ margin: 0 0 8px; font: 800 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica, Arial, sans-serif; color:#9fb3c8 }
#flybyDebug .row{ display:flex; gap:8px; margin:6px 0 }
#flybyDebug button{ flex:1; font-size:12px; padding:7px 8px; border-radius:8px; border:1px solid #2a3a4a; background:#15202b; color:#e8eff8; cursor:pointer }
#flybyDebug button:hover{ background:#1a2633 }
#flybyDebug .small{ font-size:11px; opacity:.8 }

/* Compact and scrollable on phones */
@media (max-width: 640px){
  #flybyDebug{ right: 6px; top: calc(env(safe-area-inset-top, 0px) + 8px); width: min(88vw, 280px); max-height: 56vh; padding: 8px; border-radius: 10px; }
  #flybyDebug h4{ font-size: 12px; }
  #flybyDebug .row{ gap:6px; margin:5px 0 }
  #flybyDebug button{ font-size:11px; padding:6px 7px }
}

/* Center countdown overlay for flyby */
#flybyCountdown{ position:fixed; left:50%; top:18%; transform:translate(-50%,-50%); z-index:400; pointer-events:none; }
#flybyCountdown .bubble{ background:rgba(13,20,30,.88); border:2px solid #4da3ff44; color:#e8eff8; font:800 28px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; padding:10px 14px; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 20px #4da3ff22; text-align:center; min-width:80px }

/* Small envelope sway for life */
@keyframes envSway{ 0%,100%{ transform: translateY(0) rotate(0deg) } 50%{ transform: translateY(-1.6px) rotate(-3deg) } }
.env-wrap{ transform-box: fill-box; transform-origin: center; }
.env{ transform-box: fill-box; transform-origin: center; animation: envSway 1800ms ease-in-out infinite }
.env.env-sit{ animation-duration: 2200ms }

/* HTML overlay envelope (avoids SVG clipping) */
.env-html{ position:absolute; left:0; top:0; pointer-events:none; z-index:2; width:180px; height:110px }
.env-html .envelope-svg{ width:100%; height:100% }
.env-html .envelope-svg .paper-fill{ fill:url(#envPaper) }
.env-html .envelope-svg .paper-outline{ fill:none; stroke:#1a2430; stroke-width:4.2; stroke-linejoin:round }
.env-html .envelope-svg .outline{ fill:none; stroke:#1a2430; stroke-width:5; stroke-linecap:round; stroke-linejoin:round }
.env-html .envelope-svg .heart{ fill:#e3383f; stroke:#1a2430; stroke-width:6.3; stroke-linejoin:miter }

/* Wing flapping: defer to canonical keyframes in animations/pigeon.css for consistency */
/* AI_TAG: FRONTEND_RENDER | Ensure flyby uses same flap as hub/side */
.flyby-pigeon .wing-left{ transform-box: fill-box; transform-origin: 48px 60px; animation: wingFlapLeft15 1.2s ease-in-out infinite; }
.flyby-pigeon .wing-right{ transform-box: fill-box; transform-origin: 76px 66px; animation: wingFlapRight15 1.2s ease-in-out infinite; }