/* Homepage materials and motion. Keep the casket and its preload independent. */
:root { --ivory: #f0e1c3; --brass: #c8a265; }
.chamber::after {
  background: linear-gradient(180deg, #080d1421, transparent 38%, #060c132b 74%, #05090eb8),
    radial-gradient(ellipse at 50% 42%, transparent 18%, #050b1626 80%);
}
.brand-bar { inset: calc(31px + var(--safe-top)) 3.25vw auto; }
.wordmark { position: relative; padding-bottom: 16px; font-size: 20px; letter-spacing: .23em; color: var(--ivory); }
.wordmark::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #ac8c5166, #d1ac76ae 48%, #ac8c5100); }
#topics-stage { padding: calc(104px + var(--safe-top)) 4vw calc(32px + var(--safe-bottom)); animation: none; }
#topics-stage .ritual-center { width: min(990px, 100%); }
#topics-title { color: var(--ivory); font-size: clamp(42px, 4.3vw, 70px); line-height: 1.15; letter-spacing: -.025em; text-shadow: 0 2px 4px #020409cc, 0 0 28px #02050cdc; }
.topic-intro { margin: 13px 0 0; color: #e6d4b0; font-size: clamp(16px, 1.6vw, 23px); line-height: 1.4; text-shadow: 0 2px 12px #020409; }
.topic-period-policy { margin: 8px 0 0; color: #c9b896; font-size: 12px; line-height: 1.5; text-shadow: 0 2px 8px #020409; }
.topic-grid button.topic-current-period .topic-copy { color: #f2d79e; }
.topic-grid { margin: 56px auto 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 24px; }
.topic-grid button {
  display: block; aspect-ratio: 1.145; min-height: 0; width: 100%; padding: 0; border: 0; border-radius: 11px;
  background: transparent; box-shadow: none; overflow: visible; isolation: isolate;
  transition: transform 240ms ease, opacity 240ms ease, filter 240ms ease;
}
.topic-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: filter 320ms ease; filter: drop-shadow(0 7px 7px #03070ad9); }
.topic-grid button::before {
  content: ""; position: absolute; z-index: 1; inset: 4% 3.5%; border-radius: 9px; pointer-events: none;
  background: linear-gradient(112deg, transparent 28%, #ffedc308 44%, #ffedc318 49%, transparent 62%);
  opacity: 0; transform: translateX(-7%); transition: opacity 350ms, transform 650ms;
}
.topic-grid button::after {
  inset: 3% 3.2%; border: 1px solid #ebba66; border-radius: 9px; z-index: 0;
  box-shadow: 0 0 6px #ffd88b80, 0 0 20px #d6953845, inset 0 0 9px #edb44c38;
  opacity: 0; transition: opacity 280ms;
}
.topic-name, .topic-copy { position: absolute; left: 4%; right: 4%; z-index: 2; pointer-events: none; }
.topic-name { --topic-title-size: clamp(20px, 1.8vw, 28px); bottom: 19.8%; font-size: var(--topic-title-size); line-height: 1.15; color: #f1e1ba; text-shadow: 0 1px 1px #f8dca61a, 0 2px 2px #000, 0 0 9px #000; white-space: nowrap; }
.topic-grid [data-topic-id="growth"] .topic-name { font-size: calc(var(--topic-title-size) - 2px); }
.topic-copy { bottom: 10.4%; font-size: clamp(11px, .94vw, 14px); line-height: 1.35; color: #e2d4b5; text-shadow: 0 2px 3px #000; white-space: nowrap; }
.topic-grid button:hover, .topic-grid button:focus-visible, .topic-grid button.topic-active {
  background: transparent; border: 0; box-shadow: none; transform: translateY(-4px) scale(1.016);
}
.topic-grid button:hover .topic-art, .topic-grid button:focus-visible .topic-art, .topic-grid button.topic-active .topic-art { filter: brightness(1.12) drop-shadow(0 7px 7px #03070ad9); }
.topic-grid button:hover::before, .topic-grid button.topic-active::before { opacity: 1; transform: translateX(7%); }
.topic-grid button:hover::after, .topic-grid button.topic-active::after, .topic-grid button:focus-visible::after, .topic-grid button.selected::after { opacity: .85; }
.topic-grid button:focus-visible { outline: 2px solid #f3d49b; outline-offset: 3px; }
.topic-grid button:active, .topic-grid button.pressed { transform: translateY(2px) scale(.985); }
.topic-grid button.selected { transform: translateY(-5px) scale(1.035); }
.topic-grid button.selected .topic-art { filter: brightness(1.2) drop-shadow(0 0 12px #de9e3b66) drop-shadow(0 7px 7px #03070ad9); }
.chamber-notes { width: 100%; margin: 50px auto 0; gap: 36px; }
.chamber-notes > .notes-side { max-width: none; display: flex; gap: 24px; }
.notes-side > div { padding-right: 24px; max-width: 260px; }
.notes-side > div + div { border-left: 1px solid #b193584f; padding-left: 24px; padding-right: 0; }
.chamber-notes > .notes-side:last-child { text-align: left; }
.chamber-notes p { color: #d0c1a5; font-size: 12px; line-height: 1.7; text-shadow: 0 2px 10px #020408; }
.chamber-notes .note-title { position: relative; margin-bottom: 14px; font-size: 10px; letter-spacing: .18em; color: #e8d7b3; white-space: nowrap; }
.note-title::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 26px; height: 1px; background: #c6a776; }

/* Small translucent surfaces move; the detailed background itself stays still. */
.chamber-atmosphere { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.window-light {
  position: absolute; left: 12%; top: -14%; width: 30%; height: 72%; transform-origin: top left;
  background: linear-gradient(110deg, transparent 31%, #b9dcf017 43%, #badbe808 52%, transparent 68%);
  transform: rotate(-14deg); animation: moonlight-breathe 17s ease-in-out infinite alternate;
}
.incense-smoke { position: absolute; left: 9%; bottom: 27%; width: 130px; height: 230px; border-radius: 60%; opacity: .15; background: radial-gradient(ellipse at 50% 54%, #c9d9e928, transparent 65%); animation: incense-rise 13s ease-in-out infinite; }
.smoke-two { left: 8%; bottom: 24%; width: 110px; height: 180px; animation-duration: 19s; animation-delay: -8s; opacity: .12; }
.beam-dust { position: absolute; left: 14%; top: 12%; width: 26%; height: 58%; }
.beam-dust i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e7e9de; opacity: 0; animation: dust-drift 18s linear infinite; }
.beam-dust i:nth-child(1) { left: 12%; top: 36%; animation-delay: -2s; }
.beam-dust i:nth-child(2) { left: 32%; top: 48%; animation-delay: -11s; width: 1px; height: 1px; }
.beam-dust i:nth-child(3) { left: 18%; top: 83%; animation-delay: -6s; }
.beam-dust i:nth-child(4) { left: 41%; top: 27%; animation-delay: -13s; }
.beam-dust i:nth-child(5) { left: 52%; top: 70%; animation-delay: -9s; width: 1px; height: 1px; }
.beam-dust i:nth-child(6) { left: 70%; top: 47%; animation-delay: -3s; }
.beam-dust i:nth-child(7) { left: 24%; top: 62%; animation-delay: -16s; }
.beam-dust i:nth-child(8) { left: 8%; top: 19%; animation-delay: -7s; width: 1px; height: 1px; }
.beam-dust i:nth-child(9) { left: 58%; top: 36%; animation-delay: -15s; }
.beam-dust i:nth-child(10) { left: 80%; top: 74%; animation-delay: -4s; width: 1px; height: 1px; }
.beam-dust i:nth-child(11) { left: 67%; top: 22%; animation-delay: -10s; }
.beam-dust i:nth-child(12) { left: 35%; top: 88%; animation-delay: -1s; }
.distant-warmth { position: absolute; left: 51%; top: 25%; width: 11%; height: 20%; background: radial-gradient(ellipse, #e4a55216, transparent 70%); animation: distant-lantern 7s ease-in-out infinite alternate; }
.chamber-lamp { position: absolute; width: 85px; height: 145px; margin: -72px 0 0 -42px; opacity: 0; background: radial-gradient(ellipse, #ffdfa359, #f4a34422 22%, transparent 64%); transition: opacity 330ms ease; }
.chamber-lamp[data-lamp="love"] { left: 34%; top: 29%; }
.chamber-lamp[data-lamp="career"] { left: 44%; top: 27%; }
.chamber-lamp[data-lamp="money"] { left: 56%; top: 27%; }
.chamber-lamp[data-lamp="study"] { left: 66%; top: 29%; }
.chamber-lamp[data-lamp="health"] { left: 27%; top: 31%; }
.chamber-lamp[data-lamp="relationships"] { left: 73%; top: 32%; }
.chamber-lamp[data-lamp="family"] { left: 83%; top: 43%; }
.chamber-lamp[data-lamp="growth"] { left: 96%; top: 40%; }
body[data-active-topic="love"] [data-lamp="love"], body[data-active-topic="career"] [data-lamp="career"],
body[data-active-topic="money"] [data-lamp="money"], body[data-active-topic="study"] [data-lamp="study"],
body[data-active-topic="health"] [data-lamp="health"], body[data-active-topic="relationships"] [data-lamp="relationships"],
body[data-active-topic="family"] [data-lamp="family"], body[data-active-topic="growth"] [data-lamp="growth"] { opacity: .85; }
.ritual-chamber-response {
  position: fixed; left: var(--response-x, 50%); top: var(--response-y, 28%);
  width: clamp(170px, 24vw, 340px); aspect-ratio: 1; z-index: 1;
  transform: translate(-50%, -50%); opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse, #f8dd9b4d 0%, #e5b26727 22%, #e7bc7110 45%, transparent 70%);
}
body[data-transition="topic-exit"] .ritual-chamber-response { animation: chamber-receives 2200ms ease-out both; }
body[data-transition="topic-exit"] .topic-grid { pointer-events: none; }
body[data-transition="topic-exit"] .topic-grid button.selected {
  z-index: 5; transform-origin: center; animation: offering-retreat 2200ms linear both;
}
body[data-transition="topic-exit"] .topic-grid button.selected::after {
  opacity: 1; box-shadow: 0 0 7px #ffd88bcc, 0 0 27px #dba34c70, inset 0 0 14px #f4d28b3f;
}
body[data-transition="topic-exit"] .topic-grid button.selected::before {
  background: linear-gradient(112deg, transparent 20%, #ffe9ba13 38%, #fff1d84a 49%, transparent 65%);
  animation: brass-awakens 1000ms ease-out both;
}
body[data-transition="topic-exit"] .topic-grid button:not(.selected) {
  animation: unchosen-recede 400ms ease-out both; animation-delay: calc(var(--topic-order, 0) * 13ms);
}
body[data-transition="topic-exit"] #topics-title, body[data-transition="topic-exit"] .topic-intro { animation: title-depart 2200ms ease-in both; }
body[data-transition="topic-exit"] .chamber-notes { animation: notes-depart 2200ms ease-in both; }
body[data-stage="casket"] .chamber-atmosphere { display: none; }
body[data-page-hidden="true"] .chamber-atmosphere *, body[data-page-hidden="true"] .ritual-chamber-response { animation-play-state: paused !important; }
@keyframes moonlight-breathe { from { opacity: .5; transform: rotate(-14deg) translateX(-4px); } to { opacity: .9; transform: rotate(-12deg) translateX(8px); } }
@keyframes incense-rise { 0% { opacity: .02; transform: translate(0, 35px) scale(.8); } 45% { opacity: .24; } 100% { opacity: 0; transform: translate(22px, -40px) scale(1.16); } }
@keyframes dust-drift { 0% { opacity: 0; transform: translate(0, 20px); } 18% { opacity: .45; } 72% { opacity: .2; } 100% { opacity: 0; transform: translate(22px, -48px); } }
@keyframes distant-lantern { from { opacity: .35; } to { opacity: .8; } }
@keyframes offering-retreat {
  0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); animation-timing-function: ease-out; }
  10% { opacity: 1; transform: translate3d(0, -12px, 0) scale(1.085); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  50% { opacity: 1; transform: translate3d(var(--offering-center-x), var(--offering-center-y), 0) scale(1.12); }
  64% { opacity: 1; transform: translate3d(var(--offering-center-x), var(--offering-center-y), 0) scale(1.12); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  92% { opacity: .9; transform: translate3d(var(--offering-x), var(--offering-y), 0) scale(.22); animation-timing-function: ease-out; }
  100% { opacity: 0; transform: translate3d(var(--offering-x), var(--offering-y), 0) scale(.06); }
}
@keyframes brass-awakens { 0% { opacity: 0; transform: translateX(-12%); } 28% { opacity: 1; } 100% { opacity: 0; transform: translateX(18%); } }
@keyframes unchosen-recede { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(13px) scale(.94); } }
@keyframes chamber-receives { 0%, 64% { opacity: 0; transform: translate(-50%, -50%) scale(.72); } 82% { opacity: .85; transform: translate(-50%, -50%) scale(1); } 94% { opacity: .55; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
@keyframes title-depart { 0%, 5% { opacity: 1; transform: translateY(0); } 30%, 100% { opacity: 0; transform: translateY(-45px); } }
@keyframes notes-depart { 0%, 5% { opacity: 1; } 24%, 100% { opacity: 0; } }

@media (min-width: 651px) and (max-width: 1100px) and (orientation: portrait) {
  #topics-stage { padding: calc(107px + var(--safe-top)) 5vw calc(32px + var(--safe-bottom)); }
  #topics-stage .ritual-center { width: min(540px, 54vw); }
  #topics-title { font-size: clamp(36px, 4.8vw, 53px); white-space: nowrap; }
  .topic-intro { font-size: 18px; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 45px; }
  .topic-name { --topic-title-size: clamp(22px, 2.75vw, 28px); }
  .topic-copy { font-size: clamp(11px, 1.4vw, 14px); }
  .chamber-notes { margin-top: 32px; }
  .chamber-notes > .notes-side { display: block; }
  .notes-side > div + div { border-left: 0; margin-top: 16px; padding-left: 0; }
}
@media (max-width: 1100px) and (orientation: landscape) {
  #topics-stage { padding-top: calc(92px + var(--safe-top)); }
  #topics-stage .ritual-center { width: min(900px, 84vw); }
  .topic-grid { gap: 18px; margin-top: 38px; }
  .topic-name { --topic-title-size: 24px; }
  .topic-copy { font-size: 12px; }
  .chamber-notes { margin-top: 34px; }
  .notes-side > div { padding-right: 16px; }
  .notes-side > div + div { padding-left: 16px; }
  .chamber-notes > .notes-side { gap: 0; }
  .chamber-notes p { font-size: 11px; }
  .chamber-notes .note-title { font-size: 9px; }
}
@media (max-width: 650px) {
  .brand-bar { inset: calc(23px + var(--safe-top)) 23px auto; }
  .wordmark { font-size: 13px; padding-bottom: 10px; letter-spacing: .21em; }
  #topics-stage { padding: calc(84px + var(--safe-top)) 22px calc(23px + var(--safe-bottom)); }
  #topics-stage .ritual-center { width: min(352px, 100%); }
  #topics-title { font-size: clamp(30px, 8.8vw, 43px); line-height: 1.2; white-space: nowrap; }
  .topic-intro { font-size: clamp(12px, 3.55vw, 16px); margin-top: 9px; }
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 41px; }
  .topic-name { --topic-title-size: clamp(19px, 5.15vw, 23px); }
  .topic-copy { font-size: clamp(9.5px, 2.65vw, 12px); }
  .topic-grid button { border-radius: 8px; }
  .topic-grid button::after { border-radius: 6px; box-shadow: 0 0 5px #ffd88b80, 0 0 11px #d695383f; }
  .chamber-notes { margin-top: 31px; gap: 20px; }
  .chamber-notes > .notes-side { display: block; flex: 1; min-width: 0; }
  .notes-side > div { padding-right: 0; }
  .notes-side > div + div { border-left: 0; padding-left: 0; margin-top: 17px; }
  .chamber-notes p { font-size: 10px; line-height: 1.6; }
  .chamber-notes .note-title { font-size: 8px; letter-spacing: .11em; margin-bottom: 11px; }
  .window-light { left: -2%; top: 0; width: 64%; height: 55%; }
  .beam-dust { left: 5%; top: 15%; width: 39%; height: 43%; }
  .incense-smoke { bottom: 20%; left: -3%; width: 85px; height: 165px; }
  .distant-warmth { left: 56%; top: 31%; }
  .chamber-lamp { width: 62px; height: 115px; margin: -57px 0 0 -31px; }
  .chamber-lamp[data-lamp="love"] { left: 39%; top: 33%; }
  .chamber-lamp[data-lamp="career"] { left: 42%; top: 27%; }
  .chamber-lamp[data-lamp="money"] { left: 60%; top: 27%; }
  .chamber-lamp[data-lamp="study"] { left: 67%; top: 33%; }
  .chamber-lamp[data-lamp="health"] { left: 23%; top: 41%; }
  .chamber-lamp[data-lamp="relationships"] { left: 81%; top: 41%; }
  .chamber-lamp[data-lamp="family"] { left: 87%; top: 50%; }
  .chamber-lamp[data-lamp="growth"] { left: 93%; top: 58%; }
}
@media (max-width: 360px) {
  #topics-stage { padding-left: 15px; padding-right: 15px; }
  .topic-grid { gap: 10px; }
  .topic-copy { font-size: 9px; }
  .topic-name { --topic-title-size: 18px; }
  .chamber-notes .note-title { font-size: 7px; }
}
@media (min-width: 1101px) and (max-height: 780px) {
  #topics-stage { padding-top: calc(95px + var(--safe-top)); }
  #topics-stage .ritual-center { width: min(890px, 82vw, 132svh); }
  #topics-title { font-size: 55px; }
  .topic-intro { font-size: 20px; }
  .topic-grid { margin-top: 38px; gap: 18px; }
  .topic-name { --topic-title-size: 25px; }
  .topic-copy { font-size: 12px; }
  .chamber-notes { margin-top: 35px; }
}
@media (max-height: 590px) and (orientation: landscape) {
  #topics-stage { padding-top: calc(78px + var(--safe-top)); }
  #topics-stage .ritual-center { width: min(650px, 85vw); }
  #topics-title { font-size: 34px; }
  .topic-intro { font-size: 14px; }
  .topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 23px; gap: 12px; }
  .topic-name { --topic-title-size: 19px; }
  .topic-copy { font-size: 9px; }
  .chamber-notes { margin-top: 25px; }
  .chamber-notes p { font-size: 9px; }
  .chamber-notes .note-title { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .chamber-atmosphere * { animation: none !important; }
  .window-light { opacity: .5; }
  .incense-smoke, .beam-dust, .ritual-chamber-response { display: none; }
  .topic-grid button, .topic-grid button::before, .topic-grid button::after, .topic-art, .chamber-lamp { transition: none; }
  .topic-grid button:hover, .topic-grid button:focus-visible, .topic-grid button.topic-active, .topic-grid button.selected, .topic-grid button.pressed { transform: none; }
  body[data-transition="topic-exit"] #topics-title, body[data-transition="topic-exit"] .topic-intro,
  body[data-transition="topic-exit"] .topic-grid, body[data-transition="topic-exit"] .chamber-notes,
  body[data-transition="topic-exit"] .topic-grid button, body[data-transition="topic-exit"] .topic-grid button::before { animation: none; }
}