/* SMACSS · State: small, explicit, opt-in state classes. */
.occult-scene.is-animating { --occult-play: running; }
.is-writing .grimoire-pen { opacity: 1; }
.grimoire-motion[aria-pressed="true"] { color: var(--gold); }
.cathedral-controls button:hover,
.cathedral-controls button[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--raised);
}
.cathedral-continue:hover {
  color: var(--gold);
}
.scene--cathedrale.is-rendering .cathedral-image {
  will-change: transform;
}
.scene--cathedrale.is-rendering .cathedral-shadow,
.l-hero.is-animating .eclipse-shadow,
.l-hero.is-animating .eclipse-mist::before,
.l-hero.is-animating .eclipse-mist::after {
  will-change: transform, opacity;
}
.filters .is-active {
  border-color: var(--selected-edge);
  background: var(--selected-bg);
  color: var(--ink);
}
.is-modal-open {
  overflow: hidden;
}
.skip-link:focus {
  transform: translateY(0);
}
.is-ready #art-fallback {
  visibility: hidden;
}
.art-surround:has(canvas:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
}
.art-stage canvas:focus-visible {
  outline-offset: -4px;
}
.is-pet img {
  animation: corvus-bow 0.65s ease-in-out;
}
.is-awake img {
  animation: corvus-arrive 0.5s ease-out;
}
.is-error {
  color: var(--error);
}
.art-controls [aria-pressed="true"] {
  background: var(--art-active);
  border-color: var(--accent);
}
.scene .scene-glow,
.scene .scene-banner,
.scene .scene-portal__swirl {
  animation-play-state: paused;
}
.scene.is-animating .scene-glow,
.scene.is-animating .scene-banner,
.scene.is-animating .scene-portal__swirl {
  animation-play-state: running;
}
.scene.is-animating .scene-layer,
.scene.is-animating .scene-fog { will-change: transform; }
/* Native timelines keep the architectural planes on the same scroll frame as the sticky stage. */
.is-scroll-driven .l-scene-track {
  view-timeline-name: --remparts;
  view-timeline-axis: block;
  view-timeline-inset: 0 max(0px, calc(100dvh - 100svh));
}
.is-scroll-driven .scene-layer {
  animation: remparts-plane 1s linear both;
  animation-timeline: --remparts;
  animation-range: contain 0% contain 100%;
}
.is-scroll-driven .scene-fog {
  animation: remparts-fog 1s linear both;
  animation-timeline: --remparts;
  animation-range: contain 0% contain 100%;
}
.is-scroll-driven .scene-layer--rim {
  animation: remparts-plane 1s linear both, remparts-light 1s linear both;
  animation-timeline: --remparts, --remparts;
  animation-range: contain 0% contain 100%, contain 60% contain 89.412%;
}
.is-scroll-driven .scene-portal__glow,
.is-scroll-driven .scene-portal > svg,
.is-scroll-driven .scene-light::after {
  animation: remparts-light 1s linear both;
  animation-timeline: --remparts;
  animation-range: contain 60% contain 89.412%;
}
.is-scroll-driven .scene-portal__rift {
  animation: remparts-opening 1s linear both, remparts-light 1s linear both;
  animation-timeline: --remparts, --remparts;
  animation-range: contain 60% contain 89.412%, contain 60% contain 67.353%;
}
@keyframes remparts-plane {
  from {
    transform: translate3d(-50%, calc(-50% + var(--shift-from)), 0);
  }
  to {
    transform: translate3d(-50%, calc(-50% + var(--shift-to)), 0);
  }
}
@keyframes remparts-fog {
  from {
    transform: translate3d(0, var(--shift-from), 0);
  }
  to {
    transform: translate3d(0, var(--shift-to), 0);
  }
}
@keyframes remparts-light {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes remparts-opening {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
@keyframes corvus-bow {
  0%,
  100% {
    transform: rotate(0);
  }
  35% {
    transform: rotate(-7deg) translateY(2px);
  }
  65% {
    transform: rotate(2deg);
  }
}
@keyframes corvus-arrive {
  from {
    transform: translateY(12px);
    opacity: 0.5;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
.l-hero.is-animating .eclipse-image { will-change: transform; }
.eclipse-controls button:hover,
.eclipse-controls button[aria-pressed="true"] { border-color: var(--gold); }
@media (hover: hover) {
  .l-nav a:hover { background-size: 100% 1px; }
  .project-visual:hover .project-mount { transform: translateY(-3px); border-color: var(--metal); }
  .project-visual:hover .project-poster::before { opacity: .16; }
  .project-visual:hover .project-mount::before,
  .project-visual:hover .project-mount::after { border-color: var(--gold); }
  .project-more:hover > span { transform: translate(3px, -3px); }
  .button-primary:hover { box-shadow: inset 0 1px var(--button-hover), 0 6px 30px var(--metal-glint); }
}
.l-nav a:focus-visible { background-size: 100% 1px; }
.project-visual:focus-visible .project-mount { border-color: var(--gold); }
.project-visual:focus-visible .project-poster::before { opacity: .16; }
@media (prefers-reduced-motion: reduce) {
  .project-more > span { transform: none; }
  .project-visual:hover .project-mount, .familiar-toggle:hover img { transform: none; }
}

@view-transition { navigation: auto; }
.is-portal-active { overflow: hidden; }
.is-ritual-open { overflow: hidden; }
.candle-fire, .candle-core { opacity: var(--ritual-candle, 1); }
.ritual-seal-button:focus-visible { outline: 1px solid var(--focus); outline-offset: 10px; }
.ritual-seal-button:hover .ritual-seal-base, .ritual-dialog.is-held .ritual-seal-base { opacity: .7; }
.ritual-close:hover, .ritual-return:hover { background: var(--surface); border-color: var(--gold); }
.ritual-reveal:hover, .ritual-settings button:hover { color: var(--ink); }
.familiar.is-recognized .familiar-toggle > span { color: var(--gold); border-color: var(--ritual-copper); }
.ritual-dialog[data-phase="returning"] .l-ritual-header,
.ritual-dialog[data-phase="returning"] .l-ritual-footer { opacity: var(--ritual-scene); }
.ritual-dialog.is-running .ritual-crypt, .ritual-dialog.is-running .ritual-apparition { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .ritual-crypt, .ritual-apparition { transform: none; }
  .ritual-apparition { margin-left: -21vh; }
  .ritual-fog, .ritual-shadow, .ritual-ash { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 650px) { .ritual-apparition { margin-left: -16vh; } }
.is-lantern-lit .lantern-reveal, .is-lantern-lit .lantern-flame { opacity: 1; }
.is-lantern-lit .lantern-glow { opacity: var(--lantern-breath, 1); }
.is-lantern-lit .cathedral-image:not(.lantern-image) { filter: saturate(.62) brightness(calc(.46 + var(--awakening) * .16)); }
.lantern-carving.is-found { color: var(--lantern-light); filter: drop-shadow(0 0 6px var(--occult-flame)); }
.lantern-choice.is-found, .lantern-choice:hover { border-color: var(--gold); color: var(--gold); }
.is-ritual-awakened .scene-portal__glow { filter: brightness(1.25); }
.is-ritual-awakened .scene-portal__rift { animation: none; opacity: 1; transform: scale(1); }
.is-ritual-awakened .scene-portal__glow, .is-ritual-awakened .scene-portal > svg { animation: none; opacity: 1; }
.is-ritual-awakened .altar-seal { filter: drop-shadow(0 0 10px var(--occult-flame)); }
.scene.is-animating .remparts-ritual-seal { animation-play-state: running; }
.project-filters[open] summary::after, .cathedral-options[open] summary::after { content: "−"; }
.reading-nav a[aria-current="location"], .reading-nav a:hover { color: var(--ink); background: var(--raised); }
.project-site:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 650px) {
  .is-reading .familiar { bottom: calc(6px + env(safe-area-inset-bottom)); }
  .is-reading .familiar-toggle img { height: 36px; }
  .is-reading .familiar-toggle > span { font-size: .6875rem; }
}
@media (hover: hover) { .project-more:hover > span { transform: translateX(3px); } }
.is-portal-active body { pointer-events: none; }
.is-portal-arriving::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: var(--portal-night);
  pointer-events: none;
}
.grimoire-chapter[aria-selected="true"] { border-color: var(--gold); background: var(--grimoire-tab); color: var(--ink); }
.grimoire-chapter:hover, .grimoire-mode:hover, .grimoire-pagination button:not(:disabled):hover { color: var(--ink); }
.place-card:hover, .place-card:focus-visible { border-color: var(--gold); }
.place-card:hover > img, .place-card:focus-visible > img { transform: scale(1.04); opacity: 1; }
.sanctuary.is-sanctuary-running .sanctuary-heart { will-change: transform, opacity; }
.sanctuary.is-sanctuary-open .sanctuary-open > span { position: absolute; top: calc(100% + 10px); font: .875rem/1.3 var(--font); max-width: none; white-space: nowrap; padding: 10px 14px; border: 1px solid var(--metal-dim); }
.sanctuary-open:hover > span, .sanctuary-open:focus-visible > span { color: var(--ink); }
.sanctuary-pause[aria-pressed="true"] { border-color: var(--gold); }
@media (prefers-reduced-motion: reduce) {
  .gothic-portal, .is-portal-arriving::before { display: none; }
  .project-more:hover > span { transform: none; }
  .place-card > img { transition: none; }
  .place-card:hover > img, .place-card:focus-visible > img { transform: none; }
}