/* AI_TAG: FRONTEND_RENDER | First-pigeon encounter stage styles */
:root{ --encounter-height: 54vh; --encounter-min-h: 360px; --encounter-max-h: 620px; --encounter-accent: #76beff; --encounter-bg: rgba(9,14,20,0.6); }

#encounterStage{ position:relative; width:100%; height:var(--encounter-height); min-height:var(--encounter-min-h); max-height:var(--encounter-max-h); margin:6px auto 0 auto; overflow:visible; pointer-events:auto; z-index:450; }
#encounterStage::before{ content:""; display:block; position:absolute; inset:0; pointer-events:none; }
#encounterStage.hidden{ display:none; }

#encounterCanvas{ position:absolute; inset:0; overflow:hidden; }

/* Pigeon slot containers */
.enc-slot{ position:absolute; bottom:2%; width:28%; height:65%; transform:translate3d(0,0,0); will-change:transform, opacity; }
.enc-slot.left{ left:5%; }
.enc-slot.center{ left:36%; bottom:0%; }
.enc-slot.right{ right:5%; bottom:4%; }

/* Pigeon SVG root */
.enc-pigeon{ width:100%; height:100%; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,0.45)); transform-origin:50% 85%; }
.enc-pigeon .body{ fill:url(#encGradBody); }
.enc-pigeon .head{ fill:url(#encGradBody); }
.enc-pigeon .belly{ fill:#b7c6d6; opacity:1; }
.enc-pigeon .wing{ fill:#aabccd; opacity:.9; transform-box:fill-box; transform-origin:50% 50%; }
.enc-pigeon .eye{ fill:#0a0a0a; }
.enc-pigeon .beak{ fill:#f6b652; }
/* legs and toes paint above background with solid opacity */
.enc-pigeon .foot{ stroke:#c78c50; stroke-width:1.5; stroke-linecap:round; opacity:1; }

/* Sitting micro-breath and subtle eye blink */
@keyframes encSit { 0%{ transform:translateY(0) } 50%{ transform:translateY(0.5%) } 100%{ transform:translateY(0) } }
@keyframes encBlink { 0%,96%{ r:3 } 98%{ r:0.8 } 100%{ r:3 } }
.enc-idle .enc-pigeon{ animation: encSit 12s ease-in-out infinite; }
.enc-idle .enc-pigeon .eye{ animation: encBlink 8.8s steps(1,end) infinite; transform-origin:50% 50%; }

/* Flight phase: temporary wing flaps */
/* Match canonical elder pivots so encounter pigeons mirror hub animation */
.enc-flying .enc-pigeon .wing-left{
  animation: wingFlapLeft15 580ms ease-in-out infinite;
  transform-origin: 46px 66px;
  transform-box: view-box;
}
.enc-flying .enc-pigeon .wing-right{
  animation: wingFlapRight15 580ms ease-in-out infinite;
  transform-origin: 76px 66px;
  transform-box: view-box;
}
.enc-flying .enc-pigeon{ animation: encSit 4.8s ease-in-out infinite; }

/* Focus/hover highlight */
.enc-slot:focus-within .enc-pigeon, .enc-slot:hover .enc-pigeon{ filter: drop-shadow(0 10px 26px rgba(118,190,255,0.45)); }
.enc-slot:focus{ outline: none; }

/* Info panel – in-scene, non-modal */
.enc-panel{ position:absolute; left:0; right:0; bottom:0; padding:12px 14px; background:linear-gradient(180deg, transparent 0%, rgba(8,12,18,0.4) 18%, rgba(8,12,18,0.72) 100%); color:#e8f2ff; font-size:14px; line-height:1.35; backdrop-filter: blur(6px) saturate(120%); border-top:1px solid rgba(255,255,255,0.08); transform: translateY(100%); opacity:0; transition: transform .32s ease, opacity .28s ease; }
.enc-panel.show{ transform: translateY(0); opacity:1; }
.enc-panel h3{ margin:0 0 6px 0; font-size:16px; letter-spacing:0.2px; }
.enc-traits{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 8px; }
.enc-pill{ padding:3px 7px; border-radius:999px; border:1px solid rgba(255,255,255,0.14); background:rgba(255,255,255,0.06); font-size:12px; }
.enc-metric{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.enc-bar{ flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:6px; overflow:hidden; }
.enc-bar > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#4da3ff,#76beff); transition: width .4s ease; }
.enc-hint{ opacity:.8; font-size:12px; margin-top:8px; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .enc-idle .enc-pigeon{ animation: none; }
  .enc-pigeon, .enc-panel{ transition: none !important; }
}

/* Hide ambient background pigeon and HUD during encounter to avoid distractions */
body.encounter-active #page-hub .backgroundPigeon{ display:none !important; }
body.encounter-active #hud{ display:none !important; }