/* ============================================================
   BEAM TRULY ALIVE (Oct 28, 2026) — the life layer for the staged
   apex door. Artwork law: Beam is never redrawn or re-rigged.
   Everything here is pose selection from the original files +
   whole-image transforms + glow. No face is ever warped.
   ============================================================ */

/* ---- DEFECT FIX (Nic's screenshot, Oct 28, 4:43 AM ET) ----
   .idea-beam carried width/height attributes (1208x1302); the CSS
   set width but no height, so the attribute height (1302px) won
   and object-fit:fill stretched the cutout into a sliver
   (rendered ratio 0.139 vs natural 0.928). Natural aspect now
   rules the box. */
.idea-beam{height:auto;aspect-ratio:1208/1302;object-fit:contain}

/* ---- the companion: a warm filament dot that opens up ----
   Collapsed = the lamp-filament dot (CSS glow only, no drawn
   Beam). Hover/focus expands it to the Beam chip; the dock opens
   on click, as before. */
.beam-companion{width:54px;height:54px;padding:0;justify-content:center;gap:0;border-radius:50%;overflow:hidden}
.beam-companion .comp-dot{flex:none;width:54px;height:54px;display:flex;align-items:center;justify-content:center}
.beam-companion .comp-filament{width:15px;height:15px;border-radius:50%;
  background:radial-gradient(circle,#fff3c4 0%,var(--gold-hi) 45%,rgba(212,160,23,.0) 78%);
  box-shadow:0 0 14px 5px rgba(240,201,74,.55),0 0 3px 1px rgba(240,201,74,.9);
  animation:filament-breathe 3s ease-in-out infinite alternate}
@keyframes filament-breathe{from{transform:scale(1)}to{transform:scale(1.2)}}
.beam-companion.subscribed .comp-filament{
  box-shadow:0 0 22px 9px rgba(240,201,74,.85),0 0 5px 2px rgba(240,201,74,1);
  animation:filament-bright 2.2s ease-in-out infinite alternate}
@keyframes filament-bright{from{transform:scale(1.08)}to{transform:scale(1.28)}}
.beam-companion .comp-beam,.beam-companion .comp-label{
  opacity:0;max-width:0;overflow:hidden;white-space:nowrap;
  transition:opacity .35s ease,max-width .45s ease}
.beam-companion .comp-beam{width:40px;height:40px;object-fit:contain;flex:none}
.beam-companion:hover,.beam-companion:focus-visible,.beam-companion.expanded{
  width:auto;height:auto;padding:7px 16px 7px 8px;border-radius:999px;gap:10px;overflow:visible}
.beam-companion:hover .comp-dot,.beam-companion:focus-visible .comp-dot,.beam-companion.expanded .comp-dot{display:none}
.beam-companion:hover .comp-beam,.beam-companion:focus-visible .comp-beam,.beam-companion.expanded .comp-beam{opacity:1;max-width:44px}
.beam-companion:hover .comp-label,.beam-companion:focus-visible .comp-label,.beam-companion.expanded .comp-label{opacity:1;max-width:220px}
@media (max-width:640px){
  .beam-companion{width:48px;height:48px;padding:0}
  .beam-companion .comp-dot{width:48px;height:48px}
  .beam-companion:hover,.beam-companion:focus-visible,.beam-companion.expanded{padding:6px 13px 6px 7px}
  .beam-companion .comp-beam{width:34px;height:34px}
}

/* ---- the dock figure: expressions are whole-image transforms ---- */
.bd-fig{position:relative;z-index:0;width:54px;height:54px;flex:none;transition:transform .45s ease}
.bd-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s ease}
.bd-fig::after{content:"";position:absolute;inset:-30%;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(240,201,74,.5) 0%,rgba(240,201,74,0) 70%);opacity:.45;transition:opacity .4s ease}
.bd-fig #bd-costume{opacity:0;border-radius:10px}
.bd-fig.costumed #bd-costume{opacity:1}
.bd-fig.costumed #bd-pose{opacity:0}
.bd-fig #bd-pose{animation:bd-bob 3s ease-in-out infinite alternate}
@keyframes bd-bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
/* the six moods (Nic's spec, lawful forms) */
.bd-fig.mood-happy::after{opacity:.85}
.bd-fig.mood-encouraging{transform:rotate(-6deg)}
.bd-fig.mood-curious{transform:rotate(8deg) scale(1.03)}
.bd-fig.mood-proud{transform:scale(1.05)}
.bd-fig.mood-proud::after{opacity:.8}
.bd-fig.mood-empathetic::after{opacity:.3}
.bd-fig.mood-empathetic #bd-pose{animation-duration:5.5s}
/* speaking: glow + bob driven by the utterance's own events —
   the face is never touched */
.bd-fig.speaking::after{animation:speak-glow .8s ease-in-out infinite alternate}
.bd-fig.speaking #bd-pose{animation:speak-bob .5s ease-in-out infinite alternate}
@keyframes speak-glow{from{opacity:.5;transform:scale(1)}to{opacity:1;transform:scale(1.18)}}
@keyframes speak-bob{from{transform:translateY(0)}to{transform:translateY(-1.8px)}}
/* hero speaking: the aura carries it (the figure's transforms
   belong to the arrival choreography) */
#beam-figure.speaking .beam-aura{animation:aura-speak .8s ease-in-out infinite alternate}
@keyframes aura-speak{from{opacity:.5;transform:scale(1)}to{opacity:.95;transform:scale(1.06)}}
/* the rest beat: every ~9s the hero's aura dips softly, once —
   a breath, not a blink (no fake blinks, by law) */
.stage[data-state="alive"] .beam-aura{animation:beam-aura-breathe 5.2s ease-in-out infinite alternate,aura-rest 9s ease-in-out infinite}
@keyframes aura-rest{0%,88%,100%{filter:brightness(1)}93%{filter:brightness(.72)}}

/* ---- the hat layer: full-frame overlays registered to the
   hero cutout's own 1208x1302 frame (brand-masters/BEAM-HATS.md).
   Hero figure only — unmeasured poses wear no hat. ---- */
.beam-hat{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .4s ease}
.beam-hat.on{opacity:1}

/* ---- dock controls: voice, sound, mic ---- */
.bd-controls{display:flex;gap:8px;align-items:center;padding:9px 13px;border-top:1px solid var(--line-day);flex-wrap:wrap}
.bd-ctl{border:1px solid var(--line-day);background:var(--glass);border-radius:999px;padding:6px 12px;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--dim-day);cursor:pointer}
.bd-ctl:hover{border-color:var(--gold);color:var(--ink-day)}
.bd-ctl[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-deep)}
.bd-ctl-note{font-size:11px;color:var(--faint-day)}

/* ---- HOURS BACK — Beam performs the help, per path ---- */
.hours-tabs{display:flex;flex-wrap:wrap;gap:9px;padding:20px 28px 0}
.hours-tab{border:1px solid var(--line-gold);background:var(--day);border-radius:999px;padding:9px 17px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink-day);cursor:pointer;transition:background .3s ease,color .3s ease}
.hours-tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold)}
.hours-return{margin:0 28px 26px;border:1px dashed var(--line-gold);border-radius:var(--sculpt-xs);padding:15px 19px;font-size:14px;line-height:1.65;color:var(--dim-day);background:var(--glass)}
.hours-return strong{color:var(--gold-deep)}
.hours-frame .wf{padding-top:22px}

/* reduced motion: the whole layer stills, respectfully */
@media (prefers-reduced-motion: reduce){
  .beam-companion .comp-filament,.bd-fig #bd-pose,.bd-fig.speaking #bd-pose,.bd-fig.speaking::after,
  #beam-figure.speaking .beam-aura,.stage[data-state="alive"] .beam-aura{animation:none !important}
  .bd-fig,.bd-fig img,.beam-hat,.beam-companion .comp-beam,.beam-companion .comp-label{transition:none}
}