.work-transition {
  --gradient-mist: color-mix(in srgb, #eaf4ff, #05060a var(--theme-weight, 0%));
  --gradient-halo: color-mix(in srgb, #bfdfff, #0f1d39 var(--theme-weight, 0%));
  --gradient-sky: color-mix(in srgb, #6cb4ff, #183b75 var(--theme-weight, 0%));
  --gradient-blue: color-mix(in srgb, #287eff, #1e5eff var(--theme-weight, 0%));
  --gradient-cobalt: color-mix(in srgb, #0645ff, #0e43ff var(--theme-weight, 0%));
  --gradient-deep: color-mix(in srgb, #0024d6, #5e8bff var(--scene-weight, 0%));
  --gradient-night: color-mix(in srgb, #061063, #b9d2ff var(--scene-weight, 0%));
  --gradient-shadow: color-mix(in srgb, #01061d, #eaf2ff var(--scene-weight, 0%));
  --gradient-core: var(--scene-bg, #000);
  --work-static-gradient: linear-gradient(var(--scene-bg, #000) 12%, color-mix(in srgb, #071965, #bcd3ff var(--scene-weight, 0%)) 24%, color-mix(in srgb, #0a43ff, #1247ff var(--theme-weight, 0%)) 32%, color-mix(in srgb, #79baff, #173e7d var(--theme-weight, 0%)) 42%, color-mix(in srgb, #eef7ff, #0a1529 var(--theme-weight, 0%)) 52%, var(--page-bg, #fff) 60%);
  position: relative;
  height: 300vh;
  height: 300svh;
  background: var(--scene-bg, #000);
  view-timeline-name: --work-transition;
  view-timeline-axis: block;
}

.work-transition-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--page-bg, #fff);
}

.work-transition-stage::after {
  content: '';
  position: absolute;
  z-index: 3;
  inset: 0;
  background: var(--scene-bg, #000);
  opacity: var(--work-cover-opacity, 0);
  pointer-events: none;
}

.work-transition-title {
  position: absolute;
  z-index: 1;
  top: 17.5%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0 24px;
  color: var(--ink, #0a0a0c);
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(32px, 3.125vw, 60px);
  font-weight: 450;
  line-height: 1.12;
  letter-spacing: -.055em;
  text-align: center;
}

.work-transition-wave {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0) scale(1, 1);
  transform-origin: 50% 100%;
  pointer-events: none;
}

.work-transition-wave::after {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  height: 20vh;
  height: 20svh;
  background: var(--scene-bg, #000);
}

.work-transition-gradient {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.work-transition.is-visible .work-transition-wave { will-change: transform; }

.work-transition-fluid {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.work-transition.is-fluid .work-transition-fluid { opacity: 1; }
.work-transition.is-fluid[data-motion] .work-transition-wave {
  visibility: hidden;
  animation: none;
  transform: none;
  will-change: auto;
}

.work-transition[data-motion='native-scroll'] .work-transition-wave {
  animation: work-transition-growth 1s linear both;
  animation-timeline: --work-transition;
  animation-range: contain 0% contain 100%;
}

.work-transition[data-motion='native-scroll'] .work-transition-stage::after {
  animation: work-transition-seal 1s linear both;
  animation-timeline: --work-transition;
  animation-range: contain 0% contain 100%;
}

.work-transition--exit {
  height: 220vh;
  height: 220svh;
  background: var(--page-bg, #fff);
  view-timeline-name: --work-exit;
}

/* The scene ceiling lifts upward; the outer page enters from the bottom corners.
   Mirror both renderers together while keeping the real heading upright. */
.work-exit-surface {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: scaleY(-1);
  transform-origin: 50% 50%;
  pointer-events: none;
}

.soon-title {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--ink, #000);
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(88px, 11vw, 168px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.065em;
}

.work-transition--exit[data-motion='native-scroll'] .work-transition-wave {
  animation-name: work-exit-growth;
  animation-timeline: --work-exit;
}

.work-transition--exit[data-motion='native-scroll'] .work-transition-stage::after {
  animation-name: work-exit-seal;
  animation-timeline: --work-exit;
}

/* A readable static scene-to-page composition also works without JavaScript. */
.work-transition--exit:not([data-motion]),
.work-transition--exit:not([data-motion]) .work-transition-stage {
  height: 120vh;
  height: 120svh;
}
.work-transition--exit:not([data-motion]) .work-transition-stage {
  position: relative;
  background: var(--work-static-gradient);
}
.work-transition--exit:not([data-motion]) .work-transition-wave { display: none; }
.work-transition--exit:not([data-motion]) .soon-title { inset: 58% 0 0; }

@media (max-width: 600px) {
  .work-transition-title { top: 19%; font-size: clamp(29px, 6.8vw, 38px); }
}

@media (prefers-reduced-motion: no-preference) {
  /* The larger viewport keeps the gradient covered as the phone toolbar retracts. */
  :root[data-phone-dark] #behind-the-work {
    height: calc(200svh + 100lvh);
    background: linear-gradient(to bottom, var(--page-bg, #05060a) calc(100% - 24svh), var(--scene-bg, #fff));
  }
  :root[data-phone-dark] #behind-the-work > .work-transition-stage { height: 100lvh; }
  /* Match the native animation to the sticky travel at either toolbar height. */
  :root[data-phone-dark] #behind-the-work[data-motion='native-scroll'] .work-transition-wave,
  :root[data-phone-dark] #behind-the-work[data-motion='native-scroll'] .work-transition-stage::after {
    animation-range: contain 0% contain 200svh;
  }
  /* The mirrored exit needs the same coverage. A 100svh stage exposes a dark
     strip below the curved ceiling when Safari's bottom toolbar retracts.
     Add the larger stage to the section too, preserving the 120svh travel. */
  :root[data-phone-dark] #coming-soon[data-motion] {
    height: calc(120svh + 100lvh);
  }
  :root[data-phone-dark] #coming-soon[data-motion] > .work-transition-stage { height: 100lvh; }
  :root[data-phone-dark] #coming-soon[data-motion='native-scroll'] .work-transition-wave,
  :root[data-phone-dark] #coming-soon[data-motion='native-scroll'] .work-transition-stage::after {
    animation-range: contain 0% contain 120svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work-transition { height: 115vh; height: 115svh; }
  .work-transition-stage { position: relative; height: 115vh; height: 115svh; }
  .work-transition[data-motion] .work-transition-title { animation: none; opacity: 1; }
  .work-transition[data-motion] .work-transition-wave { animation: none; transform: none; will-change: auto; }
  .work-transition[data-motion] .work-transition-fluid { opacity: 0; }
  .work-transition.is-fluid[data-motion] .work-transition-wave { visibility: visible; }
  .work-transition[data-motion] .work-transition-stage::after {
    animation: none;
    background: linear-gradient(transparent 74%, var(--scene-bg, #000) 100%);
    opacity: 1;
  }
  .work-transition--exit,
  .work-transition--exit .work-transition-stage { height: 120vh; height: 120svh; }
  .work-transition--exit .work-transition-stage {
    background: var(--work-static-gradient);
  }
  .work-transition--exit[data-motion] .work-transition-stage::after,
  .work-transition--exit[data-motion] .work-transition-wave { display: none; }
  .work-transition--exit .soon-title { inset: 58% 0 0; }
}