/*
 * Glintkeep waitlist page.
 *
 * Palette copied once from the platform repo (MASpaeth/glintkeep,
 * packages/ui/src/tokens.css and brand/README.md). Brand rule: gold appears
 * in exactly two places: the glint inside the logo (in the SVG) and the thin
 * left edge of the keep (the Ask panel). Never for text, buttons or other UI
 * chrome; a test enforces this.
 */
:root {
  color-scheme: dark;

  --gk-ink: #121418;
  --gk-surface: #1a1d22;
  --gk-raised: #23272e;
  --gk-border: #2a2e35;
  --gk-border-strong: #3a3f48;
  --gk-outline: #6f7682;
  --gk-text: #ecedef;
  --gk-muted: #a3a9b2;
  --gk-paper: #f6f6f3;
  --gk-negative: #f47c7c;
  --gk-glint: #b07d12;

  --color-primary-hover: #ffffff;
  --color-primary-active: #e3e3de;
  --color-outline-hover: #8a919c;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* One spacing scale for every vertical rhythm on the page. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* One container for every section: same edges everywhere. */
  --gutter: var(--space-4);
  --measure: 72rem;
  --header-h: 5.25rem;
  --font-small: 0.875rem;
  --font-xsmall: 0.8125rem;

  /* Pillars and keep: how far each piece rises as it appears. */
  --rise: 1.5rem;
  --keep-rise: 4rem;
  --wall-h: 17px; /* the keep's battlement line (see app.js drawWall) */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--gk-ink);
  color: var(--gk-text);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--gk-surface) 0%, transparent 70%),
    var(--gk-ink);
  overflow-wrap: break-word;
}

h1,
h2,
p,
ul,
figure {
  margin: 0;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--gk-text);
  text-decoration: underline;
  text-decoration-color: var(--gk-outline);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--duration-base) var(--ease-out);
}

a:hover {
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--gk-paper);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

[hidden] {
  display: none !important;
}

/* ---- header ------------------------------------------------------------ */

.site-header {
  /* Clear space around the lockup: >= 2 merlons (~21% of the mark height). */
  height: var(--header-h);
  padding-top: var(--space-6);
}

.lockup {
  display: block;
  height: 2.25rem; /* wordmark ~27px tall: above the 24px minimum */
  width: auto;
}

/* ---- buttons ----------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  font: inherit;
  font-weight: 650;
  color: var(--gk-ink);
  text-decoration: none;
  background: var(--gk-paper);
  border: 1px solid transparent; /* visible in forced-colors mode */
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out);
}

.button:hover {
  background: var(--color-primary-hover);
}

.button:active {
  background: var(--color-primary-active);
}

.button[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.8;
}

/* ---- landing (header + hero) ------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
}

.hero-grid {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-6);
}

.kicker {
  margin-bottom: var(--space-4);
  color: var(--gk-muted);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.375rem, 1.6rem + 3.6vw, 4rem);
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.subline {
  margin-top: var(--space-5);
  max-width: 34ch;
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  color: var(--gk-muted);
  text-wrap: balance;
}

.hero-cta {
  margin-top: var(--space-6);
}

/* A minimal dark browser frame around the teaser. Phones get crop A (the deck
   header) with its caption and no fade, because the art credit sits on the
   crop's bottom edge. From 640px the frame holds the full capture and its
   bottom fades into the page; --teaser-fade-start is read by the e2e test that
   keeps the fade clear of the art credit. */
.teaser-figure {
  margin: 0;
}

.teaser {
  --teaser-fade-start: 65%;
  overflow: hidden;
  background: var(--gk-surface);
  border: 1px solid var(--gk-border-strong);
  border-radius: var(--radius-lg);
}

.teaser-caption {
  margin-top: var(--space-3);
  font-size: var(--font-small);
  color: var(--gk-muted);
}

.teaser-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gk-border);
}

.teaser-dots {
  display: flex;
  gap: 0.375rem;
}

.teaser-dots span {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--gk-border-strong);
}

.teaser-tag {
  margin-left: auto;
  padding: 0.125rem var(--space-2);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--gk-muted);
  white-space: nowrap;
  border: 1px solid var(--gk-border-strong);
  border-radius: 999px;
}

.teaser-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Decorative: the pillars are just below, and it is out of the tab order. */
.scroll-cue {
  display: none;
}

/* ---- story: pillars, then the keep -------------------------------------- */

.story {
  padding-block: var(--space-6) 0;
  scroll-margin-top: 0;
}

.story-stage {
  display: grid;
  gap: calc(var(--space-6) + var(--wall-h));
}

.pillar-list {
  display: grid;
  gap: var(--space-6);
  padding: 0;
  list-style: none;
}

.pillar {
  padding-top: var(--space-5);
  border-top: 1px solid var(--gk-border-strong);
}

.pillar h2,
.keep h2 {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.pillar p,
.keep p {
  margin-top: var(--space-3);
  color: var(--gk-muted);
}

/* The collection-first proof: the one sentence in Collect and Build set in the
   brighter text color (DESIGN.md, The Muted Body Rule). */
.pillar .proof {
  color: var(--gk-text);
}

/* The keep: the Ask panel the pillars stand on. Its top edge is the
   battlement line (inline SVG, drawn by app.js to fit the width); the left
   edge is the one gold line on the page besides the logo glint. */
.keep {
  position: relative;
  background: var(--gk-surface);
  border: 1px solid var(--gk-border-strong);
  border-top: 0;
  border-left: 2px solid var(--gk-glint);
  border-radius: 0 0 var(--radius-lg) 0;
}

.keep-wall {
  position: absolute;
  bottom: 100%;
  left: -2px; /* span the border box: under the gold edge ... */
  right: -1px; /* ... to the right border */
  display: block;
  width: calc(100% + 3px);
  height: var(--wall-h);
  overflow: visible;
}

.keep-wall-line {
  fill: var(--gk-surface); /* the open path's fill closes along its base: just the merlons */
  stroke: var(--gk-outline);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.keep-body {
  max-width: 42rem;
  padding: var(--space-5);
}

.keep em {
  color: var(--gk-text);
}

/* Footnote markers (* and †): links down to the fine print in the footer;
   each footnote links back. */
.mark {
  position: relative;
  padding-inline: 0.0625em;
  color: var(--gk-text);
  text-underline-offset: 0.32em; /* below the dagger's stem, not through it */
  text-decoration-skip-ink: none;
  scroll-margin-block: 40vh;
}

/* A ~44px tap target around each marker and back-link; the glyph keeps its size. */
.mark::after,
.fn-back::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translate(-50%, -50%);
}

/* ---- signup ------------------------------------------------------------ */

/* An open, centred section under a hairline like the pillars'. On wider
   screens the email field and the button share one row. */
.signup {
  padding-block: var(--space-8);
  scroll-margin-top: var(--space-5);
}

.signup-inner {
  padding-top: var(--space-7);
  border-top: 1px solid var(--gk-border-strong);
}

/* The signup line and the badge line: left-aligned on phones, in the form's
   column; centred over the section from 640px. */
.signup-head {
  max-width: 36rem;
  margin-inline: auto;
}

.signup-title {
  max-width: 40ch;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.signup-badge {
  margin-top: var(--space-3);
  color: var(--gk-muted);
  text-wrap: balance;
}

.signup-form,
.signup .success {
  max-width: 36rem;
  margin-inline: auto;
}

/* Once joined, the success message stands where the heading was: the raised
   tone, a title-sized first line. */
.signup .success {
  margin-top: 0;
  padding: var(--space-5);
  font-size: 1rem;
  font-weight: 400;
}

.success-title {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.success-next {
  margin-top: var(--space-3);
  color: var(--gk-muted);
}

.signup-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "label"
    "email"
    "email-error"
    "consent"
    "note"
    "submit"
    "turnstile"
    "form-error"
    "privacy";
  row-gap: var(--space-3);
  margin-top: var(--space-6);
}

.email-label {
  grid-area: label;
}

.signup-form input[type="email"],
.remove-form input[type="email"] {
  grid-area: email;
}

.email-error {
  grid-area: email-error;
}

.signup-submit,
.remove-submit {
  grid-area: submit;
  white-space: nowrap;
}

.signup-form .check {
  grid-area: consent;
  margin-top: var(--space-2);
}

.signup-note {
  grid-area: note;
}

.signup-form .turnstile,
.remove-form .turnstile {
  grid-area: turnstile;
}

.signup-form .form-error,
.remove-form .form-error {
  grid-area: form-error;
}

.form-privacy {
  grid-area: privacy;
  font-size: 0.9375rem;
  color: var(--gk-muted);
}

/* Standalone links ("Privacy notice", "Back to glintkeep.com"): padded toward a
   44px tap target without moving their text. */
.form-privacy a,
.back-home a {
  display: inline-block;
  padding-block: 0.6875rem;
  margin-block: -0.6875rem;
}

/* "Free to start." under each "Join the waitlist" button. */
.cta-note {
  font-size: var(--font-small);
  color: var(--gk-muted);
}

.hero-cta + .cta-note {
  margin-top: var(--space-2);
}

label {
  font-weight: 600;
}

input[type="email"] {
  width: 100%;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 1rem; /* no iOS zoom on focus */
  color: var(--gk-text);
  background: var(--gk-ink);
  border: 1px solid var(--gk-outline);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out);
}

input[type="email"]:hover {
  border-color: var(--color-outline-hover);
}

input[aria-invalid="true"] {
  border-color: var(--gk-negative);
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  align-items: start;
}

.check label {
  font-weight: 400;
  cursor: pointer;
}

.check .field-error {
  grid-column: 1 / -1;
}

.check .field-error:not(:empty) {
  margin-top: var(--space-2);
}

input[type="checkbox"] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.0625rem 0 0;
  accent-color: var(--gk-paper);
  cursor: pointer;
}

/* The same ring as every other control, not the browser's own. */
input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gk-paper);
  outline-offset: 3px;
  border-radius: 2px;
}

.field-error,
.form-error {
  color: var(--gk-negative);
  font-size: 0.9375rem;
}

.turnstile:empty {
  display: none;
}

.success {
  margin-top: var(--space-6);
  padding: var(--space-4);
  font-size: 1.125rem;
  font-weight: 600;
  background: var(--gk-raised);
  border: 1px solid var(--gk-border-strong);
  border-radius: var(--radius-md);
}

/* "Changed your mind? Remove your email" under the signup success message. */
.success-remove {
  margin-top: var(--space-3);
  font-size: var(--font-small);
  font-weight: 400;
}

.success-remove a {
  text-decoration-skip-ink: none;
}

/* ---- footer ------------------------------------------------------------ */

/* Two tiers: tagline + links, a hairline, then the fine print and a centred ©.
   No logo here: the header lockup is the page's only logo (Brand & Logo:
   never two lockups in one view). */
.site-footer {
  padding-block: var(--space-7) var(--space-6);
  border-top: 1px solid var(--gk-border);
  font-size: var(--font-small);
  color: var(--gk-muted);
}

.footer-top {
  display: grid;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--gk-border);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.footer-links a {
  padding-block: 0.75rem;
}

/* The current page: weight 600, no underline. */
.footer-links a[aria-current="page"] {
  font-weight: 600;
  text-decoration: none;
}

.footer-links span {
  color: var(--gk-outline);
}

.fine-print {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-6);
  font-size: var(--font-xsmall);
}

.fine-print > * {
  max-width: 80ch;
}

.footnotes {
  display: grid;
  gap: var(--space-3); /* keeps the back-links' tap targets apart */
  padding: 0;
  list-style: none;
}

.footnotes li {
  scroll-margin-block: 40vh;
}

.footnotes li:target {
  color: var(--gk-text);
}

.fn-back {
  position: relative;
  padding-inline: 0.0625em;
  text-underline-offset: 0.32em;
  text-decoration-skip-ink: none;
}

.copyright {
  margin-top: var(--space-7);
  font-size: var(--font-xsmall);
  text-align: center;
}

/* ---- /privacy and /remove ---------------------------------------------- */

.home-link {
  display: inline-block;
}

.doc {
  padding-block: var(--space-8) var(--space-9);
}

.doc h1 {
  font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem);
}

.doc > p,
.doc section p {
  max-width: 68ch;
  margin-top: var(--space-5);
  font-size: 1.0625rem;
  color: var(--gk-muted);
}

.doc h2 {
  margin-top: var(--space-7);
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.doc section p {
  margin-top: var(--space-2);
}

.doc > .doc-updated {
  font-size: var(--font-small);
}

.doc > .back-home {
  margin-top: var(--space-7);
}

.remove .back-home {
  margin-top: var(--space-5);
}

/* /remove: one email field and the button, laid out like the signup row. */
.remove {
  max-width: 36rem;
  margin-top: var(--space-6);
}

.remove-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "label"
    "email"
    "email-error"
    "submit"
    "turnstile"
    "form-error";
  row-gap: var(--space-3);
}

.remove .success {
  margin-top: 0;
}

/* ---- wider screens ----------------------------------------------------- */

@media (min-width: 40rem) {
  :root {
    --gutter: var(--space-6);
  }

  .teaser {
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--teaser-fade-start), transparent);
    mask-image: linear-gradient(to bottom, #000 var(--teaser-fade-start), transparent);
  }

  .teaser-caption {
    display: none;
  }

  .signup-head {
    max-width: none;
  }

  .signup-title {
    margin-inline: auto;
    text-align: center;
  }

  .signup-badge {
    text-align: center;
  }

  .story {
    padding-block: var(--space-7) 0;
  }

  .signup-form {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label label"
      "email submit"
      "email-error email-error"
      "consent consent"
      "note note"
      "turnstile turnstile"
      "form-error form-error"
      "privacy privacy";
    column-gap: var(--space-3);
  }

  .remove-form {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "label label"
      "email submit"
      "email-error email-error"
      "turnstile turnstile"
      "form-error form-error";
    column-gap: var(--space-3);
  }

  .footer-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .pillar-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .keep-body {
    padding: var(--space-5) var(--space-6);
  }
}

@media (min-width: 64rem) {
  /* The landing fills the first screen: header + hero = 100svh. */
  .hero {
    min-height: calc(100svh - var(--header-h));
  }

  .hero-grid {
    flex: 1;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: var(--space-8);
  }

  .scroll-cue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto var(--space-5);
    color: var(--gk-muted);
    transition:
      opacity var(--duration-slow) var(--ease-out),
      visibility var(--duration-slow);
  }

  .scroll-cue.is-hidden {
    opacity: 0;
    visibility: hidden;
  }

  .story {
    padding-block: var(--space-8) var(--space-6);
  }

  .pillar-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---- motion ------------------------------------------------------------ */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes keep-rise {
  from {
    opacity: 0;
    transform: translateY(var(--keep-rise));
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nudge {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(0.25rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .success:not([hidden]) {
    animation: rise var(--duration-slow) var(--ease-out);
  }

  .scroll-cue svg {
    animation: nudge 2.4s var(--ease-out) infinite;
  }

  .js .keep-wall-line {
    stroke-dasharray: 1;
  }
}

/*
 * Story, pinned (html.pin-story: wide screens, motion allowed, and the stage
 * fits the viewport; early.js and app.js decide): the stage pins (sticky inside
 * a 150svh wrapper) and scroll progress through the pinned stretch builds it:
 *   approach  Collect rises in as the stage arrives, so it pins with Collect shown
 *   0–60%     Track, Brew, Build rise in, one after another
 *   60–90%    the keep rises in beneath them; 66–90% its battlement draws
 * Scroll-driven animations ("sda") where supported; otherwise app.js sets
 * --t (0..1) per piece and --draw on the keep ("sda-fallback").
 */
@media (min-width: 64rem) and (prefers-reduced-motion: no-preference) {
  .pin-story .story {
    height: 150svh;
    padding-block: 0;
    view-timeline: --story block;
  }

  .pin-story .story-pin {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    height: 100svh;
  }

  .pin-story.sda .pillar,
  .pin-story.sda .keep,
  .pin-story.sda .keep-wall-line {
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --story;
  }

  .pin-story.sda .pillar {
    animation-name: rise;
  }

  .pin-story.sda .pillar:nth-child(1) {
    animation-range: entry 30% entry 100%;
  }

  .pin-story.sda .pillar:nth-child(2) {
    animation-range: contain 0% contain 20%;
  }

  .pin-story.sda .pillar:nth-child(3) {
    animation-range: contain 20% contain 40%;
  }

  .pin-story.sda .pillar:nth-child(4) {
    animation-range: contain 40% contain 60%;
  }

  .pin-story.sda .keep {
    animation-name: keep-rise;
    animation-range: contain 60% contain 90%;
  }

  .pin-story.sda .keep-wall-line {
    animation-name: draw;
    animation-range: contain 66% contain 90%;
  }

  .pin-story.sda-fallback .pillar {
    opacity: var(--t, 0);
    transform: translateY(calc((1 - var(--t, 0)) * var(--rise)));
  }

  .pin-story.sda-fallback .keep {
    opacity: var(--t, 0);
    transform: translateY(calc((1 - var(--t, 0)) * var(--keep-rise)));
  }

  .pin-story.sda-fallback .keep-wall-line {
    stroke-dashoffset: calc(1 - var(--draw, 0));
  }
}

/* Story, unpinned (phones, and wide screens whose stage doesn't fit the
   viewport): each pillar, then the keep, fades up as it scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  :root:not(.pin-story).sda .pillar,
  :root:not(.pin-story).sda .keep,
  :root:not(.pin-story).sda .keep-wall-line {
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
  }

  :root:not(.pin-story).sda .pillar,
  :root:not(.pin-story).sda .keep {
    animation-name: rise;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }

  :root:not(.pin-story).sda .keep {
    view-timeline: --keep block;
  }

  :root:not(.pin-story).sda .keep-wall-line {
    animation-name: draw;
    animation-timeline: --keep;
    animation-range: entry 20% entry 100%;
  }

  :root:not(.pin-story).sda-fallback .pillar,
  :root:not(.pin-story).sda-fallback .keep {
    opacity: 0;
    transform: translateY(var(--rise));
    transition:
      opacity 600ms var(--ease-out),
      transform 600ms var(--ease-out);
  }

  :root:not(.pin-story).sda-fallback .keep-wall-line {
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 900ms var(--ease-out) 200ms;
  }

  :root:not(.pin-story).sda-fallback .pillar.is-in,
  :root:not(.pin-story).sda-fallback .keep.is-in {
    opacity: 1;
    transform: none;
  }

  :root:not(.pin-story).sda-fallback .keep.is-in .keep-wall-line {
    stroke-dashoffset: 0;
  }
}

/* A focused footnote marker must never sit in an invisible pillar or keep:
   whatever holds focus is shown fully, wherever the scroll is. */
.js .pillar:focus-within,
.js .keep:focus-within {
  opacity: 1;
  transform: none;
  animation: none;
}

.js .keep:focus-within .keep-wall-line {
  stroke-dashoffset: 0;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}