/* A brief awakening, then a quiet reading surface. No motion is needed to use it. */
:root { --motion-out: cubic-bezier(.22,1,.36,1); }
.rune-stage { display:block; position:relative; isolation:isolate; width:100%; height:100%; }
.rune-stage > .path-art { position:relative; z-index:1; }
.rune-aura { position:absolute; inset:0; display:block; width:100%; height:100%; z-index:0; pointer-events:none; }
.rune-charge { fill:none; stroke:#f5dfa2; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; opacity:0; pointer-events:none; }
.motion-toggle { display:inline-flex; align-items:center; gap:6px; border:1px solid #c6cbb8; border-radius:3px; background:transparent; padding:6px 9px; color:#526146; font:inherit; font-size:11px; line-height:1.5; }
.motion-toggle::before { content:''; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; }
.motion-toggle[aria-pressed="true"]::before { background:currentColor; }
.motion-toggle:disabled { opacity:.8; cursor:default; }

@media (prefers-reduced-motion: no-preference) {
  html.motion-enabled .is-awakening .path-art {
    transform-origin:50% 60%; animation:rune-rise 2800ms var(--motion-out) both;
  }
  html.motion-enabled .is-awakening .rune-charge {
    animation:rune-engrave 1900ms cubic-bezier(.32,0,.25,1) 80ms both;
  }
  html.motion-enabled .is-awakening .rune-stars {
    transform-box:fill-box; transform-origin:center; animation:rune-stars 2300ms ease-out both;
  }
  html.motion-enabled .is-awakening .rune-orbit {
    transform-box:fill-box; transform-origin:center; animation:rune-orbit 2800ms var(--motion-out) both;
  }
  html.motion-enabled[data-input="pointer"] :is(.button,.search-trigger,.filter-chip,.save-button,.motion-toggle):not(.source-content *) {
    transition:transform 140ms var(--motion-out),background-color 140ms ease,border-color 140ms ease;
  }
  html.motion-enabled[data-input="pointer"] :is(.button,.search-trigger,.filter-chip,.save-button,.motion-toggle):not(.source-content *):active:not(:disabled) {
    transform:scale(.975);
  }
  html.motion-enabled[data-input="pointer"] .pathway:not(.source-content *) summary:active .path-art {
    scale:.98;
  }
}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html.motion-enabled[data-input="pointer"] .pathway:not(.source-content *):not(.is-awakening) .path-art {
    transition:transform 240ms var(--motion-out),scale 140ms var(--motion-out);
  }
  html.motion-enabled[data-input="pointer"] .pathway:not(.source-content *):not(.is-awakening) summary:hover .path-art {
    transform:translateY(-3px) rotate(-1deg);
  }
  html.motion-enabled[data-input="pointer"] .boss-card:not(.source-content *) {
    transition:transform 180ms var(--motion-out),border-color 140ms ease,box-shadow 180ms ease;
  }
  html.motion-enabled[data-input="pointer"] .boss-card:not(.source-content *) .sigil {
    transition:transform 240ms var(--motion-out);
  }
  html.motion-enabled[data-input="pointer"] .boss-card:not(.source-content *):hover .sigil {
    transform:rotate(2deg) scale(1.025);
  }
  html.motion-enabled[data-input="pointer"] :is(.path-links,.guide-row,.index-shortcut):not(.source-content *) svg {
    transition:transform 140ms var(--motion-out);
  }
  html.motion-enabled[data-input="pointer"] :is(.path-links a:hover,.guide-row:hover,.index-shortcut:hover):not(.source-content *) svg {
    transform:translateX(2px);
  }
}

@keyframes rune-rise {
  0% { transform:translateY(0) rotate(0); }
  28% { transform:translateY(-5px) rotate(-1.4deg); }
  65% { transform:translateY(-3px) rotate(.5deg); }
  100% { transform:translateY(0) rotate(0); }
}
@keyframes rune-engrave {
  0% { stroke-dashoffset:1; opacity:0; }
  18% { opacity:.95; }
  62% { stroke-dashoffset:0; opacity:.85; }
  100% { stroke-dashoffset:0; opacity:0; }
}
@keyframes rune-stars {
  0% { opacity:.5; transform:scale(.97); }
  38% { opacity:1; transform:scale(1.04); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes rune-orbit {
  0% { transform:rotate(-12deg); opacity:.35; }
  35% { opacity:.85; }
  100% { transform:rotate(0); opacity:1; }
}

/* The site preference stops existing base CSS movement too, including smooth
   scrolling. Never reset positioning transforms such as the mobile menu. */
html[data-motion="reduced"], html[data-input="keyboard"] { scroll-behavior:auto; }
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after { animation:none!important; transition:none!important; }
html[data-motion="reduced"] .rune-aura { display:none; }
html[data-motion="reduced"] .boss-card:not(.source-content *):hover,
html[data-input="keyboard"] .boss-card:not(.source-content *):hover { transform:none; }
html[data-motion="reduced"] .hero-art:hover .sigil,
html[data-input="keyboard"] .hero-art:hover .sigil { transform:translate(-50%,-50%); }
html[data-input="keyboard"] :is(.sidebar,.sigil,.boss-card:not(.source-content *),.pathway:not(.source-content *)) { transition:none!important; }
@media (hover:none), (pointer:coarse) {
  .boss-card:not(.source-content *):hover { transform:none; }
  .hero-art:hover .sigil { transform:translate(-50%,-50%); }
}
@media (prefers-reduced-motion:reduce) {
  .rune-aura { display:none!important; }
  .rune-stage,.rune-stage > .path-art,.rune-stars,.rune-orbit { animation:none!important; transition:none!important; }
}