/* The human-to-agent hero resolves into the cloud architecture as you scroll. */
.hero-scroll {
  position: relative;
  height: 270svh;
  --story-progress: 0;
  --intro-opacity: 1;
  --intro-y: 0px;
  --hand-opacity: 1;
  --hand-x: 0vw;
  --hand-y: 0vh;
  --hand-scale: 1;
  --surface-opacity: 0;
  --diagram-opacity: 0;
  --copy-opacity: 0;
  --copy-y: 26px;
  --harness-opacity: 0;
  --harness-y: -110px;
  --sandbox-opacity: 0;
  --sandbox-y: 110px;
  --boundary-opacity: 0;
  --input-opacity: 0;
  --output-opacity: 0;
  --connections-opacity: 0;
  --path-offset: 300;
  --control-ink: #c5ddff;
  --control-line: #c2d9ff40;
}
.stack-destination { position: absolute; top: calc(100% - 100svh); left: 0; width: 1px; height: 1px; }
.hero-scroll .journey-scene { position: sticky; top: 0; height: 100svh; min-height: 540px; isolation: isolate; }
.cloud-surface { position: absolute; inset: 0; z-index: 0; opacity: var(--surface-opacity); background: radial-gradient(ellipse at 75% 66%, #dceaff, #f7faff 65%); pointer-events: none; }
.hero-scroll .hero-grid, .hero-scroll .orbital { opacity: calc(1 - var(--surface-opacity)); }
.hero-scroll .hero-heading, .hero-scroll .hero-kicker { opacity: var(--intro-opacity); transform: translateY(var(--intro-y)); will-change: transform, opacity; }
.hero-scroll .hero-heading { padding-top: 20px; }
.hero-scroll .hero-heading h1 { font-size: clamp(120px, 17.8vw, 270px); }
.hero-scroll .art-stage { position: absolute; left: 0; right: 0; bottom: 53px; height: 43%; min-height: 0; margin: 0; overflow: visible; z-index: 2; opacity: var(--hand-opacity); pointer-events: none; }
.hero-scroll .art-canvas { top: 50%; transform: translate(var(--hand-x), calc(-50% + var(--hand-y))) scale(var(--hand-scale)); transform-origin: 74% 45%; will-change: transform; }
.hero-scroll .art-annotations { opacity: var(--intro-opacity); bottom: 12px; }
.cloud-reveal { position: absolute; inset: 0; display: grid; grid-template-columns: .9fr 1.5fr; align-items: center; padding: 4% 4.8% 7%; gap: 10px; z-index: 4; color: #142c6e; pointer-events: none; }
.cloud-copy { opacity: var(--copy-opacity); transform: translateY(var(--copy-y)); padding-top: 18px; }
.cloud-copy .eyebrow { font-size: 8px; color: #436ad4; letter-spacing: .1em; margin-bottom: 22px; }
.cloud-copy h2 { font-size: clamp(44px, 5.3vw, 86px); line-height: 1.03; font-weight: 500; letter-spacing: -.055em; margin: 0 0 23px; }
.cloud-copy > p:not(.eyebrow) { color: #667aa2; font-size: 12px; line-height: 1.8; }
.stack-steps { margin-top: 31px; max-width: 280px; }
.stack-steps > div { border-top: 1px solid #b9cbea; display: flex; align-items: center; gap: 20px; padding: 12px 0; }
.stack-steps span { font-size: 9px; color: #4675e5; }
.stack-steps p { margin: 0; font-size: 11px; color: #416096; }
.cloud-illustration { width: 100%; opacity: var(--diagram-opacity); transform: translateY(6px); }
.cloud-illustration > svg { width: 100%; height: auto; display: block; overflow: visible; }
.cloud-illustration #cloud-boundary { opacity: var(--boundary-opacity); }
.cloud-illustration #harness-layer { opacity: var(--harness-opacity); transform: translateY(var(--harness-y)); }
.cloud-illustration #sandbox-layer { opacity: var(--sandbox-opacity); transform: translateY(var(--sandbox-y)); }
.cloud-illustration #input-node { opacity: var(--input-opacity); }
.cloud-illustration #output-node { opacity: var(--output-opacity); }
.cloud-illustration #connection-lines { opacity: var(--connections-opacity); }
.cloud-illustration #task-to-harness, .cloud-illustration #sandbox-to-pr { stroke-dasharray: 300; stroke-dashoffset: var(--path-offset); }
.cloud-caption { position: absolute; left: 4.8%; right: 4.8%; bottom: 81px; font-size: 7px; color: #5d7db7; display: flex; justify-content: flex-end; align-items: center; gap: 12px; opacity: var(--output-opacity); }
.cloud-caption span { color: #315bea; }
.journey-controls { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; min-height: 53px; padding: 18px 4.8%; color: var(--control-ink); border-top: 1px solid var(--control-line); display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 7px; letter-spacing: .08em; }
.journey-stages { display: flex; align-items: center; gap: 15px; }
.journey-stages i { font-style: normal; opacity: .4; }
.journey-stages span { opacity: .45; }
.hero-scroll[data-stage="human"] [data-step="human"], .hero-scroll[data-stage="agent"] [data-step="agent"], .hero-scroll[data-stage="cloud"] [data-step="cloud"] { opacity: 1; }
.journey-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #a4c6ff22; }
.journey-progress > span { display: block; height: 100%; width: 100%; background: currentColor; transform: scaleX(var(--story-progress)); transform-origin: left; }
@media (max-height: 730px) and (min-width: 681px) {
  .hero-scroll .hero-heading { padding-top: 18px; }
  .hero-scroll .hero-heading h1 { font-size: min(17vw, 27vh); }
  .hero-scroll .hero-copy { margin-top: 20px; }
  .hero-scroll .art-stage { height: 43%; }
  .cloud-copy h2 { font-size: 5vw; }
  .cloud-illustration { max-width: 700px; justify-self: end; }
}
@media (max-width: 680px) {
  .hero-scroll { height: 240svh; }
  .hero-scroll .journey-scene { min-height: 600px; }
  .hero-scroll .hero-heading { padding-top: 28px; }
  .hero-scroll .hero-heading h1 { font-size: 24vw; }
  .hero-scroll .art-stage { bottom: 52px; height: 36%; }
  .hero-scroll .art-canvas { width: 178%; left: -39%; }
  .hero-scroll .hero-copy { margin-top: 22px; }
  .hero-scroll .hero-copy .button { margin-top: 18px; }
  .cloud-reveal { display: flex; flex-direction: column; justify-content: center; padding: 37px 6% 90px; gap: 0; }
  .cloud-copy { align-self: flex-start; padding-top: 0; }
  .cloud-copy .eyebrow { font-size: 7px; margin-bottom: 17px; }
  .cloud-copy h2 { font-size: 43px; margin-bottom: 13px; letter-spacing: -1.8px; }
  .cloud-copy > p:not(.eyebrow) { font-size: 10px; line-height: 1.7; margin-bottom: 0; }
  .stack-steps { display: none; }
  .cloud-illustration { width: 110%; flex-shrink: 0; margin-top: 14px; }
  .cloud-caption { left: 6%; right: 6%; bottom: 78px; font-size: 5px; gap: 6px; justify-content: center; }
  .journey-controls { padding: 17px 6%; min-height: 52px; font-size: 5px; gap: 10px; }
  .scroll-hint { max-width: 78px; line-height: 1.6; }
  .journey-stages { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: auto; }
  .hero-scroll .journey-scene { position: relative; height: auto; min-height: 0; }
  .hero-scroll .hero-heading, .hero-scroll .hero-kicker { opacity: 1; transform: none; }
  .hero-scroll .art-stage { position: relative; height: 360px; bottom: auto; opacity: 1; }
  .hero-scroll .art-canvas { transform: translateY(-50%); }
  .hero-scroll .art-annotations { opacity: 1; }
  .cloud-surface, .journey-controls { display: none; }
  .cloud-reveal { position: relative; min-height: 620px; background: #f1f6ff; padding: 60px 4.8% 90px; }
  .cloud-copy, .cloud-illustration, .cloud-caption { opacity: 1; transform: none; }
  .cloud-illustration #cloud-boundary, .cloud-illustration #harness-layer, .cloud-illustration #sandbox-layer, .cloud-illustration #input-node, .cloud-illustration #output-node, .cloud-illustration #connection-lines { opacity: 1; transform: none; }
  .cloud-illustration #task-to-harness, .cloud-illustration #sandbox-to-pr { stroke-dashoffset: 0; }
  .cloud-caption { bottom: 35px; }
}
.hero-scroll .hero-art { mask-image: linear-gradient(90deg, transparent, #000 3%, #000 95%, transparent); }
@media (max-width: 680px) and (prefers-reduced-motion: no-preference) {
  .hero-scroll .art-stage { bottom: 130px; height: 44%; }
}

/* A shared wireframe unfolds from the palm into the final cloud surfaces. */
.hero-scroll { height: 300svh; --mesh-opacity: 0; }
.hero-scroll .cloud-surface { display: none; }
.hero-scroll .hero-grid, .hero-scroll .orbital { opacity: 1; }
.morph-mesh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; opacity: var(--mesh-opacity); }
.mesh-face { stroke: #ddf5ff; stroke-width: 1.15; stroke-linejoin: round; fill: #4276f933; }
.mesh-face.face-front { fill: #2754da44; }
.mesh-face.face-side { fill: #3064eb33; }
.mesh-grid { fill: none; stroke: #a8daff; stroke-width: .55; opacity: .5; }
.grid-front, .grid-side { opacity: .32; }
.shared-trace { fill: none; stroke: #c5f5ff; stroke-width: 1.2; opacity: .7; }
.trace-flow { fill: none; stroke: #fff; stroke-width: 2.1; stroke-dasharray: 12 220; animation: signal-flow 7s linear infinite; }
.flow-output { animation-delay: -3s; }
@keyframes signal-flow { to { stroke-dashoffset: -464; } }
.hero-scroll .cloud-reveal { color: #f0f7ff; }
.hero-scroll .cloud-copy .eyebrow { color: #c0d9ff; }
.hero-scroll .cloud-copy > p:not(.eyebrow) { color: #c2d7ff; }
.hero-scroll .stack-steps > div { border-color: #bbd9ff44; }
.hero-scroll .stack-steps span { color: #bce7ff; }
.hero-scroll .stack-steps p { color: #e0ecff; }
.hero-scroll .cloud-caption { color: #b4d5ff; }
.hero-scroll .cloud-caption span { color: #e4ffff; }
/* Keep the final geometry supplied by the morph; reveal only its annotations. */
.hero-scroll #harness-layer > path, .hero-scroll #sandbox-layer > path { opacity: 0; }
.hero-scroll #task-to-harness, .hero-scroll #sandbox-to-pr { opacity: 0; }
.hero-scroll .cloud-illustration .stack-edge { stroke: #c4edff; }
.hero-scroll .cloud-illustration .cloud-guide, .hero-scroll .cloud-illustration .cloud-cross { stroke: #9ed7ff; }
.hero-scroll .cloud-illustration .stack-label { fill: #f0faff; }
.hero-scroll .cloud-illustration .node-label { fill: #eef8ff; }
.hero-scroll .cloud-illustration .detail-label { fill: #b2d7ff; }
.hero-scroll #harness-chip path, .hero-scroll #sandbox-cube path { stroke: #c8f2ff; fill: #4276e755; }
.hero-scroll #input-node rect, .hero-scroll #output-node rect { fill: #2e58d944; stroke: #c5ecff; }
.hero-scroll #input-node path, .hero-scroll #output-node path { stroke: #d7f3ff; }
.hero-scroll #connection-lines { stroke: #b9ddff; }
.hero-scroll #connection-lines circle, .hero-scroll #sandbox-layer > circle { fill: #d2f8ff; }
@media (max-width: 680px) { .hero-scroll { height: 270svh; } }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: auto; }
  .morph-mesh { display: none; }
  .hero-scroll .cloud-reveal { background: #2249e7; }
  .hero-scroll #harness-layer > path, .hero-scroll #sandbox-layer > path { opacity: 1; }
  .hero-scroll #harness-layer > path:not(.stack-edge), .hero-scroll #sandbox-layer > path:not(.stack-edge) { opacity: .2; }
  .hero-scroll #harness-layer > .stack-edge, .hero-scroll #sandbox-layer > .stack-edge { fill: #5586f555; }
  .hero-scroll #task-to-harness, .hero-scroll #sandbox-to-pr { opacity: 1; }
}
/* A slow handoff: the camera settles before the palm opens into the stack. */
.hero-scroll { height: 310svh; }
.hero-scroll .journey-scene { top: 50px; height: calc(100svh - 50px); min-height: 620px; }
.hero-scroll .hero-heading { padding-top: 20px; }
.hero-scroll .hero-lockup { font-size: 29px !important; margin-bottom: 15px !important; }
.hero-scroll .hero-lockup svg { width: 17px; height: 26px; }
.hero-scroll .hero-heading h1 { font-size: min(15.5vw, 22svh); }
.hero-scroll .hero { background: #1b3ee9; }
.hero-scroll .hero-grid { opacity: .5; background-image: radial-gradient(#bedbff77 .8px, transparent .8px); background-size: 30px 30px; mask-image: radial-gradient(ellipse at 66% 64%, #0007, transparent 70%); }
.hero-scroll .orbital { display: none; }
.hero-scroll .stack-destination { top: calc(100% - (100svh - 50px)); }
.mesh-grid { stroke-dasharray: .1 3.5; stroke-linecap: round; stroke-width: .9; opacity: .7; }
.mesh-face { fill: #4276f918; stroke-width: .9; }
.mesh-face.face-front { fill: #2754da22; }
.mesh-face.face-side { fill: #3064eb18; }
.shared-trace { stroke-dasharray: 1 5; stroke-linecap: round; }
.hero-scroll .cloud-copy .stack-steps { display: block; }
@media(max-width:680px) {
  .hero-scroll { height: 290svh; }
  .hero-scroll .journey-scene { top: 45px; height: calc(100svh - 45px); min-height: 670px; }
  .hero-scroll .hero-heading { padding-top: 28px; }
  .hero-scroll .hero-heading h1 { font-size: 24vw; }
  .hero-scroll .hero-lockup { font-size: 28px !important; }
  .hero-scroll .art-stage { bottom: 85px; height: 38%; }
  .hero-scroll .cloud-copy .stack-steps { display: none; }
  .direction-bar nav a { gap: 4px; padding: 8px 4px; font-size: 8px; }
  .direction-bar nav a .mono { font-size: 6px; }
}
@media(prefers-reduced-motion:reduce) { .hero-scroll { height: auto; } .hero-scroll .journey-scene { top: auto; height: auto; min-height: 0; } .hero-scroll .art-stage { position: relative; bottom: auto; height: 350px; } }
.hero-scroll .transfer-lines { opacity: var(--transfer-opacity, 1); }
.hero-scroll #harness-sandbox-guide-left, .hero-scroll #harness-sandbox-guide-right { stroke-dasharray: 1 7; stroke-linecap: round; }
/* The original wireframe is displayed through the same dot rhythm as the stack. */
.hero-scroll .hero-art { mask-image: radial-gradient(circle at center, #000 1.15px, transparent 1.5px); mask-size: 3.5px 3.5px; mask-repeat: repeat; opacity: 1; filter: brightness(1.25); }
.handoff-caption { position: absolute; top: 22%; left: 6%; z-index: 4; opacity: var(--handoff-caption-opacity, 0); pointer-events: none; }
.handoff-caption > p { color: #b9d8ff; font-size: 8px; margin: 0 0 20px; }
.handoff-caption h2 { color: #eff7ff; font-size: clamp(40px,4.2vw,65px); font-weight: 400; line-height: 1.08; letter-spacing: -.04em; margin: 0; }
@media(max-width:680px) { .handoff-caption { top: 19%; } .handoff-caption h2 { font-size: 39px; } .handoff-caption > p { font-size: 7px; } }
@media(prefers-reduced-motion:reduce) { .handoff-caption { display: none; } }