/* V38: only separate transparent layers move; the images never transform. */
.gelli-visual-frame{position:relative;width:100%;height:100%;overflow:hidden;isolation:isolate}
.gelli-visual-frame>img{width:100%;height:100%;object-fit:contain;display:block;transform:none!important;animation:none!important}
.gb38-atmosphere{position:absolute;inset:0;pointer-events:none;z-index:2;overflow:hidden;contain:paint}
.gb38-particle{position:absolute;left:var(--px);top:var(--py);width:var(--sz);height:var(--sz);border-radius:50%;
 background:#ffdfa0;box-shadow:0 0 7px 2px #f9c77375;opacity:0;animation:gb38-float var(--dur) ease-in-out var(--lag) infinite}
.gb38-halo{position:absolute;inset:0;opacity:0;pointer-events:none;animation:gb38-halo 9s ease-in-out infinite;
 background:radial-gradient(ellipse 23% 24% at var(--gb38-x) var(--gb38-y),rgba(255,218,119,.26),transparent 85%)}
.gb38-text .gb38-halo{display:none}.gb38-text .gb38-particle{opacity:.14;background:#ffe3a5;box-shadow:0 0 4px #fff2cf}
.gb38-cover .gb38-halo,.gb38-magic .gb38-halo,.gb38-key .gb38-halo,.gb38-treasure .gb38-halo{animation-duration:7s}
.gb38-magic .gb38-particle,.gb38-key .gb38-particle,.gb38-treasure .gb38-particle,.gb38-cover .gb38-particle{background:#ffe2a1;box-shadow:0 0 8px 2px #ffc4578c}
.gb38-basement:before,.gb38-passage:before,.gb38-night:before,.gb38-moon:before,.gb38-rumble:before{content:'';position:absolute;inset:55% -15% -22%;pointer-events:none;
 background:radial-gradient(ellipse at 30% 70%,#cee8ef25,transparent 55%),radial-gradient(ellipse at 70% 50%,#9dbcd824,transparent 58%);
 animation:gb38-mist 19s ease-in-out infinite alternate}
.gb38-basement .gb38-halo,.gb38-night .gb38-halo,.gb38-rumble .gb38-halo,.gb38-moon .gb38-halo{background:radial-gradient(ellipse 24% 24% at var(--gb38-x) var(--gb38-y),#b4d0e923,transparent 85%);animation-duration:13s}
.gb38-chaos .gb38-particle{background:#efb6eb;box-shadow:0 0 5px 1px #ffdc8585;animation-duration:5.5s}
.gb38-rescue .gb38-particle,.gb38-sunrise .gb38-particle,.gb38-play .gb38-particle,.gb38-comedy .gb38-particle{background:#fff2c2;box-shadow:0 0 5px 1px #ffe7a35c}
.gb38-sleep .gb38-particle,.gb38-rest .gb38-particle,.gb38-sunset .gb38-particle{opacity:.2;animation-duration:15s}
.gb38-sleep .gb38-halo,.gb38-rest .gb38-halo,.gb38-sunset .gb38-halo{animation-duration:16s;opacity:.1}
@keyframes gb38-float{0%,100%{opacity:0;transform:translate3d(0,10px,0) scale(.65)}25%{opacity:.4}65%{opacity:.64}88%{opacity:.16;transform:translate3d(14px,-20px,0) scale(1.1)}}
@keyframes gb38-halo{0%,100%{opacity:.05}50%{opacity:.48}}
@keyframes gb38-mist{0%{opacity:.17;transform:translateX(-5%)}100%{opacity:.48;transform:translateX(5%)}}
/* Exact page area anchored to the contained image (not to black letterbox). */
:is(.app:fullscreen,.app.focus-mode) .page-left{display:flex!important;align-items:center;justify-content:center}
:is(.app:fullscreen,.app.focus-mode) .gelli-visual-frame{
  flex:0 0 auto;width:min(100vw,125dvh);height:min(100dvh,80vw);max-width:100vw;max-height:100dvh;aspect-ratio:5/4;
}
:is(.app:fullscreen,.app.focus-mode) .page-left>.gelli-visual-frame>img{width:100%;height:100%;object-fit:contain}
@media(prefers-reduced-motion:reduce){.gb38-atmosphere{display:none!important}}