/* ══ SENRA · the rite of chance ════════════════════════════
   A veil that falls over the whole house for the few seconds in
   which chance is deciding something, and lifts once it has. One
   animation per element, written in percentages of --rt, so the
   whole ceremony can be stretched or compressed from one number.

   Phases, in fractions of --rt:
     0 – .14  the veil closes
     .04 – .42  the gathering — figures draw themselves, sparks fall inward
     .42 – .74  the holding — slow rotation, the word appears
     .74 – .86  the drawing of breath — everything contracts
     .86       the break — flash, sound, the answer is put on the page
     .86 – 1   the veil lifts
   ───────────────────────────────────────────────────────────── */

.rite{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto; cursor:default;
  --rt:3000ms;
  --rt-line:var(--silver-3,#7d859e);
  --rt-core:var(--violet,#8e7dd0);
  --rt-glow:var(--glow,#b7a9ff);
  --rt-word:var(--silver,#e2e5f2);
  --rt-dim:rgba(4,4,9,.80);
}
.rite[hidden]{ display:none !important; }

/* ── the veil ──────────────────────────────────────────────────── */
.rite-dim{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 46%, rgba(0,0,0,0) 0%, var(--rt-dim) 58%, var(--rt-dim) 100%);
  animation:riteDim var(--rt) linear both;
}
@keyframes riteDim{
  0%{   opacity:0; backdrop-filter:blur(0px)  saturate(1);    -webkit-backdrop-filter:blur(0px); }
  14%{  opacity:1; backdrop-filter:blur(6px)  saturate(.92);  -webkit-backdrop-filter:blur(6px); }
  42%{  opacity:1; backdrop-filter:blur(15px) saturate(.78);  -webkit-backdrop-filter:blur(15px); }
  84%{  opacity:1; backdrop-filter:blur(17px) saturate(.72);  -webkit-backdrop-filter:blur(17px); }
  93%{  opacity:.5; backdrop-filter:blur(7px) saturate(.9);   -webkit-backdrop-filter:blur(7px); }
  100%{ opacity:0; backdrop-filter:blur(0px)  saturate(1);    -webkit-backdrop-filter:blur(0px); }
}

/* ── the stage ─────────────────────────────────────────────────── */
.rite-stage{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:34px;
  animation:riteStage var(--rt) var(--ease-out) both;
}
@keyframes riteStage{
  0%{   opacity:0; transform:scale(.90); }
  16%{  opacity:1; transform:scale(.965); }
  74%{  opacity:1; transform:scale(1); }
  84%{  opacity:1; transform:scale(.982); }
  86%{  opacity:1; transform:scale(1.035); }
  100%{ opacity:0; transform:scale(1.14); }
}

.rite-orb{
  position:relative;
  width:min(62vmin,372px); height:min(62vmin,372px);
}
.rite-orb svg{
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
}

/* ── the noir figure — rings, ticks, a cross of hairlines ──────── */
.rg-ring, .rg-cross, .rg-tick{
  fill:none; stroke:var(--rt-line); vector-effect:non-scaling-stroke;
}
.rg-spin, .rg-spin-r, .rg-ticks{
  transform-box:view-box; transform-origin:150px 150px;
}
.rg-spin  { animation:riteSpin  var(--rt) linear both; }
.rg-spin-r{ animation:riteSpinR var(--rt) linear both; }
.rg-ticks { animation:riteSpin  var(--rt) linear both; }
@keyframes riteSpin { from{ transform:rotate(-16deg); } to{ transform:rotate(20deg); } }
@keyframes riteSpinR{ from{ transform:rotate(14deg); }  to{ transform:rotate(-22deg); } }

.rg-a{ --len:754; stroke-width:1; stroke-dasharray:754; stroke-dashoffset:754;
       animation:riteDraw var(--rt) var(--ease-out) both; }
.rg-b{ stroke-width:1; stroke-dasharray:2 9; opacity:0; animation:riteSoft var(--rt) linear both; animation-delay:calc(var(--rt) * .06); }
.rg-c{ --len:415; stroke-width:1; stroke-dasharray:415; stroke-dashoffset:415; opacity:.7;
       animation:riteDraw var(--rt) var(--ease-out) both; animation-delay:calc(var(--rt) * .10); }
.rg-cross{ stroke-width:1; opacity:0; animation:riteSoft var(--rt) linear both; animation-delay:calc(var(--rt) * .16); }
.rg-tick{ stroke-width:1; opacity:0; animation:riteTick var(--rt) linear both; animation-delay:calc(var(--rt) * var(--k,0)); }

@keyframes riteDraw{
  0%{   stroke-dashoffset:var(--len,754); opacity:0; }
  8%{   opacity:.6; }
  40%{  stroke-dashoffset:0; opacity:.72; }
  80%{  stroke-dashoffset:0; opacity:.72; }
  86%{  stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes riteSoft{
  0%{ opacity:0; } 34%{ opacity:.5; } 80%{ opacity:.5; } 86%{ opacity:.9; } 100%{ opacity:0; }
}
@keyframes riteTick{
  0%{ opacity:0; } 30%{ opacity:.65; } 74%{ opacity:.3; } 86%{ opacity:.95; } 100%{ opacity:0; }
}

/* one thread, held taut, for the room the Fates keep */
.rg-thread{ display:none; stroke:var(--rt-line); stroke-width:1; fill:none;
  animation:riteThread var(--rt) var(--ease-out) both; }
body[data-route="moira"] .rg-thread{ display:block; }
body[data-route="moira"] .rg-cross{ opacity:0; animation:none; }
@keyframes riteThread{
  0%{ opacity:0; transform:scaleY(.15); }
  30%{ opacity:.4; transform:scaleY(1); }
  80%{ opacity:.26; transform:scaleY(1); }
  86%{ opacity:.8; transform:scaleY(1.03); }
  100%{ opacity:0; transform:scaleY(1.25); }
}
.rg-thread{ transform-box:view-box; transform-origin:150px 150px; }

/* ── the rice figure — one brushed circle and a seal ───────────── */
.rite-enso{ display:none; transform:rotate(-9deg); }
.re-stroke, .re-dry{
  fill:none; stroke:var(--rt-line); stroke-linecap:round;
  stroke-dasharray:648; stroke-dashoffset:648;
}
.re-stroke{ stroke-width:9; animation:riteBrush var(--rt) cubic-bezier(.3,.7,.3,1) both; }
.re-dry{ stroke-width:3.4; opacity:.5; stroke-dasharray:9 15;
         animation:riteDry var(--rt) linear both; animation-delay:calc(var(--rt) * .10); }
.re-seal{
  fill:none; stroke:var(--rt-core); stroke-width:2; opacity:0;
  animation:riteSeal var(--rt) var(--ease-out) both;
}
@keyframes riteBrush{
  0%{   stroke-dashoffset:648; opacity:0; }
  6%{   opacity:.9; }
  44%{  stroke-dashoffset:0; opacity:.9; }
  84%{  stroke-dashoffset:0; opacity:.9; }
  86%{  stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes riteDry{
  0%{ stroke-dashoffset:648; opacity:0; } 12%{ opacity:.34; } 50%{ stroke-dashoffset:0; opacity:.34; }
  86%{ stroke-dashoffset:0; opacity:.45; } 100%{ stroke-dashoffset:0; opacity:0; }
}
@keyframes riteSeal{
  0%,52%{ opacity:0; transform:scale(.4); }
  64%{ opacity:.9; transform:scale(1); }
  84%{ opacity:.9; transform:scale(1); }
  100%{ opacity:0; transform:scale(1.5); }
}
.re-seal{ transform-box:fill-box; transform-origin:center; }

/* ── the sparks: chance falling inward, then thrown out ────────── */
.rite-sparks{ position:absolute; inset:0; display:block; pointer-events:none; }
.rite-sparks i{
  position:absolute; left:50%; top:50%; width:3px; height:3px; margin:-1.5px 0 0 -1.5px;
  border-radius:50%; background:var(--rt-glow); opacity:0;
  box-shadow:0 0 10px 1px var(--rt-glow);
  animation:riteSpark var(--rt) cubic-bezier(.2,.7,.25,1) both;
  animation-delay:calc(var(--rt) * var(--k,0));
}
@keyframes riteSpark{
  0%{   transform:rotate(var(--a)) translateY(calc(var(--r0,175px) * -1)) scale(.35); opacity:0; }
  10%{  opacity:.9; }
  38%{  transform:rotate(var(--a)) translateY(-76px) scale(1); opacity:.85; }
  62%{  transform:rotate(calc(var(--a) + 5deg)) translateY(-70px) scale(.9); opacity:.6; }
  80%{  transform:rotate(calc(var(--a) + 7deg)) translateY(-58px) scale(1.05); opacity:.85; }
  86%{  transform:rotate(calc(var(--a) + 8deg)) translateY(-26px) scale(1.7); opacity:1; }
  100%{ transform:rotate(calc(var(--a) + 16deg)) translateY(-260px) scale(.2); opacity:0; }
}

/* ── the core, and the break ───────────────────────────────────── */
.rite-core{
  position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px;
  background:var(--rt-core); opacity:0;
  animation:riteCore var(--rt) var(--ease-out) both;
}
@keyframes riteCore{
  0%{   opacity:0; transform:rotate(45deg) scale(.2); box-shadow:0 0 0 0 transparent; }
  30%{  opacity:.5; transform:rotate(45deg) scale(.9); box-shadow:0 0 26px 2px var(--rt-glow); }
  62%{  opacity:.72; transform:rotate(225deg) scale(1); box-shadow:0 0 34px 4px var(--rt-glow); }
  80%{  opacity:.9; transform:rotate(225deg) scale(.6); box-shadow:0 0 54px 8px var(--rt-glow); }
  86%{  opacity:1; transform:rotate(225deg) scale(2.6); box-shadow:0 0 90px 26px var(--rt-glow); }
  100%{ opacity:0; transform:rotate(225deg) scale(4.6); box-shadow:0 0 0 0 transparent; }
}
.rite-flash{
  position:absolute; left:50%; top:50%; width:min(58vmin,330px); height:min(58vmin,330px);
  border-radius:50%; border:1px solid var(--rt-glow); opacity:0;
  animation:riteFlash var(--rt) var(--ease-out) both;
}
@keyframes riteFlash{
  0%,80%{ opacity:0; transform:translate(-50%,-50%) scale(.22); }
  86%{ opacity:.9; transform:translate(-50%,-50%) scale(.42); }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(2.1); }
}

/* ── the word ──────────────────────────────────────────────────── */
.rite-label{
  margin:0; font-family:var(--serif); font-size:13px; font-weight:300;
  text-transform:uppercase; letter-spacing:.42em; text-indent:.42em;
  color:var(--rt-word); white-space:nowrap;
  animation:riteWord var(--rt) var(--ease-out) both;
}
html[data-lang="zh"] .rite-label,
html[data-lang="ja"] .rite-label,
html[data-lang="ko"] .rite-label{ letter-spacing:.34em; text-indent:.34em; font-size:14px; }
@keyframes riteWord{
  0%,26%{ opacity:0; filter:blur(7px); letter-spacing:1em; }
  50%{ opacity:.9; filter:blur(0); letter-spacing:.42em; }
  80%{ opacity:.9; letter-spacing:.42em; }
  86%{ opacity:1; filter:blur(0); letter-spacing:.5em; }
  100%{ opacity:0; filter:blur(5px); letter-spacing:.62em; }
}

/* the whole thing can be dismissed; it leaves quietly */
.rite.is-out{ animation:riteOut .24s linear both; }
@keyframes riteOut{ to{ opacity:0; } }

/* ── the house it is standing in ───────────────────────────────── */
body[data-route="moira"] .rite{
  --rt-line:#9a8aa4; --rt-core:#c396c8; --rt-glow:#e6c7e6; --rt-word:#e9dced;
  --rt-dim:rgba(5,4,8,.84);
}
body[data-route="jyotira"] .rite{
  --rt-line:#c2a878; --rt-core:#c8a468; --rt-glow:#f0d59f; --rt-word:#f2e8d8;
  --rt-dim:rgba(8,7,14,.82);
}
html[data-theme="rice"] .rite{
  --rt-line:#4a443c; --rt-core:#a3251b; --rt-glow:rgba(163,37,27,.75); --rt-word:#2b2823;
  --rt-dim:rgba(242,235,220,.86);
}
html[data-theme="rice"] .rite-dim{
  background:radial-gradient(circle at 50% 46%, rgba(248,243,232,.35) 0%, var(--rt-dim) 56%, var(--rt-dim) 100%);
}
html[data-theme="rice"] .rite-geo{ display:none; }
html[data-theme="rice"] .rite-enso{ display:block; }
html[data-theme="rice"] .rite-sparks i{
  background:#3a352d; box-shadow:none; width:4px; height:4px; margin:-2px 0 0 -2px;
}
html[data-theme="rice"] .rite-core{
  width:11px; height:11px; margin:-5.5px 0 0 -5.5px;
}
html[data-theme="rice"] .rite-flash{ border-color:rgba(163,37,27,.5); }
html[data-theme="rice"] .rite-label{ font-weight:500; }

/* ── phones ────────────────────────────────────────────────────── */
@media (max-width:560px){
  .rite-orb{ width:min(70vmin,280px); height:min(70vmin,280px); }
  .rite-stage{ gap:26px; }
  .rite-label{ font-size:11px; letter-spacing:.34em; text-indent:.34em; }
}

/* ── when motion is not wanted ─────────────────────────────────── */
body[data-motion="calm"] .rite-sparks{ display:none; }
body[data-motion="calm"] .rg-spin,
body[data-motion="calm"] .rg-spin-r,
body[data-motion="calm"] .rg-ticks{ animation:none; }

@media (prefers-reduced-motion:reduce){
  .rite-sparks, .rite-flash{ display:none; }
  .rite-dim{ background:var(--rt-dim); }
}