/* ============================================================================
 * FIRST RUN — the cinematic layer of welcome -> onboarding -> first discovery.
 * IMP-0623.
 *
 * WHAT THIS FILE IS FOR
 * welcome.html is the product's most art-directed page, and the two screens a new reader
 * meets straight after it — /onboarding and /stories — dropped its art direction entirely:
 * flat --bg, no imagery, a SaaS stepper, a catalogue that opened on an unstyled <h1>. The
 * reader design system (css/reader.css, IMP-0619) fixed the type, palette, cards and the
 * forking rule for every reader page, which is most of what welcome established. This file
 * carries the part reader.css deliberately does NOT own — welcome's cinematic FIELD:
 *
 *   1. the atmosphere: the portal slice (mystrix_top.PNG) over the endless world
 *      (mystrix_layer3.PNG), under a gradient wash — the same assets, in the same order,
 *      that welcome.css composes;
 *   2. welcome's kicker pills, the badges its hero wears;
 *   3. welcome's one gradient-clipped display moment (.hero-title-accent).
 *
 * It is opt-in per page (.first-run-page + the _first_run_atmosphere.html partial), because
 * a field this loud belongs to the first run, not to every route.
 *
 * TOKENS
 * Nothing here invents a palette or a type role. Colour comes from the brief's seven names
 * in root.css (--ink/--amethyst/--ember/--verdigris/--parchment) and the derived --rd-*
 * tokens in reader.css; type comes from --rd-font-display/-reading/-ui. The only token
 * declared here is the one dimension that is genuinely this layer's own: where the portal
 * slice ends.
 * ========================================================================== */

:root {
  /* One knob for the height of the portal slice, exactly as welcome.css keeps one. Shorter
     here: these pages open under app chrome, not under a full-bleed marketing header. */
  /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
     the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
     fallback for browsers that cannot parse the dynamic unit. */
  --fr-slice-h: clamp(300px, 46vh, 540px);
  --fr-slice-h: clamp(300px, 46dvh, 540px);
}

/* ---------------------------------------------------------------------------
 * 1. THE ATMOSPHERE
 *
 * Fixed, so the field stays put while the reader scrolls the page over it — the same
 * relationship welcome has between its background and its sections. z-index 0, never -1:
 * body carries an opaque background that would swallow it. main.css's chrome sits above
 * (.header 50, .sidebar/.mobile-nav 100) and .first-run-page lifts the content over it.
 * ------------------------------------------------------------------------ */

.first-run-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.first-run-atmosphere-image {
  position: absolute;
  inset: 0;
  background: var(--ink);
  background-image: url('../assets/music/mystrix_layer3.PNG');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: center var(--fr-slice-h);
  filter: saturate(1.06) contrast(1.1);
}

/* The portal slice: the frame welcome opens on, so arriving here reads as walking further
   into that image rather than closing it. */
.first-run-atmosphere-image::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  height: var(--fr-slice-h);
  background-image: url('../assets/music/mystrix_top.PNG');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: saturate(1.06) contrast(1.08);
}

/* The seam, so the join between the slice and the endless world is invisible. */
.first-run-atmosphere-image::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(var(--fr-slice-h) - 200px);
  height: 260px;
  background: linear-gradient(to bottom, rgba(var(--ink-rgb), 0) 0%, var(--ink) 100%);
}

.first-run-atmosphere-gradient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(900px 600px at 22% 8%, rgba(var(--amethyst-rgb), 0.22) 0%, rgba(var(--amethyst-rgb), 0) 55%),
    radial-gradient(900px 600px at 78% 18%, rgba(var(--ember-rgb), 0.16) 0%, rgba(var(--ember-rgb), 0) 55%);
  filter: blur(8px);
}

.first-run-atmosphere-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--parchment-rgb), 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--parchment-rgb), 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.08;
  mask-image: radial-gradient(70% 60% at 50% 26%, rgba(var(--ink-rgb), 1) 40%, rgba(var(--ink-rgb), 0) 75%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 26%, rgba(var(--ink-rgb), 1) 40%, rgba(var(--ink-rgb), 0) 75%);
}

.first-run-atmosphere-orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: var(--rd-radius-pill);
  opacity: 0.25;
  filter: blur(18px);
}

.first-run-atmosphere .orb-a {
  inset-block-start: -220px;
  inset-inline-start: -140px;
  background: radial-gradient(circle at 30% 30%, rgba(var(--amethyst-rgb), 0.34), rgba(var(--amethyst-rgb), 0) 62%);
}

.first-run-atmosphere .orb-b {
  inset-block-start: 40px;
  inset-inline-end: -240px;
  background: radial-gradient(circle at 30% 30%, rgba(var(--ember-rgb), 0.26), rgba(var(--ember-rgb), 0) 62%);
}

/* The readability wash. Heavier than welcome's, because these pages set body copy, form
   controls and card text over the image rather than one hero paragraph. */
.first-run-atmosphere-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 700px at 55% 12%, rgba(var(--parchment-rgb), 0.06) 0%, rgba(var(--parchment-rgb), 0) 60%),
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.74) 0%, rgba(var(--ink-rgb), 0.9) 40%, rgba(var(--ink-rgb), 0.94) 100%);
}

/* The catalogue's quiet variant: same field, no ornament. A shelf you work is not a hero. */
.first-run-atmosphere.is-quiet .first-run-atmosphere-image { opacity: 0.45; }
.first-run-atmosphere.is-quiet .first-run-atmosphere-grid,
.first-run-atmosphere.is-quiet .first-run-atmosphere-orb { display: none; }

/* Page content sits above the field. */
.first-run-page {
  position: relative;
  z-index: 1;
}

/* Cards and panels are drawn on --rd-surface, which is opaque and would read as a hole
   punched in the field. Over the atmosphere they take the same surface at 88%, so the world
   shows through the leaf without the type losing its ground. */
.first-run-page .reader-card,
.first-run-page .reader-panel {
  background-color: rgba(var(--bg-card-rgb), 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.first-run-page .reader-card:hover {
  background-color: rgba(var(--bg-card-rgb), 0.96);
}

/* ---------------------------------------------------------------------------
 * 2. WELCOME'S HERO DEVICES
 * ------------------------------------------------------------------------ */

/* The kicker pills from welcome's hero. */
.first-run-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rd-space-2);
  margin-block-end: var(--rd-space-3);
}

.first-run-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--rd-space-2);
  padding: 5px var(--rd-space-3);
  border-radius: var(--rd-radius-pill);
  font-family: var(--rd-font-ui);
  font-size: var(--rd-text-md);
  font-weight: var(--rd-weight-semi);
  letter-spacing: var(--rd-tracking-ui);
  background: linear-gradient(135deg, rgba(var(--amethyst-rgb), 0.18), rgba(var(--ember-rgb), 0.14));
  border: 1px solid var(--rd-amethyst-line);
  color: var(--rd-text);
}

.first-run-pill i { font-size: 0.85em; color: var(--amethyst); }

.first-run-pill--subtle {
  background: var(--rd-surface-raised);
  border-color: var(--rd-rule);
  color: var(--rd-text-muted);
}

.first-run-pill--subtle i { color: var(--rd-text-dim); }

/* welcome's .hero-title-accent: the product's one gradient-clipped text moment, kept to one
   element per screen. Amethyst -> ember is the brief's two accents, in its order. */
.first-run-accent {
  display: block;
  background: linear-gradient(135deg, var(--amethyst), var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* The first-run headline runs one step larger than a routine reader page header: this is
   the screen that has to hold the eye welcome just caught. */
.first-run-hero .reader-page-header__title,
.first-run-hero.reader-page-header .reader-page-header__title {
  font-size: var(--rd-display-lg);
}

@media (max-width: 600px) {
  /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
     the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
     fallback for browsers that cannot parse the dynamic unit. */
  :root {
    --fr-slice-h: clamp(220px, 34vh, 360px);
    --fr-slice-h: clamp(220px, 34dvh, 360px);
  }

  .first-run-atmosphere-orb { width: 320px; height: 320px; }
}