/* Angira Oracle Console — services hero intelligence card.
   Pure SVG + CSS hologram. Theme: deep peacock glass + gold hairlines + vermilion core.
   Scoped to oracle-console and oc- prefixed selectors — zero coupling with existing page CSS. */

/* ── 1 · Hero grid integration (additive) ─────────────────────────────────
   Left = existing journey-hero__content (byte-identical text).
   Right = Oracle Console. Class is new; nothing existing is targeted. */
.journey-hero__grid--oracle {
    position: relative;
    z-index: 1;                    /* hero ::after ring stays behind */
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(430px, .98fr);
    gap: clamp(36px, 5vw, 84px);
    align-items: center;
}
/* The old inline style="max-width:840px" moves here (identical rendering). */
.journey-hero__grid--oracle .journey-hero__content { max-width: 840px; }
.journey-hero__oracle { position: relative; min-width: 0; }

/* ── 2 · Component tokens + entrance ────────────────────────────────────── */
.oracle-console {
    /* card-local palette (doc 02 §4) */
    --oc-gold:       #e9b96e;
    --oc-gold-soft:  rgba(233, 185, 110, .55);
    --oc-gold-faint: rgba(233, 185, 110, .22);
    --oc-glass-1:    rgba(15, 55, 60, .96);
    --oc-glass-2:    rgba(6, 30, 33, .99);
    --oc-text:       rgba(251, 248, 240, .86);
    --oc-text-dim:   rgba(251, 248, 240, .55);
    --oc-flame:      #e0674a;
    --oc-live:       #46e0a0;
    --oc-live-deep:  #12734a;
    --oc-ease:       cubic-bezier(.22, 1, .36, 1);

    position: relative;
    /* Default-finished (spec 03 §7 inversion): PHP renders the card visible.
       JS may replay the cascade by briefly removing .is-live on first desktop
       visit — never start hidden. This kills the FOUC hole and the
       "hero shook" reports. */
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--oc-ease), transform .6s var(--oc-ease);
}
.oracle-console.is-live { opacity: 1; transform: none; }
/* perspective exists ONLY during active tilt — a permanent 3D context on the
   wrapper can push children into rasterized 3D layers and soften text. */
.oracle-console.is-tilting { perspective: 1400px; }

.oracle-console__halo {
    position: absolute; inset: -6% -4%; z-index: 0; pointer-events: none;
    background: radial-gradient(closest-side, rgba(233,185,110,.16),
                rgba(224,103,74,.05) 55%, transparent 72%);
}

/* ── 3 · Glass panel + HUD frame ────────────────────────────────────────── */
.oracle-console__panel {
    position: relative; z-index: 1; overflow: hidden;
    border: 1px solid rgba(233, 185, 110, .30);
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(251, 248, 240, .09), transparent 16%),
        radial-gradient(120% 90% at 85% 0%, rgba(233,185,110,.10), transparent 42%),
        radial-gradient(90% 70% at 12% 100%, rgba(224,103,74,.08), transparent 46%),
        linear-gradient(168deg, var(--oc-glass-1), var(--oc-glass-2));
    /* layered depth: chamfer highlight (top inset), tight contact shadow,
       wide ambient shadow, and a warm ember under-glow — the card floats
       over embers instead of sitting flat on the page */
    box-shadow:
        inset 0 0 0 1px rgba(233,185,110,.10),
        inset 0 1px 0 rgba(251, 248, 240, .07),
        inset 0 0 46px rgba(4, 22, 24, .5),
        0 2px 6px rgba(3, 18, 20, .5),
        0 34px 90px rgba(3, 18, 20, .6),
        0 44px 90px -24px rgba(224, 103, 74, .16);
    /* No backdrop-filter: it forces the panel into an isolated raster layer
       and adds haze over everything inside. The glass look comes from the
       (now more opaque) gradient stack instead — crisper for the customer. */
}
/* Tilt is applied ONLY while the pointer is actively over the panel (JS adds
   .is-tilting). An always-on transform — even rotateX(0deg) — plus preserve-3d
   under perspective makes Chrome rasterize the panel and everything inside it
   as a 3D texture layer, which blurs text. Idle state must stay transform-free
   so type renders vector-sharp. */
.oracle-console.is-tilting .oracle-console__panel {
    transform: rotateX(var(--oc-rx, 0deg)) rotateY(var(--oc-ry, 0deg));
    transform-style: preserve-3d;
    will-change: transform;
}
/* crisp text rendering across the whole console */
.oracle-console__panel { text-rendering: optimizeLegibility; }
/* CRT scanline texture removed — the faint repeating veil sat on top of the
   readouts and softened them. Clarity first for the customer. */

/* corner brackets — 4 L-marks. Boot choreography: they start collapsed and
   draw out when JS adds .is-live (noscript forces the final size). The draw
   delay lives on the .is-live rule so hover growth stays instant. */
.oracle-console__frame i {
    position: absolute; z-index: 6; width: 0; height: 0;
    border: 0 solid var(--oc-gold-soft);
    transition: width .55s var(--oc-ease), height .55s var(--oc-ease),
                border-color .4s var(--oc-ease);
    pointer-events: none;
}
.oracle-console.is-live .oracle-console__frame i {
    width: 18px; height: 18px; transition-delay: .25s;
}
.oracle-console__frame i:nth-child(1) { top: 9px;    left: 9px;  border-top-width: 1.5px; border-left-width: 1.5px; }
.oracle-console__frame i:nth-child(2) { top: 9px;    right: 9px; border-top-width: 1.5px; border-right-width: 1.5px; }
.oracle-console__frame i:nth-child(3) { bottom: 9px; right: 9px; border-bottom-width: 1.5px; border-right-width: 1.5px; }
.oracle-console__frame i:nth-child(4) { bottom: 9px; left: 9px;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
/* diamond-set lugs — each bracket terminates in a 4px gold diamond at its
   corner vertex (doc 08 §5.7). Fades in after the bracket has drawn out. */
.oracle-console__frame i::after {
    content: ''; position: absolute; width: 4px; height: 4px;
    background: var(--oc-gold); transform: rotate(45deg);
    opacity: 0; transition: opacity .4s var(--oc-ease) .7s;
}
.oracle-console.is-live .oracle-console__frame i::after { opacity: 1; }
.oracle-console__frame i:nth-child(1)::after { top: -2px;    left: -2px; }
.oracle-console__frame i:nth-child(2)::after { top: -2px;    right: -2px; }
.oracle-console__frame i:nth-child(3)::after { bottom: -2px; right: -2px; }
.oracle-console__frame i:nth-child(4)::after { bottom: -2px; left: -2px; }

/* ── 4 · Status bar ─────────────────────────────────────────────────────── */
.oracle-console__top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px 12px;
    border-bottom: 1px solid rgba(233, 185, 110, .16);
}
.oracle-console__status {
    display: inline-flex; align-items: center; gap: 9px;
    min-width: 0; max-width: 100%;
    padding: 5px 13px 5px 9px;
    border: 1px solid rgba(233, 185, 110, .26);
    border-radius: 999px;
    background: linear-gradient(115deg, rgba(70, 224, 160, .10),
                rgba(233, 185, 110, .06) 65%, transparent);
    box-shadow: inset 0 1px 0 rgba(251, 248, 240, .05);
    color: var(--oc-text); font-family: var(--font-mono);
    font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    text-shadow: 0 0 16px rgba(233, 185, 110, .22);
    /* "ANGIRA JYOTISH INTELLIGENCE · ONLINE" is longer than the pill was
       tuned for — in the ~421-680px band the session/clock sibling is still
       visible and flex-competes for width, and without a wrap guard the pill
       text breaks onto a 2nd line (a rounded 999px pill has no graceful way
       to hold two lines). min-width:0 lets it actually shrink inside the
       flex row instead of just overflowing; nowrap+ellipsis is the fallback
       for whatever's left too narrow — better a clean truncation than a
       broken pill shape. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* live jewel — emerald core in a gold bezel, echoes the bindu-core glow
   language elsewhere in the console instead of a flat system-status dot */
.oracle-console__dot {
    position: relative; flex: 0 0 auto;
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #eafff4 0%, var(--oc-live) 42%, var(--oc-live-deep) 100%);
    box-shadow:
        0 0 0 1px rgba(233, 185, 110, .4),
        0 0 7px rgba(70, 224, 160, .85),
        0 0 16px rgba(70, 224, 160, .45);
    animation: oc-dot-pulse 2.6s ease-in-out infinite;
}
.oracle-console__dot::after {
    content: ''; position: absolute; inset: -6px;
    border-radius: 50%; border: 1px solid rgba(70, 224, 160, .4);
    animation: oc-dot-ring 2.6s var(--oc-ease) infinite;
}
.oracle-console__session {
    display: inline-flex; align-items: center; gap: 7px;
    color: var(--oc-text-dim); font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .22em;
}
/* house seal — the AJ monogram in a double gold ring, like a maker's mark */
.oracle-console__seal { width: 20px; height: 20px; flex: 0 0 auto; }
.oracle-console__seal text { font-family: var(--font-display); letter-spacing: 0; }
@keyframes oc-dot-pulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 1px rgba(233, 185, 110, .4),  0 0 7px rgba(70, 224, 160, .85), 0 0 16px rgba(70, 224, 160, .45); }
    50%      { transform: scale(1.15); box-shadow: 0 0 0 1px rgba(233, 185, 110, .55), 0 0 10px rgba(70, 224, 160, 1),  0 0 22px rgba(70, 224, 160, .7); }
}
@keyframes oc-dot-ring {
    0%   { transform: scale(.5); opacity: .7; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* ── 5 · Body grid + rails ──────────────────────────────────────────────── */
.oracle-console__body {
    display: grid;
    grid-template-columns: minmax(76px, auto) minmax(0, 1fr) minmax(76px, auto);
    gap: 10px; align-items: center;
    padding: 16px 18px 12px;
}
.oracle-console__rail { display: grid; gap: 14px; }
.oracle-console__rail--left  { justify-items: start; }
.oracle-console__rail--right { justify-items: end; text-align: right; }

/* rail plates — each readout sits on a small engraved plate: a gold hairline
   caps it and a faint wash suggests a recessed metal surface (doc 10 §6) */
.oracle-console__read {
    margin: 0; display: grid; gap: 3px;
    padding: 6px 10px 7px;
    border-top: 1px solid rgba(233, 185, 110, .22);
    background: linear-gradient(180deg, rgba(233, 185, 110, .05), rgba(233, 185, 110, 0) 72%);
}
.oracle-console__read span {
    /* .72 alpha (audit §7.4): .66 measured ~4.0:1 on #0f373c, under the 4.5:1
       AA bar for 9.5px labels. Bump the ink, never lighten the glass. */
    color: rgba(233, 185, 110, .72); font-family: var(--font-mono);
    font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.oracle-console__read b {
    color: var(--oc-text); font-family: var(--font-mono);
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* JS-cycled lord chain fades between values (doc 05 §3b) */
[data-oracle-chain] { transition: opacity .25s var(--oc-ease); }
/* JS-appended UTC readout in the session tag */
.oracle-console__utc { color: rgba(233, 185, 110, .6); font-variant-numeric: tabular-nums; }

/* ── 6 · Stage (engine-turned dial + hologram mount) ────────────────────── */
.oracle-console__stage {
    position: relative; width: min(100%, 380px); aspect-ratio: 1;
    margin-inline: auto; overflow: hidden; border-radius: 12px;
    /* A watch dial, not graph paper: concentric guilloché (engine-turned) +
       warm centre bloom + inner vignette. The old 0°/90° blueprint grid read
       as a cheap laptop-HUD, so it is gone (doc 08 §3.4). */
    background:
        radial-gradient(circle at 50% 50%, transparent 52%, rgba(4, 22, 24, .5) 100%),
        repeating-radial-gradient(circle at 50% 50%, rgba(233,185,110,.028) 0 1px, transparent 1px 24px),
        radial-gradient(circle at 50% 50%, rgba(224,103,74,.10), transparent 44%),
        linear-gradient(168deg, rgba(10, 40, 44, .9), rgba(5, 24, 27, .95));
    transition: transform .6s var(--oc-ease);
}
/* static starfield — tiny fixed stars behind the hologram */
.oracle-console__stage::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 16%, rgba(251,248,240,.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 24% 78%, rgba(251,248,240,.38) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 36% 30%, rgba(233,185,110,.45) 50%, transparent 51%),
        radial-gradient(1px 1px at 48% 12%, rgba(251,248,240,.32) 50%, transparent 51%),
        radial-gradient(1px 1px at 58% 84%, rgba(251,248,240,.36) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 68% 22%, rgba(233,185,110,.4) 50%, transparent 51%),
        radial-gradient(1px 1px at 78% 64%, rgba(251,248,240,.34) 50%, transparent 51%),
        radial-gradient(1px 1px at 86% 36%, rgba(251,248,240,.4) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 92% 82%, rgba(233,185,110,.36) 50%, transparent 51%),
        radial-gradient(1px 1px at 8% 52%, rgba(251,248,240,.28) 50%, transparent 51%),
        radial-gradient(1px 1px at 42% 92%, rgba(251,248,240,.3) 50%, transparent 51%),
        radial-gradient(1px 1px at 64% 48%, rgba(251,248,240,.24) 50%, transparent 51%);
}
.oracle-console__holo { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
/* Multi-layer hologram parallax — each depth drifts at its own rate during
   active tilt only (independent `translate` property, so it never fights the
   rotation animations, and it vanishes when .is-tilting is released so text
   returns to vector-sharp rendering). Core stays anchored (0.5×). */
.oracle-console.is-tilting .oc-ring--rashi { translate: calc(var(--oc-hx, 0px) * 1.0) calc(var(--oc-hy, 0px) * 1.0); }
.oracle-console.is-tilting .oc-ring--cusp  { translate: calc(var(--oc-hx, 0px) * 1.6) calc(var(--oc-hy, 0px) * 1.6); }
.oracle-console.is-tilting .oc-lotus       { translate: calc(var(--oc-hx, 0px) * 1.3) calc(var(--oc-hy, 0px) * 1.3); }
.oracle-console.is-tilting .oc-yantra      { translate: calc(var(--oc-hx, 0px) * 2.2) calc(var(--oc-hy, 0px) * 2.2); }
.oracle-console.is-tilting .oc-core        { translate: calc(var(--oc-hx, 0px) * 0.5) calc(var(--oc-hy, 0px) * 0.5); }

/* crystal — a domed sapphire over the dial (doc 10 §2): an inset gold fillet
   at the rim + a faint top specular, so the stage reads as a watch crystal
   rather than a flat screen. Pure overlay — pointer-events off, no blur. */
.oracle-console__crystal {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit;
    box-shadow:
        inset 0 0 0 1px rgba(233, 185, 110, .16),
        inset 0 1px 0 rgba(251, 248, 240, .09),
        inset 0 0 30px rgba(4, 22, 24, .30);
    background: linear-gradient(180deg, rgba(251, 248, 240, .06), transparent 20%);
}

/* ── 7 · SVG hologram styles ────────────────────────────────────────────── */
/* ── rings ──
   Restraint doctrine (spec 02 §6): still by default. The only allowed slow
   sky is the rashi ring at ≥180s, desktop, motion-allowed — and even that is
   optional. Cusp + lotus no longer rotate. */
.oc-ring { transform-box: view-box; transform-origin: 50% 50%; }
.oc-ring--cusp  { animation: none; }
.oc-lotus       { animation: none; }
@media (min-width: 1081px) and (prefers-reduced-motion: no-preference) {
    .oracle-console.is-live .oc-ring--rashi { animation: oc-rotate 180s linear infinite; }
    /* counter-rotation MUST match the ring's own 180s exactly, or the labels
       drift out of upright (net rotation = ring − counter). The old 140s was
       paired with the old 140s ring; the still/slow-sky cut retunes both. */
    .oracle-console.is-live .oc-t-counter   { animation: oc-rotate-rev 180s linear infinite; }
}

/* Boot choreography: hologram layers materialize one after another when JS
   adds .is-live (noscript + reduced-motion force full visibility). Opacity
   transitions only — never a persistent transform, so glyphs stay sharp.
   Timing = doc 09 §6: the fixed CASE (bezel → nakshatra) lands first, then the
   MOVEMENT (rashi → cusp → yantra → lotus → bindu), and the live Moon marker is
   set last, like a hand being fitted.
   Compressed ~2x from the original .9s/1.1s-delay version (doc 10 second
   follow-up): the outer card (.oracle-console, below) is fully visible by
   .9s with nothing but empty glass where the hologram belongs, since this
   inner cascade didn't finish until 2.0s (1.1s delay + .9s) — a full-second
   "shell with a black hole in the middle" window on every boot. It's a one-
   time flourish on a normal first visit, but this page's language toggle is
   a full server reload, so the whole card resets and replays this cascade
   from scratch every time — the empty-hologram window read as the card
   breaking/flashing rather than an intentional reveal. Shortened so the last
   layer resolves by ~1.0s instead of ~2.0s; same order, same relative
   rhythm, just faster. */
.oc-bezel, .oc-nakshatra, .oc-sky-moon, .oc-maker,
.oc-ring--rashi, .oc-ring--cusp, .oc-yantra, .oc-lotus, .oc-core {
    opacity: 0; transition: opacity .45s var(--oc-ease);
}
.oracle-console.is-live .oc-bezel       { opacity: 1; transition-delay: .08s; }
.oracle-console.is-live .oc-ring--rashi { opacity: 1; transition-delay: .14s; }
.oracle-console.is-live .oc-nakshatra   { opacity: 1; transition-delay: .20s; }
.oracle-console.is-live .oc-ring--cusp  { opacity: 1; transition-delay: .26s; }
.oracle-console.is-live .oc-yantra      { opacity: 1; transition-delay: .36s; }
.oracle-console.is-live .oc-lotus       { opacity: 1; transition-delay: .44s; }
.oracle-console.is-live .oc-core        { opacity: 1; transition-delay: .50s; }
.oracle-console.is-live .oc-sky-moon    { opacity: 1; transition-delay: .55s; }
.oracle-console.is-live .oc-maker       { opacity: 1; transition-delay: .55s; }

/* Repeat-within-session boot: JS (§5) adds .is-instant + .is-live together,
   forces a reflow, then drops .is-instant again — the same restart-cleanly
   pattern the click-burst handler uses. While present, every transition this
   entrance relies on (outer card fade/slide, this hologram cascade, corner
   brackets + their diamonds) is killed, so the whole card — case, rings,
   yantra, bindu, moon, frame — jumps straight to its finished state in one
   frame instead of replaying the ~1s cascade above. Steady-state loops (ring
   rotation, dot pulse, scan sweep, sheen…) aren't touched here, only the
   one-time entrance. */
.oracle-console.is-instant,
.oracle-console.is-instant .oc-bezel, .oracle-console.is-instant .oc-nakshatra,
.oracle-console.is-instant .oc-sky-moon, .oracle-console.is-instant .oc-maker,
.oracle-console.is-instant .oc-ring--rashi, .oracle-console.is-instant .oc-ring--cusp,
.oracle-console.is-instant .oc-yantra, .oracle-console.is-instant .oc-lotus,
.oracle-console.is-instant .oc-core,
.oracle-console.is-instant .oracle-console__frame i,
.oracle-console.is-instant .oracle-console__frame i::after {
    transition: none !important;
}

/* Labels counter-rotate against their ring so position orbits but the glyph
   itself stays upright. Without this the label's total on-screen angle is
   ring-rotation + its own static placement angle, sweeping through every
   angle over the cycle — rotated text is always anti-aliased softer than
   axis-aligned text, so all 24 zodiac/cusp labels read as permanently
   blurry. Same trick as the tilt/parallax guards above, applied to SVG text. */
.oc-t-counter {
    transform-box: fill-box; transform-origin: center;
    /* still by default (spec 04 §4.1): the ring is still, so the labels must
       be too. The desktop slow-sky media block above re-adds the exact
       counter-rotation (180s rev) only where the ring itself turns. */
    animation: none;
}

.oc-t-en {
    font-family: var(--font-mono); font-size: 11.5px; font-weight: 700;
    letter-spacing: .08em; fill: rgba(233, 185, 110, .8);
}
.oc-t-hi { display: none; }
html[lang="hi"] .oc-t-en { display: none; }
/* SVG <text> is display:inline by default. `display:block` yanks it out of the
   SVG rendering tree into a CSS layout box — Devanagari labels drift off-centre
   and node glyphs stop centring (doc 08 §3.1). Keep it inline. */
html[lang="hi"] .oc-t-hi {
    display: inline; font-family: var(--font-devanagari);
    font-size: 12px; fill: rgba(233, 185, 110, .82);
}
.oc-cusp-n {
    transform-box: fill-box; transform-origin: center;
    /* still (spec 04 §4.1): the cusp ring no longer rotates, so the numbers
       must not counter-rotate either — the old 180s spin made each 01–12
       digit turn in place (upside-down at 90s) inside a static ring. */
    animation: none;
    font-family: var(--font-mono); font-size: 10.5px;
    letter-spacing: .06em; fill: rgba(251, 248, 240, .55);
}

/* ── fixed CASE layers: chapter bezel, 27 nakshatra ticks, live Moon, maker
      legend. These do NOT spin — the case is still, the sky inside moves
      (doc 09 §3). Strokes/fills live inline in the SVG; here we only style the
      maker legend and give the live Moon disc a soft breathing glow. ── */
.oc-maker {
    font-size: 8px; font-weight: 600; letter-spacing: .32em;
    fill: rgba(233, 185, 110, .42);
}
html[lang="hi"] .oc-maker {
    font-family: var(--font-devanagari); font-size: 9px; letter-spacing: .18em;
    fill: rgba(233, 185, 110, .42);
}
/* maker honesty line 2 (spec 03 §2): yantra is a diagram, moon is live */
.oc-maker-sub { letter-spacing: .26em; }
html[lang="hi"] .oc-maker-sub { letter-spacing: .14em; }

/* ── AJ monogram in the bindu (spec 03 §5.1) — maker's mark, Latin both langs */
.oc-aj {
    font-family: var(--font-display);
    font-size: 11px; font-weight: 600;
    fill: #f7e3b0;
    letter-spacing: .08em;
}
/* the Moon's bright disc pulses gently — the sky is alive, but the marker
   itself never moves (position = true sidereal longitude, set by PHP) */
.oc-sky-moon circle + circle { animation: oc-moon-glow 4.2s ease-in-out infinite; }
@keyframes oc-moon-glow {
    0%, 100% { opacity: 1; }
    50%      { opacity: .62; }
}

/* ── yantra network ── */
.oc-edge { fill: none; stroke: rgba(233, 185, 110, .26); stroke-width: 1; }
.oc-edge--axis { stroke: rgba(224, 103, 74, .4); }

.oc-pulse {
    fill: none; stroke: #e9b96e; stroke-width: 1.4; stroke-linecap: round;
    stroke-dasharray: 5 95;              /* pathLength=100 normalized */
    stroke-dashoffset: 100;
    opacity: .4;
    animation: oc-flow 9s linear infinite;
    transition: opacity .5s var(--oc-ease), stroke-width .5s var(--oc-ease);
}
/* Chords stay dark at idle (spec 02 §6: one pulse path is enough).
   They wake on hover (fine pointer) and during the bindu burst. */
.oc-pulse--c1, .oc-pulse--c2, .oc-pulse--c3 { animation: none; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
    .oracle-console__panel:hover .oc-pulse--c1,
    .oracle-console__panel:hover .oc-pulse--c2,
    .oracle-console__panel:hover .oc-pulse--c3 {
        animation: oc-flow 5.5s linear infinite;
        opacity: .8;
    }
}

/* graha nodes are gem settings, not flat discs (doc 08 §5.4): a peacock-dark
   jewel with a gold bezel and a small spark highlight at the upper-left facet */
.oc-node .oc-node-gem {
    fill: url(#oc1NodeGem); stroke: rgba(233, 185, 110, .55); stroke-width: 1;
}
.oc-node .oc-node-spark { fill: #f7e3b0; opacity: .5; stroke: none; }
.oc-node text { font-family: var(--font-mono); font-size: 10px; font-weight: 700; fill: #e9b96e; }
html[lang="hi"] .oc-node .oc-t-hi { font-family: var(--font-devanagari); font-size: 9.5px; }

/* ── bindu core ──
   No scale-breathe (spec 02 §6 cut): the bindu is printed matter. */
.oc-core {
    transform-box: fill-box; transform-origin: center;
    animation: none;
}
.oc-core-pulse {
    fill: none; stroke: rgba(233, 185, 110, .5); stroke-width: 1; opacity: .25;
    transform-box: fill-box; transform-origin: center;
    animation: oc-core-pulse 3.4s cubic-bezier(.22, 1, .36, 1) infinite;
}
.oc-core-pulse--late { animation-delay: 1.7s; }

/* ── lotus aperture — petals present, still (spec 02 §6 cut). ── */
.oc-lotus { transform-box: view-box; transform-origin: 50% 50%; animation: none; }
.oc-lotus ellipse {
    fill: rgba(233, 185, 110, .06);
    stroke: rgba(233, 185, 110, .34); stroke-width: .9;
}

@keyframes oc-rotate     { to { transform: rotate(360deg); } }
@keyframes oc-rotate-rev { to { transform: rotate(-360deg); } }
@keyframes oc-flow       { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes oc-breathe    { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes oc-core-pulse {
    0%   { transform: scale(1);    opacity: .5; }
    100% { transform: scale(2.05); opacity: 0; }
}

/* ── 8 · Scan sweep + particles ─────────────────────────────────────────── */
/* CUT (spec 02 §6): radar sweep + gold dust are not this house. Nodes were
   removed from PHP; keep this rule for one release cycle so a stale cached
   HTML fragment cannot animate them back. */
.oracle-console__scan,
.oracle-console__particles,
.oracle-console__chip { display: none !important; }

.oracle-console__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* gold dust — flakes with a bright head, swaying as they rise, glinting */
.oracle-console__particles i {
    position: absolute; bottom: 6%; width: 3.5px; height: 3.5px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #f7e3b0, #e9b96e 55%, rgba(233,185,110,0));
    opacity: 0;
    animation: oc-rise linear infinite;
}
@keyframes oc-rise {
    0%   { transform: translate(0, 0);                opacity: 0; }
    8%   { opacity: .6; }
    30%  { transform: translate(4px, -100px); }
    52%  { opacity: .48; transform: translate(-3px, -180px); }
    78%  { opacity: .16; transform: translate(3px, -262px); }
    100% { transform: translate(-2px, -330px);        opacity: 0; }
}

/* twinkling stars — 3 slow breathes over the static CSS starfield */
.oracle-console__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.oracle-console__stars i {
    position: absolute; width: 2.5px; height: 2.5px; border-radius: 50%;
    background: #fbf8f0; opacity: .15;
    animation: oc-twinkle 4.2s ease-in-out infinite;
}
.oracle-console__stars i:nth-child(1) { top: 20%; left: 15%; }
.oracle-console__stars i:nth-child(2) { top: 70%; left: 80%; animation-delay: 1.4s; animation-duration: 5.2s; }
.oracle-console__stars i:nth-child(3) { top: 34%; left: 88%; animation-delay: 2.7s; animation-duration: 4.6s; }
@keyframes oc-twinkle {
    0%, 100% { opacity: .12; transform: scale(.8); }
    50%      { opacity: .65; transform: scale(1.25); }
}
/* deterministic stagger — no JS needed */
.oracle-console__particles i:nth-child(1)  { left: 8%;  animation-duration: 9s;    animation-delay: -1s; }
.oracle-console__particles i:nth-child(2)  { left: 16%; animation-duration: 12s;   animation-delay: -6s; }
.oracle-console__particles i:nth-child(3)  { left: 24%; animation-duration: 8s;    animation-delay: -3s; }
.oracle-console__particles i:nth-child(4)  { left: 33%; animation-duration: 11s;   animation-delay: -8s; }
.oracle-console__particles i:nth-child(5)  { left: 41%; animation-duration: 7.5s;  animation-delay: -2s; }
.oracle-console__particles i:nth-child(6)  { left: 50%; animation-duration: 13s;   animation-delay: -5s; }
.oracle-console__particles i:nth-child(7)  { left: 58%; animation-duration: 8.5s;  animation-delay: -7s; }
.oracle-console__particles i:nth-child(8)  { left: 66%; animation-duration: 10s;   animation-delay: -4s; }
.oracle-console__particles i:nth-child(9)  { left: 74%; animation-duration: 7s;    animation-delay: -1.5s; }
.oracle-console__particles i:nth-child(10) { left: 82%; animation-duration: 12.5s; animation-delay: -9s; }
.oracle-console__particles i:nth-child(11) { left: 90%; animation-duration: 9.5s;  animation-delay: -3.5s; }
.oracle-console__particles i:nth-child(12) { left: 95%; animation-duration: 11.5s; animation-delay: -6.5s; }

/* ── 9 · Terminal + caption ─────────────────────────────────────────────── */
.oracle-console__console {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 13px 18px 15px;
    border-top: 1px solid rgba(233, 185, 110, .16);
}
.oracle-console__prompt { color: var(--oc-flame); font-family: var(--font-mono); font-size: 12px; }
.oracle-console__line {
    flex: 1; margin: 0; min-width: 0;
    color: var(--oc-text); font-family: var(--font-mono);
    font-size: 13px; letter-spacing: .03em; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oracle-console__line.is-fading { opacity: 0; transition: opacity .3s var(--oc-ease); }
/* verified stamp — a small emerald ✓ struck when a terminal line completes */
.oracle-console__stamp {
    flex: 0 0 auto; font-family: var(--font-mono); font-style: normal;
    font-size: 11px; font-weight: 700; line-height: 1; color: var(--oc-live);
    text-shadow: 0 0 10px rgba(70, 224, 160, .5);
    opacity: 0; transform: scale(.5);
    transition: opacity .35s var(--oc-ease), transform .35s var(--oc-ease);
}
.oracle-console__stamp.is-on { opacity: 1; transform: scale(1); }
.oracle-console__caret {
    flex: 0 0 auto; width: 7px; height: 13px; background: #e9b96e;
    animation: oc-blink 1.1s steps(2, start) infinite;
}
@keyframes oc-blink { to { visibility: hidden; } }

/* caption as a museum plaque — hairline frame, rivet dots, engraved glass */
.oracle-console__caption {
    position: relative;
    max-width: 40ch; margin: 20px 6px 0 auto;
    padding: 11px 18px 12px;
    border: 1px solid rgba(233, 185, 110, .20);
    border-radius: 3px;
    background: linear-gradient(168deg, rgba(15, 55, 60, .55), rgba(6, 30, 33, .72));
    box-shadow: inset 0 1px 0 rgba(251, 248, 240, .05), 0 12px 30px rgba(3, 18, 20, .35);
    color: rgba(251, 248, 240, .62); font-family: var(--font-display);
    font-size: 13px; font-style: italic; line-height: 1.5; text-align: right;
}
.oracle-console__caption::before,
.oracle-console__caption::after {
    content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: rgba(233, 185, 110, .6);
}
.oracle-console__caption::before { top: 5px; left: 6px; }
.oracle-console__caption::after  { bottom: 5px; right: 6px; }

/* ── 10 · Floating truth chips ──────────────────────────────────────────── */
.oracle-console__chip {
    position: absolute; z-index: 3; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 12px; border: 1px solid rgba(233, 185, 110, .35); border-radius: 999px;
    background: rgba(7, 32, 35, .85); color: rgba(251, 248, 240, .85);
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    box-shadow: 0 10px 26px rgba(3, 18, 20, .35);
    /* fill-mode:backwards — chip--two/--three start their float on a delay
       (1.4s/2.8s below). Default fill-mode is `none`, which holds the chip
       at transform:none for that whole delay, then SNAPS to the first
       keyframe (translateY(-5px)) the instant the delay ends — a visible
       5px jump/twitch once the card has otherwise settled. `backwards`
       applies that first-keyframe value for the whole delay too, so the
       float starts smoothly from wherever it already was. */
    animation: oc-float ease-in-out infinite alternate backwards;
    /* magnetic pull — JS nudges --oc-mx/--oc-my toward the cursor.
       Independent `translate` property composes with the float animation's
       transform, so both run without fighting. */
    translate: var(--oc-mx, 0px) var(--oc-my, 0px);
    transition: translate .45s var(--oc-ease);
}
/* house jewel — a small gold diamond leading the chip text (doc 10 §9) */
.oracle-console__chip::before {
    content: ''; flex: 0 0 auto; width: 5px; height: 5px;
    background: var(--oc-gold); transform: rotate(45deg);
    box-shadow: 0 0 6px rgba(233, 185, 110, .6);
}
.oracle-console__chip--one   { top: -20px; left: -30px;  animation-duration: 7s; }
/* chip--two sits above the top-right corner — NOT over the right rail
   (old top:38%/right:-34px position collided with the LORD CHAIN readout) */
.oracle-console__chip--two   { top: -20px; right: -14px; animation-duration: 8s;   animation-delay: 1.4s; }
.oracle-console__chip--three { bottom: -18px; left: 14%; animation-duration: 6.5s; animation-delay: 2.8s; }
@keyframes oc-float { from { transform: translateY(-5px); } to { transform: translateY(6px); } }

/* ── 11 · Hover energy (desktop pointers only) ──────────────────────────── */
@media (hover: hover) and (pointer: fine) {
    .oracle-console__panel {
        transition: border-color .4s var(--oc-ease), box-shadow .4s var(--oc-ease);
    }
    .oracle-console__panel:hover {
        border-color: rgba(233, 185, 110, .48);
        box-shadow:
            inset 0 0 0 1px rgba(233,185,110,.16),
            inset 0 0 46px rgba(4, 22, 24, .5),
            0 40px 100px rgba(3, 18, 20, .66),
            0 0 54px rgba(233, 185, 110, .10);
    }
    /* stage scale-on-hover removed: a persistent transform re-rasterizes the
       SVG layer and softens the ring labels — hover energy comes from the
       border, shadow, corners and pulse brightening instead */
    .oracle-console__panel:hover .oc-pulse { opacity: 1; stroke-width: 1.7; }
    .oracle-console__panel:hover .oracle-console__frame i {
        width: 24px; height: 24px; border-color: var(--oc-gold);
        transition-delay: 0s;                        /* hover growth is instant */
    }
}

/* ── 12 · Responsive cascade (1220 / 1080 / 680 / 420 / 380) ────────────── */
@media (max-width: 1220px) {
    .journey-hero__grid--oracle {
        grid-template-columns: minmax(0, 1fr) minmax(400px, .92fr);
        gap: clamp(28px, 4vw, 48px);
    }
    .oracle-console__chip--two { right: -14px; }
    .oracle-console__chip--one { left: -14px; }
}

@media (max-width: 1080px) {
    .journey-hero__grid--oracle { grid-template-columns: 1fr; gap: 52px; }
    .journey-hero__oracle { max-width: 600px; margin-inline: auto; width: 100%; }
    .oracle-console__caption { margin-right: auto; text-align: center; max-width: 44ch; }
    /* Mobile aperture (spec 02 §7): same card, fewer moving rings. Stage
       first, rails below as a 2-column fact grid. */
    .oracle-console__body { display: flex; flex-direction: column; gap: 12px; }
    .oracle-console__stage { order: 0; width: min(100%, 320px); }
    .oracle-console__rail--left,
    .oracle-console__rail--right {
        order: 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 16px;
        justify-items: stretch;
        text-align: left;
        width: 100%;
    }
    .oracle-console__read { display: inline-grid; gap: 2px; }
    /* Mobile aperture (spec 02 §7): yantra keeps its static edges, pulses off —
       the phone gets the instrument, not the light show. */
    .oc-pulse { animation: none; opacity: 0; }
}

@media (max-width: 680px) {
    .oracle-console__body { padding: 14px 14px 10px; }
    .oracle-console__stage { width: min(100%, 320px); }
    .oracle-console__top, .oracle-console__console { padding-inline: 14px; }
    /* the session/clock sibling is still visible through this band (it only
       hides at 420px below), so give the longer status text a head start on
       shrinking before it has to fall back to the ellipsis truncation above */
    .oracle-console__status { font-size: 10px; letter-spacing: .13em; }
}

@media (max-width: 420px) {
    .oracle-console__session { display: none; }
    .oracle-console__stage { width: min(100%, 300px); }
    .oracle-console__line { font-size: 12px; }
    .oracle-console__read span { font-size: 9px; }
    .oracle-console__read b { font-size: 11.5px; }
    .oracle-console__status { font-size: 10px; letter-spacing: .14em; padding: 4px 11px 4px 8px; }
}

@media (max-width: 380px) {
    .oracle-console__panel { border-radius: 14px; }
    .oracle-console__console { gap: 8px; min-height: 48px; }
    .oracle-console__caption { font-size: 12px; }
    .oracle-console__rail { gap: 5px 12px; }
}

/* ── 13 · Reduced motion — designed stillness ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .oc-ring--rashi, .oc-ring--cusp, .oc-t-counter, .oc-cusp-n, .oc-core,
    .oc-core-pulse, .oc-pulse, .oracle-console__dot, .oracle-console__dot::after,
    .oracle-console__chip, .oracle-console__caret, .oc-lotus,
    .oracle-console__stars i, .oracle-console__panel::after { animation: none !important; }

    .oracle-console__scan, .oracle-console__particles { display: none; }

    /* static "chain fully traced" state instead of frozen dash */
    .oc-pulse { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .35; }
    .oc-core-pulse { opacity: 0; }
    .oracle-console__dot::after { opacity: .3; }
    .oracle-console__caret { opacity: 1; }
    .oracle-console__stars i { opacity: .35; }

    /* boot state resolves instantly — everything visible, nothing moving */
    .oracle-console { opacity: 1; transform: none; transition: none; }
    .oc-bezel, .oc-nakshatra, .oc-sky-moon, .oc-maker,
    .oc-ring--rashi, .oc-ring--cusp, .oc-yantra, .oc-lotus, .oc-core {
        opacity: 1 !important; transition: none !important;
    }
    .oc-sky-moon circle + circle { animation: none !important; }
    .oracle-console__frame i { width: 18px; height: 18px; transition: none; }
    .oracle-console__frame i::after { opacity: 1; transition: none; }
    .oracle-console__panel { transform: none; }
    .oracle-console__panel::before { opacity: 0 !important; }  /* no lantern */
    .oracle-console__stage { transition: none; }
    .oracle-console__chip { translate: 0 0; transition: none; }
}

/* ── 13b · Luxury layer: gold foil, silk sheen, cursor lantern, burst ───── */
/* Gold-foil readout values — metallic gradient clipped to the glyphs.
   Reserved for the two hero numbers (ayanamsha + nakshatra); everything
   else stays flat so the foil reads as stamped gold leaf, not glitter. */
.oracle-console__read b.oc-foil { color: #ecc27c; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .oracle-console__read b.oc-foil {
        background: linear-gradient(100deg,
            #f7e3b0 0%, #e9b96e 34%, #d19a4a 52%, #f3d491 70%, #e9b96e 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
/* Devanagari glyphs don't take a gradient text-clip cleanly — the matra and
   conjunct edges fringe (doc 10 §11). Hindi foil falls back to a solid
   stamped-gold colour instead of the clipped gradient. */
html[lang="hi"] .oracle-console__read b.oc-foil {
    background: none;
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: #ecc27c; color: #ecc27c;
}
/* while scramble-decoding, a faint glow marks the value as "resolving" */
.oracle-console__read b.is-decoding { text-shadow: 0 0 12px rgba(233, 185, 110, .35); }

/* hora remaining-time underline — JS writes --oc-hora-pct (0→1) each second;
   a gold→flame underline sweeps across the value as the hora elapses, so the
   readout visibly "runs down" (doc 10 §10). Width animates on the compositor. */
[data-oracle-hora] { position: relative; }
[data-oracle-hora]::after {
    content: ''; position: absolute; left: 0; bottom: -3px; height: 1.5px;
    width: calc(var(--oc-hora-pct, 0) * 100%);
    background: linear-gradient(90deg, rgba(233, 185, 110, .85), rgba(224, 103, 74, .7));
    border-radius: 1px;
    transition: width 1s linear;
}

/* Silk sheen — one thin diagonal light-streak sweeps the panel every 12s,
   like light moving over polished metal. Slow + faint = expensive. */
.oracle-console__panel::after {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg,
        transparent 40%, rgba(247,227,176,.05) 47%, rgba(247,227,176,.11) 50%,
        rgba(247,227,176,.05) 53%, transparent 60%);
    background-size: 280% 100%;
    background-position: 130% 0;
    animation: oc-sheen 12s linear infinite;
}
@keyframes oc-sheen {
    0%   { background-position: 130% 0; }
    62%  { background-position: -30% 0; }
    100% { background-position: -30% 0; }   /* rest phase between sweeps */
}

/* Cursor lantern — a soft gold glow follows the pointer across the panel,
   like a flashlight over silk. Visible only during active tilt (fine
   pointers), released on settle so the idle panel stays clean. */
.oracle-console__panel::before {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(220px circle at var(--oc-lx, 50%) var(--oc-ly, 50%),
        rgba(233, 185, 110, .09), transparent 65%);
    opacity: 0; transition: opacity .5s var(--oc-ease);
}
.oracle-console.is-tilting .oracle-console__panel::before { opacity: 1; }

/* Core pulse-burst — clicking the bindu sends one fast surge through the
   whole yantra network, then the console settles back to its calm rhythm. */
.oracle-console.is-burst .oc-pulse { animation-duration: 1.1s; opacity: 1; stroke-width: 2; }
.oracle-console.is-burst .oc-core-pulse { animation-duration: 1.15s; }
.oracle-console.is-burst .oc-core { animation-duration: 1.15s; }
.oc-core { cursor: pointer; }

/* ── 14 · Print guard ───────────────────────────────────────────────────── */
@media print {
    .journey-hero__oracle { display: none; }  /* content-first ink policy */
}