/* public/css/oracle-kit.css
   ───────────────────────────────────────────────────────────────
   oracle-ui-kit-v1 shared primitives. Loaded AFTER
   sacred-acid-tokens.css (which now also carries the kit's
   @font-face decls + the kit's type/spacing/radii vars).

   Holds the shared pieces every kit screen inherits: substrate
   layer + per-screen veils, the wordmark lockup, the eye sigil
   blend mode, type helpers (.eyebrow-gold, .ornament, .whisper),
   the chartreuse CTA pair, and the shared ring-dial rotation
   animation that's used on the Loader / Account / Library.

   Production screens are full-bleed black (no .device chrome,
   no .stage wrapper — those were preview-only in the kit).
   ─────────────────────────────────────────────────────────── */

/* ─── Substrate (photographic background layer) ─────────────── */
/* Use as: <div class="ok-substrate"><img src="…"><div class="ok-veil-home"></div></div>
   IMPORTANT — position: fixed (not absolute). The kit's intent is
   that the substrate stays STATIC while content scrolls over it.
   Because the parent .step toggles display:none/flex, only the
   active step's substrate paints at a time, so fixed positioning
   is safe across step switches. */
.ok-substrate {
  /* Anchored to the TOP of the page section, sized to one viewport's
     worth. Scrolls with the page — once the user scrolls past the
     substrate's hero area, it's gone and content sits on pure black.
     This is NOT position:fixed; fixed would re-paint the substrate
     at the top of the viewport on every scroll position, so newly-
     scrolled content would keep crossing through the substrate zone.
     Absolute + height:100vh keeps the substrate as a one-shot top-of-
     page atmosphere that exits cleanly. */
  position: absolute; top: 0; left: 0; right: 0;
  height: 100vh;
  /* iOS dynamic viewport — accounts for the address bar showing/
     hiding without the substrate clipping. */
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  /* Fade-to-black mask — substrate photograph stays visible in the
     upper ~50% of its own height (where the avatar/wordmark/hero
     content lives) and fades cleanly to transparent at its bottom
     edge so the seam between substrate and page-bg #000 is invisible.
     Applied to .ok-substrate (img + veil together) so they fade in
     lockstep. */
  mask-image: linear-gradient(180deg,
    #000 0%,
    #000 45%,
    rgba(0,0,0,0.65) 65%,
    rgba(0,0,0,0.25) 80%,
    transparent 95%);
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%,
    #000 45%,
    rgba(0,0,0,0.65) 65%,
    rgba(0,0,0,0.25) 80%,
    transparent 95%);
}
.ok-substrate img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  /* No global opacity override — kit treats each substrate per-screen.
     Per-screen opacities live in oracle-kit-screens.css; defaults
     here match the kit's source-of-truth values. */
}
/* Veils — kit values restored. The earlier over-darkened veils
   (paired with substrate opacity .55) made the photo barely
   visible, so the avatar's gold drop-shadow read as a concentrated
   gold haze instead of blending with the surrounding substrate. */
.ok-veil-home {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 65% at 50% 38%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.38) 30%, rgba(0,0,0,0.72) 75%, rgba(0,0,0,0.96) 100%);
}
.ok-veil-awake {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 36%, rgba(224,242,81,0.05) 0%, rgba(0,0,0,0.35) 75%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.28) 38%, rgba(0,0,0,0.72) 78%, rgba(0,0,0,0.97) 100%);
}
.ok-veil-loader {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.85) 100%);
}
.ok-veil-library {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.78) 50%, rgba(0,0,0,0.92) 100%);
}
.ok-veil-account {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.92) 100%);
}
.ok-veil-share {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0.92) 100%);
}

/* ─── Eye sigil ──────────────────────────────────────────────── */
/* CRITICAL: mix-blend-mode:screen is what lets the sigil sit on
   any substrate. Don't drop. */
.ok-sigil {
  display: block; height: auto;
  mix-blend-mode: screen;
  filter: contrast(1.04) drop-shadow(0 2px 18px rgba(0,0,0,0.85));
}

/* ─── Wordmark lockup — "the ORACLE" ────────────────────────── */
.ok-wordmark { text-align: center; line-height: 1; user-select: none; }
.ok-wordmark .mb {
  font-family: "The Silver Editorial", "Instrument Serif", serif;
  color: var(--rose); font-size: 29px; font-style: italic; letter-spacing: .06em;
}
.ok-wordmark .oracle {
  font-family: "Instrument Serif", serif;
  color: var(--oracle); font-size: 54px; letter-spacing: .30em;
  margin-top: 5px; padding-left: .30em;
}
/* Smaller variant for the Share card header */
.ok-wordmark--sm .mb     { font-size: 16px; }
.ok-wordmark--sm .oracle { font-size: 29px; margin-top: 3px; }

/* Extra-small variant for the Library top bar — fits between the
   hamburger menu button and the avatar circle in the 375-393px-wide
   phone frame. Tightened letter-spacing on .oracle since at this size
   the wide kit value reads as airy. */
.ok-wordmark--xs .mb     { font-size: 10px; line-height: 1; }
.ok-wordmark--xs .oracle { font-size: 17px; letter-spacing: 0.18em; margin-top: 2px; padding-left: 0; }

/* ─── Type helpers ──────────────────────────────────────────── */
.ok-eyebrow-gold {
  color: var(--gold); font-size: 9px; font-weight: 600;
  letter-spacing: .36em; text-transform: uppercase;
}
.ok-whisper {
  font-family: "The Silver Editorial", serif; font-style: italic;
  color: var(--moonstone); text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.ok-whisper .accent { color: var(--rose); }

/* Ornament: hairline — ✦ ✦ ✦ — hairline */
.ok-ornament { display: flex; align-items: center; gap: 10px; }
.ok-ornament .rule { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,169,109,0.4) 50%, transparent); }
.ok-ornament .glyphs { color: var(--gold); font-family: "The Silver Editorial", serif; font-size: 11px; letter-spacing: .3em; }

/* ─── CTAs ──────────────────────────────────────────────────── */
.ok-cta-fill, .ok-cta-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase;
  text-decoration: none;
  transition: transform 200ms ease, box-shadow 240ms ease, background 240ms ease;
}
.ok-cta-fill {
  padding: 14px 22px; font-size: 12px; letter-spacing: .32em;
  background: linear-gradient(180deg, #E0F251 0%, #C2D33D 100%);
  border: 1px solid var(--oracle); color: #0B0A0A;
  box-shadow: 0 0 32px -8px rgba(224,242,81,0.5);
}
.ok-cta-fill:hover { transform: translateY(-1px); }
.ok-cta-ghost {
  padding: 14px 24px; font-size: 10.5px; letter-spacing: .18em;
  background: transparent; border: 1px solid var(--oracle); color: var(--oracle);
}
.ok-cta-ghost:hover {
  background: rgba(224,242,81,0.07);
  box-shadow: 0 0 28px rgba(224,242,81,0.25);
  transform: translateY(-1px);
}

/* ─── Shared ring-dial rotation ─────────────────────────────── */
/* The cosmological-ring SVG appears on multiple kit screens
   (Loader, Account avatar halo, Library watermark). Per SPEC
   note #5, the slow rotation should be consistent everywhere
   the ring appears — one motion definition, applied wherever
   the .ok-ring--spin class lands.
   prefers-reduced-motion disables rotation globally. */
.ok-ring--spin { transform-origin: 50% 50%; animation: ok-ring-spin 120s linear infinite; }
.ok-ring--spin-rev { transform-origin: 50% 50%; animation: ok-ring-spin 90s linear infinite reverse; }
@keyframes ok-ring-spin { to { transform: rotate(360deg); } }

/* Loader-specific pulse rings used inside the same diagram */
.ok-pulse-ring   { transform-origin: 50% 50%; animation: ok-pulse 3.6s ease-out infinite; }
.ok-pulse-ring-2 { transform-origin: 50% 50%; animation: ok-pulse 3.6s ease-out infinite; animation-delay: 1.8s; }
@keyframes ok-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(5);   opacity: 0;  }
}

@media (prefers-reduced-motion: reduce) {
  .ok-ring--spin, .ok-ring--spin-rev,
  .ok-pulse-ring, .ok-pulse-ring-2 { animation: none; }
}