/* ============================================================
   THE PRIMAL ORACLE — animal.html page styles
   Page-specific only. The design system lives in oracle.css;
   this file reuses its variables, .btn, .card, .gate, .gates,
   .stoneList, .eyebrow, .wrap, .duo, .shareBox.
   ============================================================ */

/* ---- date-form fallback (mirrors .reader spacing) ---- */
.animalForm{margin:60px auto}

/* ---- hero ---- */
.aHero{padding:54px 0 20px; text-align:center}
.aHero .eyebrow{display:block; margin-bottom:18px}

.halves{display:flex; align-items:center; justify-content:center; gap:clamp(18px,5vw,54px); margin:6px 0 26px; flex-wrap:wrap}
.halves .half{display:flex; flex-direction:column; align-items:center; gap:6px; min-width:120px}
.halves .mark{font-family:var(--serif); font-size:clamp(3rem,9vw,4.6rem); line-height:1;
  color:var(--moon); text-shadow:0 0 40px rgba(245,236,210,.25)}
.halves .mark.glyph{color:var(--brass)}
.halves .halfName{font-family:var(--serif); font-size:1.5rem; color:var(--ivory); letter-spacing:.3px}
.halves .halfSub{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.halves .amp{font-family:var(--serif); font-size:2.2rem; color:var(--brass); opacity:.8; align-self:center}

.bigName{font-size:clamp(3rem,11vw,7rem); color:var(--moon); margin:6px 0 10px;
  text-shadow:0 0 50px rgba(245,236,210,.25); animation:rise .9s ease both}
.aHero .essence{font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--brass-bright);
  max-width:34ch; margin:0 auto}

/* ---- section rhythm ---- */
.aSection{padding:48px 0 0; border-top:1px solid var(--line); margin-top:54px}
.aSection > .eyebrow{display:block; margin-bottom:8px}
.aSection h2{color:var(--moon); margin-bottom:10px}
.aSection .lede{text-align:left; margin:0 0 24px}
.aSection .gates{margin-top:8px}

/* ---- match lines ---- */
.matchLines{list-style:none; margin:0; padding:0; display:grid; gap:10px; max-width:64ch}
.matchLines li{display:flex; gap:16px; align-items:baseline; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 18px}
.matchLines .lab{font-family:var(--serif); color:var(--brass-bright); font-size:1.12rem;
  flex:0 0 150px; letter-spacing:.3px}
.matchLines .bod{color:#cfcfe0; font-size:.96rem; flex:1 1 220px}

@media(max-width:560px){
  .matchLines .lab{flex-basis:100%}
}

/* ---- share message ---- */
#shareSection .msg{margin-top:12px}

/* ============================================================
   PHASE 7 — animal-page reveal choreography (doc 04, section 2.4)
   ------------------------------------------------------------
   The generated profile pages (build/generate-pages.mjs) render the
   hero (.pf-hero), the reading sections (.pf-section), the hero sigil
   (.pf-sigil), and the Phase 6 descent module (.pf-descent, itself a
   .pf-section). The build stamps a document-order index custom
   property `--i: N` on the hero and every major .pf-section so a
   gentle scroll-driven staggered entrance can key off it.

   Contract honored here (doc 10, section 3e):
   1. JS OFF / no build change: content is fully present and visible.
      Nothing below sets opacity:0 outside the enhancement guard, so
      the default rendering shows every section at rest.
   2. Unsupported: the stagger lives inside
      @supports (animation-timeline: view()). Browsers without
      scroll-driven animations skip the whole block and show static,
      fully visible sections.
   3. prefers-reduced-motion: reduce: the enhancement is additionally
      gated behind @media (prefers-reduced-motion: no-preference), and
      an explicit reduce block forces the end state (opacity:1, no
      transform, no draw-on). Motion is off; content is intact.
   4. Keyboard operable: this is decorative entrance only; it changes
      nothing about focus, tab order, or reachability.
   5. AA contrast / no color-only meaning: colors are token-only and
      unchanged by the animation (only opacity and transform move).
   6. No INP/CLS: scroll-driven animations run on the compositor with
      no scroll listener; the end state matches static layout, so no
      space reflows (no CLS) and the main thread stays free (no INP).
   Token colors only; no hard-coded hex.
   ============================================================ */

/* Enhancement layer: only where scroll-driven animations exist AND
   the visitor has not asked for reduced motion. Everything inside is
   purely additive over the already-visible static page. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Staged section entrance. Each section rises and fades in as it
       scrolls into view; --i (set in the built HTML) offsets the start
       of its range so sections cascade rather than move in lockstep.
       We animate from the hidden state to the resting (natural) state,
       so if the timeline never advances the section still ends visible
       is NOT relied upon: instead we scope this only inside the guard,
       and the un-guarded default keeps sections visible. */
    .pf-hero,
    .pf-section {
      animation: pf-section-rise linear both;
      animation-timeline: view();
      /* start a touch later for each subsequent section for a soft
         cascade; clamp so deep sections do not stall off-screen. */
      animation-range: entry calc(4% + min(var(--i, 0) * 2%, 24%))
                       cover  calc(28% + min(var(--i, 0) * 2%, 24%));
    }

    /* The hero should be settled almost immediately on load (it is at
       or near the top), so give it a shorter, earlier range. */
    .pf-hero {
      animation-range: entry 0% entry 100%;
    }

    @keyframes pf-section-rise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }

    /* Hero sigil draw-on and fade. The sigil strokes trace on and the
       whole mark fades up as the hero settles. Uses only transform,
       opacity and stroke-dashoffset, all compositor/paint-cheap. */
    .pf-hero .pf-sigil {
      animation: pf-sigil-in 1.1s cubic-bezier(.22, 1, .3, 1) both;
    }
    .pf-hero .pf-sigil circle[stroke] {
      stroke-dasharray: 340;
      stroke-dashoffset: 340;
      animation: pf-sigil-draw 1.4s ease .15s both;
    }
    @keyframes pf-sigil-in {
      from { opacity: 0; transform: scale(.92) rotate(-4deg); }
      to   { opacity: 1; transform: none; }
    }
    @keyframes pf-sigil-draw {
      to { stroke-dashoffset: 0; }
    }
  }
}

/* Explicit reduced-motion end state. Even though the enhancement is
   gated above, we assert the resting state here so any inherited or
   future motion on these elements is neutralized when reduce is asked
   for. Content and its final appearance are guaranteed. */
@media (prefers-reduced-motion: reduce) {
  .pf-hero,
  .pf-section,
  .pf-hero .pf-sigil,
  .pf-hero .pf-sigil circle[stroke] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ============================================================
   THE PSYCHIC READING (veiled layer) — additive only.
   Markup comes from build/generate-pages.mjs (psychicSection);
   the full text is always in the served HTML. js/psychic-veil.js
   adds .is-veiled + the Part-the-veil affordance only when JS is
   live, so no-JS users and crawlers always read everything. The
   card itself is .glow-card.glow-card--marquee (skin.css owns the
   glow + shimmer, with its own reduced-motion guard); the rules
   below own only the psychic-specific typography and the veil.
   ============================================================ */
.pf-psy-tagline{font-family:var(--mono, "Space Mono", ui-monospace, monospace);
  font-size:.82rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--moon); margin:0 0 6px}
.pf-psy-cycle{font-family:var(--mono, "Space Mono", ui-monospace, monospace);
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px}
.pf-psy-card{border-radius:14px; padding:24px 26px; margin-top:4px}
.pf-psy-body h3{font-family:var(--serif); color:var(--brass-bright);
  font-size:1.15rem; margin:22px 0 8px}
.pf-psy-body h3:first-child{margin-top:0}
.pf-psy-body p{color:var(--body); margin:0 0 14px; line-height:1.7}
.pf-psy-body p:last-child{margin-bottom:0}
.pf-psy-closing{font-family:var(--serif); font-style:italic; color:var(--ivory)}

/* ---- the veil (same contract as the homepage unlock cards):
   full text at rest; .is-veiled clips to a shallow teaser, blurred
   and dimmed behind a soft fade; clicking parts it. ---- */
.pf-psy-card.is-veiled{cursor:pointer}
.pf-psy-body{
  max-height:400em;              /* generous rest bound so the veil can clip */
  overflow:hidden;
  transition:filter .5s ease, opacity .5s ease, max-height .5s ease;
}
.pf-psy-card.is-veiled .pf-psy-body{
  filter:blur(5px);
  opacity:.45;
  max-height:7.5em;              /* a few ghosted lines under the veil */
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 92%);
  mask-image:linear-gradient(180deg, #000 20%, transparent 92%);
  user-select:none;
}
.pf-psy-reveal{
  display:none;
  margin-top:12px;
  padding:8px 18px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--brass-bright);
  font-family:var(--mono, "Space Mono", ui-monospace, monospace);
  font-size:.68rem;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.pf-psy-card.is-veiled .pf-psy-reveal{display:inline-block}
.pf-psy-reveal:hover,
.pf-psy-reveal:focus-visible{
  border-color:var(--brass);
  box-shadow:0 0 14px rgba(214,193,140,.25);
  color:var(--moon);
}
@media (prefers-reduced-motion: reduce){
  .pf-psy-body{transition:none}
  .pf-psy-reveal{transition:none}
}

/* Cross-page view transitions (doc 04, section 2.6). The @view-transition
   at-rule is emitted inline by the generator so navigation between the
   menagerie grid and an animal page can morph the shared sigil
   (view-transition-name: sigil-<slug>, stamped on the hero sigil in the
   build). The reduced-motion kill switch for ::view-transition-group /
   -old / -new lives centrally in view-transitions.css (injected sitewide
   by apply-assets), so it is intentionally NOT duplicated here to avoid
   two files owning the same reduce rule. */