/* ══ ORACLE · the turning of the realm ═══════════════════════════
   One breath of ink or one breath of night when the house changes.
   ─────────────────────────────────────────────────────────────── */

.realm-wash{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:0; background:
    radial-gradient(120% 90% at 8% 6%, rgba(163,37,27,.10), transparent 58%),
    radial-gradient(140% 110% at 92% 96%, rgba(20,16,12,.10), transparent 62%),
    rgba(246,241,231,.92);
}
html[data-theme="noir"] .realm-wash{
  background:
    radial-gradient(120% 90% at 8% 6%, rgba(142,125,208,.16), transparent 58%),
    radial-gradient(140% 110% at 92% 96%, rgba(96,132,200,.12), transparent 62%),
    rgba(8,8,14,.92);
}
body.realm-turn .realm-wash{ animation:realmWash 1080ms var(--ease) both; }
@keyframes realmWash{
  0%{ opacity:0; transform:scale(1.04); filter:blur(14px); }
  22%{ opacity:1; transform:scale(1); filter:blur(0); }
  100%{ opacity:0; transform:scale(1); filter:blur(6px); }
}

/* the sigil itself turns a half circle as the house changes */
body.realm-turn .realm-sigil .rs-spin{ animation:realmSigilTurn 1080ms var(--ease-out) both; }
@keyframes realmSigilTurn{
  from{ transform:rotate(-180deg); }
  to{ transform:rotate(0deg); }
}

@media (prefers-reduced-motion:reduce){
  body.realm-turn .realm-wash,
  body.realm-turn .realm-sigil .rs-spin{ animation:none; }
}