/* ==========================================================================
   Math Memory — account screens, game-style
   The front door of the game should look like the game: Quackers talking
   instead of a heading, chunky buttons with an emoji on each, and codes typed
   into tiles that flip like the memory cards.

   Written in logical properties throughout (inline/block, start/end) so a
   right-to-left language can be added without rewriting this file. The two
   places that stay left-to-right on purpose — phone numbers and codes — say
   so with dir="ltr" in the markup, not with physical properties here.

   Everything that moves stops in Calm mode ([data-calm] on <html>) and for
   prefers-reduced-motion. See the end of the file.
   ========================================================================== */

/* Page level, not screen level: the parent area borrows Quackers' bubble,
   the tiles and the face grid from this file too. */
:root { --qa-ink: #2a1350; }

.screen--qa {
  --qa-gap: 16px;
  max-inline-size: 480px;
  margin-inline: auto;
  gap: 18px;
}

/* ---- Top: back button + Quackers ---------------------------------------- */

.qa-top {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-block-size: 120px;
}

.qa-top__spacer { inline-size: 0; }

/* .icon-btn sets display:grid, which beats the UA [hidden] rule. Hidden here
   keeps its space, so Quackers does not jump sideways between steps. */
.qa-back[hidden] { display: grid; visibility: hidden; }
.qa-back { font-size: 30px; font-weight: 700; }
.qa-back span { transform: translateY(-2px); }

.qa-quack { justify-self: center; min-inline-size: 0; }

.qa-quack__stage.dk-stage--side {
  /* Duck at the start, bubble after it, whichever way the page reads. */
  flex-direction: row-reverse;
  justify-content: center;
  gap: 4px;
}

@media (max-width: 400px) {
  .qa-quack .dk { inline-size: 84px; block-size: 84px; }
}
@media (min-width: 768px) {
  .qa-quack .dk { inline-size: 128px; block-size: 128px; }
}

.qa-quack .dk-bubble {
  --qa-tail: #fffdf6;
  position: relative;
  inset: auto;
  transform: scale(.9);
  transform-origin: 0 50%;
  min-inline-size: 0;
  max-inline-size: min(270px, calc(100vw - 48px - 84px - 76px));
  padding-block: 12px;
  padding-inline: 16px;
  border-radius: 22px;
  font: 600 clamp(17px, 4.6vw, 21px)/1.25 var(--font-display);
  text-align: start;
  color: var(--qa-ink);
}
.qa-quack .dk-bubble.is-on { transform: none; }
.qa-quack .dk-bubble[data-tone="good"] { --qa-tail: #eafff4; }
.qa-quack .dk-bubble[data-tone="soft"] { --qa-tail: #fff4e8; }

/* The tail points back at the duck. */
.qa-quack .dk-bubble::after {
  display: block;
  inset: auto;
  inset-block-start: 50%;
  inset-inline-start: -13px;
  margin-block-start: -9px;
  border: 9px solid transparent;
  border-inline-start-width: 0;
  border-inline-end: 14px solid var(--qa-tail);
}

/* ---- Step row: 📝 → 📱 → 🔒 ------------------------------------------- */

.qa-steps-slot:empty { display: none; }

.qa-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qa-steps__item { display: flex; align-items: center; }

.qa-steps__item + .qa-steps__item::before {
  content: "";
  inline-size: clamp(22px, 8vw, 40px);
  block-size: 5px;
  border-radius: 3px;
  margin-inline: 8px;
  background: rgba(255, 255, 255, .18);
}
.qa-steps__item.is-done::before,
.qa-steps__item.is-now::before { background: var(--gold); }

.qa-steps__dot {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 46px;
  block-size: 46px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  background: rgba(255, 255, 255, .1);
  border: 3px solid rgba(255, 255, 255, .18);
  opacity: .55;
}
.is-done .qa-steps__dot {
  opacity: 1;
  background: rgba(92, 240, 174, .2);
  border-color: var(--green-soft);
}
.is-done .qa-steps__dot::after {
  content: "\2713";
  position: absolute;
  inset-block-end: -6px;
  inset-inline-end: -6px;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 800 13px/1 var(--font-ui);
  color: #064d2e;
  background: var(--green-soft);
}
.is-now .qa-steps__dot {
  opacity: 1;
  inline-size: 60px;
  block-size: 60px;
  font-size: 30px;
  background: linear-gradient(180deg, var(--cta-2), var(--cta));
  border-color: #fff;
  box-shadow: 0 5px 0 var(--cta-shadow);
  animation: qa-popin .45s cubic-bezier(.3, 1.6, .5, 1) both;
}

/* ---- Layout helpers ------------------------------------------------------ */

.qa-body, .qa-stack { display: flex; flex-direction: column; gap: var(--qa-gap); }
.qa-stack--center { align-items: stretch; text-align: center; }
.qa-slot { display: flex; flex-direction: column; }
.qa-slot:empty { display: none; }

/* Side by side when there is room for both labels on one line each; stacked
   on a narrow phone rather than wrapping "Change number" in two. */
.qa-row { display: flex; flex-wrap: wrap; gap: 12px; }
.qa-row > * { flex: 1 1 190px; }
.qa-row .qa-btn__label { white-space: nowrap; }

.qa-chip {
  align-self: center;
  margin: 0;
  padding-block: 8px;
  padding-inline: 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  font: 700 16px/1.3 var(--font-ui);
  color: #fff;
}

.qa-big-emoji {
  font-size: clamp(80px, 24vw, 110px);
  line-height: 1.1;
  animation: qa-popin .6s cubic-bezier(.3, 1.6, .5, 1) both;
}

/* ---- Buttons ------------------------------------------------------------- */

.qa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  inline-size: 100%;
  min-block-size: 62px;
  padding-block: 12px;
  padding-inline: 20px;
  border-radius: 24px;
  font: 700 clamp(19px, 5vw, 23px)/1.1 var(--font-display);
  text-align: center;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .15s ease, filter .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.qa-btn__icon { font-size: 1.25em; line-height: 1; flex: none; }
.qa-btn:hover:not([disabled]) { transform: translateY(-2px); filter: brightness(1.04); }
.qa-btn:active:not([disabled]) { transform: translateY(5px) scale(.98); }
.qa-btn[disabled] { cursor: default; opacity: .62; }
.qa-btn.is-busy .qa-btn__icon { animation: qa-tilt 1s ease-in-out infinite; }

.qa-btn--go {
  background: linear-gradient(180deg, var(--cta-2), var(--cta));
  color: #5b2c00;
  box-shadow: 0 7px 0 var(--cta-shadow), 0 14px 26px rgba(255, 160, 0, .28);
}
.qa-btn--go:active:not([disabled]) { box-shadow: 0 2px 0 var(--cta-shadow); }

.qa-btn--teal {
  background: linear-gradient(180deg, var(--teal-2), var(--teal-3));
  color: #04352f;
  box-shadow: 0 7px 0 var(--teal-deep), 0 14px 26px rgba(31, 181, 164, .28);
}
.qa-btn--teal:active:not([disabled]) { box-shadow: 0 2px 0 var(--teal-deep); }

.qa-btn--ghost {
  min-block-size: 54px;
  font-size: clamp(17px, 4.5vw, 19px);
  background: rgba(255, 255, 255, .12);
  border: 3px solid rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .25);
}
.qa-btn--ghost:active:not([disabled]) { box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }

.qa-btn--quiet {
  inline-size: auto;
  align-self: center;
  min-block-size: 48px;
  padding-inline: 16px;
  font: 700 17px/1.2 var(--font-ui);
  color: rgba(255, 255, 255, .82);
  background: none;
  border-radius: var(--r-pill);
}
.qa-btn--quiet:hover:not([disabled]) { background: rgba(255, 255, 255, .1); color: #fff; transform: none; }

.qa-btn--huge {
  min-block-size: 76px;
  font-size: clamp(26px, 7vw, 32px);
  border-radius: 30px;
}

.qa-btn.is-bounce { animation: qa-bounce .45s cubic-bezier(.3, 1.6, .5, 1); }
.is-nudge { animation: qa-nudge .7s ease; }

/* ---- Who's here? --------------------------------------------------------- */

.qa-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-block-start: 8px;
}

.qa-door {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-block-size: clamp(200px, 52vw, 250px);
  padding-block: 18px;
  padding-inline: 10px;
  border-radius: 30px;
  border: 3px solid rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.qa-door:hover { transform: translateY(-4px); }
.qa-door:active { transform: translateY(6px); }

.qa-door--kid {
  background: linear-gradient(180deg, var(--teal-2), var(--teal-3));
  color: #04352f;
  box-shadow: 0 9px 0 var(--teal-deep), 0 20px 34px rgba(0, 0, 0, .3);
}
.qa-door--parent {
  background: linear-gradient(180deg, var(--pink-soft), var(--pink));
  color: #4a0f2c;
  box-shadow: 0 9px 0 #c24d86, 0 20px 34px rgba(0, 0, 0, .3);
}
.qa-door:active { box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }

.qa-door__art {
  display: grid;
  place-items: center;
  inline-size: clamp(96px, 27vw, 124px);
  block-size: clamp(96px, 27vw, 124px);
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  font-size: clamp(56px, 16vw, 76px);
  line-height: 1;
  animation: mmbob 3.2s ease-in-out infinite;
}
.qa-door--parent .qa-door__art { animation-delay: -1.6s; }
.qa-door__label { font: 700 clamp(19px, 5.4vw, 25px)/1.1 var(--font-display); }
.qa-door.is-bounce { animation: qa-bounce .4s cubic-bezier(.3, 1.6, .5, 1); }

/* ---- Fields -------------------------------------------------------------- */

.qa-field { display: flex; flex-direction: column; gap: 8px; }
.qa-field__label {
  margin: 0;
  font: 800 16px/1.2 var(--font-ui);
  color: rgba(255, 255, 255, .92);
}
.qa-field.is-wrong { animation: qa-shake .45s ease; }

.qa-input,
.qa-select {
  inline-size: 100%;
  min-block-size: 58px;
  padding-inline: 16px;
  font: 700 18px/1.2 var(--font-ui);   /* 16px+ keeps iOS from zooming */
  color: #fff;
  background: rgba(0, 0, 0, .3);
  border: 3px solid rgba(255, 255, 255, .2);
  border-radius: 18px;
}
.qa-input::placeholder { color: rgba(255, 255, 255, .4); }
.qa-input:focus-visible,
.qa-select:focus-visible {
  outline: none;
  border-color: var(--gold);
  background: rgba(0, 0, 0, .42);
  box-shadow: 0 0 0 4px rgba(255, 215, 106, .25);
}

.qa-phone { display: flex; gap: 8px; }
.qa-select { flex: 0 0 auto; inline-size: auto; min-inline-size: 112px; padding-inline: 10px; cursor: pointer; }
.qa-select option { color: #1a1430; background: #fff; }
.qa-phone .qa-input { flex: 1 1 auto; min-inline-size: 0; letter-spacing: .03em; }

.qa-pass { position: relative; }
.qa-pass .qa-input { padding-inline-end: 60px; }
.qa-eye {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 5px;
  translate: 0 -50%;
  inline-size: 48px;
  block-size: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 22px;
  line-height: 1;
}
.qa-eye:hover { background: rgba(255, 255, 255, .1); }

/* ---- Password rules ------------------------------------------------------ */

.qa-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.qa-rule {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 7px;
  padding-inline: 8px 16px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .1);
  font: 700 16px/1.2 var(--font-ui);
  color: rgba(255, 255, 255, .75);
  transition: background .2s ease, color .2s ease;
}
.qa-rule__mark {
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  font: 800 16px/1 var(--font-ui);
}
.qa-rule.is-ok { background: rgba(92, 240, 174, .2); color: #c9ffe4; }
.qa-rule.is-ok .qa-rule__mark { background: var(--green-soft); border-color: var(--green-soft); color: #064d2e; }
.qa-rule.is-pop { animation: qa-bounce .4s cubic-bezier(.3, 1.6, .5, 1); }

/* ---- Sign in | New account ----------------------------------------------- */

.qa-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: 26px;
  background: rgba(0, 0, 0, .28);
}
.qa-toggle__opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 58px;
  padding-inline: 8px;
  border-radius: 20px;
  font: 700 clamp(16px, 4.4vw, 19px)/1.1 var(--font-display);
  color: rgba(255, 255, 255, .78);
  transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.qa-toggle__opt span:first-child { font-size: 1.3em; line-height: 1; }
.qa-toggle__opt:hover:not(.is-on) { background: rgba(255, 255, 255, .1); color: #fff; }
.qa-toggle__opt.is-on {
  background: linear-gradient(180deg, #fff, #efe8ff);
  color: var(--qa-ink);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .28);
  cursor: default;
}

/* ---- Code tiles ---------------------------------------------------------- */

.qa-tiles {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 4px;
}
.qa-tiles__row { display: flex; justify-content: center; gap: clamp(6px, 2vw, 10px); }

/* Face-down: the purple back of a memory card. Filled: the cream front. */
.qa-tile {
  display: grid;
  place-items: center;
  inline-size: clamp(44px, 12.4vw, 60px);
  block-size: clamp(58px, 16vw, 74px);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--card-back-2), var(--card-back));
  border: 3px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 0 #2a0f6e;
  font: 700 clamp(28px, 8vw, 38px)/1 var(--font-display);
  color: var(--qa-ink);
  transition: background .2s ease, border-color .2s ease;
}
.qa-tiles--code .qa-tile {
  inline-size: clamp(60px, 18vw, 76px);
  block-size: clamp(70px, 21vw, 86px);
  font-size: clamp(32px, 9.5vw, 44px);
}
.qa-tile.is-filled {
  background: linear-gradient(180deg, var(--card-front), var(--card-front-2));
  border-color: #fff;
  box-shadow: 0 6px 0 #cdb58c;
}
.qa-tile.is-active {
  border-color: var(--gold);
  box-shadow: 0 6px 0 #2a0f6e, 0 0 0 4px rgba(255, 215, 106, .3);
  position: relative;
}
/* A blinking bar where the next letter lands. */
.qa-tile.is-active::after {
  content: "";
  inline-size: 40%;
  block-size: 4px;
  border-radius: 2px;
  background: var(--gold);
  align-self: end;
  margin-block-end: 12px;
  grid-area: 1 / 1;
  animation: qa-caret 1s steps(1) infinite;
}
.qa-tile.is-pop { animation: qa-flip .3s cubic-bezier(.3, 1.4, .5, 1); }

.qa-tiles.is-wrong { animation: qa-shake .45s ease; }
.qa-tiles.is-wrong .qa-tile { border-color: #ff9ab3; }

.qa-tiles.is-right .qa-tile {
  background: linear-gradient(180deg, #b8ffd9, var(--green-soft));
  border-color: #fff;
  box-shadow: 0 6px 0 var(--green-deep);
  color: #064d2e;
  animation: qa-bounce .45s cubic-bezier(.3, 1.6, .5, 1) both;
}
.qa-tiles.is-right .qa-tile:nth-child(2) { animation-delay: .04s; }
.qa-tiles.is-right .qa-tile:nth-child(3) { animation-delay: .08s; }
.qa-tiles.is-right .qa-tile:nth-child(4) { animation-delay: .12s; }
.qa-tiles.is-right .qa-tile:nth-child(5) { animation-delay: .16s; }
.qa-tiles.is-right .qa-tile:nth-child(6) { animation-delay: .2s; }

/* The play code a parent should write down wears gold, as it always has. */
.qa-tiles--show .qa-tile.is-filled {
  background: linear-gradient(180deg, var(--gold), var(--amber));
  box-shadow: 0 6px 0 #d98e12;
  color: var(--qa-ink);
}

/* One real input over the tiles: it takes the taps, the paste and the SMS
   autofill; the tiles only draw what it holds. */
.qa-tiles__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: transparent;
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
}
.qa-tiles__input:focus { outline: none; }
.qa-tiles__input::selection { background: transparent; }

/* ---- Kid: faces on this device ------------------------------------------- */

.qa-faces {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.qa-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-inline-size: 104px;
  padding-block: 12px 10px;
  padding-inline: 10px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  border: 3px solid rgba(255, 255, 255, .22);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
  color: #fff;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.qa-face:hover { transform: translateY(-3px); border-color: var(--gold); }
.qa-face:active { transform: translateY(4px); }
.qa-face.is-busy { opacity: .6; }
.qa-face.is-bounce { animation: qa-bounce .4s cubic-bezier(.3, 1.6, .5, 1); }
.qa-face__art {
  display: grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  font-size: 44px;
  line-height: 1;
}
.qa-face__name {
  font: 700 18px/1.1 var(--font-display);
  max-inline-size: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qa-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 700 15px/1.2 var(--font-ui);
  color: rgba(255, 255, 255, .7);
}
.qa-or::before, .qa-or::after {
  content: "";
  flex: 1;
  block-size: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, .16);
}

/* ---- Kid: hello ----------------------------------------------------------- */

.qa-hello { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.qa-hello .qa-btn { margin-block-start: 8px; }

.qa-hello__face {
  display: grid;
  place-items: center;
  align-self: center;
  inline-size: clamp(140px, 42vw, 180px);
  block-size: clamp(140px, 42vw, 180px);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold), var(--amber));
  border: 6px solid #fff;
  box-shadow: 0 10px 0 #d98e12, 0 24px 40px rgba(0, 0, 0, .3);
  font-size: clamp(80px, 24vw, 104px);
  line-height: 1;
  animation: qa-popin .6s cubic-bezier(.3, 1.6, .5, 1) both;
}
.qa-hello__face--small {
  inline-size: 104px;
  block-size: 104px;
  font-size: 60px;
  border-width: 4px;
  box-shadow: 0 7px 0 #d98e12;
}
.qa-hello__hi {
  margin: 0;
  font: 700 clamp(34px, 10vw, 46px)/1.1 var(--font-display);
  text-align: center;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
  overflow-wrap: anywhere;
}

/* ---- First child: pick a face --------------------------------------------- */

.qa-avatars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.qa-avatar {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-block-size: 64px;
  max-inline-size: 100%;
  border-radius: 22px;
  background: rgba(255, 255, 255, .1);
  border: 3px solid rgba(255, 255, 255, .18);
  font-size: clamp(34px, 10vw, 48px);
  line-height: 1;
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .15s ease;
}
.qa-avatar:hover { background: rgba(255, 255, 255, .16); }
.qa-avatar.is-on {
  background: linear-gradient(180deg, var(--gold), var(--amber));
  border-color: #fff;
  box-shadow: 0 6px 0 #d98e12;
  transform: translateY(-3px);
}
.qa-avatar.is-bounce { animation: qa-bounce .4s cubic-bezier(.3, 1.6, .5, 1); }

/* ---- Keyframes ------------------------------------------------------------ */

@keyframes qa-bounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(.9); }
  70%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
@keyframes qa-popin {
  0%   { transform: scale(.4); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes qa-flip {
  0%   { transform: rotateY(90deg) scale(.9); }
  100% { transform: rotateY(0) scale(1); }
}
@keyframes qa-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(4px); }
}
@keyframes qa-nudge {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-4deg) scale(1.06); }
  50% { transform: rotate(4deg) scale(1.06); }
  75% { transform: rotate(-2deg) scale(1.03); }
}
@keyframes qa-tilt {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}
@keyframes qa-caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---- Calm mode and reduced motion: nothing moves on its own --------------- */

[data-calm] .screen--qa *,
[data-calm] .screen--qa *::before,
[data-calm] .screen--qa *::after {
  animation: none !important;
}
[data-calm] .screen--qa .qa-btn,
[data-calm] .screen--qa .qa-door,
[data-calm] .screen--qa .qa-face,
[data-calm] .screen--qa .qa-avatar {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .screen--qa *,
  .screen--qa *::before,
  .screen--qa *::after {
    animation: none !important;
    transition: none !important;
  }
}