/* The opening establishes a spread: headline above, purpose below, one object between. */
body.composition-v9 .opening-intro { font-size: clamp(30px, 3vw, 48px); line-height: 1.12; }
body.composition-v9 .discuss-button .button-arrow { line-height: 1; }
body.composition-v9 .hero-task-cluster { display: contents; --hero-freedom: 0; --drift-x: calc(18px * var(--scene-scale, 1)); --drift-y: calc(12px * var(--scene-scale, 1)); }
body.composition-v9 .hero-directions { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(40px, 4.6svh, 64px); width: max-content; }
body.composition-v9 .hero-task { display: flex; align-items: center; gap: clamp(14px, 1.2vw, 24px); color: var(--ink); }
body.composition-v9.motion-ready:not(.motion-off) .hero-task { animation: hero-wander 13.7s cubic-bezier(.45,0,.55,1) infinite; animation-play-state: paused; }
body.composition-v9 .orbit-one .hero-task:nth-child(2) { animation-duration: 19.1s; animation-delay: -7.3s; animation-direction: reverse; }
body.composition-v9 .orbit-two .hero-task:nth-child(1) { animation-duration: 17.3s; animation-delay: -4.9s; animation-direction: reverse; }
body.composition-v9 .orbit-two .hero-task:nth-child(2) { animation-duration: 23.9s; animation-delay: -13.1s; }
body.composition-v9 .opening:is([data-motion-state="running"],[data-motion-state="ambient"]) .hero-task { animation-play-state: running; }
body.composition-v9 .opening .hero-task:is(:hover,:focus-within) { animation-play-state: paused; }
@keyframes hero-wander {
  0%,100% { transform: translate3d(0,0,0) rotate(0); }
  16% { transform: translate3d(calc(var(--hero-freedom) * var(--drift-x)),calc(var(--hero-freedom) * var(--drift-y) * -.7),0) rotate(calc(var(--hero-freedom) * 1.2deg)); }
  37% { transform: translate3d(calc(var(--hero-freedom) * var(--drift-x) * -.55),calc(var(--hero-freedom) * var(--drift-y) * -1),0) rotate(calc(var(--hero-freedom) * -1.4deg)); }
  58% { transform: translate3d(calc(var(--hero-freedom) * var(--drift-x) * -1),calc(var(--hero-freedom) * var(--drift-y) * .6),0) rotate(calc(var(--hero-freedom) * .8deg)); }
  79% { transform: translate3d(calc(var(--hero-freedom) * var(--drift-x) * .7),calc(var(--hero-freedom) * var(--drift-y)),0) rotate(calc(var(--hero-freedom) * 1.8deg)); }
}
body.composition-v9 .hero-task:focus-visible { outline: 2px solid var(--blue); outline-offset: 10px; border-radius: 8px; }
body.composition-v9 .hero-task:hover .orbit-label { color: var(--blue); }
body.composition-v9 .hero-task .process-object svg { width: 54%; height: 54%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
body.composition-v9 .hero-task .orbit-dot svg { fill: #fff; stroke: none; }

@media (min-width: 801px) {
  body.composition-v9 .hero-task-cluster { display: flex; position: absolute; right: var(--pad); top: 17%; gap: clamp(64px, 4vw, 96px); align-items: flex-start; z-index: 3; }
  body.composition-v9 .opening .hero-directions { position: relative; inset: auto; flex-shrink: 0; }
  body.composition-v9 .opening .orbit-two { margin-top: clamp(12px, 2svh, 24px); }
  body.composition-v9 .opening .hero-task .process-object { width: clamp(60px, 5.2vw, calc(88px * var(--scene-scale, 1))); height: clamp(60px, 5.2vw, calc(88px * var(--scene-scale, 1))); }
  body.composition-v9 .opening .hero-task .orbit-label { font-size: clamp(22px, 1.7vw, calc(28px * var(--scene-scale, 1))); line-height: 1.15; }
  body.composition-v9 .chapter:not(.opening) .section-copy {
    top: 16%; bottom: 16%; width: 35%; max-width: none;
    display: flex; flex-direction: column; align-items: flex-start;
  }
  body.composition-v9 .chapter:not(.opening) .section-copy h2 { margin-bottom: 0; }
  body.composition-v9 .chapter:not(.opening) .body-copy { margin: auto 0 0; max-width: 24em; }
  body.composition-v9 .marketing .section-copy { width: 34%; }
  body.composition-v9 .content-factory .section-copy { width: 33%; }
  body.composition-v9 .content-factory .factory-roller-anchor { left: 20%; }
  body.composition-v9 .connections .connection-art { left: 45%; right: 4%; width: 51%; top: 14%; height: 72%; }
  body.composition-v9 .connections .destination-one { left: -2%; top: 12%; width: 22%; }
  body.composition-v9 .connections .destination-two { left: 80%; top: 62%; width: 20%; }
  body.composition-v9 .connections .destination-object { margin-bottom: 22px; }
  body.composition-v9 .connections .destination-object svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

  body.composition-v9 .closing {
    position: relative; height: 100svh; min-height: 100svh; padding: 0 var(--pad);
  }
  body.composition-v9 .closing > .eyebrow { position: absolute; top: 16%; left: var(--pad); margin: 0; text-transform: none; letter-spacing: 0; }
  body.composition-v9.story-v7 .closing h2 { position: absolute; top: 22%; left: var(--pad); width: 50%; max-width: none; margin: 0; font-size: clamp(60px, min(7.2vw, 13svh), calc(142px * var(--scene-scale, 1))); line-height: 1.02; }
  body.composition-v9 .closing-intro { position: absolute; left: var(--pad); bottom: 20%; width: 42%; display: block; margin: 0; }
  body.composition-v9 .closing-intro p { margin: 0; }
  body.composition-v9 .closing-intro br { display: inline; }
  body.composition-v9 .closing-shape-anchor { left: 76%; top: 52%; }
  body.composition-v9 .discussion { position: absolute; inset: 0; padding: 0; margin: 0; display: block; pointer-events: none; }
  body.composition-v9 .discuss-button {
    position: absolute; left: 76%; top: 52%; translate: -50% -50%;
    width: min(18vw, 19svh); height: min(18vw, 19svh);
    background: transparent; color: var(--ink); border-radius: 50%; gap: 4px;
    font-size: clamp(20px, 1.6vw, calc(30px * var(--scene-scale, 1)));
    pointer-events: auto;
  }
  body.composition-v9 .discuss-button:hover { background: transparent; transform: none; color: var(--blue); }
  body.composition-v9 .discuss-button .button-arrow { font-size: 1.5em; }
  body.composition-v9 .closing footer { position: absolute; left: var(--pad); right: var(--pad); bottom: 5.5%; border: 0; padding: 0; }
  body.composition-v9 .closing footer p { margin: 0; }
}

@media (min-width: 801px) and (max-height: 719px) {
  body.composition-v9 .hero-task-cluster { top: 15%; --drift-x: 12px; --drift-y: 8px; }
  body.composition-v9 .opening .opening-top { top: 20%; }
  body.composition-v9 .chapter:not(.opening) .section-copy { top: 17%; bottom: 18%; }
  body.composition-v9 .chapter:not(.opening) .body-copy { font-size: 22px; line-height: 1.4; }
  body.composition-v9 .connections .destination-object { margin-bottom: 14px; }
  body.composition-v9 .closing > .eyebrow { top: 17%; }
  body.composition-v9.story-v7 .closing h2 { top: 24%; }
  body.composition-v9 .closing-intro { font-size: 22px; bottom: 22%; }
}

@media (max-width: 800px) {
  body.composition-v9 .opening .hero-directions { top: 24%; gap: 18px; }
  body.composition-v9 .opening .orbit-one { left: 6%; right: auto; }
  body.composition-v9 .opening .orbit-two { right: 6%; left: auto; }
  body.composition-v9 .opening .hero-task { gap: 8px; }
  body.composition-v9 .opening .hero-task .process-object { width: 38px; height: 38px; }
  body.composition-v9 .opening .hero-task .orbit-label { font-size: 16px; }
  body.composition-v9 .connections .destination-one { left: 2%; top: 10%; }
  body.composition-v9 .connections .destination-two { left: 77%; top: 58%; }
  body.composition-v9 .connections .destination-object svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 2.5; }
  body.composition-v9 .closing { min-height: 100svh; }
}