/* BirthTandem's site: "a dim bedside lamp at 3 a.m.", in the app's own tokens
   (src/theme/tokens.ts; site/site.test.ts keeps the palette in step). Dark only,
   no drop shadows: depth is Dusk on Night plus a 1px hairline, and light comes
   from soft glows. The landing page is one night: it starts at 3:12 a.m. and
   the sky has begun to lighten by the time you reach the bottom. */

@font-face {
  font-family: 'Fraunces Soft';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fraunces-soft-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/inter-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-600.woff2') format('woff2');
}

/* How bright the stars are right now; animated, so it must be registered. */
@property --twinkle {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

:root {
  /* The palette. */
  --night: #14121f;
  --dusk: #221e33;
  --apricot: #f2a97e;
  --moonlight: #b8a9e8;
  --cream: #f4eee6;
  --haze: #a39db5;
  --sage: #8fd1a8;
  --ember: #f07a7a;
  --hairline: #ffffff0f;
  --accent-line: #b8a9e866;

  --display: 'Fraunces Soft', Georgia, 'Times New Roman', serif;
  --text: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --r-card: 20px;
  --r-pill: 999px;
  --gutter: 16px;
  --wrap: 74rem;
  --breath: 8s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--night);
  color: var(--cream);
  font: 400 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The lamp: a warm pool of light at the top of the page, and a cooler one
   where the moon would be. Painted once, behind everything. */
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 110vh;
  max-height: 64rem;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48rem 34rem at 12% -6%, rgb(242 169 126 / 0.13), transparent 62%),
    radial-gradient(36rem 28rem at 92% 8%, rgb(184 169 232 / 0.09), transparent 64%);
}

/* The sky behind every page: film grain, two layers of stars twinkling out
   of step, and on the landing page a dawn that rises as you near the end
   (--dawn, 0 to 1, set by js/main.js). */
.sky {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      70vmax 34vh at 50% 108%,
      rgb(246 190 150 / calc(var(--dawn, 0) * 0.42)),
      rgb(242 169 126 / calc(var(--dawn, 0) * 0.12)) 55%,
      transparent 80%
    ),
    radial-gradient(
      150vmax 85vh at 50% 125%,
      rgb(242 169 126 / calc(var(--dawn, 0) * 0.3)),
      rgb(184 169 232 / calc(var(--dawn, 0) * 0.06)) 50%,
      transparent 76%
    ),
    url('/img/grain.png');
}
.sky::before,
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/stars-a.svg') 0 0 / 640px 640px;
  -webkit-mask-image: linear-gradient(#000 0%, #000 38%, transparent 90%);
  mask-image: linear-gradient(#000 0%, #000 38%, transparent 90%);
  opacity: calc(var(--twinkle) * (1 - var(--dawn, 0) * 0.85));
  animation: twinkle 7s ease-in-out infinite alternate;
}
.sky::after {
  background: url('/img/stars-b.svg') 230px 140px / 920px 920px;
  animation-duration: 9.5s;
  animation-delay: -5s;
}
@keyframes twinkle {
  from {
    --twinkle: 0.3;
  }
  to {
    --twinkle: 1;
  }
}

/* The bedside lamp follows the pointer, slowly. */
.lamp {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 46rem;
  height: 46rem;
  margin: -23rem 0 0 -23rem;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(242 169 126 / 0.07), rgb(242 169 126 / 0.025) 55%, transparent);
  opacity: 0;
  transition: opacity 1.2s ease;
}
.lamp.on {
  opacity: 1;
}

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

figure {
  margin: 0;
}

a {
  color: var(--apricot);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-thickness: 2px;
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r-pill);
  background: var(--apricot);
  color: var(--night);
  font-weight: 600;
  text-decoration: none;
  z-index: 30;
}
.skip:focus {
  top: 0.75rem;
}

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

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

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.75rem, 6.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
h2 {
  font-size: clamp(2.125rem, 5.4vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}
h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}
p {
  margin: 0;
  text-wrap: pretty;
}

.moon {
  color: var(--moonlight);
}
.apricot {
  color: var(--apricot);
}
.sage {
  color: var(--sage);
}
.muted {
  color: var(--haze);
}
.nowrap {
  white-space: nowrap;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--haze);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--accent-line);
}
.eyebrow .chapter {
  order: -1;
  color: var(--apricot);
  font-variant-numeric: tabular-nums;
}

.lede {
  margin-top: 1.25rem;
  max-width: 36rem;
  color: var(--haze);
  font-size: 1.1875rem;
  line-height: 1.55;
}

/* ---------- Header and footer ---------- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-block: 0.625rem;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease;
}
/* Pages without the script, and the landing page once you scroll, get a
   frosted bar so text never runs under the links. */
html:not(.js) .top,
.top.scrolled {
  background: rgb(20 18 31 / 0.74);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--hairline);
}
.top .wrap,
.foot .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 44px;
  color: var(--cream);
  font: 600 1.1875rem/1 var(--display);
  text-decoration: none;
}
.brand img {
  width: 32px;
  height: 32px;
}
.top nav {
  display: flex;
  gap: 0.25rem;
}
.top nav a,
.foot nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.75rem;
  color: var(--haze);
  font-size: 0.9375rem;
  text-decoration: none;
  border-radius: var(--r-pill);
}
.top nav a:hover,
.foot nav a:hover {
  color: var(--cream);
}
.top nav a[aria-current='page'] {
  color: var(--cream);
}

.foot {
  margin-top: 5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--haze);
  font-size: 0.9375rem;
  overflow: hidden;
}
.foot .wrap {
  flex-wrap: wrap;
}
.foot .disclaimer {
  flex-basis: 100%;
  margin-bottom: 1rem;
  color: var(--cream);
}
.foot nav {
  display: flex;
  margin-inline: -0.75rem;
}
/* The name, set huge and fading into the floor. */
.foot-mark {
  margin-top: 2.5rem;
  text-align: center;
  font: 600 clamp(3.5rem, 16vw, 15.5rem) / 0.8 var(--display);
  letter-spacing: -0.035em;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, rgb(244 238 230 / 0.13), rgb(244 238 230 / 0) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  translate: 0 14%;
  user-select: none;
}

/* ---------- Store badge ----------
   Until the app is live, a quiet Dusk pill: it states a fact, so it must not
   look like a button. */

.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 2rem;
}
.store img {
  width: 150px;
  height: auto;
}
.store {
  display: inline-block;
  border-radius: 10px;
}
.soon {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0.5rem 1.4rem;
  text-align: center;
  border-radius: var(--r-pill);
  background: var(--dusk);
  border: 1px solid var(--hairline);
  color: var(--cream);
  font-weight: 600;
}
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  color: var(--haze);
  font-size: 0.9375rem;
}
.facts span + span::before {
  content: '·';
  margin-inline: 0.55rem;
  color: var(--accent-line);
}

/* ---------- Arrivals ----------
   Things rise softly into place as they scroll in (js/main.js adds .in).
   Without the script, everything is simply there. */

.js [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity 1s var(--ease),
    translate 1.2s var(--ease);
}
.js [data-reveal].in {
  opacity: 1;
  translate: none;
}
/* A Tideline strip draws itself in, left to right, like the app's. */
.js img.tide[data-reveal] {
  opacity: 1;
  translate: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2.6s cubic-bezier(0.45, 0, 0.2, 1);
}
.js img.tide[data-reveal].in {
  clip-path: inset(0);
}

/* The page's opening: one calm, staggered rise. */
.rise {
  animation: rise 1s var(--ease) both;
}
.rise-2 {
  animation-delay: 0.3s;
}
.rise-3 {
  animation-delay: 0.45s;
}
.rise-4 {
  animation-delay: 0.6s;
}
@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

/* The headline arrives word by word, out of focus into focus. */
.words-in .w {
  display: inline-block;
  animation: word 1.2s var(--ease) both;
}
.words-in > .w:nth-child(2) {
  animation-delay: 0.06s;
}
.words-in > .w:nth-child(3) {
  animation-delay: 0.12s;
}
.words-in > .w:nth-child(4) {
  animation-delay: 0.18s;
}
.words-in .moon .w:nth-child(1) {
  animation-delay: 0.3s;
}
.words-in .moon .w:nth-child(2) {
  animation-delay: 0.36s;
}
.words-in .moon .w:nth-child(3) {
  animation-delay: 0.42s;
}
.words-in .moon .w:nth-child(4) {
  animation-delay: 0.48s;
}
@keyframes word {
  from {
    opacity: 0;
    translate: 0 0.3em;
    filter: blur(10px);
  }
}

/* ---------- Hero ---------- */

.hero {
  --tide-h: clamp(96px, 17vh, 168px);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - 64px);
  padding-block: 2rem calc(var(--tide-h) + 1.5rem);
  /* The glow may spill up and down, never sideways into a scrollbar. */
  overflow-x: clip;
}
.hero .wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.hero h1 .moon {
  display: block;
}
/* Grid columns may shrink below their content's widest line. */
.hero .wrap > *,
.together .wrap > *,
.story-body > *,
.triage-grid > * {
  min-width: 0;
}

/* The live Tideline along the bottom of the hero: the night so far, drawn
   with the app's geometry and drifting left a point a second. */
.hero-tide,
.hero-tide-still {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--tide-h);
}
.hero-tide {
  overflow: visible;
}
.js .hero-tide-still {
  display: none;
}
.t-fill {
  fill: var(--dusk);
  fill-opacity: 0.85;
}
.t-line {
  fill: none;
  stroke: var(--moonlight);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.t-live {
  fill: none;
  stroke: var(--apricot);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.t-future {
  fill: none;
  stroke: var(--haze);
  stroke-opacity: 0.4;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.t-dot {
  fill: var(--apricot);
  transition: fill 0.4s;
}
.t-halo {
  fill: rgb(242 169 126 / 0.3);
  transform-box: fill-box;
  transform-origin: center;
  animation: halo 2.6s ease-out infinite;
}
[data-state='resting'] .t-dot {
  fill: var(--moonlight);
}
[data-state='resting'] .t-halo {
  fill: rgb(184 169 232 / 0.25);
}
@keyframes halo {
  from {
    scale: 0.3;
    opacity: 1;
  }
  to {
    scale: 1.5;
    opacity: 0;
  }
}

/* A Lock Screen at 3 a.m., without anyone's wallpaper: the clock, then the
   Live Activity, with the Surge button's glow breathing behind it. */
.night-screen {
  position: relative;
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
  padding: 1.5rem 0 0;
  text-align: center;
  isolation: isolate;
}
.night-screen::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 58%;
  width: 36rem;
  height: 36rem;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(242 169 126 / 0.24), rgb(242 169 126 / 0.06) 55%, transparent);
  animation: breathe var(--breath) ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    scale: 0.82;
    opacity: 0.55;
  }
  50% {
    scale: 1;
    opacity: 1;
  }
}
.lock-date {
  color: var(--haze);
  font-size: 1.125rem;
  font-weight: 600;
}
.lock-clock {
  margin: -0.25rem 0 2rem;
  color: var(--cream);
  font: 300 clamp(5rem, 22vw, 7.5rem) / 1 var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  opacity: 0.92;
}
.demo-hint {
  margin-top: 1rem;
  color: var(--haze);
  font-size: 0.875rem;
}

/* The Live Activity, rebuilt from SurgeLiveActivity.swift. */
.la {
  padding: 14px;
  border-radius: 26px;
  background: #100e19;
  border: 1px solid var(--hairline);
  text-align: left;
}
.la-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.la-row + .la-row {
  margin-top: 10px;
}
.la-mark {
  flex: none;
  width: clamp(38px, 11vw, 46px);
  height: auto;
}
.la-word {
  flex: 1;
  min-width: 0;
  font: 600 clamp(1.25rem, 6.4vw, 1.625rem) / 1.1 var(--display);
  color: var(--apricot);
  transition: color 0.3s;
}
.la-clock {
  font: 400 clamp(2rem, 10vw, 2.5rem) / 1 var(--text);
  font-variant-numeric: tabular-nums;
  color: var(--cream);
  transition: color 0.3s;
}
.la-last {
  flex: 1;
  color: var(--haze);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.la .marks {
  font-size: 1.5rem;
}
.la-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--apricot);
  color: var(--night);
  font: 600 1.1875rem/1 var(--text);
  cursor: pointer;
  transition:
    scale 0.12s ease-out,
    background-color 0.3s;
}
button.la-button:hover {
  background: #f5b991;
}
.la-button:active {
  scale: 0.98;
}
[data-state='resting'] .la-word {
  color: var(--moonlight);
}
[data-state='resting'] .la-clock {
  color: var(--haze);
}

/* The rule's numerals: Haze, Sage once their condition holds. */
.marks {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: var(--display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--haze);
  line-height: 1;
}
.marks .dot {
  font-size: 0.75em;
}
.marks .num {
  transition: color 0.5s ease;
}
.marks .lit {
  color: var(--sage);
}

/* ---------- Tideline strips between sections ---------- */

/* An hour of labor at its true proportions: all of it on a wide screen, its
   latest minutes on a phone (the SVGs slice from the right, never squash). */
.tide {
  display: block;
  width: 100%;
  height: max(44px, 4.667vw);
  margin-block: 0.5rem;
}

/* ---------- The words that light as you read ---------- */

.manifesto {
  padding-block: clamp(5rem, 13vw, 10rem);
}
.manifesto p {
  max-width: 62rem;
  font: 600 clamp(1.75rem, 4.3vw, 3.5rem) / 1.2 var(--display);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.js .manifesto .word {
  color: rgb(244 238 230 / 0.16);
  transition: color 0.45s ease;
}
.js .manifesto .word.lit {
  color: var(--cream);
}

/* ---------- One hand held: the page's only photograph ----------
   No frame: its edges fade into the night and the sky's film grain lies over
   it. It arrives like a lamp switched on, dim and a touch close at first,
   then warm and still. */

.held {
  --fade: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  --fade-x: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  position: relative;
  margin: 0 0 clamp(1rem, 4vw, 3rem);
  aspect-ratio: 1;
  overflow: hidden;
  -webkit-mask-image: var(--fade), var(--fade-x);
  -webkit-mask-composite: source-in;
  mask-image: var(--fade), var(--fade-x);
  mask-composite: intersect;
}
.held img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 40%;
}
.held::after {
  content: '';
  position: absolute;
  inset: -40px;
  background: url('/img/film.png') 0 0 / 128px 128px;
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
  animation: grain 1.1s steps(1) infinite;
}
@keyframes grain {
  0% {
    translate: 0 0;
  }
  25% {
    translate: -23px 11px;
  }
  50% {
    translate: 14px -19px;
  }
  75% {
    translate: -9px -27px;
  }
}
.js .held[data-reveal] {
  opacity: 1;
  translate: none;
}
.js .held img {
  filter: brightness(0.35) saturate(0.6);
  scale: 1.08;
  transition:
    filter 3s var(--ease),
    scale 5s var(--ease);
}
.js .held.in img {
  filter: none;
  scale: 1;
}

/* ---------- The story: one phone, five ways to tap ---------- */

.story {
  padding-block: clamp(3rem, 8vw, 6rem) 3rem;
}
.story-head h2 {
  max-width: 48rem;
}
.steps {
  display: grid;
  gap: 5.5rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
}
.step {
  display: grid;
  gap: 2.25rem;
  justify-items: center;
  text-align: center;
}
.step-copy {
  max-width: 32rem;
}
.step-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.875rem;
  color: var(--haze);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.step-kicker span {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1px solid var(--accent-line);
  color: var(--moonlight);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.step h3 {
  font-size: clamp(1.75rem, 5.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.step-copy > p:last-child {
  margin-top: 1rem;
  color: var(--haze);
  font-size: 1.0625rem;
}
.step q {
  color: var(--cream);
}

/* An iPhone 17 in black, drawn by react-mockframe: /mockframe.css is the
   package's own stylesheet (site/scripts/mockframe.mjs copies it), and each
   frame is its markup, which site.test.ts holds to the library. The frame is
   431 × 903 px; zoom scales it, layout and all, to each section's size. */
.mockframe {
  --zoom: 0.63;
  display: block;
  margin-inline: auto;
  zoom: var(--zoom);
}
.mockframe .screen {
  background: #000;
}
/* What a screen shows, sized in cqw so it scales with the screen. */
.shot {
  position: relative;
  height: 100%;
  overflow: hidden;
  container-type: inline-size;
  background: #000;
}
.shot > img,
.shot > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The Action Button, lit while its step is on screen. */
.has-action .action::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--apricot);
  animation: press 2.8s ease-in-out infinite;
}
@keyframes press {
  0%,
  100% {
    opacity: 0.35;
  }
  45%,
  60% {
    opacity: 1;
  }
}

/* On a wide screen one phone stays put and the steps scroll past it; it
   crossfades between copies of their screens. */
.stage {
  display: none;
}
.shots {
  position: relative;
  height: 100%;
}
.shots > .shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: 1.05;
  transition:
    opacity 0.7s ease,
    scale 1.1s var(--ease);
}
.shots > .shot.on {
  opacity: 1;
  scale: 1;
}
.stage-dots {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stage-dots li {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent-line);
  transition:
    height 0.5s var(--ease),
    background-color 0.5s;
}
.stage[data-scene='1'] .stage-dots li:nth-child(1),
.stage[data-scene='2'] .stage-dots li:nth-child(2),
.stage[data-scene='3'] .stage-dots li:nth-child(3),
.stage[data-scene='4'] .stage-dots li:nth-child(4),
.stage[data-scene='5'] .stage-dots li:nth-child(5) {
  height: 26px;
  background: var(--apricot);
}
.stage .has-action .action::after {
  opacity: 0;
  animation: none;
  transition: opacity 0.5s;
}
.stage[data-scene='3'] .has-action .action::after {
  opacity: 1;
  animation: press 2.8s ease-in-out infinite;
}

/* Screen 2: the Dynamic Island over another app, opening as if held. The
   frame draws the camera cutout (31 × 9 cqw, 3.56 cqw down); the compact
   Live Activity spreads either side of it, as on a real iPhone. */
.shot-island {
  background:
    radial-gradient(120% 55% at 15% 0%, #2a2440, transparent 62%),
    radial-gradient(90% 45% at 100% 100%, rgb(242 169 126 / 0.12), transparent 70%), var(--night);
}
.dyn {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 3.56cqw;
  width: 62cqw;
  height: 8.96cqw;
  translate: -50% 0;
  border-radius: 4.48cqw;
  background: #000;
  overflow: hidden;
  transition:
    width 0.6s cubic-bezier(0.3, 1.25, 0.45, 1),
    height 0.6s cubic-bezier(0.3, 1.25, 0.45, 1),
    border-radius 0.6s ease,
    top 0.6s ease;
}
.dyn.open {
  top: 2.5cqw;
  width: 95cqw;
  height: 54cqw;
  border-radius: 12cqw;
}
.dyn-compact,
.dyn-open {
  position: absolute;
  transition: opacity 0.3s ease;
}
.dyn-compact {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.4cqw 0 3.6cqw;
  color: var(--cream);
  font-size: 4.2cqw;
  font-variant-numeric: tabular-nums;
}
.dyn-compact svg {
  width: 7.5cqw;
  height: auto;
}
.dyn-open {
  left: 0;
  top: 0;
  width: 95cqw;
  /* Below the camera cutout, which stays at the top of the open island. */
  padding: 11.5cqw 5cqw 4.6cqw;
  opacity: 0;
}
.dyn.open .dyn-compact {
  opacity: 0;
}
.dyn.open .dyn-open {
  opacity: 1;
  transition-delay: 0.22s;
}
.dyn-open .la-row {
  gap: 2.4cqw;
}
.dyn-open .la-row + .la-row {
  margin-top: 1.6cqw;
}
.dyn-mark {
  flex: none;
  width: 7.5cqw;
  align-self: flex-start;
  margin-top: 1cqw;
}
.dyn-open .la-word {
  font-size: 5.6cqw;
}
.dyn-open .la-clock {
  font-size: 9.5cqw;
}
.dyn-open .la-last {
  font-size: 3.1cqw;
}
.dyn-open .marks {
  font-size: 5.2cqw;
}
.dyn-open .la-button {
  min-height: 10.5cqw;
  margin-top: 3cqw;
  font-size: 4.2cqw;
  cursor: default;
}
.faux {
  position: absolute;
  inset: 58cqw 6cqw 7cqw;
  display: flex;
  flex-direction: column;
  gap: 3.6cqw;
}
.faux span {
  display: block;
  border-radius: 5cqw;
  background: rgb(255 255 255 / 0.07);
}
.faux-title {
  width: 34%;
  height: 4cqw;
  margin: 0 auto 2cqw;
}
.faux-bubble {
  width: 66%;
  height: 13cqw;
}
.faux .mine {
  align-self: flex-end;
  background: rgb(184 169 232 / 0.2);
}
.faux-bubble.short {
  width: 42%;
}
.faux .faux-field {
  height: 11cqw;
  margin-top: auto;
  border: 1px solid rgb(255 255 255 / 0.08);
  background: transparent;
}

/* Screen 3: Control Center, and Siri listening. */
.shot-control {
  background:
    radial-gradient(70% 38% at 25% 18%, rgb(184 169 232 / 0.22), transparent 70%),
    radial-gradient(65% 40% at 85% 80%, rgb(242 169 126 / 0.16), transparent 70%), #191626;
}
.cc {
  position: absolute;
  top: 22cqw;
  left: 8cqw;
  right: 8cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: dense;
  gap: 4cqw;
}
.cc-tile {
  aspect-ratio: 1;
  border-radius: 5.5cqw;
  background: rgb(255 255 255 / 0.08);
}
.cc-tile.wide {
  grid-column: span 2;
  aspect-ratio: auto;
}
.cc-toggle {
  position: relative;
  grid-column: 3 / span 2;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  margin: 2cqw;
  border-radius: 50%;
  background: var(--cream);
}
.cc-toggle span {
  width: 30%;
  aspect-ratio: 1;
  border-radius: 22%;
  background: var(--apricot);
}
.cc-toggle::after {
  content: '';
  position: absolute;
  inset: -1.5cqw;
  border-radius: 50%;
  border: 1px solid rgb(242 169 126 / 0.6);
  animation: ring 2.8s ease-out infinite;
}
@keyframes ring {
  from {
    scale: 0.95;
    opacity: 1;
  }
  to {
    scale: 1.25;
    opacity: 0;
  }
}
.cc-label {
  position: absolute;
  top: 63cqw;
  right: 8cqw;
  width: 40cqw;
  color: var(--cream);
  font-size: 3.6cqw;
  font-weight: 600;
  text-align: center;
}
.siri {
  position: absolute;
  left: 7cqw;
  right: 7cqw;
  bottom: 10cqw;
  display: flex;
  align-items: center;
  gap: 2.6cqw;
  padding: 3.6cqw 4.4cqw;
  border-radius: var(--r-pill);
  background: rgb(34 30 51 / 0.92);
  border: 1px solid rgb(184 169 232 / 0.3);
  color: var(--cream);
  font-size: 3.5cqw;
  line-height: 1.3;
  text-align: left;
}
.siri svg {
  flex: none;
  width: 7cqw;
  height: auto;
}

/* ---------- The rule, and a night in twenty seconds ---------- */

.rule {
  padding-block: clamp(4rem, 9vw, 7rem) 3rem;
}
.sim {
  position: relative;
  margin-top: 3rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-radius: 28px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgb(184 169 232 / 0.08), transparent 70%),
    linear-gradient(180deg, rgb(34 30 51 / 0.92), rgb(25 22 38 / 0.92));
  border: 1px solid var(--hairline);
}
.sim-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.sim-title {
  color: var(--haze);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.sim-clock {
  margin-top: 0.25rem;
  font: 300 clamp(2.75rem, 9vw, 4.25rem) / 1 var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
/* As in the app's rule sheet: a segmented control, the choice in Apricot. */
.sim-rules {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--r-pill);
  background: var(--night);
  border: 1px solid var(--hairline);
}
.sim-rules button {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--haze);
  font: 600 0.9375rem/1 var(--text);
  cursor: pointer;
  transition:
    background-color 0.3s,
    color 0.3s;
}
.sim-rules button:hover {
  color: var(--cream);
}
.sim-rules button[aria-pressed='true'] {
  background: var(--apricot);
  color: var(--night);
}
.sim-chart {
  position: relative;
  height: clamp(200px, 22vw, 230px);
  margin: 2rem 0 0;
}
.sim-chart svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.t-band {
  fill: rgb(184 169 232 / 0.07);
}
.sim .t-fill {
  fill: var(--moonlight);
  fill-opacity: 0.1;
}
.sim-still {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 56px;
}
.js .sim-still {
  display: none;
}
.sim-band-label {
  position: absolute;
  top: 0.5rem;
  left: calc(33.333% + 0.75rem);
  color: var(--moonlight);
  font-size: 0.8125rem;
}
.sim-axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.75rem;
  display: flex;
  justify-content: space-between;
  color: var(--haze);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.sim-stats {
  display: grid;
  gap: 0.75rem;
  margin: 3rem 0 0;
}
.sim-stats > div {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1rem 1.125rem;
  border-radius: 18px;
  background: rgb(20 18 31 / 0.6);
  border: 1px solid var(--hairline);
}
.sim-stats .marks {
  min-width: 1.6ch;
  font-size: 2.75rem;
}
.sim-stats dd {
  margin: 0;
  color: var(--haze);
  font-size: 0.9375rem;
}
.sim-stats strong {
  display: block;
  color: var(--cream);
  font: 400 1.375rem/1.25 var(--text);
  font-variant-numeric: tabular-nums;
}
.sim-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}
.sim-status {
  color: var(--haze);
  font: 600 1.5rem/1.2 var(--display);
  transition: color 0.4s;
}
[data-status='closer'] .sim-status {
  color: var(--cream);
}
[data-status='met'] .sim-status {
  color: var(--sage);
}
.sim-replay {
  min-height: 44px;
  padding: 0 1.15rem;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--accent-line);
  color: var(--cream);
  font: 600 0.9375rem/1 var(--text);
  cursor: pointer;
  transition: border-color 0.3s;
}
.sim-replay:hover {
  border-color: var(--moonlight);
}

/* The one alert, arriving over the chart as it would over the phone. */
.notice {
  display: flex;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border-radius: 22px;
  background: rgb(34 30 51 / 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgb(255 255 255 / 0.08);
  text-align: left;
}
.notice img {
  flex: none;
  width: 38px;
  height: 38px;
}
.notice .notice-meta {
  display: flex;
  justify-content: space-between;
  color: var(--haze);
  font-size: 0.8125rem;
}
.notice strong {
  display: block;
  margin-top: 0.1rem;
  font-weight: 600;
}
.notice p {
  color: var(--cream);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.sim-notice {
  position: absolute;
  z-index: 1;
  top: -1.25rem;
  right: 0;
  width: min(100%, 22rem);
  transition:
    opacity 0.5s ease,
    translate 0.8s cubic-bezier(0.3, 1.3, 0.45, 1);
}
.js .sim:not(.met) .sim-notice {
  opacity: 0;
  translate: 0 -18px;
  pointer-events: none;
}

.note {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 1px solid var(--accent-line);
  color: var(--haze);
  font-size: 0.9375rem;
  max-width: 34rem;
}

/* ---------- The same night, in the real app ---------- */

.real {
  padding-block: clamp(3rem, 8vw, 6rem) 2rem;
}
.real .wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.real-figure {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  margin: 0;
}
/* The lamp behind the phone. */
.real-figure::before {
  content: '';
  position: absolute;
  inset: 4% -12% 14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(242 169 126 / 0.16), rgb(184 169 232 / 0.05) 60%, transparent);
}

/* ---------- Triage: the summary, read aloud ---------- */

.triage {
  padding-block: clamp(4rem, 9vw, 7rem) 3rem;
}
.triage-grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.75rem;
}
.triage blockquote {
  margin: 0;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-card);
  background: var(--dusk);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--apricot);
}
.triage blockquote p {
  font: 600 clamp(1.5rem, 4.4vw, 2.375rem) / 1.28 var(--display);
  color: var(--cream);
}
.triage .label {
  margin-bottom: 1rem;
  color: var(--haze);
  font: 600 0.8125rem/1.4 var(--text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.js [data-read].unread .word {
  color: rgb(244 238 230 / 0.26);
  transition: color 0.35s ease;
}
.js [data-read].unread .word.said {
  color: var(--cream);
}
.triage figcaption {
  margin-top: 0.875rem;
  color: var(--haze);
  font-size: 0.9375rem;
}
/* The Summary screen's grid, as the app draws it. */
.stats-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: start;
  margin: 0;
  border-radius: var(--r-card);
  background: var(--dusk);
  border: 1px solid var(--hairline);
}
.stats-card > div {
  padding: 1.25rem 1.125rem;
}
.stats-card > div:nth-child(odd) {
  border-right: 1px solid var(--hairline);
}
.stats-card > div:nth-child(-n + 2) {
  border-bottom: 1px solid var(--hairline);
}
.stats-card dt {
  color: var(--cream);
  font: 400 clamp(1.625rem, 5.6vw, 2.125rem) / 1.1 var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stats-card dt small {
  font-size: 0.6em;
}
.stats-card dt.marks {
  font: 600 clamp(1.625rem, 5.6vw, 2.125rem) / 1.1 var(--display);
}
.stats-card dd {
  margin: 0.4rem 0 0;
  color: var(--haze);
  font-size: 0.9375rem;
}
.stats-card dd.sage {
  color: var(--sage);
}

/* ---------- Together: two phones, one timer ---------- */

.together {
  padding-block: clamp(4rem, 9vw, 7rem) 3rem;
}
.together .wrap {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.sync {
  padding: 1rem 0.25rem 0;
}
.sync-arc {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  margin-bottom: -0.75rem;
  overflow: visible;
  pointer-events: none;
}
.sync-arc path {
  stroke: var(--haze);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
.sync-pulse {
  fill: var(--apricot);
  stroke: rgb(242 169 126 / 0.28);
  stroke-width: 12;
  opacity: 0;
}
.sync-pulse.on {
  opacity: 1;
}
.sync-phones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.mini {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  padding: 1.125rem 0.875rem 0.875rem;
  border-radius: 28px;
  background: #100e19;
  border: 1px solid var(--hairline);
  text-align: center;
}
.mini.got {
  animation: got 1.4s ease-out;
}
@keyframes got {
  from {
    border-color: rgb(184 169 232 / 0.85);
    background-color: #1d1930;
  }
}
.mini-who {
  color: var(--haze);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.mini .la-word {
  flex: none;
  margin-top: 0.25rem;
  font-size: clamp(1.125rem, 4.8vw, 1.375rem);
}
.mini .la-clock {
  font-size: clamp(2rem, 9vw, 2.5rem);
}
.mini .la-button {
  min-height: 48px;
  margin-top: 0.5rem;
  font-size: 1.0625rem;
}
.sync-hint {
  margin-top: 1rem;
  color: var(--haze);
  font-size: 0.875rem;
  text-align: center;
}
.price {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: var(--r-card);
  background: var(--dusk);
  border: 1px solid var(--hairline);
}
.price-line {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.price-line strong {
  font: 600 2.5rem/1 var(--display);
  color: var(--apricot);
}
.price-line span {
  color: var(--haze);
}
.price ul {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.price li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.6rem;
}
.price li::before {
  content: '';
  width: 8px;
  height: 8px;
  margin: 0.55rem 0 0 0.25rem;
  border-radius: 50%;
  background: var(--moonlight);
}
.price .small {
  margin-top: 1.25rem;
  color: var(--haze);
  font-size: 0.9375rem;
}

/* ---------- The promise, set large ---------- */

.promise {
  padding-block: clamp(4rem, 9vw, 7rem) 2rem;
}
.vows {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}
.vows li {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding: 1.75rem 0;
}
/* Each line draws itself across as its vow arrives. */
.vows li::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgb(255 255 255 / 0.1);
  transform-origin: left;
}
.js .vows li[data-reveal]::before {
  scale: 0 1;
  transition: scale 1.4s var(--ease) 0.1s;
}
.js .vows li[data-reveal].in::before {
  scale: 1 1;
}
.vows strong {
  font: 600 clamp(1.875rem, 5.6vw, 3.75rem) / 1.04 var(--display);
  letter-spacing: -0.015em;
  transition: color 0.4s;
}
.vows li:hover strong {
  color: var(--apricot);
}
.vows span {
  max-width: 30rem;
  color: var(--haze);
}

/* ---------- Last call, at first light ---------- */

.last {
  padding-block: clamp(5rem, 14vw, 10rem) clamp(2rem, 6vw, 4rem);
  text-align: center;
}
.last h2 {
  max-width: 46rem;
  margin-inline: auto;
}
.last .lede {
  margin-inline: auto;
}
.last .get {
  justify-content: center;
}

/* ---------- Prose pages: privacy, support ---------- */

.prose {
  max-width: 44rem;
  padding-block: 2.5rem 1rem;
  overflow-wrap: break-word;
}
.prose h1 {
  font-size: clamp(2.25rem, 7vw, 3.25rem);
}
.prose .updated {
  margin-top: 0.75rem;
  color: var(--haze);
  font-size: 0.9375rem;
}
.prose .summary {
  margin-top: 2rem;
  padding: 1.25rem 1.375rem;
  border-radius: var(--r-card);
  background: var(--dusk);
  border: 1px solid var(--hairline);
  color: var(--cream);
  font-size: 1.125rem;
}
.prose h2 {
  margin-top: 3rem;
  font-size: 1.625rem;
}
.prose h3 {
  margin-top: 1.75rem;
  font: 600 1.0625rem/1.4 var(--text);
}
.prose p,
.prose ul {
  margin-top: 0.875rem;
  color: var(--haze);
}
.prose ul {
  padding-left: 1.25rem;
}
.prose li + li {
  margin-top: 0.5rem;
}
.prose strong {
  color: var(--cream);
  font-weight: 600;
}
.prose .callout {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r-card);
  border: 1px solid var(--accent-line);
  color: var(--cream);
}
.faq details {
  border-bottom: 1px solid var(--hairline);
}
.faq details:first-of-type {
  margin-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding-block: 0.75rem;
  color: var(--cream);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  color: var(--moonlight);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  transition: rotate 0.2s;
}
.faq details[open] summary::after {
  rotate: 45deg;
}
.faq details > p,
.faq details > ul {
  margin: 0 0 1.25rem;
}

.lost {
  padding-block: 6rem 2rem;
  text-align: center;
}
.lost p {
  margin: 1rem auto 0;
  max-width: 28rem;
  color: var(--haze);
}

/* ---------- Wider screens ---------- */

/* The smallest phones keep the mark and drop the wordmark (still read out). */
@media (max-width: 374px) {
  .brand {
    gap: 0;
    font-size: 0;
  }
  .top nav a {
    padding-inline: 0.6rem;
  }
  .sim-rules button {
    padding: 0 0.75rem;
  }
}

@media (min-width: 640px) {
  :root {
    --gutter: 24px;
  }
  .sim-band-label {
    left: calc(50% + 0.75rem);
  }
  .sim {
    padding: 1.75rem 1.75rem 2rem;
  }
  .sim-stats {
    grid-template-columns: repeat(3, 1fr);
  }
  .sim-stats > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .sync {
    padding-inline: 1.5rem;
  }
  .sync-phones {
    gap: 1.25rem;
  }
  .held {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 960px) {
  :root {
    --gutter: 40px;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 5.3vw, 4.75rem);
  }
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 25rem);
    gap: 4rem;
  }
  .story-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .is-staged .steps {
    gap: 0;
    margin-top: 0;
  }
  .is-staged .step {
    min-height: 92vh;
    align-content: center;
    justify-items: start;
    text-align: left;
  }
  .is-staged .step-screen {
    display: none;
  }
  .is-staged .step:not(.on) .step-copy.in {
    opacity: 0.22;
  }
  .is-staged .step-copy {
    transition:
      opacity 0.6s ease,
      translate 1.2s var(--ease);
  }
  .is-staged .stage {
    position: sticky;
    top: 0;
    display: flex;
    align-self: start;
    align-items: center;
    justify-content: center;
    gap: 2.25rem;
    height: 100vh;
  }
  .stage .mockframe {
    --zoom: 0.695;
    margin: 2rem 0 0;
  }
  .rule .wrap {
    position: relative;
  }
  .sim {
    padding: 2.25rem 2.5rem 2.5rem;
  }
  .sim-notice {
    top: -1rem;
  }
  .triage-grid {
    grid-template-columns: 1.45fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  .triage blockquote {
    padding: 2.5rem 3rem;
  }
  .together .wrap {
    grid-template-columns: 1fr 1.05fr;
    gap: 5rem;
  }
  .held {
    aspect-ratio: 21 / 9;
    max-height: 80vh;
  }
  .real .wrap {
    grid-template-columns: 1fr minmax(18rem, 24rem);
    gap: 5rem;
  }
  .real .mockframe {
    --zoom: 0.695;
  }
  .vows li {
    grid-template-columns: 1.25fr 1fr;
    align-items: baseline;
    gap: 3rem;
    padding: 2.25rem 0;
  }
}

@media (max-width: 374px) {
  .mockframe {
    --zoom: 0.55;
  }
}
@media (min-width: 960px) and (max-height: 800px) {
  .stage .mockframe {
    --zoom: 0.62;
  }
}
@media (min-width: 960px) and (max-height: 700px) {
  .stage .mockframe {
    --zoom: 0.54;
  }
}

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