/* Better Motion is an optional enhancement layer for the /bettermotion experiment. */

.bettermotion .hero-sequence-pin {
  position: relative;
  display: grid;
  gap: clamp(44px, 5vw, 72px);
}

.bettermotion .hero {
  overflow: clip;
}

.bettermotion .hero-depth-stage {
  --hero-plane-x: 0px;
  --hero-plane-y: 0px;
  --hero-rear-x: 0px;
  --hero-rear-y: 0px;
  --hero-rear-scale: 1;
  --hero-video-y: 0px;
  --hero-video-scale: 1;
  --hero-video-opacity: 1;
  --hero-front-x: 0px;
  --hero-front-y: 0px;
  --hero-front-scale: 1;
  --hero-front-opacity: 0.78;
  --hero-aura-y: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(560px, 51vw, 700px);
  place-items: center;
  margin-inline: calc((100% - 100vw) / 2);
  overflow: visible;
}

.bettermotion .hero-depth-stage::before {
  position: absolute;
  z-index: 0;
  width: min(1040px, 78vw);
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 44px;
  background:
    radial-gradient(circle at 50% 50%, rgba(24, 135, 178, 0.13), transparent 58%),
    linear-gradient(135deg, rgba(47, 116, 255, 0.08), transparent 32%, transparent 68%, rgba(181, 36, 120, 0.07));
  box-shadow: 0 74px 180px rgba(0, 0, 0, 0.54);
  content: "";
  filter: blur(1px);
  pointer-events: none;
  transform: translate3d(0, var(--hero-aura-y, 0px), 0) scale(var(--hero-aura-scale, 1));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.bettermotion .hero-depth-plane {
  position: absolute;
  z-index: 0;
  right: -7vw;
  bottom: 2%;
  left: -7vw;
  height: 68%;
  transform: perspective(900px) rotateX(64deg) translate3d(var(--hero-plane-x), var(--hero-plane-y), 0) scale(1.08);
  transform-origin: 50% 100%;
  background:
    linear-gradient(rgba(47, 116, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 160, 190, 0.12) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent 88%);
  opacity: 0.5;
  pointer-events: none;
}

.bettermotion .hero-depth-art {
  position: absolute;
  z-index: 1;
  inset: 50% auto auto 50%;
  width: min(1540px, 112vw);
  aspect-ratio: 2 / 1;
  transform-origin: 50% 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.bettermotion .hero-depth-art-rear {
  transform: translate3d(calc(-50% + var(--hero-rear-x)), calc(-50% + var(--hero-rear-y)), 0) scale(var(--hero-rear-scale));
  background-image: url("./assets/hero-depth-rear-v1.webp");
  filter: saturate(0.82) brightness(0.7);
  opacity: var(--hero-rear-opacity, 0.7);
}

.bettermotion .hero-depth-stage .film-stage {
  z-index: 2;
  width: min(860px, 68vw);
  transform-origin: 50% 54%;
  box-shadow:
    0 56px 140px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(255, 255, 255, 0.045),
    0 0 88px rgba(47, 116, 255, 0.1);
  opacity: var(--hero-video-opacity);
  will-change: transform;
}

html[data-better-motion-ready] .bettermotion .hero-depth-stage .film-stage {
  transform: translate3d(0, var(--hero-video-y), 0) scale(var(--hero-video-scale));
}

.bettermotion .hero-depth-art-front {
  z-index: 4;
  top: calc(50% + 86px);
  width: 128vw;
  max-width: none;
  transform: translate3d(calc(-50% + var(--hero-front-x)), calc(-50% + var(--hero-front-y)), 0) scale(var(--hero-front-scale));
  background-image: url("./assets/hero-depth-front-v1.webp");
  filter: saturate(0.88) brightness(0.8);
  opacity: var(--hero-front-opacity);
  transition: filter 180ms linear, opacity 180ms ease;
}

.bettermotion .hero-copy-outro {
  max-width: 1060px;
  padding: clamp(36px, 5vw, 72px) 0;
  pointer-events: none;
}

.bettermotion .hero-outro-title {
  width: fit-content;
  margin: 0 auto;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(54px, 7vw, 106px);
  font-weight: 560;
  letter-spacing: -0.05em;
  line-height: 0.91;
  text-wrap: balance;
}

.bettermotion .hero-outro-title span,
.bettermotion .hero-outro-title strong {
  display: block;
}

.bettermotion .hero-outro-title span {
  color: var(--muted);
}

.bettermotion .hero-outro-title strong {
  margin-top: 0.08em;
  font-weight: 730;
}



.bettermotion .hero-depth-stage:has(.film-stage.controls-visible) .hero-depth-art-front,
.bettermotion .hero-depth-stage:has(.film-stage.showing-choices) .hero-depth-art-front {
  filter: saturate(0.72) brightness(0.58);
  opacity: min(0.34, var(--hero-front-opacity));
}

html[data-better-motion-ready] .bettermotion .hero-depth-plane,
html[data-better-motion-ready] .bettermotion .hero-depth-art,
html[data-better-motion-ready] .bettermotion .hero-depth-stage .film-stage {
  transition: filter 180ms linear;
}

@media (min-width: 821px) {
  html[data-better-motion-ready] .bettermotion .hero-grid {
    position: relative;
    display: block;
    height: clamp(1760px, 270svh, 2580px);
  }

  html[data-better-motion-ready] .bettermotion .hero-sequence-pin {
    position: sticky;
    top: 0;
    display: block;
    width: 100vw;
    height: 100svh;
    min-height: 640px;
    margin-inline: calc((100% - 100vw) / 2);
    overflow: clip;
  }

  html[data-better-motion-ready] .bettermotion .hero-copy {
    position: absolute;
    right: 0;
    left: 0;
    margin-bottom: 0;
    transition: none;
    will-change: transform, opacity;
  }

  html[data-better-motion-ready] .bettermotion .hero-copy-intro {
    z-index: 1;
    top: clamp(108px, 14svh, 154px);
    transform: translate3d(0, var(--hero-copy-y, 0px), 0) scale(var(--hero-copy-scale, 1));
    opacity: var(--hero-copy-opacity, 1);
  }

  html[data-better-motion-ready] .bettermotion .hero-copy-outro {
    z-index: 3;
    top: 50%;
    padding: 0;
    transform:
      translate3d(0, -50%, 0)
      translate3d(0, var(--hero-outro-y, 0px), 0)
      scale(var(--hero-outro-scale, 0.78));
    opacity: var(--hero-outro-opacity, 0);
  }

  html[data-better-motion-ready] .bettermotion .hero-depth-stage {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100%;
    min-height: 0;
    margin: 0;
    transform: translateX(-50%);
    overflow: clip;
  }

  html[data-better-motion-ready] .bettermotion .hero-depth-stage::before {
    opacity: var(--hero-aura-opacity, 1);
  }

  html[data-better-motion-ready] .bettermotion .site-header {
    transform: translate3d(-50%, var(--hero-header-y, 0px), 0);
    opacity: var(--hero-header-opacity, 1);
    will-change: transform, opacity;
  }

  html[data-better-motion-ready] .bettermotion .site-header:focus-within {
    transform: translate3d(-50%, 0, 0);
    opacity: 1;
  }

  
}

/* Portrait tablet runway. The boundary matches the JavaScript portrait branch
   (viewportHeight > innerWidth * 1.12, i.e. width / height <= 100 / 112) so the
   longer scroll distance and the portrait motion equations switch together.
   Landscape keeps the approved height above. Reduced-motion and motion-off
   rules later in this file still reset the height to auto. */
@media (min-width: 821px) and (max-aspect-ratio: 100/112) {
  html[data-better-motion-ready] .bettermotion .hero-grid {
    height: clamp(2100px, 300svh, 3400px);
  }
}





























html[data-better-motion-ready] .bettermotion [data-motion-emphasis] {
  --motion-emphasis: 0.38;
  transform: translate3d(0, calc((1 - var(--motion-emphasis)) * 18px), 0);
  opacity: calc(0.42 + var(--motion-emphasis) * 0.58);
  will-change: transform, opacity;
}

@media (max-width: 820px) {
  .bettermotion .hero-copy-outro {
    padding: 10px 0 0;
  }

  .bettermotion .hero-outro-title {
    font-size: clamp(42px, 12vw, 58px);
  }

  .bettermotion .hero-depth-stage {
    display: block;
    min-height: 0;
    margin-inline: 0;
  }

  .bettermotion .hero-depth-stage::before,
  .bettermotion .hero-depth-plane,
  .bettermotion .hero-depth-art {
    display: none;
  }

  .bettermotion .hero-depth-stage .film-stage {
    width: 100%;
    transform: none !important;
    will-change: auto;
  }

  

  

  

  

  html[data-better-motion-ready] .bettermotion [data-motion-emphasis] {
    transform: none;
    opacity: 1;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-better-motion-ready] .bettermotion .hero-grid {
    height: auto;
  }

  html[data-better-motion-ready] .bettermotion .hero-sequence-pin {
    position: relative;
    display: grid;
    width: auto;
    height: auto;
    min-height: 0;
    margin-inline: 0;
    overflow: visible;
  }

  html[data-better-motion-ready] .bettermotion .hero-copy,
  html[data-better-motion-ready] .bettermotion .hero-depth-stage {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    transform: none !important;
    opacity: 1;
  }

  html[data-better-motion-ready] .bettermotion .hero-copy-outro {
    padding: clamp(36px, 5vw, 72px) 0;
  }

  html[data-better-motion-ready] .bettermotion .hero-depth-stage {
    min-height: clamp(560px, 51vw, 700px);
    margin-inline: calc((100% - 100vw) / 2);
    overflow: visible;
  }

  html[data-better-motion-ready] .bettermotion .site-header {
    transform: translateX(-50%);
    opacity: 1;
  }

  .bettermotion .hero-depth-plane,
  .bettermotion .hero-depth-art,
  .bettermotion .hero-depth-stage .film-stage {
    transform: none !important;
    will-change: auto;
  }

  .bettermotion .hero-depth-art {
    transform: translate(-50%, -50%) !important;
  }

  html[data-better-motion-ready] .bettermotion [data-motion-emphasis] {
    position: relative;
    top: auto;
    transform: none !important;
    opacity: 1 !important;
    will-change: auto;
  }
}

html[data-motion="off"] .bettermotion [data-motion-emphasis] {
  position: relative;
  top: auto;
  transform: none !important;
  opacity: 1 !important;
  will-change: auto;
}

html[data-motion="off"][data-better-motion-ready] .bettermotion .hero-grid {
  height: auto;
}

html[data-motion="off"][data-better-motion-ready] .bettermotion .hero-sequence-pin {
  position: relative;
  display: grid;
  width: auto;
  height: auto;
  min-height: 0;
  margin-inline: 0;
  overflow: visible;
}

html[data-motion="off"][data-better-motion-ready] .bettermotion .hero-copy,
html[data-motion="off"][data-better-motion-ready] .bettermotion .hero-depth-stage {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  transform: none !important;
  opacity: 1 !important;
}

html[data-motion="off"][data-better-motion-ready] .bettermotion .hero-copy-outro {
  padding: clamp(36px, 5vw, 72px) 0;
}

html[data-motion="off"][data-better-motion-ready] .bettermotion .hero-depth-stage {
  min-height: clamp(560px, 51vw, 700px);
  margin-inline: calc((100% - 100vw) / 2);
  overflow: visible;
}

html[data-motion="off"][data-better-motion-ready] .bettermotion .site-header {
  transform: translateX(-50%) !important;
  opacity: 1 !important;
}

html[data-motion="off"] .bettermotion .hero-depth-plane,
html[data-motion="off"] .bettermotion .hero-depth-stage .film-stage {
  transform: none !important;
  will-change: auto;
}

html[data-motion="off"] .bettermotion .hero-depth-art {
  transform: translate(-50%, -50%) !important;
  will-change: auto;
}