/* One scroll timeline for the opening; progressive enhancement leaves a complete static page. */
@layer components {
  .opening-sequence {
    position: relative;
  }
  .opening-overline {
    display: none;
  }
  .hero-end-anchor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .opening h1 .hero-word {
    display: block;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
  }
  .hero-title-frame {
    position: relative;
  }
  .opening-copy h1 {
    animation: none;
  }
  .closing-line {
    display: block;
    overflow: clip;
    padding: 0.08em 0 0.12em;
    margin: -0.08em 0 -0.12em;
  }
  .closing-line > * {
    display: block;
  }
  .story {
    --scene-inset: 0px;
    --scene-radius: 0px;
  }
  .story-sep {
    display: none;
  }
  .motion-enter {
    opacity: 0;
    translate: var(--enter-x, 0px) var(--enter-y, 36px);
    scale: 0.985;
    transition:
      opacity 0.7s var(--ease),
      translate 0.85s var(--ease),
      scale 0.85s var(--ease);
    transition-delay: var(--enter-delay, 0ms);
  }
  .motion-enter.is-visible,
  .motion-enter:focus-within {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  .motion-drawn .core-track i {
    transform-origin: left;
  }
  .cinematic-demo .journey-map li:after {
    animation: link-grow 0.7s var(--ease) 0.35s both;
  }
  @keyframes link-grow {
    from {
      opacity: 0;
      scale: 0.6 1;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
}
@layer responsive {
  .connection-stage {
    overflow: visible;
  }
  .opening h1 .hero-word {
    white-space: nowrap;
  }
  section.closing h2 {
    font-size: clamp(46px, 9.6vw, 142px);
    letter-spacing: -0.065em;
  }
  section.closing h2 em {
    letter-spacing: -0.065em;
  }
  .closing-line + .closing-line {
    margin-top: 0.015em;
  }
  .story-topline {
    font-size: 12px;
  }
  .story-sep {
    display: none;
  }
  @media screen {
    .has-cinema {
      height: 400svh;
    }
    .has-cinema .opening {
      position: sticky;
      top: 0;
      height: 100svh;
      min-height: 0;
      width: 100%;
      padding-top: 100px;
      padding-bottom: 80px;
      grid-template-columns: 1fr 1.15fr;
      overflow: clip;
    }
    .has-cinema .opening-copy {
      align-self: center;
    }
    .has-cinema .opening h1 {
      font-size: clamp(88px, 8.4vw, 120px);
      line-height: 0.94;
      transform-origin: left top;
      transform: translate(var(--heading-x, 0px), var(--heading-y, 0px))
        scale(var(--heading-scale, 1));
      will-change: transform;
    }
    .has-cinema .hero-word:nth-child(2) {
      opacity: var(--word-two, 0);
      translate: 0 var(--word-two-y, 55px);
    }
    .has-cinema .hero-word:nth-child(3) {
      opacity: var(--word-three, 0);
      translate: 0 var(--word-three-y, 65px);
    }
    .has-cinema .opening-copy > .product-name {
      opacity: var(--support, 0);
      translate: 0 calc((1 - var(--support, 0)) * 16px);
    }
    .has-cinema .opening-support {
      opacity: var(--support, 0);
      translate: 0 calc((1 - var(--support, 0)) * 24px);
    }
    .has-cinema .opening-overline {
      display: block;
      position: absolute;
      top: max(115px, 16svh);
      left: 0;
      right: 0;
      text-align: center;
      font-size: 17px;
      font-weight: 600;
      opacity: var(--overline, 1);
      pointer-events: none;
    }
    .has-cinema .connection-stage {
      height: min(580px, 73svh);
      perspective: 1200px;
    }
    .has-cinema .workspace-hub {
      width: min(360px, 48svh);
      min-height: min(190px, 27svh);
      top: 22%;
      animation: none;
      opacity: var(--mark-opacity, 0);
      translate: var(--mark-x, 560px) 0;
      will-change: translate, opacity;
      transition: none;
    }
    .has-cinema .satellite,
    .has-cinema .orbit-order {
      animation: none;
      will-change: translate, opacity;
    }
    .has-cinema .satellite-client {
      opacity: var(--client-in, 0);
      translate: var(--client-x, -550px) var(--client-y, -150px);
      rotate: var(--client-r, -18deg);
    }
    .has-cinema .satellite-team {
      top: 48%;
      opacity: var(--team-in, 0);
      translate: var(--team-x, 550px) var(--team-y, -220px);
      rotate: var(--team-r, 18deg);
    }
    .has-cinema .orbit-order {
      bottom: 30px;
      opacity: var(--order-in, 0);
      translate: var(--order-x, 160px) var(--order-y, 400px);
      rotate: var(--order-r, 12deg);
    }
    .has-cinema .stage-footnote {
      bottom: -10px;
      opacity: var(--mark-opacity, 0);
    }
    .has-cinema .connection-halo {
      opacity: var(--mark-opacity, 0);
      scale: var(--halo-scale, 0.75);
    }
    .has-cinema .connection-rings {
      opacity: var(--mark-opacity, 0);
      transform: rotate(var(--ring-angle, -60deg));
    }
    .has-cinema .scroll-cue {
      opacity: var(--cue-opacity,1);
      color: var(--muted-strong);
    }
    .has-cinema .scroll-cue:after {
      content: "";
      position: absolute;
      top: -1px;
      left: 0;
      height: 1px;
      width: 100%;
      background: var(--blue);
      transform: scaleX(var(--intro-progress, 0));
      transform-origin: left;
    }
    .has-cinema .hero-end-anchor {
      bottom: 100svh;
      scroll-margin-top: -100px;
    }
    .has-cinema:has(.opening-support:focus-within) .opening-support {
      opacity: 1;
    }
    .motion-scene {
      clip-path: inset(
        0 var(--scene-inset) 0 round var(--scene-radius) var(--scene-radius) 0 0
      );
    }
    .motion-scene .order-stage {
      translate: 0 var(--scene-y, 0px);
      scale: var(--scene-scale, 1);
    }
    .motion-scene .order-id {
      opacity: 1;
      translate: 0 var(--number-y, 0px);
    }
    .motion-closing .closing-line > * {
      translate: 0 var(--closing-line-one, 0%);
    }
    .motion-closing .closing-line + .closing-line > * {
      translate: 0 var(--closing-line-two, 0%);
    }
    .motion-closing .closing-actions {
      opacity: var(--closing-actions, 1);
      translate: 0 var(--closing-actions-y, 0px);
    }
    .motion-closing .closing-actions:focus-within {
      opacity: 1;
      translate: 0 0;
    }
  }
  @media (max-width: 1000px), (max-height: 699px) {
    .opening-overline {
      display: none;
    }
    .hero-end-anchor {
      bottom: 0;
    }

    .opening h1 {
      white-space: normal;
    }
    .opening .workspace-hub {
      animation: none;
    }
    .opening .satellite,
    .opening .orbit-order {
      animation: none;
    }
  }
  @media (max-width: 760px) {
    .opening .opening-support .cta-destination {
      font-size: 12px;
    }
    .opening h1 {
      font-size: clamp(52px, 15.8vw, 86px);
    }
    .opening .connection-stage {
      margin-top: 14px;
    }
    section.closing h2 {
      font-size: clamp(40px, 11vw, 76px);
    }
  }
  /* The opening story is identical in a narrow app panel and on desktop. */
  .has-cinema .opening-overline { display:none; }
  @media (max-width:1000px), (max-height:699px) {
    .opening-sequence.has-cinema { height:400svh; }
    .has-cinema .opening {
      display:block;
      position:sticky;
      top:0;
      height:100svh;
      min-height:0;
      padding:0 24px;
    }
    .has-cinema .opening-copy { position:static; }
    .has-cinema .hero-title-frame {
      position:absolute;
      top:max(90px,11svh);
      left:24px;
      right:24px;
      z-index:3;
    }
    .has-cinema .opening h1 { font-size:clamp(32px,8vw,64px); line-height:.94; }
    .has-cinema .opening-copy > .product-name,
    .has-cinema .opening-sub,
    .has-cinema .opening-support .cta-destination { display:none; }
    .has-cinema .opening-support { position:absolute; bottom:30px; left:24px; z-index:4; }
    .has-cinema .connection-stage {
      position:absolute;
      top:36svh;
      bottom:110px;
      left:24px;
      right:24px;
      width:auto;
      height:calc(64svh - 110px);
      max-width:none;
      align-self:stretch;
      margin:0;
    }
    .has-cinema .workspace-hub { width:min(260px,72vw); min-height:min(136px,20svh); top:12%; }
    .has-cinema .satellite-client { top:8px; left:0; }
    .has-cinema .satellite-team { top:42%; right:0; }
    .has-cinema .orbit-order { bottom:0; left:0; right:0; }
    .has-cinema .stage-footnote { display:none; }
    .has-cinema .scroll-cue { bottom:30px; left:24px; right:24px; }
    .has-cinema .hero-end-anchor { bottom:100svh; }
  }
  @media (min-width:761px) and (max-height:699px) {
    .has-cinema .hero-title-frame { top:25svh; right:52%; }
    .has-cinema .opening h1 { font-size:clamp(36px,10svh,64px); }
    .has-cinema .connection-stage { left:52%; top:100px; bottom:70px; height:calc(100svh - 170px); }
    .has-cinema .opening-support { bottom:70px; }
    .has-cinema .workspace-hub { width:min(340px,50vw); min-height:min(176px,28svh); top:22%; }
    .has-cinema .satellite-team { top:48%; }
  }

}
@layer responsive {
  .story.is-scroll-story { height:300svh; }
  @media (max-width:1000px) {
    .is-scroll-story .story-sticky { padding:84px 24px 18px; gap:12px; height:100svh; grid-template-rows:auto auto minmax(0,1fr); }
    .is-scroll-story .story-composition { display:contents; }
    .is-scroll-story .story-topline,.is-scroll-story .chapter,.is-scroll-story #story-description { display:none; }
    .is-scroll-story .story-copy { grid-row:1; }
    .is-scroll-story .story-copy h2 { font-size:clamp(28px,6vw,40px); min-height:3.15em; }
    .is-scroll-story .story-demo { margin-top:0; min-height:30px; font-size:13px; }
    .is-scroll-story .story-controls { grid-row:2; }
    .is-scroll-story .story-controls button { min-height:44px; padding:8px 0; }
    .is-scroll-story .order-stage { grid-row:3; padding-top:12px; gap:10px; align-self:center; justify-self:center; width:100%; max-width:480px; }
    .is-scroll-story .order-core { padding:14px; }
    .is-scroll-story .core-track { margin:10px 0; }
    .is-scroll-story .core-detail { min-height:74px; }
    .is-scroll-story .core-detail strong { font-size:20px; }
    .is-scroll-story .core-bottom { margin-top:10px; padding-top:10px; }
    .is-scroll-story .assistant-strip { min-height:44px; padding:10px 12px; }
    .is-scroll-story .order-id { top:0; font-size:84px; }
  }
  @media (max-width:1000px) and (max-height:650px) {
    .is-scroll-story .story-sticky { padding-top:78px; gap:8px; }
    .is-scroll-story .story-copy h2 { font-size:27px; }
    .is-scroll-story .assistant-strip { display:none; }
    .is-scroll-story .order-stage { padding-top:0; }
    .is-scroll-story .core-detail { min-height:65px; }
  }
}
@layer accessibility {
  @media (prefers-reduced-motion: reduce) {
    .opening-sequence.has-cinema {
      height: auto;
    }
    .has-cinema .opening {
      position: relative;
      height: auto;
      min-height: 0;
    }
    .has-cinema .opening h1 {
      transform: none;
    }
    .has-cinema .opening-overline {
      display: none;
    }
    .has-cinema .hero-word,
    .has-cinema .opening-support,
    .has-cinema .product-name,
    .has-cinema .satellite,
    .has-cinema .orbit-order,
    .has-cinema .workspace-hub,
    .has-cinema .connection-halo,
    .has-cinema .connection-rings,
    .has-cinema .stage-footnote {
      opacity: 1;
      translate: 0 0;
      rotate: none;
      filter: none;
    }
    .motion-enter {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      transition: none;
    }
    .motion-scene {
      clip-path: none;
    }
    .motion-scene .order-stage,
    .motion-scene .order-id {
      translate: 0 0;
      scale: 1;
    }
    .motion-closing .closing-line > *,
    .motion-closing .closing-actions {
      translate: 0 0;
      opacity: 1;
    }
  }
  @media print {
    .opening-sequence.has-cinema,
    .story.is-scroll-story {
      height: auto;
    }
    .has-cinema .opening,
    .is-scroll-story .story-sticky {
      position: relative;
      height: auto;
    }
    .has-cinema .opening h1 {
      transform: none;
    }
    .has-cinema .hero-word,
    .has-cinema .opening-support,
    .has-cinema .product-name,
    .has-cinema .satellite,
    .has-cinema .orbit-order,
    .has-cinema .workspace-hub,
    .has-cinema .stage-footnote,
    .motion-enter {
      opacity: 1;
      translate: 0 0;
      filter: none;
    }
    .opening-overline,
    .nav {
      display: none;
    }
    .motion-scene {
      clip-path: none;
    }
    .motion-closing .closing-line > * {
      translate: 0 0;
    }
  }
}