.dream-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 51% 30%, #cad9aa 0%, #8da989 35%, #365e50 72%, #183d35 100%); contain: strict; }
.dream-home > section:first-of-type > div:first-child { padding: 2rem; border: 1px solid #fff5d86b; border-radius: 2rem; background: linear-gradient(125deg, #fcf9e9ed, #f3f5e6d9); box-shadow: 0 20px 80px #143e3526, inset 0 0 45px #fff9df66; backdrop-filter: blur(12px); }
.dream-halo { position: absolute; inset: -20%; background: radial-gradient(ellipse at 60% 25%, #fff9cba8, transparent 35%); animation: dream-breathe 12s ease-in-out infinite alternate; }
.dream-rays { position: absolute; inset: -60% -40%; background: repeating-conic-gradient(from 165deg at 58% 0%, transparent 0deg 9deg, #fff7ca20 10deg 13deg, transparent 14deg 23deg); transform-origin: 58% 0; animation: ray-sway 23s ease-in-out infinite alternate; }
.dream-moon { position: absolute; width: 210px; aspect-ratio: 1; border-radius: 50%; right: 15%; top: 13%; background: #fff8d8; box-shadow: 0 0 60px #fff5bb88, 0 0 150px #eaf7b377; opacity: .55; }
.dream-trees { position: absolute; inset: 0; }
.dream-trees > i { position: absolute; bottom: -5%; left: var(--x); height: var(--h); width: var(--w); opacity: var(--alpha); background: linear-gradient(90deg, #163f36, #294c3c); transform: rotate(var(--lean)); border-radius: 60% 20% 0 0; }
.dream-trees > i::before, .dream-trees > i::after { content: ''; position: absolute; width: 180px; height: 14px; background: #234c3d; top: 20%; right: 0; transform: rotate(35deg); transform-origin: right; border-radius: 100%; }
.dream-trees > i::after { top: 40%; left: 10px; transform: rotate(-35deg); transform-origin: left; width: 140px; }
.dream-canopy { position: absolute; top: -160px; width: 58vw; height: 330px; background: radial-gradient(ellipse at 30% 60%, #153f31 0 25%, transparent 26%), radial-gradient(ellipse at 65% 30%, #244f3c 0 39%, transparent 40%), radial-gradient(ellipse at 85% 10%, #386343 0 45%, transparent 46%); filter: blur(7px); opacity: .75; transform-origin: top; animation: canopy-sway 15s ease-in-out infinite alternate; }
.canopy-left { left: -12%; }.canopy-right { right: -12%; transform: scaleX(-1); animation-delay: -8s; }
.lace-curtain { position: absolute; top: 0; width: clamp(65px, 10vw, 155px); height: 64vh; background: repeating-linear-gradient(90deg, #f6f1dfcc 0, #fff9eb55 16px, #c1c8b965 28px, #fff9ebe0 44px); border-bottom: 8px double #fffae4bc; box-shadow: 8px 0 30px #173c3222; }
.curtain-left { left: -20px; border-radius: 0 0 95% 0; transform: rotate(9deg); transform-origin: top left; }.curtain-right { right: -20px; border-radius: 0 0 0 95%; transform: rotate(-9deg); transform-origin: top right; }
.lace-valance { position: absolute; inset: 0 0 auto; height: 26px; background: radial-gradient(circle at 12px 0, #fff9e5d9 15px, transparent 16px) 0 0 / 24px 26px repeat-x; border-top: 5px double #fff9e5; opacity: .85; }
.maid-bow { position: absolute; top: 62%; left: 16%; width: 96px; height: 65px; filter: drop-shadow(0 5px 6px #122e3640); }
.maid-bow > i { position: absolute; width: 47px; height: 42px; background: linear-gradient(135deg, #33594f, #102e29); border: 1px solid #ddcba474; border-radius: 10% 70% 35% 65%; transform: rotate(20deg); }.maid-bow > i:last-child { left: 44px; transform: scaleX(-1) rotate(20deg); }.maid-bow > b { position: absolute; z-index: 1; left: 39px; top: 9px; height: 25px; width: 16px; border-radius: 5px; background: #bca779; }.maid-bow::after { content: ''; position: absolute; top: 29px; left: 26px; height: 75px; width: 45px; background: #203f34; clip-path: polygon(20% 0, 80% 0, 100% 100%, 50% 80%, 0 100%); }
.floating-book { position: absolute; width: 110px; height: 76px; display: flex; perspective: 500px; transform: rotate(var(--turn)); animation: book-hover 10s ease-in-out infinite; animation-delay: var(--delay); filter: drop-shadow(0 12px 10px #183d3544); opacity: .78; }
.floating-book > span { width: 50%; height: 100%; border: 2px solid #9e8253; border-bottom: 6px solid #3d5b44; background: repeating-linear-gradient(0deg, transparent 0 8px, #8d805844 9px 10px, transparent 11px 13px), linear-gradient(90deg, #c5bc98, #fff5d3 20%, #e9dfb9); border-radius: 5px 16px 4px 4px; transform: rotateY(-20deg); transform-origin: right; }
.floating-book > span:nth-child(2) { transform: rotateY(20deg); transform-origin: left; border-radius: 16px 5px 4px 4px; }.floating-book > i { position: absolute; left: 50%; top: 2px; width: 5px; height: 94px; background: #a16e5b; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 94%, 0 100%); }
.book-0 { left: 6%; top: 20%; }.book-1 { right: 4%; top: 34%; scale: .7; }.book-2 { left: 13%; top: 73%; scale: 1.2; }.book-3 { right: 21%; top: 83%; scale: .8; }.book-4 { left: 44%; top: 6%; scale: .6; }.book-5 { right: 33%; top: 55%; scale: .5; }.book-6 { left: 2%; top: 91%; scale: .65; }
.dream-leaves > i { position: absolute; top: -40px; left: var(--x); width: 13px; height: 27px; border-radius: 90% 0 90% 0; background: linear-gradient(45deg, #718d4c 48%, #c3c786 49% 53%, #456b42 54%); animation: leaf-fall var(--duration) linear infinite; animation-delay: var(--delay); opacity: .65; }
.dream-fireflies > i { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1; border-radius: 50%; background: #fff5b8; box-shadow: 0 0 8px 3px #f3e5a577, 0 0 24px #f8eebf; animation: firefly-drift var(--duration) ease-in-out infinite alternate; animation-delay: var(--delay); }
.dream-mist { position: absolute; width: 140%; left: -20%; height: 35%; background: radial-gradient(ellipse, #e1e9c848, transparent 65%); filter: blur(25px); animation: mist-drift 25s ease-in-out infinite alternate; }.mist-one { bottom: -10%; }.mist-two { top: 35%; opacity: .5; animation-delay: -13s; }
.dream-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 140px #0e302b55; }
@keyframes dream-breathe { to { opacity: .55; transform: scale(1.12); } }
@keyframes ray-sway { to { transform: rotate(8deg); opacity: .5; } }
@keyframes canopy-sway { to { translate: 15px 8px; } }
@keyframes book-hover { 0%,100% { transform: translateY(0) rotate(var(--turn)); } 50% { transform: translateY(-25px) rotate(calc(var(--turn) + 8deg)); } }
@keyframes leaf-fall { 0% { transform: translate(0, -30px) rotate(0); } 50% { transform: translate(70px, 52vh) rotate(170deg); } 100% { transform: translate(-35px, 110vh) rotate(340deg); } }
@keyframes firefly-drift { 0% { opacity: .15; transform: translate(0, 0); } 50% { opacity: 1; } 100% { opacity: .25; transform: translate(28px, -40px); } }
@keyframes mist-drift { to { transform: translateX(10%); opacity: .3; } }
/* Decoration stays behind the interactive journal. No background images. */
body.immersive { isolation: isolate; }
.reading-scene { position: relative; z-index: 1; }
.dream-backdrop { background: transparent; z-index: 0; }
.dream-halo { background: radial-gradient(ellipse at 50% 0%, #d6e7a43b, transparent 55%); }
.dream-moon { top: 4%; right: 18%; width: 110px; opacity: .32; }
.lace-curtain { height: 79vh; width: clamp(75px, 12vw, 220px); opacity: .8; }
.maid-bow { top: 69%; left: 30%; }
.dream-vignette { box-shadow: inset 0 0 120px #00150b66; }
.floating-book { width: 115px; height: 85px; opacity: .8; }
.book-0 { left: 3%; top: 31%; }.book-1 { right: 3%; top: 24%; scale: .8; }.book-2 { left: 4%; top: 75%; }.book-3 { right: 5%; top: 78%; }.book-4 { left: 25%; top: 7%; }.book-5 { right: 28%; top: 9%; }.book-6 { left: 45%; top: 92%; }
.magic-orbit { position: absolute; width: 940px; height: 940px; left: calc(50% - 470px); top: calc(50% - 470px); border: 1px solid #dfc38b35; border-radius: 50%; box-shadow: 0 0 40px #c8d68b0d, inset 0 0 40px #c8d68b0d; animation: orbit-spin 100s linear infinite; }
.magic-orbit::before { content: ''; position: absolute; inset: 16px; border: 2px dotted #dfc38b44; border-radius: 50%; }
.magic-orbit::after { content: '✦'; position: absolute; top: -23px; left: calc(50% - 16px); color: #f6dfa9; font-size: 32px; text-shadow: 0 0 20px #f4dfb0; }
.floating-glyph { position: absolute; left: var(--x); top: var(--y); color: #e9d7a6; font: italic 22px Georgia, serif; text-shadow: 0 0 14px #ecdea688; opacity: .45; animation: book-hover 12s ease-in-out infinite; animation-delay: var(--delay); }
.hanging-charm { position: absolute; top: 0; left: var(--x); height: var(--h); width: 1px; background: linear-gradient(#dec99588,#dec99522); transform-origin: top; animation: charm-sway 7s ease-in-out infinite alternate; }
.hanging-charm::after { content: '✧'; position: absolute; bottom: -23px; left: -14px; color: #e8d6aa; font-size: 28px; text-shadow: 0 0 18px #ffdf9c; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes charm-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@media(max-width:700px) { .lace-curtain { width: 55px; height: 62vh; opacity: .6; }.maid-bow { scale: .6; left: -10px; }.floating-book { scale: .5; }.dream-fireflies > i:nth-child(2n), .floating-glyph:nth-child(2n) { display: none; }.magic-orbit { width: 640px; height: 640px; left: calc(50% - 320px); top: calc(50% - 320px); }.book-2 { left: -20px; }.book-3 { right: -20px; } }
@media(prefers-reduced-motion:reduce) { .dream-backdrop *, .dream-backdrop *::after { animation: none !important; } }