@import url("motion.css");

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root { color-scheme: dark; background: #1D2321; color: #F2EBDC; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Bricolage Grotesque", "Trebuchet MS", sans-serif; }
.wd { --block: #4C7DF0; --accent: #F4C542; --ink: #F2EBDC; }
main { min-height: 100svh; display: grid; align-items: center; }
.composition {
  width: min(100%, calc(100svh * 1.6));
  aspect-ratio: 1440 / 900;
  position: relative;
  margin-inline: auto;
  container-type: inline-size;
  --heading-rise: 26.388889cqw;
}
.animated-art { position: absolute; inset: 0; pointer-events: none; }
.art { display: block; width: 100%; height: 100%; overflow: hidden; }
.art-narrow { display: none; }
.text-cycle { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
@media (min-width: 760px) {
  .motion-enabled .text-cycle { animation: wd-loop 19.1s linear infinite; }
}
.headline { position: absolute; left: 7.777778%; top: 78.666667%; right: 4%; }
h1 { margin: 0; font-weight: 800; font-size: clamp(32px, 4.305556cqw, 78px); line-height: 1; letter-spacing: -0.025em; }
h1 .title-question { margin-left: .07em; color: var(--accent); }
.headline p { margin: 12px 0 0; font-size: clamp(16px, 1.388889cqw, 24px); line-height: 1.4; }
.pausebtn {
  position: absolute; z-index: 2; left: 7.777778%;
  top: max(calc(100% - 68px), calc(50% + 50svh - 68px));
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  padding: 0; background: #1D2321; color: #F2EBDC; border: 1.5px solid #8C9189;
  border-radius: 0; cursor: pointer; touch-action: manipulation;
}
.pausebtn[hidden] { display: none; }
.pausebtn svg { width: 20px; height: 20px; fill: currentColor; }
.pausebtn:focus-visible { outline: 3px solid #F4C542; outline-offset: 4px; }
.paused .text-cycle { animation-play-state: paused; }
footer {
  position: absolute; bottom: max(34px, env(safe-area-inset-bottom));
  right: max(24px, calc((100vw - min(100vw, 100svh * 1.6)) / 2 + min(100vw, 100svh * 1.6) * .07777778));
  color: #C8C2B3; font-size: 14px; line-height: 1.4; text-align: right;
}
footer span { display: inline-block; }
.static-story { display: none; }

/* No script: no unpausable autoplay. The same static story serves reduced motion. */
body:not(.motion-enabled) .animated-art { display: none; }
body:not(.motion-enabled) .wd .anim, body:not(.motion-enabled) .wd .scene,
body:not(.motion-enabled) .wd .soft { animation: none !important; }
body:not(.motion-enabled) .headline { top: 10%; transform: none; }
body:not(.motion-enabled) .static-story { display: flex; }
.static-story { position: absolute; inset: 32% 7.777778% 16%; align-items: center; gap: 4%; }
.static-panel { width: 30.666667%; height: 100%; overflow: hidden; }
.static-story .anim, .static-story .scene, .static-story .soft { animation: none !important; }
.static-story .e-world, .static-story .e-wfade { transform: none; opacity: 1; }
.static-story .e-stars, .static-story .e-g, .static-story .e-trails,
.static-story .e-scaf, .static-story .scaffolding, .static-story .e-puff, .static-story .e-ring { display: none; }
.static-story .e-lift { transform: translateY(-12px); }
.static-story .e-fuel { opacity: 1; transform: scaleY(.5); }
.panel-1 .e-outline, .panel-1 .e-q, .panel-1 .e-flash { display: none; }
.panel-1 .e-burst { opacity: 1; transform: none; }
.panel-1 .e-swapA, .panel-1 .e-swapB { transform: none; }
.panel-2 .e-burst { display: none; }
.panel-3 .e-rip, .panel-3 .e-burst, .panel-3 .e-q, .panel-3 .e-outline { display: none; }

@media (max-width: 759px) {
  main { display: block; min-height: 0; }
  .composition {
    width: min(100%, 520px); min-height: calc(100svh - 62px); aspect-ratio: auto;
    display: flex; flex-direction: column; padding: 36px 20px 0; --heading-rise: 0px;
  }
  .text-cycle { position: relative; inset: auto; flex: 0 0 auto; }
  /* Mobile text is stationary. Removing its animation also makes the desktop
     title start fresh with the desktop SVG when crossing the breakpoint. */
  .headline { position: relative; inset: auto; transform: none; animation: none; }
  h1 { font-size: clamp(36px, 10.769231vw, 48px); text-wrap: balance; }
  .headline p { font-size: 17px; max-width: 290px; margin-top: 12px; }
  .animated-art {
    position: relative; inset: auto; margin: 26px -20px 0;
    min-height: 350px; flex: 1 0 350px;
  }
  .art-wide { display: none; }
  .art-narrow { display: block; position: absolute; inset: 0; }
  .pausebtn { left: 0; top: 0; bottom: auto; }
  /* Position the control beside the field, outside the moving drawing. */
  .composition > .pausebtn { left: 20px; top: var(--control-top, 206px); }
  footer {
    position: relative; inset: auto; max-width: 520px; margin: 0 auto;
    padding: 10px 20px max(18px, env(safe-area-inset-bottom));
    font-size: 12px; text-align: left; min-height: 62px;
  }
  .static-story { position: relative; inset: auto; min-height: 300px; flex: 1; margin: 28px 0; gap: 3%; }
  .static-panel { height: 220px; width: 31.333333%; }
  body:not(.motion-enabled) .headline { top: auto; }
}

@media (min-width: 760px) and (max-height: 600px) {
  main { min-height: 600px; }
  .composition { width: min(100%, 960px); }
  footer { position: relative; inset: auto; padding: 0 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .animated-art { display: none; }
  .text-cycle, .wd .anim, .wd .scene, .wd .soft { animation: none !important; }
  .headline { top: 10%; transform: none; }
  .static-story { display: flex; }
  .pausebtn { display: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 759px) {
  .headline { top: auto; }
}