/* Motion tokens: vendored verbatim from the transitions-dev scale. Do not redefine its prefixes here. */
@import url("/static/motion-tokens.css");

/*
 * The attendee pages. The organiser pages use organiser.css.
 *
 * Type is served by this app, because the security policy lets a page load nothing from
 * another site. Each family comes as a Latin and a Cyrillic file, and a phone fetches only
 * the ones a page uses. Addresses and keys are Latin, so the monospace has no Cyrillic file.
 */
@font-face {
  font-family: "Exo 2";
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/exo2-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Exo 2";
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/exo2-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  font-weight: 400 900;
  font-display: swap;
  src: url("/static/fonts/golos-text-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-weight: 100 800;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* The colours of the card's artwork: a night sky, lit in cyan and violet. */
  --night: #0a0b24; /* page ground */
  --deep: #13153c; /* panels and fields */
  --line: #2c3075; /* hairlines */
  --open: #3a3f8f; /* a link not yet earned, the outline of a name still to meet */
  --edge: #6c72d9; /* borders of fields and quiet buttons */
  --text: #f3f4ff;
  --muted: #b4b8e6;
  --faint: #8f94cc; /* placeholder text */
  --cyan: #5fe3ff; /* the one action on a screen, and progress */
  --cyan-bright: #b8f3ff;
  --ink: #06102a; /* type on cyan */
  --violet: #b69cff; /* labels above a group */
  --violet-ink: #3b1fd0; /* the same accent where the ground is cyan */
  --amber: #ffc65c; /* warnings, and nothing else */

  --display: "Exo 2", system-ui, sans-serif;
  --body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 1.5rem;
  --radius: 0.625rem;
}

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

html {
  background: var(--night);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 1.0625rem / 1.5 var(--body);
  -webkit-text-size-adjust: 100%;
}

/* The height of the screen as it is now, with the browser's bars taken off. */
@supports (min-height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 0.75rem var(--gutter) 2.5rem;
}

h1,
h2 {
  margin: 0 0 0.625rem;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

h1 {
  margin-bottom: 0.75rem;
  font-size: 2rem;
}

h2 {
  font-size: 1.625rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--cyan);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--cyan-bright);
}

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

.quiet {
  color: var(--muted);
}

.hint {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.centred {
  text-align: center;
}

/* The label above a group: small tracked capitals. */
.kicker {
  margin: 0 0 0.375rem;
  color: var(--violet);
  font: 700 0.8125rem / 1.25rem var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* If the card's picture cannot be fetched, leave its box empty rather than spill the alt text. */
img {
  overflow: hidden;
  color: transparent;
}

.icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

/* --- Page chrome --- */

.masthead {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 0;
}

.masthead a {
  display: inline-block;
  padding: 0.75rem 0;
  color: var(--text);
  font: 800 0.9375rem / 1.375rem var(--display);
  letter-spacing: 0.14em;
  text-decoration: none;
  text-transform: uppercase;
}

.masthead .year {
  color: var(--cyan);
}

.test-banner {
  margin: 0;
  padding: 0.5rem 1.25rem;
  background: var(--amber);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

/* Pages a phone sees before it is in the game stand on the grid from the card's artwork. */
.outside {
  background: var(--night) url("/static/horizon.svg") no-repeat bottom center / 100% 6rem;
}

.outside main {
  padding-top: 1.25rem;
  padding-bottom: 8rem;
}

.art {
  display: block;
  margin: 0.5rem 0 1.5rem;
}

.ink-text {
  stroke: var(--text);
}

.ink-cyan {
  stroke: var(--cyan);
}

.ink-violet {
  stroke: var(--violet);
}

/* A full amber outline with an icon, so a warning cannot pass for ordinary text. */
.notice,
.warning {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  padding: 0.75rem 0.875rem;
  border: 1.5px solid var(--amber);
  border-radius: var(--radius);
  background: var(--deep);
  font-size: 0.9375rem;
  line-height: 1.45;
}

.warning {
  font-weight: 500;
}

.notice .icon,
.warning .icon {
  width: 1.375rem;
  height: 1.375rem;
  color: var(--amber);
}

/* --- Forms and buttons --- */

.stack {
  display: flex;
  flex-direction: column;
  margin: 0;
}

label {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.375rem;
}

input:not([type="checkbox"], [type="hidden"]) {
  width: 100%;
  height: 3.5rem;
  margin: 0 0 1.125rem;
  padding: 0 1rem;
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  background: var(--deep);
  color: var(--text);
  font: 500 1.125rem var(--body);
}

input::placeholder {
  color: var(--faint);
  opacity: 1;
}

input:not([type="checkbox"], [type="hidden"]):focus-visible {
  border-color: var(--cyan);
  outline: 2px solid var(--cyan);
  outline-offset: 0;
}

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

input + .hint {
  margin: -0.625rem 0 1.5rem;
}

input.mono {
  font: 400 0.9375rem var(--mono);
}

/* The six-digit code from the organiser. */
input.code {
  height: 4rem;
  margin-bottom: 1.5rem;
  font: 500 1.625rem var(--mono);
  letter-spacing: 0.32em;
  text-align: center;
}

.check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  min-height: 2.75rem;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
}

.check input {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.0625rem 0 0;
  accent-color: var(--cyan);
}

/* Button press has no catalog entry; it uses the shared scale for a plain colour change. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 1.25rem;
  border: 1.5px solid var(--cyan);
  border-radius: var(--radius);
  background: var(--cyan);
  color: var(--ink);
  font: 700 1.125rem / 1.2 var(--display);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-quick) var(--ease-out),
    border-color var(--duration-quick) var(--ease-out);
}

.button:hover,
.button:active {
  border-color: var(--cyan-bright);
  background: var(--cyan-bright);
  color: var(--ink);
}

/* Every screen has one filled button. Anything else it offers is outlined. */
.button-quiet {
  min-height: 3.25rem;
  border-color: var(--edge);
  background: transparent;
  color: var(--text);
  font-size: 1.0625rem;
}

.button-quiet:hover,
.button-quiet:active {
  border-color: var(--text);
  background: transparent;
  color: var(--text);
}

/* Actions that read as text: opening a form, leaving for another page. */
summary,
.more,
.back a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--cyan);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

details[open] > summary {
  margin-bottom: 0.5rem;
}

details[open] .icon-chevron {
  transform: rotate(180deg);
}

/* --- Panels --- */

.panel {
  margin: 0 0 1.25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
}

/*
 * The viewfinder: corner brackets, as on the frame of the card's artwork, around the one
 * thing that matters on a screen. Each bracket is two short bars drawn as backgrounds.
 */
.hero {
  --bar: linear-gradient(var(--cyan), var(--cyan));

  display: flex;
  flex-direction: column;
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  border-radius: 2px;
  background:
    var(--bar) top left / 1.25rem 2px no-repeat,
    var(--bar) top left / 2px 1.25rem no-repeat,
    var(--bar) top right / 1.25rem 2px no-repeat,
    var(--bar) top right / 2px 1.25rem no-repeat,
    var(--bar) bottom left / 1.25rem 2px no-repeat,
    var(--bar) bottom left / 2px 1.25rem no-repeat,
    var(--bar) bottom right / 1.25rem 2px no-repeat,
    var(--bar) bottom right / 2px 1.25rem no-repeat,
    var(--deep);
}

.hero > :last-child,
.panel > :last-child {
  margin-bottom: 0;
}

.hero input:not([type="checkbox"], [type="hidden"]),
.hero .warning {
  background: var(--night);
}

.hero p,
.progress p {
  font-size: 0.96875rem;
  line-height: 1.45;
}

.hero .warning {
  font-size: 0.9375rem;
}

/* --- Your card --- */

.you {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 0.5rem;
}

.you-name {
  margin: 0 0 0.375rem;
  line-height: 1;
}

/* Names step down by the length of their longest word, so they wrap between words. */
.you-name.name-xl {
  font-size: 2.5rem;
}

.you-name.name-l {
  font-size: 2.125rem;
}

.you-name.name-m {
  font-size: 1.75rem;
}

.you-ask {
  margin: 0;
  color: var(--muted);
}

.you-ask strong {
  color: var(--text);
  font-weight: 600;
}

.edit {
  width: 100%;
}

.edit[open] {
  margin-bottom: 1rem;
}

.progress .kicker {
  font-size: 0.8125rem;
  line-height: 1.25rem;
}

.count {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0 0 1rem;
  font-family: var(--display);
  line-height: 1;
}

.count-n {
  color: var(--cyan);
  font-size: 4.75rem;
  font-weight: 800;
}

.count-of {
  color: var(--muted);
  font-size: 1.625rem;
  font-weight: 700;
}

/* Below the card, progress is a quieter panel. */
.panel .count-n {
  font-size: 2.75rem;
}

.panel .count-of {
  font-size: 1.25rem;
}

.progress p {
  margin-bottom: 0.375rem;
}

/* The chain: one link per person to meet, lit as they are met. */
.chain {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 1rem;
}

.link {
  position: relative;
  flex: 1 1 0;
  height: 18px;
  border: 3px solid var(--open);
  border-radius: 9px;
}

/* The bar that joins a link to the one before it. */
.link + .link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 8px;
  height: 3px;
  margin-top: -1.5px;
  background: var(--open);
}

.link.is-met {
  border-color: var(--cyan);
  background: var(--cyan);
}

.link + .link.is-met::before {
  background: var(--cyan);
}

/* More than a dozen people to meet: a plain bar reads better than a very fine chain. */
.bar {
  display: block;
  width: 100%;
  height: 12px;
  margin: 0 0 1rem;
  overflow: hidden;
  border: 0;
  border-radius: 6px;
  background: var(--open);
  color: var(--cyan);
  appearance: none;
}

.bar::-webkit-progress-bar {
  background: var(--open);
}

.bar::-webkit-progress-value {
  background: var(--cyan);
}

.bar::-moz-progress-bar {
  background: var(--cyan);
}

.people {
  margin: 0.5rem 0 1.25rem;
}

.people .kicker {
  margin-bottom: 0.625rem;
}

.met-list,
.chips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.met-list li {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.person {
  font: 700 1.25rem / 1.5rem var(--display);
  overflow-wrap: anywhere;
}

.topic {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.3125rem;
  overflow-wrap: anywhere;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chips li {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--open);
  border-radius: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  overflow-wrap: anywhere;
}

/* --- The card itself --- */

/* Before the card is minted: a band cut from the middle of its artwork. */
.prize-art {
  display: block;
  width: 100%;
  height: 11.875rem;
  margin: 0 0 1rem;
  border-radius: 2px;
  background: var(--night);
  object-fit: cover;
}

.mint form {
  margin: 0;
}

.own {
  align-self: stretch;
  margin-top: 0.375rem;
  text-align: center;
}

.own form {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  text-align: left;
}

.more {
  align-self: center;
  margin-top: 0.25rem;
}

.mint .button + .hint {
  margin-top: 0.625rem;
}

/* The sign-up page shows what there is to win. */
.prize {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0.25rem 0 1.5rem;
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: var(--deep);
}

.prize img {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

.prize p {
  margin: 0;
  font-size: 0.96875rem;
  line-height: 1.45;
}

/* While the card is on its way. */
.waiting {
  position: relative;
  margin: 0 0 1rem;
  background: var(--night);
}

.waiting .prize-art {
  margin: 0;
  opacity: 0.3;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border: 4px solid var(--open);
  border-top-color: var(--cyan);
  border-radius: 50%;
  animation: spin 1.2s linear infinite;
}

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

/* The minted card, shown as the picture a wallet app would show. */
.nft {
  margin: 0 0 0.875rem;
}

.nft img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 0.875rem;
  border-radius: 2px;
  background: var(--deep);
}

.nft figcaption {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.nft figcaption strong {
  display: block;
  color: var(--text);
  font: 800 1.25rem / 1.625rem var(--display);
}

/* --- Wallet --- */

.back {
  margin: -0.25rem 0 0.25rem;
}

.mono {
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.4375rem;
  word-break: break-all;
  user-select: all;
}

/* On the wallet page the card is a thumbnail beside its name. */
.wallet .nft {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.wallet .nft img {
  flex: none;
  width: 5.5rem;
  margin: 0;
  border-radius: 0.5rem;
}

.address {
  display: flex;
  flex-direction: column;
  background: var(--deep);
}

.address .mono {
  margin: 0 0 0.75rem;
}

.copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: 700 1rem var(--display);
  cursor: pointer;
}

/* Hidden until app.js finds the browser can copy; a flex box would otherwise show anyway. */
.copy[hidden] {
  display: none;
}

/* On the key page, copying is the one action. */
.key .copy {
  min-height: 3.25rem;
  border-color: var(--cyan);
  background: var(--cyan);
  color: var(--ink);
  font-size: 1.0625rem;
}

.secret {
  margin: 0 0 1rem;
  line-height: 1.5rem;
}

.key .secret:last-child {
  margin-bottom: 0;
}

.facts {
  margin: 0 0 0.875rem;
}

.facts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  color: var(--muted);
  font-size: 0.9375rem;
}

.facts dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.facts a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
}

/* Numbered steps: the number sits in a ring beside each one. */
.steps {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  min-height: 1.75rem;
  padding-left: 2.625rem;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  top: -0.0625rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1.5px solid var(--violet);
  border-radius: 50%;
  color: var(--violet);
  font: 700 0.875rem var(--display);
}

/* Steps to do one after the other: the first is the one to do now. */
.is-sequence li:first-child::before {
  border-color: var(--cyan);
  color: var(--cyan);
}

.is-sequence li + li {
  color: var(--muted);
}

.is-sequence li + li::before {
  border-color: var(--edge);
  color: var(--muted);
}

/* --- After a tap --- */

.met {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
}

.met-kicker {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  color: var(--violet);
  font: 700 1.375rem / 1.75rem var(--display);
}

.plus {
  padding: 0.125rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--ink);
  color: var(--cyan);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5rem;
}

.met-name {
  margin: 0.375rem 0 1.75rem;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.met-name.name-xl {
  font-size: clamp(3.5rem, 18.4vw, 4.75rem);
}

.met-name.name-l {
  font-size: clamp(2.25rem, 12vw, 3.125rem);
}

.met-name.name-m {
  font-size: clamp(1.75rem, 9.2vw, 2.5rem);
}

.met-topic {
  margin: 0 0 1.75rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: var(--deep);
}

.ask-label {
  margin: 0 0 0.375rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.375rem;
}

.ask-topic {
  margin: 0;
  font: 700 1.75rem / 1.15 var(--display);
  overflow-wrap: anywhere;
}

.met-count {
  margin: 0 0 0.75rem;
  font: 700 1.25rem / 1.625rem var(--display);
}

.met-earned {
  margin: 0;
  font: 800 1.875rem / 1.1 var(--display);
}

/* The way on sits at the foot of the screen, under the thumb. */
.met .chain,
.met .bar,
.met-earned,
.met > .quiet {
  margin-bottom: 2rem;
}

.met .button {
  margin-top: auto;
}

/*
 * A new acquaintance flips the whole screen to cyan with dark type. It is the easiest thing
 * to read in a bright room, and the person just met can see from across the badge that it
 * worked. Nothing else in the app uses this ground.
 */
.flash {
  background: var(--cyan);
  color: var(--ink);
}

.flash :focus-visible {
  outline-color: var(--ink);
}

.flash .masthead a,
.flash .met-kicker {
  color: var(--ink);
}

.flash .masthead .year {
  color: var(--violet-ink);
}

.flash .met-topic {
  border-color: var(--night);
  background: var(--night);
  color: var(--text);
}

.flash .link {
  border-color: rgb(6 16 42 / 0.35);
}

.flash .link + .link::before {
  background: rgb(6 16 42 / 0.35);
}

.flash .link.is-met {
  border-color: var(--ink);
  background: var(--ink);
}

.flash .link + .link.is-met::before {
  background: var(--ink);
}

/* The link just earned. */
.flash .link.is-new {
  background: var(--text);
}

.flash .bar,
.flash .bar::-webkit-progress-bar {
  background: rgb(6 16 42 / 0.35);
}

.flash .bar::-webkit-progress-value,
.flash .bar::-moz-progress-bar {
  background: var(--ink);
}

.flash .button,
.flash .button:hover,
.flash .button:active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--text);
}

/*
 * Texts reveal (transitions-dev 18), adapted: the page is rendered by the server already in its
 * final state, so the entrance runs as a keyframe animation on load rather than a transition
 * toggled by adding .is-shown from script. Tokens and stagger are the catalog's own.
 */
@keyframes t-stagger-in {
  from {
    opacity: 0;
    transform: translateY(var(--stagger-distance));
    filter: blur(var(--stagger-blur));
  }
}

.is-new .t-stagger-line {
  animation: t-stagger-in var(--stagger-dur) var(--stagger-ease) both;
}

.is-new .t-stagger-line--2 {
  animation-delay: var(--stagger-stagger);
}

.is-new .t-stagger-line--3 {
  animation-delay: calc(var(--stagger-stagger) * 2);
}

/* Text states swap (transitions-dev 04), used for Copy -> Copied. CSS unchanged from the catalog. */
.t-text-swap {
  display: inline-block;
  transform: translateY(0);
  filter: blur(0);
  opacity: 1;
  transition:
    transform var(--text-swap-dur) var(--text-swap-ease),
    filter var(--text-swap-dur) var(--text-swap-ease),
    opacity var(--text-swap-dur) var(--text-swap-ease);
}

.t-text-swap.is-exit {
  transform: translateY(calc(var(--text-swap-translate-y) * -1));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
}

.t-text-swap.is-enter-start {
  transform: translateY(var(--text-swap-translate-y));
  filter: blur(var(--text-swap-blur));
  opacity: 0;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  /* 1ms rather than none, so anything waiting on the animation ending still hears it. */
  .is-new .t-stagger-line {
    animation-duration: 1ms;
    animation-delay: 0s;
  }

  .spinner {
    animation: none;
  }

  .t-text-swap,
  .button {
    transition: none;
  }
}