/*
 * Lulla cosmic interactions
 * Restrained celestial progress, semantic seals, theme feedback, and ambience.
 */

:root[data-lulla-cosmic-interactions]{
  --lci-accent:var(--lv-corpus,var(--lv-accent-text,var(--lv-accent,var(--accent,#b27624))));
  --lci-line:var(--lv-line,var(--line,rgba(40,31,20,.16)));
  --lci-surface:var(--lv-bg-card,var(--card,var(--lv-bg,#fff)));
  --lci-ink:var(--lv-ink,var(--ink,#211b15));
  --lci-eclipse-disc:#17120e;
}

.lci-sr{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* The reader orbit is a real progressbar. Its dot only moves when progress changes. */
.lci-reading-progress{
  --lci-progress:0;
  position:relative;
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:inline-grid;
  place-items:center;
  border:1px solid var(--lci-line);
  border-radius:50%;
  color:var(--lci-accent);
  background:color-mix(in srgb,var(--lci-surface) 88%,transparent);
  isolation:isolate;
}
.lci-reading-progress__ring{
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:conic-gradient(var(--lci-accent) calc(var(--lci-progress) * 1%),color-mix(in srgb,var(--lci-line) 72%,transparent) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
}
.lci-reading-progress::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  margin:-2.5px;
  border-radius:50%;
  background:var(--lci-accent);
  box-shadow:0 0 8px color-mix(in srgb,var(--lci-accent) 62%,transparent);
  transform:rotate(calc(var(--lci-progress) * 3.6deg)) translateY(-17px);
  transition:transform .22s ease;
}
.lci-reading-progress__value{
  font:700 .57rem/1 var(--lv-font-ui,Inter,system-ui,sans-serif);
  letter-spacing:-.02em;
  color:var(--lci-ink);
}
.lci-reading-progress.is-complete{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lci-accent) 10%,transparent),0 0 18px color-mix(in srgb,var(--lci-accent) 15%,transparent);
}
.lv-reader-tools.lci-has-progress .lv-reader-tools__more{margin-left:0}

/* Established mudras appear only where their meanings match the action. */
.lci-mudra{
  position:relative!important;
  padding-inline-end:2.55rem!important;
}
.lci-mudra__seal,
.lv-source-panel summary>.lci-mudra__seal{
  position:absolute;
  inset-inline-end:.62rem;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  min-width:24px;
  border:1px solid color-mix(in srgb,var(--lci-accent) 44%,var(--lci-line));
  border-radius:50%;
  background:color-mix(in srgb,var(--lci-accent) 7%,var(--lci-surface));
  color:var(--lci-accent);
  pointer-events:none;
}
.lci-mudra__seal svg{
  display:block;
  width:18px;
  height:18px;
  overflow:visible;
}
.lv-source-panel>summary.lci-mudra{padding-inline-end:4rem!important}
.lci-mudra:focus-visible .lci-mudra__seal,
.lci-mudra:hover .lci-mudra__seal{
  border-color:var(--lci-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lci-accent) 9%,transparent);
}

/* The ring is always visible, so language pairing is never hover-only information. */
.lci-language-orbit{
  position:relative!important;
  isolation:isolate;
  overflow:visible!important;
}
.lv-langpill.lci-language-orbit{
  position:fixed!important;
}
.lci-language-orbit__ring{
  position:absolute;
  inset:-5px;
  border:1px solid color-mix(in srgb,var(--lci-accent) 45%,transparent);
  border-radius:999px;
  transform:rotate(-4deg);
  pointer-events:none;
}
.lci-language-orbit__ring::before{
  content:"";
  position:absolute;
  inset:3px -3px;
  border:1px solid color-mix(in srgb,var(--lci-accent) 20%,transparent);
  border-radius:999px;
  transform:rotate(7deg);
}
.lci-language-orbit__ring i{
  position:absolute;
  width:5px;
  height:5px;
  right:10%;
  top:-3px;
  border-radius:50%;
  background:var(--lci-accent);
  box-shadow:0 0 7px color-mix(in srgb,var(--lci-accent) 50%,transparent);
}
.lci-language-orbit:hover .lci-language-orbit__ring,
.lci-language-orbit:focus-visible .lci-language-orbit__ring{transform:rotate(3deg)}

/* Theme change feedback uses an eclipse, without replacing the control icon. */
.lci-theme-toggle{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate;
}
.lci-theme-toggle::before,
.lci-theme-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
}
.lci-theme-toggle::before{
  width:calc(100% + 10px);
  height:calc(100% + 10px);
  border:1px solid color-mix(in srgb,var(--lci-accent) 62%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--lci-accent) 20%,transparent);
  transform:translate(-50%,-50%) scale(.72);
}
.lci-theme-toggle::after{
  width:42%;
  height:42%;
  background:var(--lci-eclipse-disc);
  box-shadow:-6px 0 0 color-mix(in srgb,var(--lci-accent) 82%,white);
  transform:translate(-76%,-50%);
}
.lci-theme-toggle.is-eclipsing::before{animation:lci-eclipse-halo .7s ease both}
.lci-theme-toggle.is-eclipsing::after{animation:lci-eclipse-disc .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes lci-eclipse-halo{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  45%{opacity:.8}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes lci-eclipse-disc{
  0%{opacity:0;transform:translate(-105%,-50%)}
  38%,58%{opacity:.82;transform:translate(-50%,-50%)}
  100%{opacity:0;transform:translate(5%,-50%)}
}

/* One pointer-tracked glow per eligible page. It has no cursor or hit target. */
.lci-ambience-host{
  --lci-pointer-x:50%;
  --lci-pointer-y:24rem;
  position:relative!important;
  isolation:isolate;
}
.lci-ambience-host>.lci-ambience{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  overflow:hidden;
  pointer-events:none;
  opacity:.18;
  background:radial-gradient(circle 24rem at var(--lci-pointer-x) var(--lci-pointer-y),color-mix(in srgb,var(--lci-accent) 10%,transparent),transparent 68%);
  transition:opacity .35s ease;
}
.lci-ambience-host>.lci-ambience.is-active{opacity:.42}
.lci-ambience-host>.lci-ambience~*{position:relative;z-index:1}

@media(max-width:600px){
  .lci-reading-progress{flex-basis:34px;width:34px;height:34px}
  .lci-reading-progress::after{transform:rotate(calc(var(--lci-progress) * 3.6deg)) translateY(-15px)}
  .lci-reading-progress__value{font-size:.53rem}
}

@media(pointer:coarse), (hover:none){
  .lci-ambience{display:none!important}
  .lci-language-orbit:hover .lci-language-orbit__ring{transform:rotate(-4deg)}
}

@media(prefers-reduced-motion:reduce){
  .lci-reading-progress::after,
  .lci-language-orbit__ring,
  .lci-mudra__seal{transition:none}
  .lci-theme-toggle.is-eclipsing::before,
  .lci-theme-toggle.is-eclipsing::after{animation:none;opacity:.45}
  .lci-language-orbit:hover .lci-language-orbit__ring,
  .lci-language-orbit:focus-visible .lci-language-orbit__ring{transform:rotate(-4deg)}
  .lci-ambience{display:none!important}
}