/* ============================================================
   BEAM ALIVE — reusable animation kit for Beam's pose library
   Animates HIS raster cutouts. No redraw, no SVG character.
   Motion per BEAM_CHARACTER_AND_MOTION_BIBLE.md:
   calm + confident; welcoming home-state idle; heart pulse =
   connection/consent/completion; small base rotation before
   transitions; NO constant bouncing, frenetic blinking,
   distracting particles, or aggressive flashing.
   Transform + opacity only (GPU-friendly). Mobile-safe sizes.
   ============================================================ */

.beam-alive {
  --beam-w: 200px;
  --beam-glow: 255, 196, 64;
  position: relative;
  display: inline-block;
  width: var(--beam-w);
  max-width: 62vw;
  line-height: 0;
  isolation: isolate;
}
.beam-alive--sm { --beam-w: 120px; }
.beam-alive--lg { --beam-w: 300px; }

/* warm aura behind the glass — a div, never a filter on the artwork's colours */
.beam-alive .beam-glow {
  position: absolute; inset: 6% 4% 2%;
  border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--beam-glow), .5) 0%, rgba(var(--beam-glow), .16) 52%, rgba(var(--beam-glow), 0) 72%);
  opacity: .45;
}
/* light ripple ring (greet / celebrate) */
.beam-alive .beam-ripple {
  position: absolute; left: 50%; top: 52%; z-index: 0; pointer-events: none;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(var(--beam-glow), .55);
  transform: translate(-50%, -50%) scale(.62);
  opacity: 0;
}
.beam-alive .beam-img {
  position: relative; z-index: 1;
  width: 100%; height: auto; display: block;
  transform-origin: 50% 88%; /* the screw base — rotation reads as Beam turning, not tipping */
  will-change: transform, opacity;
}
/* crossfade layer (used by beam-alive.js pose-to-pose changes) */
.beam-alive .beam-img--ghost {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; transition: opacity .45s ease;
}

/* ---------- beam-idle — the welcoming home state ----------
   Slow breathing float + a warm glow that breathes with him. */
.beam-alive.beam-idle .beam-img { animation: beam-breathe 5.2s ease-in-out infinite alternate; }
.beam-alive.beam-idle .beam-glow { animation: beam-glow-breathe 5.2s ease-in-out infinite alternate; }
@keyframes beam-breathe {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-6px) scale(1.014); }
}
@keyframes beam-glow-breathe { from { opacity: .34; } to { opacity: .58; } }

/* ---------- beam-greet — wave pose, welcoming rock + one soft ripple per cycle ---------- */
.beam-alive.beam-greet .beam-img { animation: beam-rock 2.8s ease-in-out infinite alternate; }
.beam-alive.beam-greet .beam-ripple { animation: beam-ripple 2.8s ease-out infinite; }
.beam-alive.beam-greet .beam-glow { opacity: .55; }
@keyframes beam-rock {
  from { transform: rotate(-2.4deg) translateY(0); }
  to   { transform: rotate(2.4deg) translateY(-3px); }
}
@keyframes beam-ripple {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.62); }
  22% { opacity: .5; }
  70%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.18); }
}

/* ---------- beam-think — RECOGNITION (scholar point-up: "an idea!") ----------
   Bible: "gentle illumination as Beam recognizes an idea."
   A slow tilt toward the thought + a soft brightening pulse. Not a thinker pose —
   the library has none; see README "Pose gaps". */
.beam-alive.beam-think .beam-img { animation: beam-recognize 4.4s ease-in-out infinite alternate; }
.beam-alive.beam-think .beam-glow { animation: beam-soft-pulse 4.4s ease-in-out infinite alternate; }
@keyframes beam-recognize {
  from { transform: rotate(-1.6deg) translateY(0); filter: brightness(1); }
  to   { transform: rotate(.6deg) translateY(-3px); filter: brightness(1.07); }
}
@keyframes beam-soft-pulse { from { opacity: .32; } to { opacity: .6; } }

/* ---------- beam-present — conductor pose, presenting sway ----------
   Deliberate, calm: a slow sway as if cueing the room. */
.beam-alive.beam-present .beam-img { animation: beam-present-sway 6s ease-in-out infinite alternate; }
.beam-alive.beam-present .beam-glow { opacity: .5; }
@keyframes beam-present-sway {
  from { transform: rotate(-1.3deg) translateX(-4px); }
  to   { transform: rotate(1.3deg) translateX(4px); }
}

/* ---------- beam-celebrate — angel Beam, joyful but sparing ----------
   A gentle lift (not a bounce loop) + a single glow burst per cycle.
   Prefer the JS one-shot: BeamAlive.setState(el,'celebrate',{once:true})
   returns him to idle after ~2.6 s. Bible: no slapstick, use sparingly. */
.beam-alive.beam-celebrate .beam-img { animation: beam-lift 1.5s ease-in-out infinite alternate; }
.beam-alive.beam-celebrate .beam-ripple { animation: beam-burst 3s ease-out infinite; }
.beam-alive.beam-celebrate .beam-glow { animation: beam-glow-burst 3s ease-out infinite; }
@keyframes beam-lift {
  from { transform: translateY(0) rotate(-1deg); }
  to   { transform: translateY(-11px) rotate(1deg); }
}
@keyframes beam-burst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
  18% { opacity: .65; }
  55%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
}
@keyframes beam-glow-burst {
  0%, 100% { opacity: .45; }
  20% { opacity: .85; }
  60% { opacity: .5; }
}

/* ---------- reduced motion: every state becomes its still ---------- */
@media (prefers-reduced-motion: reduce) {
  .beam-alive .beam-img,
  .beam-alive .beam-glow,
  .beam-alive .beam-ripple { animation: none !important; }
  .beam-alive .beam-ripple { display: none; }
  .beam-alive .beam-glow { opacity: .4; }
}