/* Baba belongs to the sky. The ground light provides contact without a card. */
.plate{background:none!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;overflow:visible!important;isolation:isolate;
  aspect-ratio:1.12;max-width:530px;margin-inline:auto}
.plate::before{content:"";position:absolute;inset:6% -10% 0;z-index:-1;
  background:radial-gradient(ellipse,rgba(207,168,95,.12),transparent 64%);pointer-events:none}
.plate-ground{position:absolute;inset:auto 24% 3%;height:8%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(201,162,87,.19),rgba(201,162,87,.06) 48%,transparent 72%);
  opacity:.8;transform:scaleX(1);transition:opacity 1s ease,transform 1.2s ease;pointer-events:none}
.plate img.plate-baba,.plate img.plate-rest{
  position:absolute;inset:auto 0 5%;margin-inline:auto;width:auto;height:88%;max-width:100%;
  object-fit:contain;transform:none;transform-origin:50% 100%;
  filter:drop-shadow(0 22px 22px rgba(0,0,0,.4));backface-visibility:hidden;
  transition:opacity .68s ease}
.plate img.plate-baba{opacity:0}
.plate img.plate-rest{opacity:1}
.plate:hover img{transform:none}
/* Waiting ships in HTML to prevent a flash before slow scripts load. CSS
   alone reveals the final pose; JS takes over only with decoded images. */
.plate.is-waiting img.plate-rest{opacity:0;animation:ml-rest-fallback .6s ease 2.8s forwards}
@keyframes ml-rest-fallback{to{opacity:1}}
.plate.is-dust img.plate-rest{opacity:0;animation:none}
.plate.is-waiting .plate-ground,.plate.is-dust .plate-ground{opacity:.15;transform:scaleX(.45)}
.plate.is-dust img.plate-baba{opacity:0}
.plate.is-landing img.plate-baba{animation:ml-baba-land 1.35s both}
.plate.is-landing img.plate-rest{animation:ml-baba-settle 1.35s both}
.plate.is-here img.plate-rest{opacity:1}
.plate.is-here img.plate-baba{opacity:0}
@keyframes ml-baba-land{0%{opacity:0;transform:translateY(-28px) rotate(-1deg)}
  24%{opacity:1}65%{opacity:1;transform:translateY(3px) rotate(0) scaleY(.98)}
  100%{opacity:0;transform:none}}
@keyframes ml-baba-settle{0%,57%{opacity:0;transform:translateY(3px) scaleY(.98)}
  85%{opacity:1;transform:translateY(-1px)}100%{opacity:1;transform:none}}
.plate-dust{position:absolute;z-index:2;pointer-events:none;max-width:none!important;
  opacity:1;transition:opacity .65s ease,transform .8s ease}
.plate.is-landing .plate-dust{opacity:0;transform:translateY(12px)}
.agent-caption{display:flex;justify-content:center;gap:10px;align-items:center;
  font:500 .82rem/1.5 var(--sans);color:var(--ob-muted);margin:12px 0 0;letter-spacing:.02em}
.agent-caption strong{font-weight:500;color:var(--gold-hi)}
.agent-caption span{border-left:1px solid var(--ob-line);padding-left:10px}
#hero .hero-in{min-height:min(73vh,690px)}
#hero .hero-h{text-wrap:balance}
@media(max-width:860px){
  #hero{padding-top:calc(var(--nav-h) + 32px);padding-bottom:40px}
  #hero .hero-in{grid-template-columns:minmax(0,1fr);gap:0;min-height:0}
  .hero-copy,.hero-agent{display:contents}
  #hero .eyebrow{grid-row:1;margin-bottom:16px;font-size:.75rem}
  #hero .hero-h{grid-row:2;max-width:19ch;font-size:clamp(2.2rem,6.7vw,3.5rem);margin-bottom:0;line-height:1.06}
  #hero .plate{grid-row:3;width:min(76%,330px);margin:8px auto 0;aspect-ratio:1.3}
  #hero .agent-caption{grid-row:4;margin:0 0 20px}
  #hero .hero-sup{grid-row:5;font-size:1rem;max-width:46ch;margin-bottom:22px}
  #hero .hero-acts{grid-row:6;gap:10px}
  #hero .hero-note{display:none}
}
@media(prefers-reduced-motion:reduce){
  .plate img.plate-rest{opacity:1!important;animation:none!important;transform:none!important}
  .plate img.plate-baba,.plate-dust{display:none!important}
  .plate-ground{opacity:.8!important;transform:none!important}
}

.plate-ground::after{content:"";position:absolute;inset:28% 10%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.94),transparent 75%)}
.plate.is-landing .plate-ground{animation:ml-contact 3s cubic-bezier(.45,0,.55,1) .25s both}
@keyframes ml-contact{0%{opacity:.12;transform:scaleX(.5)}65%{opacity:1;transform:scaleX(1.08)}100%{opacity:.8;transform:scaleX(1)}}

/* A transparent portrait preserves the harness and fur in both themes. */
#hero .hero-in{mix-blend-mode:normal}
body:has(#hero) #main{z-index:auto}
/* With the controller alive, only the star callback may start the reveal.
   The CSS-only fallback remains available when scripting is disabled. */
.plate.is-controlled.is-waiting img.plate-rest{opacity:0;animation:none}
.plate.is-controlled.is-waiting .plate-ground{opacity:0}
/* A single continuous reveal avoids a two-image crossfade dip. */
.plate.is-landing img.plate-baba{animation:none;opacity:0}
.plate.is-landing img.plate-rest{animation:ml-baba-soft-appear 3s cubic-bezier(.45,0,.55,1) .25s both}
@keyframes ml-baba-soft-appear{
  0%{opacity:0;transform:translateY(12px) scale(.98)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.plate.is-landing .plate-dust{transition:opacity 2.4s ease .25s;transform:none}

/* The companion and name must not reveal Baba before her entrance. */
body:has(#plate.is-waiting) .ma-dock,
body:has(#plate.is-dust) .ma-dock{opacity:0;visibility:hidden;pointer-events:none}
.hero-agent:has(.is-waiting) .agent-caption,
.hero-agent:has(.is-dust) .agent-caption{opacity:0}
.agent-caption{transition:opacity 1s ease}
body:has(#plate) .ma-dock{transition:opacity 1s ease}

/* Let the hero finish its slow reveal before bringing in the companion. */
body:has(#plate.is-landing) .ma-dock{opacity:0;visibility:hidden;pointer-events:none}
.hero-agent:has(.is-landing) .agent-caption{opacity:0}

/* A photographic lens opens in the sky at the star's point of contact.
   Its timeline spans dust and landing, so changing phases never restarts it. */
.arrival-lens{position:absolute;inset:0;pointer-events:none;opacity:0}
.plate.is-arriving .arrival-lens{opacity:1}
.arrival-aperture{position:absolute;left:13%;top:7%;width:74%;height:83%;
  opacity:0;transform-origin:50% 47%;}
.arrival-aperture i{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(219,181,116,.48);
  box-shadow:0 0 12px rgba(221,182,111,.12),inset 0 0 12px rgba(221,182,111,.08)}
.arrival-aperture i::before{content:"";position:absolute;left:50%;top:-2px;
  width:4px;height:4px;border-radius:50%;background:#fff0cd;
  box-shadow:0 0 8px 2px rgba(241,204,138,.8)}
.arrival-aperture i:nth-child(2){inset:5%;border-color:rgba(230,196,137,.24);
  border-left-color:rgba(255,228,181,.85);border-right-color:rgba(255,228,181,.75)}
.arrival-aperture i:nth-child(3){inset:11%;border-style:dashed;border-color:rgba(230,196,137,.17)}
.plate.is-arriving .arrival-aperture{animation:ml-lens-open 4.3s cubic-bezier(.22,.61,.36,1) both}
.plate.is-arriving .arrival-aperture i{animation:ml-lens-orbit 4.3s ease-out both}
.plate.is-arriving .arrival-aperture i:nth-child(2){animation-direction:reverse}
.plate.is-arriving .arrival-aperture i:nth-child(3){animation-duration:5s}
.arrival-flare{position:absolute;left:5%;top:45%;width:90%;height:1px;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(225,183,109,.25) 25%,#fff1cf 50%,rgba(225,183,109,.25) 75%,transparent)}
.arrival-flare::after{content:"";position:absolute;left:40%;top:-28px;width:20%;height:56px;
  background:radial-gradient(ellipse,rgba(255,231,184,.5),rgba(229,183,104,.1) 28%,transparent 70%)}
.plate.is-arriving .arrival-flare{animation:ml-lens-flare 1.4s ease-out both}
.arrival-ripple{position:absolute;left:20%;bottom:5%;width:60%;height:9%;border-radius:50%;
  border:1px solid rgba(230,195,132,.7);box-shadow:0 0 12px rgba(230,195,132,.12);opacity:0}
.plate.is-landing .arrival-ripple{animation:ml-arrival-ripple 1.65s ease-out 1.35s both}
.plate.is-landing .arrival-ripple--echo{animation-delay:1.65s;animation-duration:1.6s}
@keyframes ml-lens-open{
  0%{opacity:0;transform:perspective(700px) rotateY(74deg) rotateZ(-24deg) scale(.05)}
  16%{opacity:.9}
  35%{opacity:.72;transform:perspective(700px) rotateY(-15deg) rotateZ(8deg) scale(1)}
  63%{opacity:.38}
  100%{opacity:0;transform:perspective(700px) rotateY(12deg) rotateZ(20deg) scale(1.07)}
}
@keyframes ml-lens-orbit{from{transform:rotate(-110deg)}to{transform:rotate(100deg)}}
@keyframes ml-lens-flare{0%{opacity:0;transform:scaleX(.05)}18%{opacity:.85}100%{opacity:0;transform:scaleX(1)}}
@keyframes ml-arrival-ripple{0%{opacity:0;transform:scale(.35)}18%{opacity:.6}100%{opacity:0;transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.arrival-lens{display:none!important}}

.agent-caption{flex-wrap:wrap;row-gap:5px}
.agent-caption small{flex-basis:100%;text-align:center;font:13px/1.5 var(--sans);letter-spacing:.02em;color:#b9c3ae}