/* ============================================================
   Min — landing page
   ------------------------------------------------------------
   Built on tokens.css, and on the creative direction:

     translucency · fog · light · tiny objects · focal blur · vague
     natural and physical, not tech and digital

   Every surface is the same optical resin, lit differently — thick
   translucent objects with lit edges and internal bloom, not sheets of
   colour. The dark half of the scroll is the same identity, lit from
   deeper in the cave.

   The accent is used sparingly and never alone: the violet always arrives
   as a pair — pale into deep — mixed live under the cursor.

   --bg and --ink are lerped by landing.js as you scroll.
   ============================================================ */

/* Registering --ink makes it interpolable, so everything derived from it via
   color-mix crossfades together when the page changes polarity. That is what
   lets the transition sections be short: the flip no longer needs a whole
   empty viewport to hide the low-contrast crossover in — it happens once, in
   240ms, at the exact luminance where the two inks trade places. */
@property --ink {
  syntax: '<color>';
  inherits: true;
  initial-value: #FAF7F2;
}

:root {
  --bg:  #2A2320;
  --ink: #FAF7F2;
  transition: --ink 240ms ease;

  --ink-soft:  color-mix(in srgb, var(--ink) 66%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 52%, transparent);
  --rule:      color-mix(in srgb, var(--ink) 12%, transparent);

  --shell: min(1140px, 100% - 2 * var(--space-6));

  /* The nav docks at the bottom of the viewport, so the CTA sits under the
     thumb. Anything that would otherwise end up underneath it reserves
     --dock-clear at the foot of the page. */
  --dock-h: 57px;
  --dock-gap: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  --dock-clear: calc(var(--dock-h) + var(--dock-gap) + var(--space-5));

  /* the wordmark letterforms, minus the i-dot — Min occupies that himself */
  --mask-min: url('/assets/img/min-letters-mask.svg');
}

/* ---- document ---------------------------------------------- */

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;

  /* Two defences for the same seam. iOS lays fixed elements out against the
     small viewport, so a slow drag-scroll retracts the toolbar, grows the
     visible area, and exposes a strip below the atmosphere; and either end
     of the document can rubber-band the fixed layers off their own edge.
     Painting the root in the live --bg means whatever shows through is the
     colour the atmosphere is sitting on anyway, and overscroll-behavior
     stops the bounce that reveals it. */
  background: var(--bg);
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  font-family: var(--font-rounded);
  font-weight: var(--font-weight-normal);
  background: var(--bg);
  color: var(--ink);
  /* clip, not hidden: `hidden` would make the body a scroll container and
     take the constellation's sticky stage with it */
  overflow-x: clip;
  font-synthesis-weight: none;
}

::selection { background: color-mix(in srgb, var(--color-accent-soft) 45%, transparent); }

canvas#scene {
  position: fixed;
  inset: 0;
  /* Sized to the *large* viewport — the one with the toolbar retracted — so
     the layer already covers the space a retracting toolbar is about to
     reveal. Over-constrains inset, which drops `bottom`; browsers without
     lvh ignore the whole declaration and keep the inset box. */
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
}

/* ---- the environment ---------------------------------------
   Light pooling toward the floor, and slow banks of fog above it. This is
   what the page is bathed in; everything else floats in it. */

.env {
  position: fixed;
  inset: 0;
  height: 100lvh;   /* see canvas#scene */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.env::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(125% 72% at 50% 118%, rgba(214, 197, 172, 0.4), transparent 70%),
    linear-gradient(180deg, rgba(15, 13, 20, 0.07) 0%, transparent 32%);
}

/* Fog banks: very large, very soft, very slow. They read as depth rather
   than as shapes — you should never be able to point at one. */
.fog {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  will-change: transform;
}
.fog--1 {
  width: 62vw; height: 42vw;
  left: -14vw; top: 8vh;
  background: radial-gradient(circle, rgba(214, 197, 172, 0.24), transparent 68%);
  animation: fog-drift-1 68s ease-in-out infinite;
}
.fog--2 {
  width: 54vw; height: 38vw;
  right: -12vw; top: 34vh;
  background: radial-gradient(circle, rgba(201, 168, 224, 0.2), transparent 68%);
  animation: fog-drift-2 84s ease-in-out infinite;
}
.fog--3 {
  width: 76vw; height: 40vw;
  left: 12vw; bottom: -14vh;
  background: radial-gradient(circle, rgba(255, 242, 212, 0.18), transparent 70%);
  animation: fog-drift-3 96s ease-in-out infinite;
}
@keyframes fog-drift-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, -5vh, 0) scale(1.14); }
}
@keyframes fog-drift-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.08); }
  50%      { transform: translate3d(-11vw, 6vh, 0) scale(1); }
}
@keyframes fog-drift-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7vw, -4vh, 0) scale(1.12); }
}

/* Fine film grain — on the approved optics list, and it keeps these very
   soft gradients from banding. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: 9;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

main { position: relative; z-index: 1; }

section {
  position: relative;
  padding: clamp(76px, 9.5vh, 124px) 0;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

/* ---- type -------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(2rem, 4.8vw, 3.6rem); }
h3 { font-size: var(--text-lg); letter-spacing: -0.02em; }

p { margin: 0; }

.lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Min, memos — the app's own nouns. Named things in running copy, so they
   read as parts of the product and not as ordinary words. */
.term {
  font-weight: var(--font-weight-semibold);
  font-style: normal;
  color: var(--ink);
}

/* the paragraph that sets up a section, under its heading */
.section-lede {
  max-width: 58ch;
  margin-top: var(--space-6);
}

/* ---- material emergence -----------------------------------
   "Like a ball rising to the surface — magnified and blurred underwater,
   clarifying as it settles." One after another, never a simultaneous bloom. */

.rise {
  opacity: 0;
  transform: translateY(8px) scale(1.06);
  filter: blur(5px);
  transition:
    opacity var(--duration-emergence) ease,
    transform var(--duration-emergence) var(--ease-emergence),
    filter var(--duration-emergence) ease;
}
.in .rise, .rise.in { opacity: 1; transform: none; filter: none; }
.in [data-delay="1"] { transition-delay: calc(1 * var(--stagger-cascade)); }
.in [data-delay="2"] { transition-delay: calc(2 * var(--stagger-cascade)); }
.in [data-delay="3"] { transition-delay: calc(3 * var(--stagger-cascade)); }
.in [data-delay="4"] { transition-delay: calc(4 * var(--stagger-cascade)); }
.in [data-delay="5"] { transition-delay: calc(5 * var(--stagger-cascade)); }

/* ---- optical resin ----------------------------------------
   A thick translucent object: you see the environment through it, the top
   edge catches the light, and there is a bloom inside the body. Because the
   material is itself a pale wash, anything on it keeps dark ink — which is
   how the Figma dark-gradient onboarding card behaves. */

.resin {
  --ink: #23211E;
  --ink-soft: #6D6861;
  --ink-faint: #938C80;
  position: relative;
  isolation: isolate;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pebble);
  /* Far more transparent than a card wash — the fog behind must show through.
     The specular sweep is layered into the background rather than sitting in a
     pseudo-element: a negative z-index would paint it *behind* this background,
     and a positive one would paint it over the text. */
  background:
    radial-gradient(120% 80% at 18% -12%, rgba(255, 255, 255, 0.6), transparent 58%),
    radial-gradient(70% 50% at 88% 108%, rgba(214, 197, 172, 0.2), transparent 62%),
    linear-gradient(168deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.24) 32%,
      rgba(242, 238, 231, 0.2) 70%,
      rgba(255, 255, 255, 0.34) 100%);
  backdrop-filter: blur(26px) saturate(155%) brightness(1.12);
  box-shadow:
    var(--edge-resin),
    var(--bloom-resin),
    0 2px 3px rgba(15, 13, 20, 0.1),
    0 30px 60px -24px rgba(15, 13, 20, 0.45);
}

/* ---- buttons ----------------------------------------------
   A pressable physical object. Idle: resin with the violet pair
   mixing under the cursor. Pressed: it submerges — sinks, goes clear,
   leaves only text and a thin wet edge, and ripples. Released: it
   surfaces and the accent takes over to say it's active. */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(168deg, rgba(255, 255, 255, 0.55), rgba(242, 238, 231, 0.26));
  backdrop-filter: blur(20px) saturate(150%) brightness(1.1);
  box-shadow:
    var(--edge-resin),
    inset 0 0 18px 6px rgba(255, 255, 255, 0.4),
    0 2px 2px rgba(15, 13, 20, 0.1),
    0 14px 26px -10px rgba(15, 13, 20, 0.42);
  color: #23211E;
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 260ms var(--ease-emergence),
    box-shadow 260ms ease,
    background 320ms ease,
    border-color 260ms ease,
    backdrop-filter 260ms ease,
    color 260ms ease;
}

/* The interactive fill — pale violet into deep, following the cursor. It has
   to sit *above* the button's own background (z-index 0, not -1) or the resin
   wash hides it; the label is then lifted above the fill. */
.btn__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--gradient-interactive);
  opacity: 0;
  transition: opacity 420ms ease;
}
.btn:hover .btn__fill { opacity: 0.45; }

/* The primary carries a little of the light at rest, so it reads as the main
   action without becoming a slab of violet. */
.btn--primary .btn__fill { opacity: 0.34; }
.btn--primary:hover .btn__fill { opacity: 0.62; }

/* the label and arrow ride above both the fill and the ripple */
.btn > :not(.btn__fill):not(.btn__ripple) { position: relative; z-index: 2; }

.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--edge-resin),
    inset 0 0 22px 8px rgba(255, 255, 255, 0.45),
    0 3px 3px rgba(15, 13, 20, 0.1),
    0 20px 34px -12px rgba(15, 13, 20, 0.46);
}

/* — submerged: under the surface, wet and nearly clear — */
.btn.is-submerged {
  transform: translateY(3px) scale(0.985);
  /* the object has gone clear, so the label reads as page text, not as ink
     printed on a light material that is no longer there */
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(3px) saturate(120%) brightness(0.98);
  box-shadow:
    inset 0 2px 10px rgba(15, 13, 20, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 rgba(15, 13, 20, 0);
  transition-duration: 150ms;
}
.btn.is-submerged .btn__fill { opacity: 0.06; }

/* — surfaced and active: the accent takes over, smoothly — */
.btn.is-active {
  border-color: rgba(255, 255, 255, 0.55);
  transition-duration: 520ms;
}
.btn.is-active .btn__fill {
  opacity: 1;
  /* Palest violet at the point of contact, easing out into the accent. Kept
     light enough through the middle that the graphite label still clears
     contrast. */
  background:
    radial-gradient(110% 165% at var(--mx, 50%) var(--my, 50%),
      #F3EAF9 0%,
      var(--color-accent-soft) 34%,
      #BE96D6 72%,
      var(--color-accent) 100%);
}

.btn__ripple {
  position: absolute;
  z-index: 1;
  width: 0; height: 0;
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.06) 70%, transparent 72%);
  animation: ripple 620ms var(--ease-drop) forwards;
}
@keyframes ripple {
  from { width: 0; height: 0; opacity: 0.85; }
  to   { width: var(--reach); height: var(--reach); opacity: 0; }
}

/* the quiet secondary: a hollow of the same material */
.btn--quiet {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border-color: var(--rule);
  color: var(--ink);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 14%, transparent);
}
.btn--quiet:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}

.btn--lg { padding: 18px 32px; font-size: var(--text-md); }

.btn__arrow { transition: transform var(--duration-standard) var(--ease-emergence); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---- nav --------------------------------------------------
   On screen at every scroll position, including both palette crossovers, so
   it opts out of the ramp: its own material, its own fixed ink. Brightness
   on the backdrop filter is what lets it stay genuinely translucent and
   still hold dark text over the cave half.

   Docked to the bottom rather than the top: the waitlist CTA is the only
   thing in it that matters, and down there it lands under the thumb. */

.nav {
  position: fixed;
  bottom: var(--dock-gap);
  left: 50%;
  translate: -50% 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: auto;
  max-width: calc(100% - 2 * var(--space-5));
  padding: 7px 7px 7px 20px;
  border-radius: 999px;
  isolation: isolate;

  --ink: #23211E;
  --ink-soft: #6D6861;
  --rule: rgba(35, 33, 30, 0.12);
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(120% 140% at 12% -30%, rgba(255, 255, 255, 0.7), transparent 62%),
    radial-gradient(60% 120% at 92% 130%, rgba(214, 197, 172, 0.18), transparent 60%),
    linear-gradient(168deg, rgba(255, 255, 255, 0.42), rgba(242, 238, 231, 0.2));
  backdrop-filter: blur(30px) saturate(170%) brightness(1.55);
  box-shadow:
    var(--edge-resin),
    inset 0 0 24px 8px rgba(255, 255, 255, 0.36),
    0 2px 3px rgba(15, 13, 20, 0.12),
    0 22px 44px -16px rgba(15, 13, 20, 0.5);
}
/* The hero is its own screen and carries its own full-width CTA, so the dock
   has nothing to add while you're still on it: it waits below the fold and
   surfaces once the hero is behind you. It arrives on the page's own recipe
   (opacity, a little over-scale, blur clearing on --ease-emergence) — the
   object rises to the surface rather than sliding in like a toolbar. Its
   resting state is untouched.

   Gated on .dock-armed, which the script adds only once it has taken charge —
   if landing.js never runs, the nav simply stays visible. */
.dock-armed .nav {
  opacity: 0;
  /* far enough to clear its own shadow, which is cast well below the pill */
  transform: translateY(calc(100% + var(--dock-gap) + var(--space-8))) scale(1.04);
  filter: blur(5px);
  pointer-events: none;
  transition:
    opacity var(--duration-emergence) ease,
    transform var(--duration-emergence) var(--ease-emergence),
    filter var(--duration-emergence) ease;
}
.dock-armed.is-docked .nav {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}

.nav__brand {
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}

.nav__right { display: flex; align-items: center; gap: var(--space-5); }

/* inside the nav pebble the CTA is not another pebble — it would be an
   object inside an object. A quiet inset well instead. */
.nav__right .btn {
  padding: 11px 20px;
  font-size: var(--text-sm);
  background: rgba(35, 33, 30, 0.05);
  border-color: rgba(35, 33, 30, 0.1);
  backdrop-filter: none;
  box-shadow: inset 0 1px 2px rgba(15, 13, 20, 0.08);
}
.nav__right .btn:hover {
  transform: none;
  background: rgba(35, 33, 30, 0.09);
  box-shadow: inset 0 1px 3px rgba(15, 13, 20, 0.12);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--ink-soft);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.nav__link:hover { color: var(--ink); }

/* ---- the wordmark, and Min inside it -----------------------
   Min is the dot of the lowercase i. He only detaches later, so the visitor
   feels they discovered him. He carries the accent only in the small flat mark —
   at hero size he is the same pearl resin as everything else. */

.wordmark--hero {
  position: relative;
  width: min(300px, 52vw);
  aspect-ratio: 138 / 68;
  margin-bottom: var(--space-10);
}

/* Cast-glass letterforms: the environment is blurred *through* them, with a
   lit top edge and a soft shadow underneath. The letter shapes come from
   min-logo-flat.svg, used here as a mask. */
.wordmark__glass {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--mask-min);
  mask-image: var(--mask-min);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background:
    linear-gradient(166deg,
      rgba(255, 255, 255, 0.88) 0%,
      rgba(255, 255, 255, 0.52) 34%,
      rgba(255, 250, 244, 0.32) 62%,
      rgba(255, 255, 255, 0.58) 100%);
  backdrop-filter: blur(14px) saturate(150%) brightness(1.3);
  opacity: 0;
  filter: blur(18px);
  animation: surface 750ms var(--ease-emergence) 400ms forwards;
}
/* the cast edge: lifts the letterforms off the fog behind them */
.wordmark__glass--shadow {
  z-index: -1;
  background: rgba(15, 13, 20, 0.45);
  backdrop-filter: none;
  translate: 0 3px;
  filter: blur(7px);
}
/* the warm bloom the glass logo carries */
.wordmark__bloom {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, rgba(255, 242, 212, 0.22), transparent 68%);
  filter: blur(22px);
  opacity: 0;
  animation: surface 900ms var(--ease-emergence) 500ms forwards;
}
@keyframes surface {
  to { opacity: 1; filter: blur(0); }
}

/* ---- the nav mark ------------------------------------------
   The hero mark at 50px: the same bloom, cast glass and Min in the i-dot. It
   is never "entering" — the dock surfaces long after the hero has played — so
   every entry animation is switched off and the final state is the base one.
   The only thing that differs from the hero is the backdrop maths: the nav
   pebble is a *light* surface, so the environment is darkened rather than
   brightened through the letters, or they'd disappear into it. */

.wordmark--nav {
  position: relative;
  display: block;
  /* 60px, not the 50 the taller kin mark wanted: the min letterforms are
     shorter for a given width, and at 50 they read as a footnote next to
     the nav links. This lands the letters at the height they had. */
  width: 60px;
  aspect-ratio: 138 / 68;
}
.wordmark--nav .wordmark__glass {
  opacity: 1;
  filter: none;
  animation: none;
  background: linear-gradient(166deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.34) 34%,
    rgba(255, 250, 244, 0.2) 62%,
    rgba(255, 255, 255, 0.56) 100%);
  backdrop-filter: blur(4px) saturate(150%) brightness(0.7);
}
.wordmark--nav .wordmark__glass--shadow {
  background: rgba(15, 13, 20, 0.38);
  backdrop-filter: none;
  translate: 0 1px;
  filter: blur(1.5px);
}
/* the hero's warm bloom, tightened to the mark and breathing on the house 5s
   loop, so the small mark has the hero's glow without its softness */
.wordmark--nav .wordmark__bloom {
  inset: -18%;
  opacity: 1;
  filter: blur(6px);
  background: radial-gradient(50% 50% at 50% 55%, rgba(255, 242, 212, 0.3), transparent 68%);
  animation: breathe 5s ease-in-out infinite;
}
.wordmark--nav .wordmark__min {
  opacity: 1;
  animation: none;
}

/* Min, at nav scale. His morph and eye-glow loops come from .min, so all he
   needs here is a float sized to a 15px body — the hero's -11px would launch
   him out of the pebble. */
.min--nav { animation: float-nav 9s ease-in-out infinite; }
@keyframes float-nav {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}

/* the i-dot, which at this size is the whole of the mark's colour */
.wordmark__dot {
  position: absolute;
  left: 60.08%;
  top: 13.68%;
  width: 13.48%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* Min sits exactly where the i-dot is: centre 60.08% / 13.68% of the 138×68
   box. The flat dot is 13.48% of the width, but Min's body only fills ~60% of
   his own square — and his ears reach past that again — so the square has to
   be larger to land at the same size. He gets a little extra beyond that,
   because he's a character, not punctuation. */
.wordmark__min {
  position: absolute;
  left: 60.08%;
  top: 13.68%;
  width: 21.2%;
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: 0;
  animation: surface 750ms var(--ease-emergence) 700ms forwards;
}

/* ---- Min ---------------------------------------------------
   A small creature cast in warm opal resin and lit from the inside: a dome
   body, two ear flaps hanging down his sides, two foot nubs, two hot eyes.
   min.js writes his outline every frame — body, ears and a volume-conserving
   settle — so everything here is the light around him, never his shape.
   He does not blink. */

.min {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.min svg { position: relative; width: 100%; height: 100%; overflow: visible; display: block; }

.min--hero { animation: float 9s ease-in-out infinite; }

.min--dawn {
  width: clamp(150px, 23vw, 232px);
  margin-inline: auto;
  aspect-ratio: 1;
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* Restrained luminescence: a soft warm diffusion, not a glow effect. */
.min--dawn::before {
  content: '';
  position: absolute;
  inset: -44%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 170, 0.34), rgba(255, 240, 214, 0.12) 46%, transparent 70%);
  filter: blur(20px);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.6; transform: scale(0.96); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* the eyes' own slow pulse — matched to Min's 5s idle */
.min__glow { animation: eye-glow 5s ease-in-out infinite; }
@keyframes eye-glow {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.85; }
}

/* Awareness, once, in the hero: the eyes rotate in from the sphere's left
   edge and un-squeeze into a forward gaze. The dot itself never moves. */
.min--hero .min__eyes {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: aware 600ms var(--ease-emergence) 1500ms forwards;
}
@keyframes aware {
  from { opacity: 0; transform: translateX(-40%) scaleX(0.12); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) scaleX(1); }
}

/* ---- hero -------------------------------------------------- */

/* A centred composition, so Min — who is the dot of the i, at 49.6% of the
   wordmark — lands on the horizontal centre of the screen. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-top: 96px;
  /* the dock stays under the fold until the hero is behind you, so this
     screen doesn't have to keep a lane clear for it */
  padding-bottom: var(--space-10);
  text-align: center;
}
.hero .shell { display: grid; justify-items: center; }

/* A quiet nudge, not a second CTA: it only shows once someone has sat on the
   hero a few seconds without acting, and steps aside the moment the dock
   takes over below. Gated on .dwell-armed the same way the dock is gated on
   .dock-armed — if the timer script never runs, it simply never appears
   instead of sitting broken on screen. */
.scroll-cta {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  translate: -50% 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  z-index: 2;
}
.scroll-cta__chevron { animation: scroll-cta-bob 1.8s ease-in-out infinite; }
@keyframes scroll-cta-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.dwell-armed .scroll-cta {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
  pointer-events: none;
  transition:
    opacity var(--duration-emergence) ease,
    transform var(--duration-emergence) var(--ease-emergence),
    filter var(--duration-emergence) ease;
}
.dwell-armed.dwell-in .scroll-cta {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: auto;
}
/* The dock is the next thing to look at once the hero is behind you, so the
   nudge steps back rather than stacking with it. */
.is-docked .scroll-cta { opacity: 0; pointer-events: none; }

.hero h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  max-width: 22ch;
  margin-bottom: var(--space-6);
}

.hero .lede { margin-inline: auto; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-9);
}

/* ---- problem ----------------------------------------------- */

.problem__grid {
  display: grid;
  gap: clamp(var(--space-7), 5vw, 72px);
  grid-template-columns: 1fr;
  margin-top: var(--space-8);
}
@media (min-width: 900px) {
  .problem__grid { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
}

.stack { display: grid; gap: var(--space-5); }

/* ---- the constellation -------------------------------------
   One figure, scrubbed by the scroll. A tall track with a stage pinned in
   the middle of the viewport; constellation() in landing.js turns scroll
   position into per-element progress and writes it here as --in / --cold /
   --warm. Every value below therefore reads from a variable rather than
   from a keyframe, which is what makes the whole thing scrub backwards as
   smoothly as it plays forwards.

   Until the script arms the scene, the figure sits fully assembled — a
   failed module leaves a finished picture, not an empty screen. */

.scene {
  position: relative;
  /* the scroll distance the figure is scrubbed over — long enough that
     each line of the caption gets about a viewport of reading to itself */
  height: 460svh;
  padding: 0;
}

.scene__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(var(--space-6), 4svh, var(--space-9));
}

/* ---- the ring ----------------------------------------------
   Eight people standing around each other with a hole in the middle, which
   is exactly where Min ends up. Positions come from --x / --y in the
   markup, so the formation is authored once and never computed twice. */

.ring {
  position: relative;
  width: min(56svh, 520px, 84vw);
  aspect-ratio: 1;
}

.blob {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(30px, 11%, 62px);
  aspect-ratio: 1 / 1.06;
  translate: -50% -50%;
  /* Min's silhouette: a wide dome, tucked slightly at the bottom */
  border-radius: 46% 46% 52% 52% / 48% 48% 54% 54%;
  /* Mixed from --ink, not from white: the scene ends in daylight, and --ink
     is a registered property, so these bodies crossfade from pale glass on
     the cave floor to smoked glass in the daylight without a second rule. */
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  background: linear-gradient(172deg,
    color-mix(in srgb, var(--ink) 17%, transparent),
    color-mix(in srgb, var(--ink) 6%, transparent));
}

/* the two lights a person can be under, cross-faded by --cold / --warm:
   the screen in their hands, and Min's light once they've looked up */
.blob::before,
.blob::after {
  content: '';
  position: absolute;
  inset: -30% -16%;
  border-radius: inherit;
  pointer-events: none;
}
/* the cold light of a screen, held under the face. Desaturated on purpose:
   in the warm world a true blue reads as a lamp rather than as light, and
   "nothing saturated, nothing neon" is a brand rule, not a preference. */
.blob::after {
  background: radial-gradient(50% 34% at 50% 78%,
    rgba(150, 178, 205, 0.78), rgba(150, 178, 205, 0) 70%);
  opacity: var(--cold, 1);
}
/* Min's light, falling on them from the middle — his own violet, so it still
   reads once the page is in daylight. */
.blob::before {
  background: radial-gradient(72% 54% at 50% 16%,
    color-mix(in srgb, var(--color-accent-soft) 62%, transparent),
    transparent 78%);
  opacity: var(--warm, 0);
}

/* ---- the links ---------------------------------------------
   Lines from the middle out to each person: they start just inside Min's
   silhouette and stop at the edge of the body they reach, so nothing ever
   crosses a translucent object. Drawn by unwinding a dash one unit longer
   than the longest of them. */

.ring__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ring__links line {
  /* the ink, tinted toward the accent — a pale violet line on the cave floor
     and a deep warm one once the sun is up, without ever changing rule */
  stroke: color-mix(in srgb, var(--ink) 58%, var(--color-accent));
  stroke-width: 0.38;
  stroke-linecap: round;
  stroke-dasharray: 24;
}

/* Min holds the middle. He breathes rather than floats here — the links are
   fixed geometry, so a big bob would pull their ends out from under him. */
.min--dawn {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  width: 38%;
  aspect-ratio: 1;
  animation: float-min 8s ease-in-out infinite;
}
@keyframes float-min {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ---- the caption -------------------------------------------
   Both lines live in the same slot and cross-fade, so nothing below the
   stage moves when the sentence changes. */

.scene__caption {
  position: relative;
  width: min(50ch, 90vw);
  /* holds the taller of the two lines, so the hand-over moves nothing */
  min-height: clamp(5.5rem, 13vh, 8rem);
}
.scene__line {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: clamp(1.125rem, 1.9vw, 1.4375rem);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  text-wrap: balance;
}
.scene__line[data-line="2"] {
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--ink);
}

/* Unarmed — no script, or reduced motion. Nothing is being scrubbed, so the
   caption can't cross-fade in place: the two lines simply stack and read as
   the paragraph they are. */
.scene:not(.is-armed) .scene__caption {
  display: grid;
  gap: var(--space-5);
  min-height: 0;
}
.scene:not(.is-armed) .scene__line { position: static; }

/* ---- what the script drives --------------------------------
   Only in effect once constellation() has armed the scene. */

.scene.is-armed .blob {
  opacity: var(--in, 0);
  scale: calc(0.9 + 0.1 * var(--in, 0));
  /* connected bodies pick up a little of Min's light on their own edge */
  border-color: rgba(255, 240, 222, calc(0.16 + 0.22 * var(--warm, 0)));
}
.scene.is-armed .ring__links line {
  opacity: var(--in, 0);
  stroke-dashoffset: var(--dash, 24);
}
.scene.is-armed .min--dawn {
  opacity: var(--in, 0);
  /* his own bob is a transform, so scaling him here can't fight it */
  scale: calc(0.86 + 0.14 * var(--in, 0));
}
.scene.is-armed .scene__line {
  opacity: var(--in, 0);
  translate: 0 calc(10px - 10px * var(--in, 0));
}

/* ---- Min section ------------------------------------------- */

.split {
  display: grid;
  gap: clamp(var(--space-8), 5vw, 68px);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .split { grid-template-columns: 0.95fr 1.05fr; }
  /* the memos split leads with the phone, so the two device shots don't
     land on the same side of the page twice in a row */
  .split--flip { grid-template-columns: 1.05fr 0.95fr; }
}
.split--flip { margin-top: clamp(var(--space-9), 6vw, 80px); }

/* the phone: a physical object holding the app's own dark end of the world */
.phone {
  position: relative;
  width: min(324px, 78vw);
  margin-inline: auto;
  aspect-ratio: 9 / 18.5;
  border-radius: 46px;
  padding: 11px;
  background: linear-gradient(160deg, #6B5C4D, #2A2320 42%, #463A31);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 3px 4px rgba(15, 13, 20, 0.2),
    0 46px 90px -24px rgba(15, 13, 20, 0.55);
}
.phone::after {
  content: '';
  position: absolute;
  top: 25px; left: 50%;
  translate: -50% 0;
  width: 74px; height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
}
.phone__screen {
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(214, 197, 172, 0.16), transparent 70%),
    linear-gradient(180deg, var(--color-dusk-top), var(--color-dusk-bottom));
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 42px 14px 16px;
  color: #FAF7F2;
}

.phone__spacer { flex: 1; }

.phone__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.phone__head b { display: block; font-size: var(--text-base); font-weight: var(--font-weight-semibold); }
.phone__head i {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: rgba(250, 247, 242, 0.5);
}
.phone__avatar { width: 30px; height: 30px; flex: none; }
/* the memo screen is headed by a pin rather than by Min */
.phone__avatar--pin { color: var(--color-accent-soft); padding: 2px; }

.bubble {
  max-width: 84%;
  padding: 11px 15px;
  border-radius: 20px;
  font-size: var(--text-sm);
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  animation: bubble-in var(--duration-emergence) var(--ease-emergence) both;
}
.bubble--me {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.14);
}
.bubble--min { align-self: flex-start; border-bottom-left-radius: 7px; }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(1.04); filter: blur(4px); }
}
.bubble .caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  translate: 0 2px;
  background: var(--color-accent-soft);
  animation: caret 1.1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.phone__pill {
  margin-top: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  font-size: var(--text-sm);
  color: rgba(250, 247, 242, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

/* ---- the memo map, inside the phone ------------------------
   Schematic, not a real map — a placeholder for a real capture: the streets
   as faint rules, the radius Min can see, and memos pinned inside it.
   Percentages only, so it reflows with the screen. */

.mmap {
  position: relative;
  flex: 1;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.07);
  /* the block plan: two thin rules each way, and one diagonal street */
  background-image:
    linear-gradient(115deg, transparent 48.7%, rgba(255, 255, 255, 0.06) 48.7% 51.3%, transparent 51.3%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 33.3%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 25%),
    radial-gradient(120% 80% at 50% 50%, rgba(228, 210, 240, 0.08), transparent 70%);
}

/* the radius, centred on you: a soft pool with a dashed edge */
.mmap__radius {
  position: absolute;
  top: 50%; left: 50%;
  width: 62%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1px dashed rgba(250, 247, 242, 0.22);
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 68%);
}

.mmap__you {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 26%, transparent);
}

/* a memo: the pin, and its line of text set beside it */
.mmap__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mmap__pin::before {
  content: '';
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  /* pale pins, so they read as memos and not as the accent "you" dot */
  background: var(--color-accent-soft);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--color-accent-soft) 55%, transparent);
  animation: pin-pulse 4.6s var(--ease-emergence) infinite;
}
.mmap__pin i {
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.2;
  color: rgba(250, 247, 242, 0.72);
  white-space: nowrap;
}
/* scattered, and never on top of you */
.mmap__pin--1 { top: 15%; left: 10%; }
.mmap__pin--2 { top: 72%; left: 14%; }
.mmap__pin--3 { top: 38%; left: 52%; }
.mmap__pin--2::before { animation-delay: 1.5s; }
.mmap__pin--3::before { animation-delay: 3s; }

@keyframes pin-pulse {
  0%, 70%, 100% { transform: scale(1); opacity: 1; }
  35%           { transform: scale(1.35); opacity: 0.8; }
}

/* the memo the map has selected, sitting where the input bar sits in the
   Min screen — same object, different job */
.memo {
  margin-top: 8px;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(8px);
}
.memo > b {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.35;
}
.memo span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: rgba(250, 247, 242, 0.5);
}

/* ---- the memos flow ----------------------------------------
   Three steps, numbered, in the order you'd actually do them. */

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-4);
  align-content: center;
}

.flow__step {
  padding: clamp(var(--space-6), 2.6vw, var(--space-7));
  display: grid;
  align-content: start;
  transition: transform var(--duration-standard) var(--ease-emergence);
}
.flow__step:hover { transform: translateY(-4px); }

.flow__step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  margin-bottom: var(--space-5);
}
.flow__step > b {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.flow__step p { color: var(--ink-soft); font-size: var(--text-base); line-height: 1.6; }
/* the example questions read as quoted speech, not as body copy */
.flow__step i {
  display: block;
  margin-top: var(--space-3);
  font-style: italic;
  color: var(--ink);
}
.flow__step i::before { content: '“'; }
.flow__step i::after { content: '”'; }

/* ---- the four "nots" --------------------------------------- */

.nots {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-9);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .nots { grid-template-columns: 1fr 1fr; } }

.not { padding: clamp(var(--space-7), 3.5vw, var(--space-10)); }
.not > b {
  display: block;
  font-size: clamp(1.1875rem, 2.1vw, 1.5rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: var(--space-3);
}
/* the value we keep, painted in the one warm gradient on the page */
.not__yes {
  /* both stops stay saturated, so the last letters don't wash out on a
     light card */
  background: linear-gradient(96deg, var(--color-accent-hover), var(--color-accent) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.not > b s {
  text-decoration: none;
  color: var(--ink-faint);
  position: relative;
}
/* and the one we don't, struck through by a line that draws itself in the
   same gradient once the card has surfaced */
.not > b s::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; top: 54%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent-hover), var(--color-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 720ms var(--ease-emergence) 380ms;
}
.in .not > b s::after { transform: scaleX(1); }
.not p { color: var(--ink-soft); font-size: var(--text-base); line-height: 1.6; max-width: 42ch; }

/* ---- closer ------------------------------------------------
   The run-up has to be taller than one viewport, otherwise the copy is still
   on screen when the section top reaches the top of the window and the
   palette flip has nowhere quiet to happen.

   No card here: the closing line stands in the open air, and the only object
   is the button. A sheet of resin behind it would flatten the whole ending. */
.closer {
  display: grid;
  align-content: start;
  justify-items: center;
  text-align: center;
  padding: 30svh 0 12svh;
}
/* max-width without auto margins would pin the heading to the left of the
   shell — invisible on phones, where 21ch is the full column anyway */
.closer h2 { max-width: 21ch; margin-inline: auto; }
.closer .lede { margin: var(--space-7) auto 0; text-align: center; }
.closer .hero__actions { justify-content: center; }

.fineprint {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  padding: var(--space-8) 0 calc(var(--space-10) + var(--dock-clear));
  font-size: var(--text-sm);
  color: var(--ink-faint);
}
.footer__row {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.footer a { color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--ink); }

/* ---- progress rail ----------------------------------------- */

.rail {
  position: fixed;
  top: 0; left: 0;
  z-index: 30;
  height: 1px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-accent-soft) 80%, transparent),
    color-mix(in srgb, var(--color-accent) 60%, transparent));
}

/* ---- a11y -------------------------------------------------- */

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

:where(a, button):focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 999px;
}

/* ---- small screens ---------------------------------------- */

@media (max-width: 760px) {
  :root { --shell: min(1140px, 100% - 2 * var(--space-5)); }

  .nav { padding: 7px 7px 7px 16px; gap: var(--space-4); }
  .nav__link { display: none; }

  .btn--lg { padding: 16px 26px; font-size: var(--text-base); }
  .hero { padding-top: 72px; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .wordmark--hero { width: min(300px, 62vw); }

  .scene { height: 420svh; }
  .scene__caption { min-height: 9.5rem; }
  .closer { padding-top: 24svh; }
  .flow__step { padding: var(--space-7) var(--space-6); }
  .fog { filter: blur(60px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .rise { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* Nothing is scrubbed here, so the track has no reason to be three
     viewports tall: the finished figure just sits in the page. */
  .scene { height: auto; }
  .scene__stage {
    position: static;
    height: auto;
    padding-block: clamp(76px, 9.5vh, 124px);
  }
  .wordmark__glass, .wordmark__bloom, .wordmark__min, .min__eyes {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  body::after, .fog { display: none; }
}