/* Veilleuse — composants. On n'anime que transform et opacity. */

#app { position: fixed; inset: 0; z-index: 3; }
.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--top) var(--gutter) calc(var(--safe-b) + 28px);
  scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }

/* Apparitions chorégraphiées : les éléments naissent de la lumière. */
.rise { opacity: 0; transform: translate3d(0, 14px, 0); }
.in .rise {
  opacity: 1;
  transform: none;
  transition: opacity 1100ms var(--souffle), transform 1300ms var(--souffle);
  transition-delay: calc(var(--i, 0) * 75ms + 260ms);
}
/* Changement d'écran en fondu enchaîné : l'ancien s'efface d'abord, le nouveau naît ensuite,
   si bien que deux écrans ne sont jamais lisibles l'un sur l'autre. */
.leaving { pointer-events: none; }
.screen.leaving { opacity: 0; transition: opacity 420ms var(--sortie); }
.leaving .rise {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 520ms var(--sortie), transform 620ms var(--sortie);
  transition-delay: calc(var(--i, 0) * 25ms);
}

/* ─── Barre du haut ──────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  margin: 0 -6px 4px;
}
.wordmark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 380;
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--lune);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 40;
  position: relative;
}
.i-dot { position: relative; }
.i-dot::after {
  content: '';
  position: absolute;
  left: 78%;
  top: .12em;
  width: .19em;
  height: .19em;
  margin-left: -.095em;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff4dc, var(--flamme) 60%, rgba(240, 179, 94, 0));
  box-shadow: 0 0 10px 3px rgba(240, 179, 94, .55);
}

.icon-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--brume);
  transition: color var(--t-micro) var(--souffle), transform var(--t-micro) var(--souffle);
}
.icon-btn::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(236, 228, 212, .06);
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--t-micro) var(--souffle), transform 500ms var(--souffle);
}
.icon-btn:active::before, .icon-btn.pressed::before { opacity: 1; transform: scale(1); }
.icon-btn:active { transform: scale(.94); color: var(--lune); }
.icon-btn svg { width: 22px; height: 22px; position: relative; }
.icon { stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Le bouton lumineux ─────────────────────────────────────── */
.lumen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 62px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  color: #221404;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 460;
  letter-spacing: .005em;
  font-variation-settings: 'SOFT' 100, 'opsz' 30;
  background: linear-gradient(180deg, #f1c27f 0%, #e4a25e 55%, #cf8750 100%);
  box-shadow:
    0 1px 0 rgba(255, 244, 222, .55) inset,
    0 -10px 24px rgba(160, 70, 20, .25) inset,
    0 14px 44px -10px rgba(240, 160, 80, .34),
    0 0 0 1px rgba(255, 220, 170, .18);
  transition: transform 420ms var(--souffle), box-shadow 600ms var(--souffle), filter 600ms var(--souffle);
}
.lumen::before {
  /* reflet qui respire */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 120% at 50% -20%, rgba(255, 250, 238, .55), rgba(255, 250, 238, 0) 60%);
  animation: sheen 10s var(--lune-ease) infinite;
}
@keyframes sheen { 0%, 100% { opacity: .55; } 40% { opacity: 1; } }
.lumen .ripple {
  position: absolute;
  z-index: -1;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 252, 240, .75), rgba(255, 252, 240, 0));
  transform: scale(0);
  animation: ripple 1100ms var(--souffle) forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(14); opacity: 0; } }
.lumen:active, .lumen.pressed { transform: scale(.976); box-shadow: 0 1px 0 rgba(255, 244, 222, .55) inset, 0 -10px 24px rgba(160, 70, 20, .25) inset, 0 18px 60px -6px rgba(240, 160, 80, .6), 0 0 0 1px rgba(255, 220, 170, .3); }
.lumen[disabled] { filter: saturate(.3) brightness(.6); pointer-events: none; }
.lumen svg { width: 20px; height: 20px; }
.lumen .icon { stroke-width: 1.6; }

.ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  color: var(--lune);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .02em;
  background: rgba(236, 228, 212, .045);
  box-shadow: 0 0 0 1px var(--line-strong) inset;
  transition: transform var(--t-micro) var(--souffle), background var(--t-micro) var(--souffle);
}
.ghost:active { transform: scale(.97); background: rgba(236, 228, 212, .09); }
.ghost svg { width: 18px; height: 18px; }
.text-btn {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--brume);
  padding: 10px 4px;
  transition: color var(--t-micro);
}
.text-btn:active { color: var(--lune); }

/* ─── Filament : une ligne de lumière ────────────────────────── */
.filament {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(236, 228, 212, .09);
  overflow: visible;
}
.filament > i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(240, 179, 94, .35), var(--miel));
  box-shadow: 0 0 10px rgba(240, 179, 94, .6);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform 900ms var(--souffle);
}

/* ─── Sections et libellés ───────────────────────────────────── */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 34px 0 14px;
}
.section-head h2 { margin: 0; }
.section-head .text-btn { padding: 0; font-size: 13.5px; }

/* ─── Puces de choix ─────────────────────────────────────────── */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 8px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  scroll-snap-align: start;
  color: var(--brume);
  font-size: 14.5px;
  letter-spacing: .01em;
  background: rgba(236, 228, 212, .035);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: color 500ms var(--souffle), background 600ms var(--souffle), box-shadow 600ms var(--souffle), transform var(--t-micro) var(--souffle);
}
.chip svg { width: 18px; height: 18px; opacity: .75; transition: opacity 500ms; }
.chip:active { transform: scale(.96); }
.chip[aria-checked='true'] {
  color: var(--lune);
  background: linear-gradient(180deg, rgba(240, 179, 94, .16), rgba(240, 179, 94, .07));
  box-shadow: 0 0 0 1px rgba(240, 179, 94, .45) inset, 0 6px 24px -10px rgba(240, 179, 94, .6);
}
.chip[aria-checked='true'] svg { opacity: 1; color: var(--miel); }

/* Mots de tonalité : une typographie qui s'allume */
.moods { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 0; }
.mood {
  position: relative;
  padding: 5px 0 8px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 5.3vw, 22px);
  font-weight: 330;
  color: var(--ardoise);
  font-variation-settings: 'SOFT' 100, 'WONK' 1, 'opsz' 36;
  transition: color 700ms var(--souffle);
}
.mood::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, rgba(240, 179, 94, 0), var(--miel), rgba(240, 179, 94, 0));
  box-shadow: 0 0 8px rgba(240, 179, 94, .8);
  transform: scaleX(0);
  opacity: 0;
  transition: transform 800ms var(--souffle), opacity 600ms var(--souffle);
}
.mood[aria-checked='true'] { color: var(--lune); }
.mood[aria-checked='true']::after { transform: scaleX(1); opacity: 1; }

/* Choix segmenté avec lumière glissante */
.segmented {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 5px;
  border-radius: 999px;
  background: rgba(236, 228, 212, .035);
  box-shadow: 0 0 0 1px var(--line) inset;
}
.segmented .seg-light {
  position: absolute;
  top: 5px; bottom: 5px; left: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 179, 94, .2), rgba(240, 179, 94, .08));
  box-shadow: 0 0 0 1px rgba(240, 179, 94, .42) inset, 0 8px 26px -12px rgba(240, 179, 94, .8);
  transition: transform 700ms var(--souffle), width 700ms var(--souffle);
}
.segmented button {
  position: relative;
  height: 48px;
  border-radius: 999px;
  color: var(--brume);
  font-size: 15px;
  transition: color 600ms var(--souffle);
}
.segmented button b { font-family: var(--serif); font-weight: 380; font-size: 21px; margin-right: 4px; font-variation-settings: 'SOFT' 100, 'opsz' 30; }
.segmented button[aria-checked='true'] { color: var(--lune); }

/* Cartes de voix */
/* Quatre voix sur une ligne qui défile : deux visibles, la suivante affleure. */
.voices {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 0 calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 6px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.voices::-webkit-scrollbar { display: none; }
.voice-card {
  flex: none;
  width: min(41vw, 190px);
  scroll-snap-align: start;
  position: relative;
  text-align: left;
  padding: 13px 52px 13px 16px;
  border-radius: 20px;
  background: rgba(236, 228, 212, .03);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: background 600ms var(--souffle), box-shadow 600ms var(--souffle), transform var(--t-micro) var(--souffle);
}
.voice-card:active { transform: scale(.98); }
.voice-card[aria-checked='true'] {
  background: linear-gradient(160deg, rgba(240, 179, 94, .14), rgba(240, 179, 94, .03) 70%);
  box-shadow: 0 0 0 1px rgba(240, 179, 94, .42) inset, 0 12px 36px -18px rgba(240, 179, 94, .7);
}
.voice-card .v-name { display: block; font-family: var(--serif); font-size: 20px; line-height: 1.2; font-weight: 380; color: var(--lune); font-variation-settings: 'SOFT' 100, 'opsz' 30; }
/* Sous le nom : la façon de dire, remplacée par l'onde quand la voix se fait entendre. */
.voice-card .v-sub { position: relative; display: block; margin-top: 3px; min-height: 17px; }
.voice-card .v-tag { display: block; font-size: 12.5px; color: var(--brume); line-height: 1.35; transition: opacity 500ms var(--souffle); }
.voice-card.playing .v-tag { opacity: 0; }
.voice-card .v-play {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -17px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--miel);
  background: rgba(240, 179, 94, .1);
  box-shadow: 0 0 0 1px rgba(240, 179, 94, .25) inset;
}
.voice-card .v-play svg { width: 14px; height: 14px; }
.voice-card .v-wave { position: absolute; left: 0; top: 0; display: flex; gap: 2px; align-items: center; height: 17px; opacity: 0; transition: opacity 500ms var(--souffle); }
.voice-card.playing .v-wave { opacity: 1; }
.voice-card .v-wave i { width: 2px; border-radius: 1px; background: rgba(236, 228, 212, .25); height: calc(var(--h) * 1px); transition: background 400ms; }
.voice-card.playing .v-wave i { background: var(--miel); animation: wave 900ms var(--lune-ease) calc(var(--n) * 70ms) infinite alternate; }
@keyframes wave { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }

/* Champ de texte */
.field {
  position: relative;
  display: block;
  border-radius: 18px;
  background: rgba(236, 228, 212, .03);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: box-shadow 600ms var(--souffle), background 600ms var(--souffle);
}
.field:focus-within { box-shadow: 0 0 0 1px rgba(240, 179, 94, .4) inset, 0 10px 30px -18px rgba(240, 179, 94, .7); background: rgba(236, 228, 212, .045); }
.field textarea, .field input {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  resize: none;
  padding: 15px 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.45;
  color: var(--lune);
  font-variation-settings: 'SOFT' 100, 'opsz' 20;
  user-select: text;
  -webkit-user-select: text;
}
.field textarea::placeholder, .field input::placeholder { color: var(--ardoise); }

/* ─── Couvertures ────────────────────────────────────────────── */
.cover {
  position: relative;
  aspect-ratio: 1;
  border-radius: 18px;
  overflow: hidden;
  background: var(--nuit-800);
  box-shadow: 0 0 0 1px rgba(236, 228, 212, .07) inset, 0 18px 40px -22px rgba(0, 0, 0, .9);
  isolation: isolate;
}
.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1200ms var(--souffle), transform 2200ms var(--souffle);
}
.cover img.loaded { opacity: 1; transform: none; }
.cover img.instant { transition: none; }
.cover::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 240, 215, .07) inset;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
}
.cover .glint {
  position: absolute;
  width: 26%;
  aspect-ratio: 1;
  margin: -13% 0 0 -13%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .45), rgba(255, 190, 110, 0));
  animation: glint 7s var(--lune-ease) infinite;
  pointer-events: none;
}
@keyframes glint { 0%, 100% { opacity: .35; transform: scale(.85); } 45% { opacity: .9; transform: scale(1.05); } }
.cover.pending { background: radial-gradient(80% 80% at 50% 70%, #1b2140, #0b0e1c); }
.cover.pending::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(250, 219, 168, .08) 50%, rgba(255, 255, 255, 0) 70%);
  animation: paint 3.2s var(--lune-ease) infinite;
}
@keyframes paint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ─── Feuilles (panneaux du bas) ─────────────────────────────── */
#sheets { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 9, .55);
  opacity: 0;
  transition: opacity 700ms var(--souffle);
  pointer-events: auto;
}
.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  overflow-y: auto;
  padding: 10px var(--gutter) calc(var(--safe-b) + 26px);
  border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg, rgba(22, 27, 46, .98), rgba(12, 15, 28, .99));
  box-shadow: 0 -1px 0 rgba(236, 228, 212, .1) inset, 0 -30px 80px -20px rgba(0, 0, 0, .8);
  transform: translate3d(0, 104%, 0);
  transition: transform 800ms var(--souffle);
  pointer-events: auto;
  /* Calque gardé en permanence : sans cela, Android le recrée à la fin de l'animation
     et le panneau clignote une image. */
  will-change: transform;
  backface-visibility: hidden;
  overscroll-behavior: contain;
}
.sheet::before {
  content: '';
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 18px;
  border-radius: 4px;
  background: rgba(236, 228, 212, .18);
}
.sheet.open { transform: translate3d(0, 0, 0); }
.sheet-scrim.open { opacity: 1; }
.sheet-scrim { will-change: opacity; }
.sheet h3 { margin: 4px 0 6px; font-family: var(--serif); font-weight: 360; font-size: 27px; color: var(--lune); font-variation-settings: 'SOFT' 100, 'opsz' 40; }
.sheet p.sub { margin: 0 0 22px; color: var(--brume); font-size: 14.5px; }
.options { display: grid; gap: 8px; }
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 0 18px;
  border-radius: 18px;
  text-align: left;
  color: var(--brume);
  background: rgba(236, 228, 212, .03);
  box-shadow: 0 0 0 1px var(--line) inset;
  transition: background 500ms var(--souffle), box-shadow 500ms var(--souffle), color 500ms, transform var(--t-micro);
}
.option:active { transform: scale(.985); }
.option svg { width: 22px; height: 22px; flex: none; }
.option .o-main { flex: 1; }
.option .o-title { display: block; color: var(--lune); font-size: 16px; }
.option .o-sub { display: block; font-size: 12.5px; color: var(--ardoise); }
.option[aria-checked='true'] { color: var(--miel); background: linear-gradient(180deg, rgba(240, 179, 94, .13), rgba(240, 179, 94, .05)); box-shadow: 0 0 0 1px rgba(240, 179, 94, .4) inset; }
.option .check { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong) inset; flex: none; transition: all 500ms var(--souffle); }
.option[aria-checked='true'] .check { background: radial-gradient(closest-side, #fff4dc, var(--flamme) 70%, rgba(240, 179, 94, 0)); box-shadow: 0 0 12px 2px rgba(240, 179, 94, .5); }

/* Curseur : un pouce comme une petite flamme */
.range { position: relative; height: 44px; display: flex; align-items: center; touch-action: none; }
.range .track { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(236, 228, 212, .12); }
.range .fill { position: absolute; left: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(240, 179, 94, .3), var(--miel)); box-shadow: 0 0 10px rgba(240, 179, 94, .6); width: calc(var(--v) * 100%); }
.range .thumb {
  position: absolute;
  left: calc(var(--v) * 100%);
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff6e4 0%, var(--miel) 45%, rgba(240, 179, 94, .35) 80%, rgba(240, 179, 94, 0));
  box-shadow: 0 0 18px 4px rgba(240, 179, 94, .35);
  transition: transform 400ms var(--souffle);
}
.range.dragging .thumb { transform: scale(1.25); }
.range-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ardoise); letter-spacing: .04em; margin-top: -4px; }

/* ─── Message éphémère ───────────────────────────────────────── */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-b) + 28px);
  z-index: 20;
  max-width: calc(100vw - 48px);
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--lune);
  background: rgba(24, 29, 48, .96);
  box-shadow: 0 0 0 1px var(--line-strong) inset, 0 20px 50px -20px #000;
  transform: translate3d(-50%, 20px, 0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--souffle), transform 700ms var(--souffle);
}
#toast.show { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ─── Écran noir ─────────────────────────────────────────────── */
#blackout {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: grid;
  place-items: end center;
  padding-bottom: calc(var(--safe-b) + 60px);
  opacity: 0;
  transition: opacity 1800ms var(--souffle);
}
#blackout.on { opacity: 1; }
.blackout-hint { margin: 0; font-size: 13px; letter-spacing: .08em; color: rgba(154, 160, 184, .35); transition: opacity 2400ms var(--souffle) 3s; }
#blackout.on.quiet .blackout-hint { opacity: 0; }

/* ─── Écran d'ouverture ──────────────────────────────────────── */
#splash {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--nuit-950);
  transition: opacity 1400ms var(--souffle), visibility 0s 1400ms;
}
#splash.done { opacity: 0; visibility: hidden; pointer-events: none; }
/* Première image : exactement l'icône (croissant et flamme), au centre, comme l'écran du système. */
.splash-mark { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; overflow: visible; }
.s-moon { transform-origin: 120px 120px; animation: moon-set 1500ms var(--souffle) 260ms forwards; }
@keyframes moon-set { to { opacity: 0; transform: rotate(-24deg) translate(-12px, 8px) scale(1.04); } }
.s-flame { animation: flame-pass 1000ms var(--souffle) 420ms forwards; }
@keyframes flame-pass { to { opacity: 0; } }
/* Puis la flamme s'allume en veilleuse et le nom apparaît. */
.splash-light {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff4dc 0%, rgba(250, 219, 168, .7) 8%, rgba(240, 179, 94, .25) 30%, rgba(240, 179, 94, 0) 70%);
  transform: translate3d(7px, 1px, 0) scale(.42);
  opacity: 0;
  animation: ignite 1700ms var(--souffle) 320ms forwards;
}
@keyframes ignite { 35% { opacity: 1; } to { opacity: 1; transform: none; } }
.splash-word {
  position: absolute;
  left: 0; right: 0;
  top: calc(50% + 122px);
  text-align: center;
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  animation: word 1400ms var(--souffle) 950ms forwards;
}
.splash-word .wordmark { font-size: 30px; }
@keyframes word { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rise, .in .rise, .leaving .rise { transform: none !important; transition-duration: 400ms !important; transition-delay: 0s !important; }
  .lumen::before, .cover .glint, .i-dot::after { animation: none; }
  .splash-light, .splash-word, .s-moon, .s-flame { animation-duration: 10ms; animation-delay: 0s; }
}