/* Story: sticky scroll scene (desktop) or stacked steps (narrow / reduced motion) */
.story { position: relative; height: 440vh; border-top: 1px solid var(--line); }
.story-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: var(--nav-h); }
.story-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.story-copy { position: relative; }
.story-steps { position: relative; min-height: 340px; margin-top: 28px; }
.story-step {
  position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.story-step.is-on { opacity: 1; transform: none; pointer-events: auto; }
.story-time {
  display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.story-title { margin-top: 14px; font-size: clamp(2rem, 3.7vw, 3.3rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.04; }
.story-body { margin-top: 20px; color: var(--muted); font-size: 18px; max-width: 40ch; }
.story-mini { display: none; }
.story-progress { display: flex; gap: 6px; width: 200px; margin-top: 8px; }
.story-progress span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; position: relative; }
.story-progress span::after { content: ""; position: absolute; inset: 0; background: var(--grad-h); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.story-progress span.is-done::after { transform: scaleX(1); }

/* Scene */
.story-scene { position: relative; }
.scene { position: relative; }
.scene svg { width: 100%; height: auto; max-height: 72vh; overflow: visible; }
.scene-caps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.scene-caps .chip { font-size: 13px; padding: 6px 12px; transition: color .3s, border-color .3s; }
.scene-caps .chip.is-good { color: var(--text); border-color: rgba(252, 85, 76, .45); background: rgba(252, 85, 76, .08); }

.sc-room { fill: rgba(255, 255, 255, .012); stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.sc-ground { fill: rgba(255, 255, 255, .025); }
.sc-horizon { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.sc-shelf { fill: rgba(255, 255, 255, .16); }
.sc-bottle { fill: rgba(255, 255, 255, .1); }
.sc-door { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .25); stroke-width: 1.5; stroke-dasharray: 4 5; }
.sc-bar { fill: #1B181D; stroke: rgba(255, 255, 255, .1); stroke-width: 1; transition: fill .3s; }
.sc-bar.is-flash { fill: #3A1C1F; }
.sc-floor { transition: opacity .6s; opacity: .55; }
.scene[data-step="2"] .sc-floor, .scene[data-step="3"] .sc-floor { opacity: 1; }
.sc-beam { opacity: .5; transform-box: fill-box; transform-origin: 50% 0; animation: beam 4.8s ease-in-out infinite alternate; }
.sc-label { fill: var(--muted); font: 500 14px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.sc-ping { filter: drop-shadow(0 0 6px rgba(252, 85, 76, .8)); }
@keyframes beam { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* Mannequin figures (figure.js) */
.fig { transition: opacity .6s; }
.fig-shadow { fill: rgba(0, 0, 0, .55); }
.fig-skin, .fig-joint, .fig-shoe { fill: #4A474E; }
.fig-joint { fill: #555259; }
.fig-shoe { fill: #3B393F; }
.fig-limb { fill: none; stroke: #4A474E; stroke-linecap: round; }
.fig-shine { fill: rgba(255, 255, 255, .16); }
.fig-vest { transition: fill .6s; }
.fig-collar { fill: none; stroke-width: 3.2; stroke-linecap: round; }
.fig-seam { stroke: rgba(0, 0, 0, .28); stroke-width: 1.2; stroke-linecap: round; }
.fig-phone { fill: var(--y); opacity: 0; transition: opacity .4s; }
.fig-body, .fig-leg, .fig-arm { transform-box: fill-box; }
.fig-leg, .fig-arm { transform-origin: 50% 0; }
.fig-body { transform-origin: 50% 100%; }
.fig.is-gone { opacity: .35; }
.fig.is-gone .fig-vest { fill: #6A666D; }
.fig.is-gone .fig-collar { stroke: #6A666D; }
.fig.is-floor .fig-body { animation: bob .7s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.fig.is-floor .fig-arm-l { animation: wave-l 1.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.fig.is-floor .fig-arm-r { animation: wave-r 1.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.scene[data-step="2"] .fig.is-floor .fig-phone { opacity: 1; }
.fig.is-walking .fig-body { animation: none; }
.fig.is-walking .fig-leg:first-child { animation: stride .5s ease-in-out infinite alternate; }
.fig.is-walking .fig-leg:nth-child(2) { animation: stride .5s ease-in-out infinite alternate-reverse; }
.fig.is-walking .fig-arm-l { animation: stride .5s ease-in-out infinite alternate-reverse; }
.fig.is-walking .fig-arm-r { animation: stride .5s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes wave-l { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(150deg); } }
@keyframes wave-r { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-20deg); } }
@keyframes stride { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }

/* Phones and tablets: scene on top, the step text crossfades below it */
@media (max-width: 899px) {
  .story { height: 400vh; }
  .story-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .story-scene { order: -1; }
  .scene svg { max-height: 40vh; }
  .scene-caps { margin-top: 8px; gap: 6px; }
  .scene-caps .chip { font-size: 12px; padding: 5px 10px; white-space: normal; text-align: center; }
  .story-steps { min-height: 230px; margin-top: 12px; }
  .story-title { margin-top: 8px; font-size: 1.6rem; }
  .story-body { margin-top: 10px; font-size: 16px; }
  .sc-label { font-size: 17px; }
}

/* Static mode: reduced motion, or a screen too short for the sticky scene */
@media (prefers-reduced-motion: reduce), (max-width: 899px) and (max-height: 599px) {
  .story { height: auto; padding: var(--sec-pad) 0; }
  .story-sticky { position: static; height: auto; display: block; overflow: visible; padding-top: 0; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-steps { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; }
  .story-step { position: static; opacity: 1; transform: none; pointer-events: auto; }
  .story-mini { display: block; margin-top: 28px; max-width: 560px; }
  .story-scene, .story-progress { display: none; }
  .scene svg { max-height: none; }
  .sc-beam, .fig-body, .fig-leg, .fig-arm { animation: none !important; }
}
/* The scene SVG scales with its viewBox (600 wide): keep labels at 11px or more on small screens. */
@media (max-width: 480px) { .sc-label { font-size: 21px; letter-spacing: .04em; } }