/* ══ SENRA · the four rites, told apart ════════════════════════════
   base.css sets the house: night, silver, blue-violet. That is Stella's
   own voice — the front page keeps it, and so does the wheel.

   The other two noir rites are given a voice of their own, scoped to
   body[data-route] so the topbar turns with the page and nothing leaks
   between them:

     moira    — no stars at all. A plum-black room, curtain folds, a low
                light behind the veil, and the thread the Fates spin.
     jyotira  — indigo overhead, brass lamp at the foot, ivory instead of
                cold silver, a jālī lattice and one pointed arch.

   太微 keeps its rice paper (east.css), untouched here.
   ───────────────────────────────────────────────────────────────── */

/* ── the extra ground layer ────────────────────────────────────── */
/* one fixed sheet, dark until a rite claims it */
.rite-ground{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity 1.3s var(--ease);
}
.rite-ground::before,
.rite-ground::after{ content:''; position:absolute; inset:-24%; }
html[data-theme="rice"] .rite-ground{ opacity:0 !important; }


/* ══ I · STELLA — the house voice, one degree cooler ═══════════════
   Nothing is redefined; the wheel already carries the page. The one
   addition is a slow blue breath at the horizon so the front page and
   the astrolabe read as the same room. */
body[data-route="stella"] .veil{
  background:
    radial-gradient(1100px 720px at 50% -12%, rgba(120,102,190,.22), transparent 62%),
    radial-gradient(820px 640px at 92% 104%, rgba(78,96,160,.18), transparent 60%),
    radial-gradient(620px 520px at 4% 84%,  rgba(120,102,190,.10), transparent 60%),
    linear-gradient(180deg, rgba(7,7,12,.24) 0%, rgba(7,7,12,.62) 68%, rgba(7,7,12,.9) 100%);
}


/* ══ II · MOIRA — the thread, not the star ════════════════════════ */
body[data-route="moira"]{
  --ink:        #050508;
  --ink-2:      #08060d;

  /* plum, held well away from Stella's blue-violet */
  --violet:     #9c6ba6;
  --violet-2:   #704a7a;
  --violet-3:   #3a2740;
  --blue:       #907cb2;
  --glow:       #d9b6d8;
  --hair-v:     rgba(156,107,166,.30);

  --sig-ink:    #e4d8e8;
  --sig-hair:   #8b7d96;
  --sig-accent: #c396c8;
  --sig-soft:   rgba(195,150,200,.30);
}

/* the stars are the wrong instrument here — nearly put out, never
   quite gone, so the room still has depth behind the curtain */
body[data-route="moira"] #starfield{
  opacity:.12; filter:saturate(.35);
  transition:opacity 1.2s var(--ease), filter 1.2s var(--ease);
}
#starfield{ transition:opacity 1.2s var(--ease), filter 1.2s var(--ease); }

body[data-route="moira"] .veil{
  background:
    /* a low lamp, somewhere behind the cloth */
    radial-gradient(820px 540px at 50% 116%, rgba(156,107,166,.20), transparent 64%),
    radial-gradient(1000px 780px at 50% -18%, rgba(30,17,36,.60), transparent 70%),
    linear-gradient(180deg, rgba(4,4,7,.74) 0%, rgba(6,4,10,.48) 44%, rgba(3,3,6,.95) 100%);
}

body[data-route="moira"] .rite-ground{ opacity:1; }

/* curtain: vertical folds, drifting a hand's width over three quarters
   of a minute — slow enough that you only notice it once */
body[data-route="moira"] .rite-ground::before{
  background:repeating-linear-gradient(90deg,
    rgba(226,229,242,.028) 0px,
    rgba(226,229,242,0)    52px,
    rgba(0,0,0,.30)        104px,
    rgba(226,229,242,0)    156px,
    rgba(226,229,242,.028) 208px);
  -webkit-mask-image:radial-gradient(130% 100% at 50% 46%, #000 12%, transparent 76%);
  mask-image:radial-gradient(130% 100% at 50% 46%, #000 12%, transparent 76%);
  animation:veilDrift 74s ease-in-out infinite alternate;
}
@keyframes veilDrift{ from{ transform:translateX(-40px); } to{ transform:translateX(40px); } }

/* smoke: two soft bodies passing each other, no blur filter on a
   full-screen layer — gradients are cheap, filters are not */
body[data-route="moira"] .rite-ground::after{
  background:
    radial-gradient(46% 34% at 26% 62%, rgba(120,78,132,.16), transparent 70%),
    radial-gradient(38% 30% at 74% 34%, rgba(74,62,110,.14), transparent 72%);
  animation:smokeDrift 96s ease-in-out infinite alternate;
}
@keyframes smokeDrift{
  from{ transform:translate3d(-3%,2%,0) scale(1); }
  to{   transform:translate3d(3%,-2%,0) scale(1.08); }
}
body[data-motion="calm"] .rite-ground::before,
body[data-motion="calm"] .rite-ground::after{ animation:none; }

/* the spindle mark above every heading — thread, whorl, thread */
body[data-route="moira"] .sec-head{ position:relative; padding-top:38px; }
body[data-route="moira"] .sec-head::before{
  content:''; position:absolute; left:50%; top:0; width:1px; height:19px;
  background:linear-gradient(180deg, transparent, var(--violet));
  opacity:.7;
}
body[data-route="moira"] .sec-head::after{
  content:''; position:absolute; left:50%; top:18px; width:6px; height:6px;
  margin-left:-3px; border:1px solid var(--violet); transform:rotate(45deg);
  box-shadow:0 0 12px -2px rgba(217,182,216,.5);
}

/* card backs are woven, not starred */
body[data-route="moira"] .ds-card,
body[data-route="moira"] .fan-card,
body[data-route="moira"] .face-back{
  background:
    repeating-linear-gradient(38deg, rgba(217,182,216,.05) 0 1px, transparent 1px 7px),
    linear-gradient(157deg,#1a1029 0%,#08060d 54%,#1e1131 100%);
}
body[data-route="moira"] .face-front{
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(156,107,166,.10), transparent 62%),
    linear-gradient(168deg,#150f22 0%,#09070f 46%,#160f26 100%);
}
body[data-route="moira"] .ds-card:last-child{
  box-shadow:0 18px 46px -16px rgba(0,0,0,.95), 0 0 44px -18px rgba(156,107,166,.62);
}

/* the chooser: light rises from the foot of the card, the way a lamp
   would, instead of Stella's overhead wash */
body[data-route="moira"] .spread-card{ background:rgba(9,7,14,.55); }
body[data-route="moira"] .spread-card::after{
  background:radial-gradient(300px 200px at 50% 108%, rgba(156,107,166,.20), transparent 72%);
}
body[data-route="moira"] .spread-card:hover{ background:rgba(23,16,32,.74); }
body[data-route="moira"] .spread-card.is-on{ background:rgba(28,18,40,.88); }
body[data-route="moira"] .sc-slot{ stroke:rgba(217,182,216,.34); }

body[data-route="moira"] .verdict-word{
  background:linear-gradient(96deg,#f0e4f2,#c79ccb 46%,#9b86bd 74%,#f0e4f2);
  -webkit-background-clip:text; background-clip:text;
}
body[data-route="moira"] .display .d-italic{
  background:linear-gradient(96deg,#f0e4f2 6%,#c79ccb 46%,#9b86bd 76%,#f0e4f2 100%);
  -webkit-background-clip:text; background-clip:text;
}


/* ══ III · JYOTIRA — indigo overhead, brass at the foot ════════════
   Minimal, but unmistakably of its own place: ivory in the type, brass
   in the line, one jālī screen and one arch. No further ornament. */
body[data-route="jyotira"]{
  --ink:        #07060a;
  --ink-2:      #0a0810;

  /* brass leads, indigo answers */
  --violet:     #c8a468;
  --violet-2:   #97783f;
  --violet-3:   #43331c;
  --blue:       #9c8ec6;
  --glow:       #e9cd95;
  --hair-v:     rgba(201,168,106,.32);

  /* ivory, not cold silver */
  --silver:     #f2e8d8;
  --silver-2:   #d2c5b0;
  --silver-3:   #9c9080;
  --silver-4:   #6d6455;
  --hair:       rgba(232,209,166,.10);
  --hair-2:     rgba(232,209,166,.19);
  --hair-3:     rgba(232,209,166,.30);

  --sig-accent: #d8b878;
  --sig-soft:   rgba(216,184,120,.30);
}

/* jyotiṣa is the science of light, so the sky stays — but it is a warm
   sky, lamp-lit rather than steel */
body[data-route="jyotira"] #starfield{
  opacity:.6; filter:sepia(.6) saturate(1.35) hue-rotate(-10deg) brightness(1.06);
}

body[data-route="jyotira"] .veil{
  background:
    radial-gradient(900px 600px at 50% 112%, rgba(201,168,106,.17), transparent 62%),
    radial-gradient(1200px 820px at 50% -16%, rgba(48,40,96,.36), transparent 66%),
    radial-gradient(560px 460px at 6% 78%, rgba(150,60,40,.07), transparent 62%),
    linear-gradient(180deg, rgba(6,6,14,.40) 0%, rgba(7,6,11,.80) 66%, rgba(4,4,8,.96) 100%);
}

body[data-route="jyotira"] .rite-ground{ opacity:1; }

/* the jālī screen: an eight-point star lattice, cut so faint it reads
   as texture rather than pattern, and gone by the middle of the page
   so the kuṇḍalī never sits on top of it */
body[data-route="jyotira"] .rite-ground::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='1'%3E%3Cpath d='M40 0 80 40 40 80 0 40Z'/%3E%3Crect x='11.7' y='11.7' width='56.6' height='56.6'/%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size:96px 96px;
  opacity:.055;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 42%, transparent 26%, #000 96%);
  mask-image:radial-gradient(120% 100% at 50% 42%, transparent 26%, #000 96%);
}
/* the lamp itself, breathing once every twelve seconds */
body[data-route="jyotira"] .rite-ground::after{
  background:radial-gradient(42% 30% at 50% 104%, rgba(201,168,106,.16), transparent 72%);
  animation:lampBreath 12s ease-in-out infinite;
}
@keyframes lampBreath{ 0%,100%{ opacity:.72; } 50%{ opacity:1; } }
body[data-motion="calm"][data-route="jyotira"] .rite-ground::after{ animation:none; }

/* one pointed arch over the rite, and a short garland under it */
body[data-route="jyotira"] .jyo-head{ position:relative; padding-top:64px; }
body[data-route="jyotira"] .jyo-head::before{
  content:''; position:absolute; left:50%; top:0; width:132px; height:52px;
  margin-left:-66px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 52'%3E%3Cg fill='none' stroke='%23c9a86a' stroke-width='1' stroke-linejoin='round'%3E%3Cpath d='M14 52V32C14 18 34 14 66 2c32 12 52 16 52 30v20'/%3E%3Cpath d='M28 52V34c0-10 16-13 38-22 22 9 38 12 38 22v18' stroke-opacity='.5'/%3E%3C/g%3E%3Ccircle cx='66' cy='9' r='2' fill='%23c9a86a'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:.62;
}

/* a short string of beads under the heading — the only ornament the page
   is allowed besides the arch */
body[data-route="jyotira"] .jyo-head::after{
  content:''; display:block; width:126px; height:4px; margin:22px auto 0;
  background:radial-gradient(circle at center, var(--violet) 0 1.7px, transparent 1.9px) 0 0/14px 4px repeat-x;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
  opacity:.8;
}
body[data-route="jyotira"] .eyebrow{ color:var(--violet); opacity:.86; }
body[data-route="moira"] .eyebrow{ color:#a289ab; }

/* the chart sits in brass corners, lit from within by lamp not moon */
body[data-route="jyotira"] .jyo-chart-holder::before{
  background:radial-gradient(circle, rgba(201,168,106,.16), transparent 66%);
}
body[data-route="jyotira"] .jyo-chart-holder::after{
  /* the kuṇḍalī itself is drawn at 46/520 of the frame, so the brackets sit
     at 6.6% — a finger's width outside the square, never adrift in the column */
  content:''; position:absolute; inset:6.6%; pointer-events:none;
  background:
    linear-gradient(90deg, var(--violet) 0 22px, transparent 22px) 0 0/100% 1px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 22px), var(--violet) calc(100% - 22px)) 0 0/100% 1px no-repeat,
    linear-gradient(90deg, var(--violet) 0 22px, transparent 22px) 0 100%/100% 1px no-repeat,
    linear-gradient(90deg, transparent calc(100% - 22px), var(--violet) calc(100% - 22px)) 0 100%/100% 1px no-repeat,
    linear-gradient(180deg, var(--violet) 0 22px, transparent 22px) 0 0/1px 100% no-repeat,
    linear-gradient(180deg, var(--violet) 0 22px, transparent 22px) 100% 0/1px 100% no-repeat,
    linear-gradient(180deg, transparent calc(100% - 22px), var(--violet) calc(100% - 22px)) 0 0/1px 100% no-repeat,
    linear-gradient(180deg, transparent calc(100% - 22px), var(--violet) calc(100% - 22px)) 100% 0/1px 100% no-repeat;
  opacity:.55;
}
body[data-route="jyotira"] .jc-court{ fill:rgba(201,168,106,.05); }
body[data-route="jyotira"] .jyo-table tbody tr:hover td{ background:rgba(201,168,106,.07); }
body[data-route="jyotira"] .jd-bar{ background:rgba(201,168,106,.10); }
body[data-route="jyotira"] .jd-bar:hover{ background:rgba(201,168,106,.2); }

body[data-route="jyotira"] .prompt-pre{ background:rgba(9,7,6,.72); }


/* ── phones ────────────────────────────────────────────────────── */
@media (max-width:620px){
  body[data-route="jyotira"] .jyo-head{ padding-top:52px; }
  body[data-route="jyotira"] .jyo-head::before{ width:104px; height:40px; margin-left:-52px; }
  body[data-route="moira"] .sec-head{ padding-top:32px; }
}

@media (prefers-reduced-motion:reduce){
  .rite-ground::before,
  .rite-ground::after{ animation:none !important; }
}