/* The static poster is the default, including browsers without scroll timelines. */
.motion-hero { --poster-ink:var(--color-bg); --poster-accent:var(--lime); --poster-color:var(--color); background:var(--poster-color); color:var(--poster-ink); position:relative; }
.motion-frame { min-block-size:max(45rem,calc(100svh - 6.5rem)); display:flex; flex-direction:column; position:relative; isolation:isolate; overflow:clip; background:var(--poster-color); }
.motion-top { align-items:center; padding-block:1.1rem; border-block-end:1px solid color-mix(in srgb,var(--poster-ink),transparent 78%); position:relative; z-index:2; }
.motion-top>span:last-child { font-size:.75rem; }
.motion-content { position:relative; flex:1; display:grid; align-items:center; padding-block:2rem 3rem; min-block-size:32rem; }
.motion-copy { position:relative; z-index:2; pointer-events:none; }
.motion-copy h1 { font-size:clamp(6rem,min(12.5vw,18svh),12rem); font-weight:500; --line-height:.87; letter-spacing:-.075em; word-spacing:.03em; }
.motion-copy h1 em { color:var(--poster-accent); font-size:1.18em; letter-spacing:-.07em; }
.motion-copy p { font-size:clamp(1rem,1.3vw,1.2rem); --line-height:1.6; margin-block:2rem 0; max-inline-size:27rem; }
.motion-copy a { --color:var(--poster-accent); --color-dark:#c5e45c; --color-bg:#252620; pointer-events:auto; margin-block-start:1.4rem; }
.motion-hero :focus-visible { outline-color:var(--poster-accent); }
.motion-art { position:absolute; inset:0 -2% 0 43%; pointer-events:none; }
.motion-arrow { position:absolute; inset:3% 0 auto; inline-size:100%; block-size:90%; object-fit:contain; fill:var(--poster-ink); transform-origin:50% 55%; }
.motion-arrow.-main { transform:translate(1%,1%) rotate(-7deg) scale(.9); }
.motion-arrow.-echo { fill:none; stroke:var(--poster-accent); stroke-width:.12; opacity:.32; }
.motion-arrow.-one { transform:translate(-10%,1%) rotate(-24deg) scale(.96); }
.motion-arrow.-two { transform:translate(-3%,0%) rotate(-15deg) scale(.93); opacity:.5; }
.motion-note { position:absolute; inset:auto 9% 11% auto; rotate:-7deg; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; --line-height:1.25; }
.motion-note em { font-size:1.8em; color:var(--poster-accent); }
.motion-word { position:absolute; inset:auto auto -3vw -1vw; font-size:25vw; font-weight:800; letter-spacing:-.08em; --line-height:.8; opacity:.065; white-space:nowrap; pointer-events:none; z-index:-1; }
.motion-bottom { position:relative; z-index:2; padding-block:1.5rem; border-block-start:1px solid color-mix(in srgb,var(--poster-ink),transparent 78%); align-items:center; }
.motion-bottom>span,.motion-bottom>a { font-size:.72rem; }
.motion-bottom>a { display:inline-flex; align-items:center; gap:.8rem; color:inherit; text-decoration:none; }
.motion-bottom b { color:var(--poster-accent); font-weight:400; margin-inline-start:.3rem; }
.motion-bottom u2-ico { --size:1.25rem; }
.motion-bottom>a:hover { color:var(--poster-accent); }

/* Construction lines keep the brand arrow recognizable as a blueprint. */
.motion-frame { background-image:linear-gradient(color-mix(in srgb,var(--poster-ink),transparent 92%) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--poster-ink),transparent 92%) 1px,transparent 1px),linear-gradient(color-mix(in srgb,var(--poster-ink),transparent 90%) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--poster-ink),transparent 90%) 1px,transparent 1px); background-size:2.5rem 2.5rem,2.5rem 2.5rem,12.5rem 12.5rem,12.5rem 12.5rem; }
.motion-top,.motion-bottom { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.motion-top .eyebrow { font-size:.7rem; font-weight:400; }
.motion-arrow.-main { fill:var(--poster-ink); fill-opacity:.08; stroke:var(--poster-ink); stroke-width:.22; }
.motion-construction { position:absolute; inset:3% 0 auto; inline-size:100%; block-size:90%; fill:none; stroke:var(--poster-ink); stroke-width:.08; opacity:.55; }
.motion-construction .construction-axis { stroke-dasharray:1 .65; }
.motion-construction .construction-dimension { stroke:var(--poster-accent); stroke-width:.1; }
.motion-construction .construction-handle { stroke-dasharray:.2 .3; }
.motion-construction .construction-dot { fill:var(--poster-accent); stroke:none; }
.motion-construction text { stroke:none; fill:var(--poster-ink); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:1.35px; letter-spacing:.1px; }

/* Independent, slow rhythms make the drawing feel alive between scrolls. */
.draft-orbit { transform-origin:0 0; }
.draft-orbit>circle:not(.construction-dot) { stroke-dasharray:18 22 4 56; stroke-width:.15; }
.draft-orbit.-outer>circle:not(.construction-dot) { stroke-dasharray:22 5 2 12 18 41; stroke:var(--poster-accent); stroke-width:.1; opacity:.6; }
.draft-trace,.draft-scan { stroke:var(--poster-accent); stroke-width:.3; stroke-linecap:round; stroke-dasharray:3 97; stroke-dashoffset:24; opacity:.9; }
.draft-trace.-return { stroke:var(--poster-ink); stroke-width:.16; stroke-dasharray:1.5 98.5; opacity:.7; }
.draft-scan { stroke:var(--poster-ink); stroke-dasharray:1 99; stroke-dashoffset:55; }
.draft-beacon { stroke:var(--poster-accent); stroke-width:.16; transform-box:fill-box; transform-origin:center; opacity:.5; }
.draft-reticle { stroke-width:.15; }
.draft-measure { stroke:var(--poster-accent); stroke-width:.16; }
.draft-breathe { transform-origin:50px 50px; }
.draft-field { position:absolute; inset:0; pointer-events:none; z-index:0; translate:var(--field-x,0px) var(--field-y,0px); transition:translate 1.2s ease-out; }
.motion-art { translate:var(--field-x,0px) var(--field-y,0px); transition:translate .8s ease-out; }
.draft-cross { position:absolute; font-family:ui-monospace,monospace; font-size:1.1rem; --line-height:1; opacity:.22; }
.draft-cross.-a { inset:17% auto auto 8%; }
.draft-cross.-b { inset:27% auto auto 36%; opacity:.13; }
.draft-cross.-c { inset:73% auto auto 3%; }
.draft-cross.-d { inset:86% auto auto 89%; opacity:.3; }
.draft-cross.-e { inset:94% auto auto 54%; opacity:.16; }
.draft-thread { position:absolute; opacity:.2; }
.draft-thread.-horizontal { inset:58% auto auto 1%; inline-size:23%; border-block-start:1px dashed var(--poster-ink); }
.draft-thread.-vertical { inset:18% 1.5% auto auto; block-size:52%; border-inline-start:1px dashed var(--poster-ink); }
.draft-thread::after { content:''; position:absolute; inline-size:3px; block-size:3px; background:var(--poster-accent); border-radius:50%; }
.draft-thread.-horizontal::after { inset:-2px auto auto 0; }
.draft-thread.-vertical::after { inset:0 auto auto -2px; }
.draft-dots { position:absolute; letter-spacing:.35em; font-family:ui-monospace,monospace; opacity:.2; }
.draft-dots.-a { inset:14% auto auto 46%; }
.draft-dots.-b { inset:91% auto auto 25%; }
.draft-corner { position:absolute; inline-size:1.1rem; block-size:1.1rem; border-color:var(--poster-accent); opacity:.2; }
.draft-corner.-top { inset:2.7rem auto auto 1.5rem; border-block-start:1px solid; border-inline-start:1px solid; }
.draft-corner.-bottom { inset:auto 1.5rem 2.7rem auto; border-block-end:1px solid; border-inline-end:1px solid; }
.draft-pointer { position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0; transition:opacity .5s; }
.has-pointer .draft-pointer { opacity:.22; }
.draft-pointer::before,.draft-pointer::after { content:''; position:absolute; inset:0 auto auto 0; background:var(--poster-accent); }
.draft-pointer::before { inline-size:1px; block-size:100%; transform:translateX(var(--cursor-x,0px)); transition:transform .35s ease-out; }
.draft-pointer::after { inline-size:100%; block-size:1px; transform:translateY(var(--cursor-y,0px)); transition:transform .5s ease-out; }
.draft-pointer>span { position:absolute; inset:-.25rem auto auto -.25rem; inline-size:.5rem; aspect-ratio:1; border:1px solid var(--poster-accent); transform:translate(var(--cursor-x,0px),var(--cursor-y,0px)) rotate(45deg); transition:transform .15s ease-out; }
@media(prefers-reduced-motion:no-preference) {
  .is-live .draft-orbit { animation:draft-turn 23s linear infinite; }
  .is-live .draft-orbit.-outer { animation-duration:37s; animation-direction:reverse; }
  .is-live .draft-trace { animation:draft-flow 9.7s linear infinite; }
  .is-live .draft-trace.-return { animation-duration:14.3s; animation-delay:-6s; animation-direction:reverse; }
  .is-live .draft-scan { animation:draft-flow 18.1s linear infinite alternate; }
  .is-live .draft-beacon { animation:draft-ping 6.7s ease-out infinite; }
  .is-live .draft-beacon.-end { animation-duration:8.9s; animation-delay:-4s; }
  .is-live .draft-reticle { animation:draft-seek 11.3s ease-in-out infinite alternate; }
  .is-live .draft-measure { animation:draft-measure 17s ease-in-out infinite alternate; }
  .is-live .draft-breathe { animation:draft-breathe 13.7s ease-in-out infinite alternate; }
  .is-live .draft-cross { animation:field-cross 21.7s ease-in-out infinite; }
  .is-live .draft-cross.-b,.is-live .draft-cross.-e { animation-delay:-9s; animation-duration:31.1s; }
  .is-live .draft-cross.-c { animation-delay:-16s; animation-direction:reverse; }
  .is-live .draft-cross.-d { animation-delay:-5s; }
  .is-live .draft-thread.-horizontal::after { animation:field-travel-x 16.3s linear infinite; animation-play-state:inherit; }
  .is-live .draft-thread.-vertical::after { animation:field-travel-y 24.7s linear infinite; animation-delay:-8s; animation-play-state:inherit; }
  .is-live .draft-dots { animation:field-dots 12.9s ease-in-out infinite alternate; }
  .is-live .draft-dots.-b { animation-delay:-6s; animation-duration:19.3s; }
  .motion-hero.is-offscreen .draft-motion { animation-play-state:paused; }
}
@keyframes field-cross { 0%,45% { transform:rotate(0deg); } 80%,100% { transform:rotate(90deg); } }
@keyframes field-travel-x { to { left:100%; } }
@keyframes field-travel-y { to { top:100%; } }
@keyframes field-dots { from { opacity:.08; letter-spacing:.35em; } to { opacity:.28; letter-spacing:.55em; } }
@keyframes draft-turn { to { transform:rotate(1turn); } }
@keyframes draft-flow { from { stroke-dashoffset:0; } to { stroke-dashoffset:-100; } }
@keyframes draft-ping { 0%,15% { transform:scale(.65); opacity:0; } 30% { opacity:.8; } 85%,100% { transform:scale(3.5); opacity:0; } }
@keyframes draft-seek { 0%,15% { transform:translate(0,0); } 55% { transform:translate(2px,-3px); } 85%,100% { transform:translate(-1px,1px); } }
@keyframes draft-measure { 0%,20% { transform:translateY(-5px); } 80%,100% { transform:translateY(8px); } }
@keyframes draft-breathe { from { transform:rotate(-.8deg) scale(.995); } to { transform:rotate(.8deg) scale(1.012); } }

/* Scroll moves the brand artwork, never the readable content. */
@supports (animation-timeline: view()) and (animation-range: contain 0% contain 100%) {
  @media (prefers-reduced-motion: no-preference) and (min-width:45rem) and (min-height:44rem) {
    .motion-hero { block-size:180svh; view-timeline:--schwups-intro block; }
    .motion-frame { position:sticky; inset-block-start:0; block-size:100svh; min-block-size:40rem; }
    .motion-construction,.motion-frame,.motion-arrow,.motion-word,.draft-field {
      animation-timing-function:linear; animation-fill-mode:both;
      animation-timeline:--schwups-intro; animation-range:contain 0% contain 100%;
    }
    .motion-construction { animation-name:construction-soften; }
    .motion-frame { animation-name:poster-tone; }
    .motion-arrow.-main { animation-name:arrow-swing; }
    .motion-arrow.-one { animation-name:echo-swing-one; }
    .motion-arrow.-two { animation-name:echo-swing-two; }
    .motion-word { animation-name:word-drift; }
    .draft-field { animation-name:field-scroll; }
  }
}
@keyframes poster-tone { to { background-color:color-mix(in srgb,var(--poster-color),var(--color-text) 85%); } }
@keyframes construction-soften { to { opacity:.2; } }
@keyframes arrow-swing { from { transform:translate(1%,1%) rotate(-7deg) scale(.9); fill-opacity:.08; } to { transform:translate(-3%,3%) rotate(22deg) scale(1.08); fill-opacity:1; } }
@keyframes echo-swing-one { from { transform:translate(-10%,1%) rotate(-24deg) scale(.96); } to { transform:translate(-10%,3%) rotate(-5deg) scale(1.08); } }
@keyframes echo-swing-two { from { transform:translate(-3%,0%) rotate(-15deg) scale(.93); } to { transform:translate(-6%,3%) rotate(9deg) scale(1.08); } }
@keyframes word-drift { to { transform:translateX(12%); } }
@keyframes field-scroll { to { transform:translateY(-1.5rem) rotate(.6deg) scale(1.02); } }

@media(width<72rem) {
  .motion-copy h1 { font-size:min(13vw,18svh); }
  .motion-art { inset-inline-start:42%; inset-inline-end:-6%; }
  .motion-copy p { font-size:1rem; max-inline-size:23rem; }
  .motion-bottom>span:last-child { display:none; }
}
@media(width<45rem) {
  .motion-frame { min-block-size:0; }
  .motion-top .eyebrow { font-size:.63rem; }
  .motion-top>span:last-child { display:none; }
  .motion-top { padding-block:.65rem; }
  .motion-content { min-block-size:0; display:flex; flex-direction:column; align-items:stretch; padding-block:2.5rem 0; }
  .motion-copy h1 { font-size:clamp(5.5rem,22vw,9rem); }
  .motion-copy p { font-size:1rem; margin-block-start:1.8rem; }
  .motion-art { position:relative; inset:auto; block-size:27rem; margin-block-start:-1.5rem; margin-inline:5% -7%; }
  .motion-note { inset-block-end:8%; inset-inline-end:8%; }
  .motion-word { font-size:34vw; inset-block-end:5rem; }
  .motion-bottom { padding-block:1.2rem; --u2-Gap:.75rem; }
  .motion-bottom>span:first-child { font-size:.65rem; }
  .motion-bottom>a { font-size:.75rem; }
}
@media(width<23rem) {
  .motion-copy h1 { font-size:5.3rem; }
  .motion-copy p { font-size:.95rem; }
  .motion-art { block-size:22rem; }
}