/* ==========================================================================
   Atmosphere.

   The lair taught the homepage how to feel like a place. This is that vocabulary,
   pulled out so every other page can speak it — rather than each one inventing
   its own idea of "mystical" and the site ending up as eight different websites.

   THE RULES IT OBEYS
   ------------------
   The background stays Warm Parchment. Always. No black, no charcoal, no dark
   mode (CLAUDE.md §4). So the mystery comes from LIGHT — a warm pool of gold on a
   parchment page, the way an illuminated manuscript glows.

   Gold is the light. It is never the ink.

   A dragon's colour lives in a border, a rule, an aura, a glow. Never in a
   letter: six of the seven fail WCAG AA as text on parchment.

   And every single thing in this file is decoration in the strict sense. Turn all
   of it off — every animation, every glow — and the page still reads, still
   converts, still works on a keyboard. That is the bar. Under
   prefers-reduced-motion nothing moves and nothing is lost.
   ========================================================================== */

/* --- The page takes a colour -----------------------------------------------
   Set --page-color on a page wrapper and the whole page warms to it. A dragon's
   page glows in their colour; everything else glows gold.

   Registered so it interpolates — a page that changes hue mid-scroll should warm,
   not snap.
   -------------------------------------------------------------------------- */

@property --page-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #b89045;
}

:root {
  --page-color: var(--color-gold);
}

/* --- Aura ------------------------------------------------------------------
   A pool of light behind a section. The single most useful thing in this file:
   drop it on any hero and the page stops looking like a document.
   -------------------------------------------------------------------------- */

.aura {
  position: relative;
  isolation: isolate;
}

/* The glow.

   It used to be inset -15% horizontally so it could fall off past the edge of the
   section — which also pushed it past the edge of the DOCUMENT, and the whole page
   scrolled sideways into a strip of nothing.

   The first fix was `overflow: clip` on .aura. That stopped the scrolling and
   introduced something worse: the gradient got sliced off dead at the section
   boundary, leaving a visible horizontal BAND across the page where the light just
   stopped. A hard edge is more obvious than a soft one is beautiful.

   So the glow simply does not spill sideways any more. It still bleeds vertically
   — which is where you want it, because that is what makes one section melt into
   the next — and vertical bleed cannot scroll a page horizontally. */
.aura::before {
  content: "";
  position: absolute;
  inset: -30% 0 -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    50% 42% at 50% 38%,
    color-mix(in srgb, var(--page-color) 20%, transparent) 0%,
    color-mix(in srgb, var(--page-color) 8%, transparent) 42%,
    transparent 72%
  );
}

/* A softer one, for sections further down a page that should breathe without
   competing with the hero. */
.aura--soft::before {
  inset: -12% 0;
  background: radial-gradient(
    60% 50% at 50% 50%,
    color-mix(in srgb, var(--page-color) 10%, transparent) 0%,
    transparent 70%
  );
}

/* --- Seal ------------------------------------------------------------------
   The circular emblem. Tara wears one on the homepage; a dragon wears one on
   their page; a crest tier wears a small one. One component, three sizes.
   -------------------------------------------------------------------------- */

.seal {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--seal-size, 96px);
  height: var(--seal-size, 96px);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 38%,
    var(--color-surface) 0%,
    var(--color-bg) 72%
  );
  border: 2px solid var(--page-color);
  font-size: calc(var(--seal-size, 96px) * 0.42);
  line-height: 1;
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--page-color) 10%, transparent),
    0 0 36px color-mix(in srgb, var(--page-color) 32%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--page-color) 10%, transparent);
}

/* THE ART DOES NOT AGREE ABOUT ITS OWN SHAPE, AND THIS IS WHERE THAT BITES.

   Kate's dragons arrived in three aspect ratios: 1024x1024, 1536x1024, and
   1024x1536. The tall ones are the problem.

   `height: 100%` inside a grid whose row is content-sized has nothing definite to
   resolve against, so it silently falls back to `auto` — and a 2:3 portrait at
   80px wide is 120px tall. It overflowed the seal by 36px, and because
   `border-radius: 50%` on an 80x120 box describes an ELLIPSE rather than a circle,
   it did not even clip itself on the way out. Four dragons hung out of their own
   emblems and over their own names. The three square ones fitted by luck, which is
   exactly why it looked like an art problem rather than a CSS one.

   `aspect-ratio: 1` makes the box square whatever the source is, and `overflow:
   hidden` on the seal means nothing can escape it again — including whatever shape
   the next illustration arrives in. */
.seal {
  overflow: hidden;
}

.seal img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  /* Full-body portraits. A dead-centre crop frames the belly and cuts the head
     off; bias upward and the circle holds the face. */
  object-position: 50% 28%;
}

/* Tara's horns and face sit at the top of her portrait; her background is now
   transparent, so the seal gradient shows behind her. `.seal--top` (added by
   includes/seal.html for the overseer) just biases the crop up to hold her head. */
.seal--top img {
  object-position: 50% 12%;
}

.seal--lg {
  --seal-size: 132px;
}

.seal--sm {
  --seal-size: 56px;
}

/* Breathing. Slow, and only on the one seal that is the subject of the page —
   never on a grid of them, which would read as a fairground. */
.seal--alive {
  animation: seal-breathe 7s var(--ease) infinite;
}

@keyframes seal-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 7px color-mix(in srgb, var(--page-color) 10%, transparent),
      0 0 36px color-mix(in srgb, var(--page-color) 30%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--page-color) 10%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 13px color-mix(in srgb, var(--page-color) 6%, transparent),
      0 0 58px color-mix(in srgb, var(--page-color) 46%, transparent),
      inset 0 0 24px color-mix(in srgb, var(--page-color) 16%, transparent);
  }
}

/* --- Page hero -------------------------------------------------------------
   Centred, generous, and it always leads with something round. Every page in
   this world opens the same way: a seal, a word, a headline, a promise.
   -------------------------------------------------------------------------- */

.page-hero {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
  padding-block: var(--space-16) var(--space-12);
  text-align: center;
}

.page-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.page-hero__title {
  max-width: 18ch;
}

.page-hero__lede {
  max-width: 48ch;
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-soft);
}

.page-hero__vow {
  font-family: var(--font-accent);
  font-size: var(--text-2xl);
  line-height: 1.3;
  color: var(--color-text-soft);
  max-width: 30ch;
}

/* A large plain statement. NOT a vow.

   A vow is the dragon speaking, and a dragon speaking may be handwritten. A
   statement is the reader's own life described back to them — "food stopped being
   fuel and became a verdict on your character" — and they have to be able to READ
   it. That is information, and information is never handwriting (CLAUDE.md §4). */
.page-hero__statement {
  max-width: 32ch;
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

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

@media (min-width: 768px) {
  .page-hero {
    padding-block: var(--space-20) var(--space-16);
  }
}

/* --- Rune divider ----------------------------------------------------------
   A line that ends in a glyph. Used to break a long page into chapters without
   shouting about it.
   -------------------------------------------------------------------------- */

/* A rune usually sits INSIDE a .section, which already has --section-gap of
   padding on it. Giving the rune the same margin again stacked two full gaps on
   top of each other, which is where those dead voids between sections came from. */
.rune {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-10);
  color: var(--color-text-faint);
}

.rune::before,
.rune::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--page-color) 45%, transparent),
    transparent
  );
}

.rune__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--page-color) 50%, transparent);
  font-size: 0.9rem;
  line-height: 1;
  overflow: hidden;
}

/* A rune divider can now hold a dragon's face instead of the 🐉 emoji. Clip it to
   the little circle exactly like the seals do. */
.rune__mark img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 26%;
}

/* --- Motes -----------------------------------------------------------------
   Reused from the lair. Slow enough that you are not sure they are moving until
   you stop looking at them — which is the line between atmosphere and a
   screensaver.
   -------------------------------------------------------------------------- */

.motes {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.motes span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--page-color);
  opacity: 0;
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--page-color) 40%, transparent);
  animation: mote-drift 20s linear infinite;
}

@keyframes mote-drift {
  0% {
    transform: translateY(30px) scale(0.6);
    opacity: 0;
  }
  18% {
    opacity: 0.45;
  }
  82% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-140px) scale(1);
    opacity: 0;
  }
}

.motes span:nth-child(1) { left: 10%; top: 72%; animation-delay: 0s; animation-duration: 21s; }
.motes span:nth-child(2) { left: 27%; top: 86%; animation-delay: -5s; animation-duration: 25s; }
.motes span:nth-child(3) { left: 44%; top: 78%; animation-delay: -11s; animation-duration: 19s; }
.motes span:nth-child(4) { left: 61%; top: 90%; animation-delay: -3s; animation-duration: 23s; }
.motes span:nth-child(5) { left: 78%; top: 74%; animation-delay: -15s; animation-duration: 27s; }
.motes span:nth-child(6) { left: 90%; top: 84%; animation-delay: -8s; animation-duration: 20s; }

/* --- Reveal ----------------------------------------------------------------
   Sections rise as you reach them. reveal.js adds .is-visible when a thing
   enters the viewport.

   The starting state is set by a CLASS, not by the stylesheet alone, and the
   class is only added by the script. That matters: if the JS never runs — it
   fails, it is blocked, the browser is ancient — the content is simply visible.
   Content that is invisible until JavaScript rescues it is not a nice touch, it
   is a page that does not work.
   -------------------------------------------------------------------------- */

.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms var(--ease),
    transform 700ms var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger the children of a revealed group. */
.js-reveal .reveal-group > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease);
}

.js-reveal .reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js-reveal .reveal-group.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.js-reveal .reveal-group.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.js-reveal .reveal-group.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.js-reveal .reveal-group.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.js-reveal .reveal-group.is-visible > *:nth-child(6) { transition-delay: 450ms; }
.js-reveal .reveal-group.is-visible > *:nth-child(7) { transition-delay: 540ms; }

/* --- Dragon-themed pages ---------------------------------------------------
   A dragon's page sets --page-color to their hex on the wrapper, and everything
   in this file follows: the aura, the seal, the runes, the motes.

   Their colour never touches a letter.
   -------------------------------------------------------------------------- */

.themed {
  --page-color: var(--dragon-color, var(--color-gold));
}

/* A quiet inset panel, tinted by whoever's page it is. */
.panel {
  padding: var(--card-pad);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--page-color);
}

.panel > * + * {
  margin-top: var(--space-3);
}

.panel--glow {
  border: 1px solid color-mix(in srgb, var(--page-color) 40%, transparent);
  background:
    radial-gradient(
      80% 100% at 50% 0%,
      color-mix(in srgb, var(--page-color) 8%, transparent),
      transparent 70%
    ),
    var(--color-surface);
}

/* --- The perfectionism panel -----------------------------------------------
   Every dragon carries a pitfall and a reframe (CLAUDE.md §4). It is the most
   important content on a dragon's page and it should not look like a footnote.
   -------------------------------------------------------------------------- */

.reframe {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .reframe {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }
}

.reframe__side {
  padding: var(--card-pad);
  border-radius: var(--radius-md);
}

.reframe__side--pitfall {
  background: var(--color-surface-sunk);
  border: 1px dashed var(--color-line-strong);
}

.reframe__side--truth {
  background:
    radial-gradient(
      100% 100% at 50% 0%,
      color-mix(in srgb, var(--page-color) 12%, transparent),
      transparent 75%
    ),
    var(--color-surface);
  border: 1px solid color-mix(in srgb, var(--page-color) 45%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--page-color) 14%, transparent);
}

.reframe__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-3);
}

/* --- Numbered steps --------------------------------------------------------
   For "how this works" sequences. A ring with a number in it, and a thread down
   the side connecting them.
   -------------------------------------------------------------------------- */

.steps-list {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding-left: var(--space-10);
}

.steps-list::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 17px;
  width: 2px;
  border-radius: var(--radius-full);
  background: linear-gradient(
    to bottom,
    var(--page-color),
    color-mix(in srgb, var(--page-color) 25%, transparent) 75%,
    transparent
  );
}

.steps-list > li {
  position: relative;
}

.steps-list > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: calc(-1 * var(--space-10) + 1px);
  top: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2px solid var(--page-color);
  box-shadow: 0 0 0 4px var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 700;
}

.steps-list {
  counter-reset: step;
}

/* --- Empty & quiet states --------------------------------------------------
   Nothing here yet should feel like the beginning of something, not a hole.
   -------------------------------------------------------------------------- */

.quiet {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
  text-align: center;
  border: 1px dashed color-mix(in srgb, var(--page-color) 40%, transparent);
  border-radius: var(--radius-lg);
  background: radial-gradient(
    70% 90% at 50% 0%,
    color-mix(in srgb, var(--page-color) 7%, transparent),
    transparent 70%
  );
}

/* --- Motion off ------------------------------------------------------------
   Everything above is decoration. None of it survives, and nothing is lost.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .seal--alive,
  .motes span {
    animation: none;
  }

  .motes {
    display: none;
  }

  .js-reveal .reveal,
  .js-reveal .reveal-group > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   R5 — de-boxing the page (Phase-1_revision_1).

   Kate: "it feels so boxy/rectangular. Maybe parchment dividers, soft watercolor
   edges, curved section transitions, subtle dragon-scale texture (that would be
   very cool)."

   Two things live here, both drawn from the foundation TOKENS (never one-off
   hexes), so if the palette ever changes again they re-theme themselves:
     1. a faint dragon-scale texture across the whole page,
     2. a soft curved divider you can drop at the top of any section.

   Both are decoration. Neither touches contrast (the texture sits at ~4% behind
   an opaque page) and neither can scroll the page sideways (the texture is fixed;
   the divider is clipped to its section).
   ========================================================================== */

/* The scale. Two offset rings of the faintest gold build an overlapping
   fish-scale field — the "dragon-scale texture," kept so low it reads as grain,
   not pattern. Fixed, behind everything, and gone under reduced-motion-nothing:
   it is static, so it simply stays. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle at 50% 120%,
      transparent 58%,
      color-mix(in srgb, var(--color-gold) 22%, transparent) 60%,
      transparent 63%
    ),
    radial-gradient(
      circle at 50% 120%,
      transparent 58%,
      color-mix(in srgb, var(--color-gold) 22%, transparent) 60%,
      transparent 63%
    );
  background-size: 40px 34px;
  background-position: 0 0, 20px 17px;
  opacity: 0.22;
}

/* A soft curved transition. Put `.wave-top` on a section and its upper edge
   becomes a shallow parchment curve instead of a hard rectangle — the section
   appears to well up out of the one above it. The curve is the section's own
   background colour (ivory by default, or set --wave-fill), masked to a gentle
   arc, so it works over any neighbour. */
.wave-top {
  position: relative;
}

.wave-top::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 48px;
  transform: translateY(-100%);
  pointer-events: none;
  background: var(--wave-fill, var(--color-bg));
  -webkit-mask: radial-gradient(120% 100% at 50% 0, transparent 69%, #000 70%);
  mask: radial-gradient(120% 100% at 50% 0, transparent 69%, #000 70%);
}