/*
 * coming-soon.css — PLAN Step 1 holding page (premium redesign).
 * Dark, minimal, deliberate. Consumes tokens.css custom properties only; the
 * brand glow uses color-mix() over --color-brand so no raw color is introduced.
 * The single sanctioned literal is the --bp-sm breakpoint inside @media.
 */

/* — Page shell: a flex column so the footer pins to the bottom on tall
   viewports and flows naturally on short ones. — */
.holding {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* — Stage: centered, matte black, fills the space above the footer. Decorative
   layers (paint order, back to front): red mesh (.coming-soon__mesh) ->
   faint technical grid (::before) -> content (.coming-soon__inner, z-index 1). — */
.coming-soon {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--space-96);
  padding-inline: var(--container-pad);
}

/* Faint technical grid, masked to dissolve toward the edges (modern, clinical). */
.coming-soon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient( to right,  color-mix(in srgb, var(--color-border) 55%, transparent) var(--border-hairline), transparent var(--border-hairline) ),
    linear-gradient( to bottom, color-mix(in srgb, var(--color-border) 55%, transparent) var(--border-hairline), transparent var(--border-hairline) );
  background-size: var(--space-64) var(--space-64);
  /* Alpha mask only (color irrelevant) — fade the grid out toward the edges. */
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 0%, transparent 78%);
  pointer-events: none;
}

/* — Red glow: a single soft, centered ellipsoid wash of brand red that fades to
   nothing. A heavy blur gives a smooth sub-pixel falloff — no posterized "shade
   steps" — and rounds the box into an ellipse; the box is wider than tall, so the
   wash reads ellipsoid, not circular. Fully contained, so it fades to the bg
   before the screen edges (no edge mask needed). Static — no motion. — */
.coming-soon__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.coming-soon__mesh span {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Ellipsoid: wider than tall, centered on the stage. */
  width: 56vmax;
  height: 36vmax;
  transform: translate(-50%, -50%);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-brand) 14%, transparent);
  /* Heavy blur = smooth, bandless falloff. */
  filter: blur(var(--space-96));
}

.coming-soon__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  text-align: center;
}

/* — Eyebrow: a hairline pill chip with a live brand status dot (ref-12) — */
.coming-soon__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-8) var(--space-16);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-surface) 60%, transparent);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-20);
}

.coming-soon__eyebrow-dot {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
  /* Gentle live-status pulse (reduced-motion-gated below). */
  animation: spalux-pulse var(--duration-ambient) var(--ease-out) infinite;
}

@keyframes spalux-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* — Lockup: lowercase `spalu` near-white + bold uppercase red `X` (canonical) — */
.lockup {
  font-family: var(--font-display);
  font-size: var(--type-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  margin-block-end: var(--space-20);
}

.lockup__x {
  color: var(--color-brand);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
}

/* — Brand logo (actual SVG, replaces the type lockup on the holding page).
   Height tracks the display-type scale so it reads at lockup size and stays
   responsive; width auto preserves the SVG aspect ratio; auto inline margins
   center it within the centered column. — */
.coming-soon__logo {
  display: block;
  height: var(--type-display);
  width: auto;
  margin-inline: auto;
  margin-block-end: var(--space-20);
}

/* — Proposition: single calm body line, constrained measure — */
.coming-soon__proposition {
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--color-text-muted);
  margin-block-end: var(--space-40);
}

/* Refined build-time marker — clearly placeholder, quietly so. */
.coming-soon__placeholder {
  display: block;
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text-muted) 55%, var(--color-bg));
  margin-block-start: var(--space-12);
}

/* — Email capture — */
.signup {
  margin-block-end: var(--space-20);
}

/* Premium pill capsule: the field + button live inside one rounded surface, the
   submit a solid brand pill nested at the end. Modern, soft, unmistakably an
   interactive element (pills are the sanctioned shape for interactives). */
.signup__row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background-color: var(--color-surface-2);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: var(--space-4);
  padding-inline-start: var(--space-20);
  /* Only the border recolors on focus — scope to it (never `all`, which would
     also animate stray/inherited properties and desync). Default `ease`. */
  transition: border-color var(--duration-fast);
  /* Promote the capsule (and its button) to its own compositing layer so the
     hover/focus repaints composite over the blurred mesh behind them instead of
     re-rasterizing that expensive blur(96px) every frame — that re-raster was
     dropping frames and making the fade look stepped. Zero-translate is the
     standard GPU-promotion idiom (a compositing hint, not a design value). */
  transform: translateZ(0);
}

/* Focus lives on the capsule (focus-within) so the whole unit lights up: the
   single hairline border simply recolors to brand — one line, no ring. */
.signup__row:focus-within {
  border-color: var(--color-brand);
}

.signup__input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  color: var(--color-text);
  border: 0;
  border-radius: 0;
  padding-block: var(--space-8);
  font-size: var(--type-body);
  letter-spacing: var(--tracking-normal);
}

.signup__input::placeholder {
  color: var(--color-text-muted);
}

.signup__input:focus {
  outline: none;
}

.signup__submit {
  flex: 0 0 auto;
  border: var(--border-hairline) solid var(--color-brand);
  border-radius: var(--radius-pill);
  background-color: var(--color-brand);
  color: var(--color-text);
  /* Vertical padding matches the field (--space-8) so both read equal height. */
  padding: var(--space-8) var(--space-20);
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  cursor: pointer;
  /* Hover changes background + border together — scope to both so they revert
     in lockstep (a bare `all` desyncs on un-hover). Default `ease`. */
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}

.signup__submit:hover,
.signup__submit:focus-visible {
  background-color: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
}

/* — Submission status (populated when wired to Klaviyo) — */
.signup__status {
  font-size: var(--type-body);
  color: var(--color-text-muted);
  min-height: var(--space-20);
  margin-block-start: var(--space-16);
}

.signup__status:empty {
  min-height: 0;
  margin-block-start: 0;
}

.signup__status[data-state="success"] {
  color: var(--color-text);
}

.signup__status[data-state="error"] {
  color: var(--color-brand);
}

/* — Form note — a general line below the form (currently the launch discount;
   copy may change). Body size, matching the proposition above the form. — */
.signup__note {
  font-size: var(--type-body);
  color: var(--color-text-muted);
}

/* — Footer: a minimal hairline-topped bar (ref-10) — legal left, links right,
   wide-tracked uppercase micro-labels. Stacks centered below --bp-sm. — */
.site-footer {
  position: relative;
  z-index: 1;
  padding-inline: var(--container-pad);
  padding-block-end: var(--space-24);
}

/* The hairline divider lives on the inner, so it's inset from the screen edges
   (content-aligned, max --container-max) rather than spanning the full width. */
.site-footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  /* border-block-start: var(--border-hairline) solid var(--color-border); */
  padding-block-start: var(--space-24);
  display: flex;
  /* Mobile-first: stacked + centered; switches to a row at --bp-sm. */
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
}

.site-footer__legal,
.site-footer__links a {
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Zero the inherited <p> bottom margin so legal + links align cleanly on the
   row's centre line; cap width so the long line wraps instead of overflowing. */
.site-footer__legal {
  margin-block: 0;
  max-width: 100%;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-24);
  max-width: 100%;
}

.site-footer__links a {
  text-decoration: none;
  /* Only the text color changes on hover — scope to it (not `all`). */
  transition: color var(--duration-fast);
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--color-text);
}

/* — A11y: visually-hidden label kept in the accessibility tree — */
.visually-hidden {
  position: absolute;
  width: var(--border-hairline);
  height: var(--border-hairline);
  padding: 0;
  margin: calc(-1 * var(--border-hairline));
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* — Entrance: a quiet staggered fade-up (WHOOP-like, restrained) — */
@keyframes spalux-rise {
  from {
    opacity: 0;
    transform: translateY(var(--space-12));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Cascade by explicit element, not :nth-child — the visually-hidden <h1> also
   sits in this flow, so positional counting would silently offset the stagger
   (and skip the eyebrow + note). Targeting the five visible items keeps the
   reveal correct and leaves the hidden heading un-animated. */
.coming-soon__eyebrow,
.coming-soon__logo,
.coming-soon__proposition,
.signup,
.signup__note {
  animation: spalux-rise var(--duration-slow) var(--ease-out) both;
}

/* Stagger step = --duration-fast; integer multipliers are the reveal order.
   The eyebrow leads at one full step (not 0) so its own rise registers as motion
   instead of firing on the first paint; the cadence between every item is still
   one --duration-fast, so the chain reads exactly as before, just led-in. */
.coming-soon__eyebrow {
  animation-delay: var(--duration-fast);
}
.coming-soon__logo {
  animation-delay: calc(var(--duration-fast) * 2);
}
.coming-soon__proposition {
  animation-delay: calc(var(--duration-fast) * 3);
}
.signup {
  animation-delay: calc(var(--duration-fast) * 4);
}
.signup__note {
  animation-delay: calc(var(--duration-fast) * 5);
}

/* — From --bp-sm up: remove the mobile inner padding; footer becomes a row.
   (The signup is a single pill capsule at all sizes — no layout switch.) — */
@media (min-width: 640px) /* --bp-sm */ {
  /* Footer returns to a single row: legal left, links right. */
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-24);
    text-align: start;
  }
}

/* — Honor reduced-motion: freeze the reveal + status-dot motion, keep
   everything visible. — */
@media (prefers-reduced-motion: reduce) {
  .coming-soon__inner > *,
  .coming-soon__eyebrow-dot {
    animation: none;
  }
  .signup__row,
  .signup__submit,
  .site-footer__links a {
    transition: none;
  }
}