/* ===================================================================
   RoamReady Now — coming soon
   Mobile-first. Three animations only:
     1. hero  — two-frame hammer strike, hard cut between raised and struck
     2. about — the laptop gear rotates and its glow pulses
     3. footer— the disguise easter egg peeks up
   Everything else is deliberately still.
   =================================================================== */

/* ---------- tokens ---------- */
:root {
  --cream:      #fbf6ea;
  --ink:        #0e3b3e;
  --body:       #29565a;
  --muted:      #45706e;

  /* Brand teal, kept for fills and display type (it clears AA at large
     sizes). The darker variants below are what small text, the button
     and focus rings use so everything reaches 4.5:1 / 3:1. */
  --teal:        #3f9c93;
  --teal-text:   #2f766f;
  --teal-btn:    #35827b;
  --teal-hover:  #2d6f69;
  --teal-shadow: #245e59;
  --teal-done:   #2a756f;

  --mustard:    #d9a44a;
  --coral:      #f2a279;
  --error:      #a8461f;

  --font-display: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --font-body:    'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius-card:  26px;
  --radius-field: 16px;
  --maxw:         1180px;
  --gutter:       clamp(20px, 5vw, 64px);
  --zone:         9px;   /* thickness of the hazard-stripe frame */

  /* bolt heads for the card corners */
  --bolt: radial-gradient(circle at 50% 50%,
            rgba(14, 59, 62, 0.42) 0 2.4px,
            rgba(14, 59, 62, 0.16) 2.4px 4.2px,
            transparent 4.2px);
}

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

/* Any class that sets `display` outranks the UA sheet's [hidden] rule — they
   have equal specificity and author styles win — which silently leaves
   `hidden` elements on screen. Settle it once, here. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* blueprint paper: faint grid ruling over the cream */
  background-color: var(--cream);
  background-image:
    linear-gradient(rgba(14, 59, 62, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 59, 62, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: center top;
}

/* ---------- construction-zone frame ---------- */
.zone {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}

.zone__edge {
  position: absolute;
  background: repeating-linear-gradient(
    -45deg,
    var(--ink) 0 12px,
    var(--mustard) 12px 24px
  );
}

.zone__t { top: 0;    left: 0; right: 0;  height: var(--zone); }
.zone__b { bottom: 0; left: 0; right: 0;  height: var(--zone); }
.zone__l,
.zone__r { display: none; }

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, p { margin: 0; }

:focus-visible {
  outline: 3px solid var(--teal-text);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- layout shell ---------- */
.page {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 128px);
  /* the extra --zone keeps the hazard frame off the content */
  padding: calc(clamp(24px, 4vw, 48px) + var(--zone)) var(--gutter) 0;
}

.hero, .about {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

/* ═══════════════════════════════ HERO ═══════════════════════════════ */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "copy" "art" "signup";
  gap: clamp(28px, 5vw, 44px);
  align-items: center;
}

.hero__copy   { grid-area: copy;   display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.hero__art    { grid-area: art;    min-width: 0; }
.signup       { grid-area: signup; min-width: 0; }

/* brand row */
.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.brand__mark { width: 52px; height: 52px; object-fit: contain; flex: none; }

.brand__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(21px, 4.4vw, 26px);
  letter-spacing: -0.01em;
}

.brand__badge {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--mustard);
  padding: 7px 12px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 8.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.accent { color: var(--teal); }

.hero__lede {
  max-width: 34em;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--body);
  text-wrap: pretty;
}

/* ---------- hero artwork ---------- */
.hero__art {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

/* blob and figure share one grid cell so they stay registered at any width */
.hero__art > * { grid-area: 1 / 1; }

.hero__blob,
.swing {
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
}

.hero__blob {
  background: #d8e8e3;
  opacity: 0.85;
  border-radius: 50% 50% 46% 54% / 54% 48% 52% 46%;
  scale: 0.86;          /* tucks the blob inside the figure's bounding box */
  translate: 0 1.5%;
}

.swing {
  position: relative;
  /* Origin sits on the wood block, so the block stays planted while the body
     leans back to wind up and drives forward on the hit. Without this the
     figure just sits frozen between strikes. */
  transform-origin: 82% 87%;
  animation: roamio-jolt 1.6s infinite;
}

/* both frames occupy the same box; only one is visible at a time. They must
   cross-toggle rather than simply stacking, or the raised hammer of the up
   frame would show through the transparent areas of the strike frame. */
.swing__frame {
  display: block;
  width: 100%;
}
.swing__frame--hit {
  position: absolute;
  inset: 0;
}

.swing__img { width: 100%; }

.swing__frame--up  { animation: roamio-frame-up  1.6s infinite; }
.swing__frame--hit { animation: roamio-frame-hit 1.6s infinite; }

.swing__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hit-fx {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: roamio-hit-fx 1.6s infinite;
}

/* ---------- sign-up card ---------- */
.signup {
  background-color: rgba(63, 156, 147, 0.10);
  background-image: var(--bolt), var(--bolt), var(--bolt), var(--bolt);
  background-repeat: no-repeat;
  background-size: 12px 12px;   /* without this each layer fills the card
                                   and background-position has nothing to move */
  background-position:
    13px 13px, calc(100% - 13px) 13px,
    13px calc(100% - 13px), calc(100% - 13px) calc(100% - 13px);
  border: 1px solid rgba(14, 59, 62, 0.14);
  border-radius: var(--radius-card);
  padding: clamp(18px, 4vw, 26px);
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 26px);
  flex-wrap: wrap;
}

.signup__art { width: clamp(120px, 26vw, 176px); flex: none; }

.signup__form {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signup__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px);
  line-height: 1.2;
}

.signup__row { display: flex; flex-wrap: wrap; gap: 12px; }

.signup__input {
  flex: 1 1 160px;
  min-width: 0;
  height: 58px;
  font-family: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  color: var(--ink);
  background: #fdfbf4;
  border: 1.5px solid rgba(14, 59, 62, 0.60);
  border-radius: var(--radius-field);
  padding: 0 18px;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.signup__input::placeholder { color: #5e7672; }
.signup__input:focus {
  border-color: var(--teal-text);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(63, 156, 147, 0.2);
}
.signup__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(196, 86, 47, 0.16);
}

.btn {
  flex: 0 0 auto;
  height: 58px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  color: #fff;
  background: var(--teal-btn);
  border: none;
  border-radius: var(--radius-field);
  padding: 0 28px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--teal-shadow);
  transition: background 140ms;
}
.btn:hover { background: var(--teal-hover); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--teal-shadow); }
.btn[disabled] { opacity: 0.65; cursor: default; }
.btn[disabled]:active { transform: none; box-shadow: 0 3px 0 var(--teal-shadow); }

.signup__note { font-size: 15px; line-height: 1.5; color: var(--muted); }
.signup__note.is-error { color: var(--error); }
.signup__note.is-done  { color: var(--teal-done); font-weight: 600; }

/* ═══════════════════════════ WHAT IT DOES ═══════════════════════════ */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  background-color: rgba(63, 156, 147, 0.08);
  background-image: var(--bolt), var(--bolt), var(--bolt), var(--bolt);
  background-repeat: no-repeat;
  background-size: 12px 12px;
  background-position:
    15px 15px, calc(100% - 15px) 15px,
    15px calc(100% - 15px), calc(100% - 15px) calc(100% - 15px);
  border: 1px solid rgba(14, 59, 62, 0.10);
  border-radius: 28px;
  padding: clamp(26px, 5vw, 52px);
}

.about__copy { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.eyebrow {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.about__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 5.4vw, 38px);
  line-height: 1.14;
  text-wrap: pretty;
}

.about__body { color: var(--body); text-wrap: pretty; }

.about__art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(8px, 2vw, 24px);
  min-width: 0;
}

.art {
  position: relative;
  flex: 1 1 150px;
  max-width: 240px;
  margin: 0;
}

.art__img { width: 100%; }

.art__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.gear       { animation: roamio-spin 16s linear infinite; }
.gear__solid{ filter: drop-shadow(5px 6px 0 #d19a10); }

/* the mint rim breathes with the halo, while its parent keeps turning */
.gear__rim  { animation: roamio-rim 3.2s ease-in-out infinite; }
.glow       { animation: roamio-pulse 3.2s ease-in-out infinite; }

/* ═══════════════════════════════ FOOTER ═══════════════════════════════ */
.footer {
  margin-top: clamp(56px, 8vw, 104px);
  border-top: 1px solid rgba(14, 59, 62, 0.16);
  padding: 24px var(--gutter) 0;
}

.footer__inner {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
}

.footer__brand { display: flex; flex-direction: column; gap: 4px; padding-bottom: 20px; }

.footer__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
}

.footer__meta { font-size: 14px; color: var(--muted); }

.egg-wrap { position: relative; flex: none; display: flex; justify-content: flex-end; }

/* clips Roamio to the footer edge so he peeks; the bubble sits outside it */
.egg-clip { overflow: hidden; line-height: 0; }

.egg {
  width: clamp(88px, 20vw, 132px);
  flex: none;
  transform: translateY(58%);
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  /* it is a button now, so strip the chrome */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.egg.is-peeking       { transform: translateY(26%); }
.egg:hover,
.egg:focus-visible,
.egg.is-peeking:hover { transform: translateY(2%); }

/* ---------- speech bubble ---------- */
.bubble {
  position: absolute;
  right: 0;
  bottom: calc(100% - 14px);
  z-index: 5;
  width: max-content;
  max-width: min(300px, 68vw);
  background: var(--ink);
  color: #f4f8f6;
  border: 3px solid var(--mustard);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 6px 0 rgba(14, 59, 62, 0.25);
  font-size: 15px;
  line-height: 1.45;
}
/* little tail pointing down at Roamio */
.bubble::after {
  content: "";
  position: absolute;
  right: 34px;
  top: 100%;
  border: 9px solid transparent;
  border-top-color: var(--mustard);
}

.bubble__text { min-height: 2.9em; margin: 0; }
.bubble__text::after {
  content: "▌";
  opacity: 0.75;
  animation: roamio-caret 1s steps(1) infinite;
}
.bubble.is-done .bubble__text::after { content: ""; }

/* the teaser is the compact "Psst…" that appears on its own */
.bubble.is-teaser { max-width: min(210px, 56vw); cursor: pointer; }
.bubble.is-teaser .bubble__text { min-height: 1.4em; }

/* press-on-to-continue arrow, only while the teaser is waiting to be clicked */
.bubble__more {
  display: none;
  position: absolute;
  right: 12px;
  bottom: 7px;
  font-size: 12px;
  color: var(--mustard);
  animation: roamio-caret 1s steps(1) infinite;
}
.bubble.is-teaser.is-done .bubble__more { display: block; }
.bubble.is-teaser.is-done .bubble__text { padding-right: 18px; }

.bubble__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.bubble__btn {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: #f4f8f6;
  background: transparent;
  border: 2px solid rgba(244, 248, 246, 0.45);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}
.bubble__btn:hover { border-color: var(--mustard); color: var(--mustard); }
.bubble__btn--go { background: var(--mustard); border-color: var(--mustard); color: var(--ink); }
.bubble__btn--go:hover { background: #e8b45c; color: var(--ink); }

@keyframes roamio-caret { 0%, 50% { opacity: 0.75; } 51%, 100% { opacity: 0; } }

/* ═══════════════════ EASTER EGG: sneak peek & bust ═══════════════════ */
.raid {
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}
.raid::backdrop { background: rgba(14, 59, 62, 0.62); }

.raid__inner {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 4vw, 34px);
  max-height: inherit;
  overflow-y: auto;
}

/* ---------- stage 1: the peek ---------- */
.peek__eyebrow {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.peek__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 5vw, 34px);
  line-height: 1.1;
  margin: 0 0 8px;
}

.peek__body { margin: 0 0 20px; color: var(--body); }

.peek__art {
  display: flex;
  gap: clamp(10px, 3vw, 22px);
  justify-content: center;
  flex-wrap: wrap;
}
.peek__art figure { margin: 0; flex: 1 1 160px; max-width: 220px; text-align: center; }
.peek__art figcaption {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}

.peek__timer { margin: 22px 0 0; }
.peek__timer-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.peek__bar {
  display: block;
  height: 8px;
  border-radius: 99px;
  background: rgba(14, 59, 62, 0.14);
  overflow: hidden;
}
.peek__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 8px, var(--mustard) 8px 16px);
  transform-origin: left center;
}

/* ---------- stage 2: busted ---------- */
.bust { text-align: center; }

.bust__lightbar {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}
.bust__lightbar span {
  width: 62px;
  height: 22px;
  border-radius: 7px;
  border: 3px solid var(--ink);
}
.bust__lightbar span:first-child { background: #d94a3d; }
.bust__lightbar span:last-child  { background: #3f7fd9; }

.bust__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 8vw, 56px);
  line-height: 1;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.bust__body {
  margin: 0 auto 18px;
  max-width: 34em;
  color: var(--body);
}

.bust__cops { display: flex; justify-content: center; }
.bust__cop { width: clamp(150px, 42vw, 236px); height: auto; }

.bust__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.raid__mute {
  font-family: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 1.5px solid rgba(14, 59, 62, 0.35);
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
}
.raid__mute:hover { border-color: var(--ink); color: var(--ink); }
.raid__mute [data-off] { display: none; }
.raid__mute[aria-pressed="true"] [data-on]  { display: none; }
.raid__mute[aria-pressed="true"] [data-off] { display: inline; }

/* ---------- the lights ----------
   Two washes cross-fading at 1.4s each, i.e. well under the 3-flashes-per-
   second threshold that makes flashing content a seizure risk. Deliberately
   a slow sweep rather than a strobe. */
.raid__lights {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms;
}
.raid.is-busted .raid__lights { opacity: 1; }

.raid__lights span {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.raid__lights span:first-child {
  background: radial-gradient(circle at 12% 0%, rgba(217, 74, 61, 0.55), transparent 62%);
}
.raid__lights span:last-child {
  background: radial-gradient(circle at 88% 0%, rgba(63, 127, 217, 0.55), transparent 62%);
}
.raid.is-busted .raid__lights span:first-child { animation: roamio-lights 2.8s ease-in-out infinite; }
.raid.is-busted .raid__lights span:last-child  { animation: roamio-lights 2.8s ease-in-out 1.4s infinite; }

@keyframes roamio-lights {
  0%, 100% { opacity: 0; }
  22%, 34% { opacity: 1; }
  56%      { opacity: 0; }
}

/* ═══════════════════════════ BREAKPOINTS ═══════════════════════════ */

/* tablet — roomier card, art side by side with a little more air */
@media (min-width: 640px) {
  body { font-size: 17px; }
  .signup__art { width: clamp(132px, 20vw, 176px); }
  .art { flex: 1 1 180px; }
}

/* below this the about section stays stacked: splitting it earlier
   squeezes the paragraph into a column too narrow to read comfortably */
@media (min-width: 940px) {
  .about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* desktop — hero goes two-up, artwork spans both copy rows */
@media (min-width: 940px) {
  .hero {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
    grid-template-areas:
      "copy   art"
      "signup art";
    gap: clamp(32px, 5vw, 64px);
  }
  .hero__art {
    grid-row: 1 / -1;
    align-self: center;
  }
  .hero__copy { justify-content: flex-end; }

  /* the card shares the left column with the copy, so give the form
     room rather than letting the input and button stack */
  .signup__art { width: 150px; }
  .btn { padding: 0 24px; }

  /* complete the frame with side rails once there is width to spare */
  .zone__l, .zone__r { display: block; top: 0; bottom: 0; width: var(--zone); }
  .zone__l { left: 0; }
  .zone__r { right: 0; }
}

/* ═══════════════════════════ KEYFRAMES ═══════════════════════════ */

/* Two-frame hammer strike. The doubled percentages are deliberate: they make
   each swap an instant cut, the way hand-drawn animation does it, rather than
   a cross-fade through a half-transparent double image.
      0–66%    hammer raised (the wind-up holds longest)
      66–84%   hammer down on the nail
      84–100%  back up */
@keyframes roamio-frame-up {
  0%,   66%    { opacity: 1; }
  66.01%, 84%  { opacity: 0; }
  84.01%, 100% { opacity: 1; }
}

@keyframes roamio-frame-hit {
  0%,   66%    { opacity: 0; }
  66.01%, 84%  { opacity: 1; }
  84.01%, 100% { opacity: 0; }
}

/* Body motion around the two frames: a slow lean back through the hold, a
   drive forward on contact, then settle. Keeps him alive between strikes. */
@keyframes roamio-jolt {
  0%   { transform: rotate(0deg)    translateY(0);     animation-timing-function: ease-in-out; }
  56%  { transform: rotate(-1.9deg) translateY(-0.4%); animation-timing-function: cubic-bezier(.7, 0, .8, .35); }
  66%  { transform: rotate(1.3deg)  translateY(0.75%); animation-timing-function: cubic-bezier(.2, .9, .4, 1); }
  73%  { transform: rotate(0.5deg)  translateY(0.25%); }
  84%  { transform: rotate(0.2deg)  translateY(0.1%);  animation-timing-function: ease-in-out; }
  100% { transform: rotate(0deg)    translateY(0); }
}

/* Two pulses, not one. The nail is drawn proud in one frame and driven in on
   the other, so it jumps at BOTH cuts — down at 66%, back up at 84%. The flash
   peaks on each of them so the swap happens behind something bright, and drops
   to a low glow in between so the hammer stays readable. */
@keyframes roamio-hit-fx {
  0%, 63%  { opacity: 0;    transform: scale(0.4); }
  66%      { opacity: 1;    transform: scale(1); }      /* cut down */
  72%      { opacity: 0.42; transform: scale(1.12); }
  80%      { opacity: 0.38; transform: scale(1.06); }
  84%      { opacity: 0.95; transform: scale(1.02); }   /* cut back up */
  90%      { opacity: 0.3;  transform: scale(1.22); }
  95%      { opacity: 0;    transform: scale(1.34); }
  100%     { opacity: 0;    transform: scale(0.4); }
}

@keyframes roamio-spin  { to { transform: rotate(360deg); } }

@keyframes roamio-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

@keyframes roamio-rim {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ═══════════════════════ REDUCED MOTION ═══════════════════════
   Everything holds a sensible resting pose instead of moving. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* hold the raised-hammer frame; the strike frame and flash stay hidden */
  .swing             { transform: none; }
  .swing__frame--up  { opacity: 1; }
  .swing__frame--hit { opacity: 0; }
  .hit-fx            { opacity: 0; }
  .glow       { opacity: 0.75; }
  .gear__rim  { opacity: 0.8; }
  .egg        { transform: translateY(26%); }

  /* the police lights hold a steady wash instead of sweeping */
  .raid.is-busted .raid__lights span { opacity: 0.8; }
}

/* Same for anyone who would rather not see flashing at all, independent of
   the reduced-motion setting. */
@media (prefers-reduced-transparency: reduce) {
  .raid.is-busted .raid__lights span { animation: none; opacity: 0.8; }
}