/* ---------- 5. Stance: the hero's AI chip returns, lands once, and sits there ----------
   Stills of the hero's own chip (same geometry, materials and studio), rendered offline by proto/section-stance/render.html.
   No WebGL here. Without JS, or with reduced motion, it is simply there, lit. */

/* the glow spills past the chip; clip it to the band so it never makes the page scroll sideways (clip, not hidden: no scroll container) */
.stance { overflow-x: clip; }

.stance-top { position: relative; width: min(var(--wall), 100%); display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); }

.stance-chip {
  --sc-w: clamp(6rem, 10.5vw, 9.25rem);
  position: relative; flex: none; width: var(--sc-w); aspect-ratio: 480 / 411;
  margin-right: calc(var(--sc-w) * 0.04);   /* pins sit flush with the wall's right edge */
  pointer-events: none; user-select: none;
}
.stance-chip i { position: absolute; display: block; }
.sc-body, .sc-lit { inset: 0; background: url("stance/chip-on-dark.webp") center / 100% 100% no-repeat; }
.sc-lit { background-image: url("stance/chip-on-dark-lit.webp"); }
/* contact shadow under the package, and the core's light spilling round it (the hero's bloom, done in CSS) */
.sc-shadow { left: 2%; right: 2%; bottom: -9%; height: 30%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0)); }
.sc-glow { left: -40%; right: -40%; top: -60%; bottom: -25%; border-radius: 50%;
  background: radial-gradient(closest-side at 50% 42%, rgb(255 90 60 / 0.22), rgb(255 90 60 / 0.07) 45%, rgb(255 90 60 / 0)); }

/* dark page: the band is pale, so the light-studio stills, a softer shadow and a fainter spill */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-body { background-image: url("stance/chip-on-light.webp"); }
  :root:not([data-theme="light"]) .sc-lit { background-image: url("stance/chip-on-light-lit.webp"); }
  :root:not([data-theme="light"]) .sc-shadow { background: radial-gradient(closest-side, rgb(0 0 0 / 0.32), rgb(0 0 0 / 0)); }
  :root:not([data-theme="light"]) .sc-glow { display: none; } /* a coral haze on the pale band reads as a smudge */
}
:root[data-theme="dark"] .sc-body { background-image: url("stance/chip-on-light.webp"); }
:root[data-theme="dark"] .sc-lit { background-image: url("stance/chip-on-light-lit.webp"); }
:root[data-theme="dark"] .sc-shadow { background: radial-gradient(closest-side, rgb(0 0 0 / 0.32), rgb(0 0 0 / 0)); }
:root[data-theme="dark"] .sc-glow { display: none; }

/* ---- the landing (motion only: .live is set when reduced motion is off; stance.js adds .landed in view) ---- */
.live .stance-chip:not(.landed) .sc-body { opacity: 0; transform: translateY(-34%); }
.live .stance-chip:not(.landed) .sc-shadow { opacity: 0; transform: scale(1.5, 1.2); }
.live .stance-chip:not(.landed) :is(.sc-lit, .sc-glow) { opacity: 0; }
.live .stance-chip.landed .sc-body { animation: sc-drop 900ms cubic-bezier(0.3, 0, 0.2, 1) both; }
.live .stance-chip.landed .sc-shadow { animation: sc-shadow 900ms cubic-bezier(0.3, 0, 0.2, 1) both; }
/* the core comes on once it has seated, like the hero's */
.live .stance-chip.landed .sc-lit { animation: sc-on 1100ms var(--ease) 820ms both; }
.live .stance-chip.landed .sc-glow { animation: sc-on 1600ms var(--ease) 820ms both; }
@keyframes sc-drop {
  0% { opacity: 0; transform: translateY(-34%); }
  22% { opacity: 1; }
  78% { transform: translateY(1.2%); }
  100% { opacity: 1; transform: none; }
}
@keyframes sc-shadow { 0% { opacity: 0; transform: scale(1.5, 1.2); } 100% { opacity: 1; transform: none; } }
@keyframes sc-on { from { opacity: 0; } }

@media (max-width: 640px) {
  /* phone: the chip sits above the heading, its left pins on the text edge */
  .stance-top { flex-direction: column-reverse; align-items: flex-start; gap: 2.5rem; }
  .stance-chip { --sc-w: 5.5rem; margin-right: 0; }
}