/* Interaction layer: preserve the original Figma composition. */
.hero-art { border-radius: 10px; }
.hero-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-art > .neural-shade { pointer-events: none; }
.main-nav { gap: calc(12 * var(--u)); }
.main-nav .nav-item { cursor: default; }
.main-nav .nav-item:focus-visible { outline: 2px solid #5cbaaa; outline-offset: 2px; }
.hero {
  --glyph-width: calc(900.488 * var(--u));
  --glyph-height: calc(230.34 * var(--u));
  --glyph-top: calc(18.64 * var(--u));
  --light-radius: calc(215 * var(--u));
  --light-x: -999px; --light-y: -999px; --light-amount: 0;
}
#hero-heading > img {opacity:.6}
.title-letters {
  display: none; position: absolute; pointer-events: none;
  left: 50%; top: var(--glyph-top); transform: translateX(-50%);
  width: var(--glyph-width); height: var(--glyph-height);
}
.title-letter {
  position: absolute;
  left: calc(var(--glyph-width) * var(--x) / 901);
  top: calc(var(--glyph-height) * var(--y) / 231);
  width: calc(var(--glyph-width) * var(--w) / 901);
  height: calc(var(--glyph-height) * var(--h) / 231);
  background: url('https://spin-assets.onew.design/assets/headline-motion-v38.svg') no-repeat;
  background-size: var(--glyph-width) var(--glyph-height);
  background-position: calc(var(--glyph-width) * var(--x) / -901) calc(var(--glyph-height) * var(--y) / -231);
}
.title-entering > img { visibility: hidden; }
.title-entering .title-letters { display: block; }
.title-entering .heading-light { visibility: hidden; }
/* Match the second headline: bright white scan, soft halo and dotted edges. */
.heading-light {
  position:absolute;left:50%;top:calc(var(--glyph-top) - 32 * var(--u));
  width:calc(var(--glyph-width) + 64 * var(--u));height:calc(var(--glyph-height) + 64 * var(--u));
  transform:translateX(-50%);pointer-events:none;
  background:url('https://spin-assets.onew.design/assets/headline-motion-v38.svg') center / var(--glyph-width) var(--glyph-height) no-repeat;
  mask-image:radial-gradient(circle var(--light-radius) at var(--light-x) var(--light-y),#000 0%,#000d 28%,#0005 65%,transparent 100%);
  opacity:var(--light-amount);filter:blur(.65px);
}
.heading-light-soft {filter:blur(calc(7 * var(--u)))}
.heading-light-outline {background-image:url('https://spin-assets.onew.design/assets/headline-motion-v38-outline.svg');filter:none;mask-image:radial-gradient(circle calc(var(--light-radius) * 1.2) at var(--light-x) var(--light-y),#000 0%,#000 65%,transparent 100%)}
#hero-heading .title-letter {opacity:.6}
.roll-label { display: block; overflow: hidden; line-height: 1.25; }
.footer-nav .roll-label { line-height: inherit; }
.roll-track { display: block; position: relative; }
.roll-copy { position: absolute; top: 100%; left: 0; white-space: nowrap; }
.button-icon { position: relative; overflow: hidden; }
.button-icon .arrow-copy { position: absolute; transform: translate(-28px, 0); opacity: 0; }
.reveal-pending { opacity: 0; translate: 0 -24px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .roll-track { transition: transform 950ms cubic-bezier(.16, 1, .3, 1); }
  :is(.main-nav a, .main-nav .nav-item, .footer-nav a, .footer-nav .nav-item, .button, .explore-link):is(:hover, :focus-visible) .roll-track { transform: translateY(-100%); }
  .main-nav :is(a, .nav-item) { transition: opacity 320ms ease, background-color 320ms ease; }
  .main-nav:has(:is(a, .nav-item):hover) :is(a, .nav-item):not(:hover) { opacity: .65; }
  .main-nav :is(a, .nav-item):not(.active):is(:hover, :focus-visible) { background: #ffffff14; }
  .button-icon img { transition: transform 550ms cubic-bezier(.16, 1, .3, 1), opacity 350ms ease; }
  .button:is(:hover, :focus-visible) .button-icon img:first-child { transform: translate(28px, 0); opacity: 0; }
  .button:is(:hover, :focus-visible) .button-icon .arrow-copy { transform: translate(0, 0); opacity: 1; }
  .explore-link > img { transition: transform 400ms cubic-bezier(.16, 1, .3, 1); }
  .explore-link:is(:hover, :focus-visible) > img { transform: translateX(4px); }
}
@media (max-width: 1023px) {
  .hero {
    --glyph-top: calc(5.65 * var(--u)); --glyph-width: calc(273 * var(--u));
    --glyph-height: calc(69.8 * var(--u)); --light-radius: calc(65 * var(--u));
  }
  .main-nav { gap: clamp(3px, .9vw, 6px); }
}
@media (max-width: 359px) {
  .main-nav { font-size: 11px; }
  .main-nav a, .main-nav .nav-item { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending { opacity: 1; translate: none; }
  .heading-light { display: none; }
  .roll-track, .button-icon img { transition: none; }
}

#hero-heading .title-letter {background-image:var(--letter-image)}