/* A native sticky stage. Scrolling remains under the visitor's control. */
@keyframes plate-arrive {
  from { opacity: 0; translate: 0 80px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes headline-arrive {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .assembly-layer { animation: plate-arrive 1.3s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--layer) * 90ms); }
  .motion-ready .hero .h1-line { animation: headline-arrive .9s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready .hero .h1-line:nth-child(2) { animation-delay: 70ms; }
  .motion-ready .hero .h1-line:nth-child(3) { animation-delay: 140ms; }
  .motion-ready .hero .h1-line:nth-child(4) { animation-delay: 210ms; }
}
.connection-scene {
  --scene-progress: 0;
  --scene-lock: 0;
  position: relative;
  background: #07090c;
  border-top: 1px solid var(--line);
}
.connection-stage {
  position: relative;
  min-height: 720px;
  height: calc(100svh - var(--header-height));
  max-height: 1080px;
  overflow: clip;
  isolation: isolate;
}
.scene-enabled .connection-scene { height: 270svh; }
.scene-enabled .connection-stage {
  position: sticky;
  top: var(--header-height);
  min-height: 0;
  max-height: none;
}
.connection-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
  background-image: linear-gradient(#59666f22 1px, transparent 1px), linear-gradient(90deg, #59666f22 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 70% 60%, black, transparent 68%);
}
.connection-copy, .connection-resolution {
  position: absolute;
  top: 12%;
  left: var(--gutter);
  width: 44%;
  z-index: 3;
}
.connection-eyebrow {
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.connection-copy h2, .connection-result {
  font-family: var(--font-display);
  font-size: clamp(58px, 6.8vw, 112px);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .96;
}
.connection-copy h2 span { color: var(--muted); }
.connection-result span { color: var(--cyan); }
.connection-description { max-width: 330px; margin-top: 30px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.connection-resolution { visibility: hidden; opacity: 0; }
.connection-object { position: absolute; z-index: 1; width: min(60vw, 1060px); left: 68%; top: 47%; aspect-ratio: 1.5; transform: translate(-50%, -50%); }
.connection-stack { position: absolute; inset: 0; }
.connection-plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  z-index: calc(10 - var(--plate));
  clip-path: polygon(48.8% 19.1%, 50% 18.8%, 51.2% 19.1%, 93% 43.1%, 93.8% 44.4%, 94% 45.2%, 94% 47.5%, 93.2% 48.6%, 51.5% 78.8%, 50% 79.2%, 48.5% 78.8%, 6.8% 48.4%, 6.5% 47.1%, 6.5% 44.9%, 7.1% 43.6%);
  transform: translateY(calc((var(--plate) - 2) * 48px));
  filter: grayscale(1);
  pointer-events: none;
}
.connection-plate:nth-child(3) { filter: none; }
.scene-enabled .connection-plate { will-change: transform; }
.connection-halo { position: absolute; left: 12%; right: 12%; top: 60%; height: 24%; background: radial-gradient(ellipse, #62d6ea33, transparent 70%); filter: blur(24px); opacity: calc(var(--scene-lock) * .8); transform: scaleX(1.35); }
.connection-floor { position: absolute; z-index: 4; bottom: 64px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.connection-floor span { transition: color .2s; }
.connection-floor span.is-active { color: var(--paper); }
.connection-meter { position: absolute; top: -20px; left: 0; right: 0; height: 1px; background: var(--line-strong); }
.connection-meter i { display: block; width: 100%; height: 1px; background: var(--cyan); transform: scaleX(var(--scene-progress)); transform-origin: left; }
.connection-skip { position: absolute; z-index: 4; right: var(--gutter); bottom: 18px; display: inline-flex; gap: 16px; padding: 6px 0; font-size: 12px; color: var(--muted); }
.connection-skip:hover { color: var(--paper); }
@media (max-width: 800px) {
  .scene-enabled .connection-scene { height: 230svh; }
  .connection-stage { min-height: 780px; }
  .connection-copy, .connection-resolution { top: 6%; width: calc(100% - 48px); }
  .connection-eyebrow { font-size: 10px; margin-bottom: 18px; }
  .connection-copy h2, .connection-result { font-size: clamp(44px, 11vw, 70px); line-height: .98; }
  .connection-description { font-size: 14px; max-width: 270px; margin-top: 18px; }
  .connection-object { width: min(110vw, 520px); top: 68%; left: 53%; }
  .connection-floor { bottom: 58px; gap: 10px; font-size: 10px; letter-spacing: 0; }
  .connection-grid { background-size: 44px 44px; }
}
@media (min-width: 600px) and (max-width: 800px) {
  .connection-copy h2, .connection-result { font-size: 52px; }
  .connection-object { top: 74%; }
}
@media (max-height: 660px) and (min-width: 801px) {
  .connection-copy, .connection-resolution { top: 8%; }
  .connection-copy h2, .connection-result { font-size: 58px; }
  .connection-description { margin-top: 18px; font-size: 15px; }
  .connection-eyebrow { margin-bottom: 18px; }
}
@media (max-width: 800px) and (max-height: 700px) {
  .connection-copy, .connection-resolution { top: 4%; }
  .connection-copy h2, .connection-result { font-size: 39px; }
  .connection-description { font-size: 12px; margin-top: 12px; max-width: 260px; }
  .connection-eyebrow { margin-bottom: 12px; }
  .connection-object { top: 65%; width: 98vw; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-enabled .connection-scene { height: auto; }
  .scene-enabled .connection-stage { position: relative; top: auto; min-height: 720px; }
  .connection-plate { will-change: auto; }
  .connection-floor span { transition: none; }
}