/* Movement enhances content; it never controls whether content is readable. */
.scroll-progress { position: fixed; z-index: 60; inset: 0 auto auto 0; width: 100%; height: 2px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--red), var(--gold)); pointer-events: none; }
.site-header { transition: background-color .25s, border-color .25s; }
#navigation > a:not(.nav-join)::after { content: ''; position: absolute; inset: auto 0 .3rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
#navigation > a:hover::after, #navigation > a.is-active::after { transform: scaleX(1); }
#navigation, .menu-icon::before, .menu-icon::after { transition: opacity .2s, visibility .2s, transform .2s; }
.button { position: relative; isolation: isolate; overflow: hidden; transition: background-color .2s, border-color .2s, transform .2s; }
.button::after { content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 0; background: linear-gradient(110deg, transparent 25%, #ffffff12 50%, transparent 75%); transform: translateX(-125%); transition: transform .6s ease; }
.button:hover::after, .button:focus-visible::after { transform: translateX(125%); }
.chapter-nav > a { transition: background-color .2s, color .2s, border-color .2s; }
.chapter-mark > span { transition: border-color .3s, box-shadow .3s; }
.lore-chapter.is-read .chapter-mark > span { border-color: var(--gold); box-shadow: 0 0 18px #b52a3320; }
.pillar-grid article, .member { transition: border-color .25s; }
.pillar-grid article::before, .member::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(20rem circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(200,167,106,.11), transparent 70%); transition: opacity .3s; }
.avatar { transition: border-color .25s, background-color .25s; }
.motion-toggle { grid-column: 1 / -1; justify-self: start; min-height: 2.75rem; padding: .25rem 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .875rem; }
.motion-state { color: var(--bone); }

@media (hover: hover) and (pointer: fine) {
  .pillar-grid article:hover, .member:hover { border-color: rgba(200,167,106,.5); }
  .pillar-grid article:hover::before, .member:hover::before { opacity: 1; }
  .member:hover .avatar { border-color: var(--gold); background-color: #c8a76a0b; }
  .button:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.motion-reduced) .hero-content > * { animation: entrance .75s cubic-bezier(.2,.7,.2,1) both; }
  html:not(.motion-reduced) .hero-content > :nth-child(2) { animation-delay: .08s; }
  html:not(.motion-reduced) .hero-content > :nth-child(3) { animation-delay: .16s; }
  html:not(.motion-reduced) .hero-content > :nth-child(4) { animation-delay: .24s; }
  html:not(.motion-reduced) .hero-content > :nth-child(5) { animation-delay: .32s; }
  html.motion-ready:not(.motion-reduced) .hero.is-in-view .hero-image { transform: scale(1.055) translate3d(0, var(--hero-shift, 0px), 0); }
  html.motion-ready:not(.motion-reduced) .hero-shade::after { content: ''; position: absolute; inset: 45% -15% -5%; pointer-events: none; background: radial-gradient(ellipse at 70% 65%, #b9a5a00c, transparent 55%); animation: mist 20s ease-in-out infinite alternate; animation-play-state: paused; }
  html.motion-ready:not(.motion-reduced) .hero.is-in-view .hero-shade::after { animation-play-state: running; }
  html.motion-ready:not(.motion-reduced) .sigil.is-in-view .sigil-ring::before { animation: sigil-orbit 48s linear infinite; }
  html.motion-ready:not(.motion-reduced) .sigil.is-in-view .sigil-ring::after { animation: sigil-orbit-reverse 64s linear infinite; }
  html.motion-ready:not(.motion-reduced) .hero.is-in-view .scroll-cue > span { animation: scroll-light 2.8s ease-in-out infinite; }
}
@keyframes entrance { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mist { from { transform: translate3d(-4%, 0, 0); } to { transform: translate3d(4%, -3%, 0); } }
@keyframes sigil-orbit { from { transform: rotate(45deg); } to { transform: rotate(405deg); } }
@keyframes sigil-orbit-reverse { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes scroll-light { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

html.motion-reduced { scroll-behavior: auto; }
html.motion-reduced *, html.motion-reduced *::before, html.motion-reduced *::after { animation: none !important; transition: none !important; }
html.motion-reduced .hero-image { transform: scale(1.055); }
html.motion-reduced .button:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-image { transform: scale(1.055); }
  .button:hover { transform: none; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-toggle { display: none; }
}