/* Each piece of the shrine is independent; the static layers remain usable without WebGL. */
.lp3-hero {overflow:hidden;background:#fcf6ec}
.lp3-scene {position:absolute;inset:0;overflow:hidden;pointer-events:none;contain:strict}
.lp3-scene-fallback {position:absolute;inset:0}
.lp3-scene-fallback img {position:absolute;display:block;max-width:none}
.lp3-scene-backdrop {width:100%;height:100%;object-fit:cover;object-position:center}
.lp3-scene-character {height:150%;width:auto;top:5%;left:25%;transform:translateX(-50%)}
.lp3-scene-branch {width:43%;height:auto;left:-7%;top:-3%;opacity:.92}
.lp3-scene-aureole {position:absolute;left:25%;top:27%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff8cd77 15%,#f5d17c33 48%,transparent 70%)}
.lp3-scene canvas {position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0}
.lp3-scene.is-ready canvas {opacity:1}
.lp3-scene.is-ready .lp3-scene-fallback {visibility:hidden}
.lp3-scene::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 35%,#fcf6ec4d 48%,#fcf6ecaa 66%,#fcf6ec80);pointer-events:none}
.lp3-hero-copy {z-index:2}
.lp3-hero .lp3-scene-toggle {position:absolute;z-index:3;left:22px;bottom:18px;min-height:44px;padding:8px 14px;border:1px solid #b79a6370;border-radius:999px;background:#fffcf0df;color:#765538;font:12px/1.5 "Noto Serif JP",serif;letter-spacing:.04em;cursor:pointer;backdrop-filter:blur(8px)}
.lp3-scene-toggle[hidden] {display:none}
.lp3 .lp3-scene-toggle:hover {background:#fffdf7}
.lp3 .lp3-scene-toggle:focus-visible {outline:2px solid #9f6b27;outline-offset:4px}
@media(max-width:700px) {
  .lp3-hero {background:#fcf6ec;padding-top:56vw}
  .lp3-scene {bottom:auto;height:56vw}
  .lp3-scene-backdrop {object-position:22% center;width:170%;left:-10%}
  .lp3-scene-character {height:225%;top:2%;left:50%}
  .lp3-scene-branch {width:64%;left:-20%;top:-8%}
  .lp3-scene-aureole {left:50%;top:44%;width:65%}
  .lp3-scene::after {background:linear-gradient(180deg,transparent 68%,#fcf6ec 100%)}
  .lp3-hero .lp3-scene-toggle {left:auto;right:12px;top:12px;bottom:auto;min-height:44px;padding:8px 12px;font-size:11px}
}
/* A single slow bloom accompanies the existing result reveal, without extending its duration. */
.oracle-reveal {overflow:hidden;isolation:isolate}
.oracle-reveal::before,.oracle-reveal::after {content:"";position:absolute;pointer-events:none;z-index:-1;opacity:0}
.oracle-reveal.active::before {inset:-40%;background:radial-gradient(ellipse at center,#fff8dbe6 0%,#eec36a55 16%,#b8792422 32%,transparent 60%);animation:oracle-light-gather 2.4s ease-out both}
.oracle-reveal.active::after {width:min(68vw,520px);aspect-ratio:1;border:1px solid #edc46b70;border-radius:50%;box-shadow:0 0 45px #e7b74d33,inset 0 0 45px #e7b74d22;animation:oracle-ring-open 2.4s ease-out both}
.oracle-reveal.active .reveal-rating {animation:oracle-words-arrive 1.1s ease-out both}
@keyframes oracle-light-gather {0%{opacity:0;transform:scale(1.5)}28%{opacity:.85;transform:scale(.6)}65%{opacity:.28;transform:scale(1)}100%{opacity:.12;transform:scale(1.1)}}
@keyframes oracle-ring-open {0%{opacity:0;transform:scale(.65)}35%{opacity:.75}100%{opacity:0;transform:scale(1.3)}}
@keyframes oracle-words-arrive {0%,20%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce) {
  .oracle-reveal::before,.oracle-reveal::after {display:none}
}