*{box-sizing:border-box}body{margin:0;background:#080d22;color:#fff4dd;font-family:Georgia,serif;background-image:radial-gradient(ellipse at 50% 35%,#51456866,transparent 65%)}.back{position:relative;display:inline-block;margin:24px;color:#ded6f3;text-decoration:none;padding:12px;border:1px solid #d6c7ed44;border-radius:30px}.welcome{text-align:center;padding:20px 20px 0}.eyebrow{text-transform:uppercase;letter-spacing:.2em;font:12px system-ui;color:#e7d2a2}h1{font-weight:400;font-size:clamp(36px,7vw,78px);margin:14px 0;text-shadow:0 0 40px #ffdf9a55}.welcome>p:not(.eyebrow){font-size:19px;line-height:1.6}.interpretation{display:block;color:#c2bdd3;font:13px/1.6 system-ui;max-width:530px;margin:auto}.world{position:relative;width:min(850px,94vw);aspect-ratio:1.4;margin:8px auto 0;display:grid;place-items:center}.orb{width:79%;aspect-ratio:1;border-radius:50%;background:url('fathers-house-world.svg') center/cover;box-shadow:inset -30px -25px 55px #070c35bb,inset 15px 10px 35px #fff4c944,0 0 70px #e5cff33b,0 0 140px #c9dafa22;animation:breathe 10s ease-in-out infinite}.halo{position:absolute;width:96%;height:27%;border:2px solid #fff2b8bb;border-radius:50%;transform:rotate(-22deg);box-shadow:0 0 18px #ffe6a477,inset 0 0 18px #ffe6a444;pointer-events:none}.particles{position:absolute;inset:0;pointer-events:none}.particles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff7d5;box-shadow:0 0 12px #fff0b0;animation:drift 8s infinite ease-in-out}.reflections{display:flex;justify-content:center;gap:12px;padding:0 20px;flex-wrap:wrap}.reflections button{font:17px Georgia;color:#fff1d2;background:linear-gradient(145deg,#38304d,#111b35);border:1px solid #dec58e66;border-radius:18px;padding:20px;cursor:pointer;min-width:210px}.reflections button:hover,.reflections button[aria-pressed=true]{border-color:#ffe3a3;box-shadow:0 0 25px #ffe2ad22}.reflections span{display:block;margin-top:9px;color:#bbb8d4;font:12px system-ui}article{max-width:740px;margin:28px auto;padding:28px;text-align:center;background:#11182dcc;border:1px solid #d7c5a233;border-radius:22px}blockquote{margin:20px 0;font-size:clamp(23px,4vw,31px);line-height:1.5}article>p:last-child{color:#d2ccdf;line-height:1.8;font:16px/1.8 system-ui}.closing{text-align:center;color:#b5adc8;padding:12px 20px 45px;font-style:italic}button:focus-visible,a:focus-visible{outline:3px solid #fff2b8;outline-offset:5px}@keyframes breathe{50%{box-shadow:inset -30px -25px 55px #070c35bb,inset 15px 10px 35px #fff4c944,0 0 95px #e5cff355,0 0 160px #c9dafa33}}@keyframes drift{50%{transform:translateY(-22px);opacity:.3}}@media(max-width:600px){.world{aspect-ratio:1.1}.reflections button{width:100%}article{margin:24px 16px;padding:20px}.back{margin:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Immersive landscape and the Bethany scene. */
body{overflow-x:hidden}
.world{width:min(1080px,96vw);margin-top:24px}
.orb{background-image:url('fathers-house-realistic.jpg');border:1px solid #fff0bd66}
.halo{width:100%;height:30%;border-width:3px;box-shadow:0 0 24px #ffe6a4aa,0 0 70px #c9b2ff55,inset 0 0 25px #ffe6a466}
.world:before{content:"";position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 40deg,transparent,#fff0be12,transparent,#b5b9ff22,transparent);filter:blur(20px);pointer-events:none}
.vista{position:relative;isolation:isolate;width:min(1440px,96%);height:clamp(400px,65vw,800px);margin:20px auto 90px;border-radius:36px;overflow:hidden;background:#202c47 url('fathers-house-realistic.jpg') center/cover;box-shadow:0 0 90px #c4b5fa33;border:1px solid #eadfb455}
.vista:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 35%,#080d22e8)}
.vista-label{position:absolute;bottom:35px;left:5%;right:5%;text-align:center;text-shadow:0 2px 20px #080d22}
.vista-label h2{font-size:clamp(38px,6vw,78px);font-weight:400;margin:12px}.vista-label>p:last-child{font-size:19px}
.vista-rays{position:absolute;inset:-60%;z-index:-1;background:conic-gradient(from 0deg at 50% 30%,transparent 0deg,#fff8da18 12deg,transparent 26deg,#fff8da14 50deg,transparent 72deg);animation:sky-light 35s ease-in-out infinite alternate;mix-blend-mode:screen}
.lazarus-section{max-width:1080px;margin:0 auto 80px;padding:0 20px;text-align:center}
.lazarus-section h2{font-size:clamp(32px,5vw,58px);font-weight:400;margin:14px 0}
.scene-intro,.scene-caption{color:#e4d6bc;font-size:18px;line-height:1.7}
.lazarus-scene{overflow:hidden;border-radius:25px;border:1px solid #e5d1a655;background:#242f58;margin:30px 0}
.lazarus-scene svg{display:block;width:100%;height:auto}
.lazarus-figure{opacity:0;transform:translate(-14px,7px);transition:transform 3.5s ease,opacity 2s ease;transform-box:fill-box;transform-origin:center bottom}
.tomb-stone{transition:transform 2s ease;transform-box:fill-box;transform-origin:center}
.resurrection-light{opacity:.15;transition:opacity 3s ease}
.lazarus-scene.is-awake .lazarus-figure{opacity:1;transform:translate(50px,0)}
.lazarus-scene.is-awake .tomb-stone{transform:translateX(100px) rotate(45deg)}
.lazarus-scene.is-awake .resurrection-light{opacity:.9}
.replay-scene{border:1px solid #e8cf92;background:linear-gradient(140deg,#756342,#342745);color:#fff7df;border-radius:30px;padding:15px 25px;font:16px Georgia;cursor:pointer}
.scene-context{max-width:740px;margin:20px auto;color:#bbb8cf;font:14px/1.8 system-ui}
@keyframes sky-light{to{transform:rotate(18deg)}}
@media(max-width:600px){.vista{border-radius:20px;margin-bottom:55px}.world{aspect-ratio:1.05}.lazarus-section{padding:0 12px}.vista-label{bottom:15px}.vista-label>p:last-child{font-size:16px}}
@media(prefers-reduced-motion:reduce){.lazarus-figure,.tomb-stone,.resurrection-light{transition:none}}

/* Living sky and landscape. Layers stay inside their landscape bounds. */
#livingSky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
body { isolation: isolate; }
.motion-toggle {
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 30;
  color: #fff0d2;
  background: #11182de8;
  border: 1px solid #d7c5a277;
  padding: 10px 14px;
  border-radius: 24px;
  cursor: pointer;
  font: 12px system-ui;
}
.back { max-width: calc(100% - 180px); }
.living-landscape { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.vista-label { z-index: 3; }
.vista:after { z-index: 1; pointer-events: none; }
.vista-rays { z-index: 0; pointer-events: none; }
.river-flow {
  position: absolute;
  inset: 48% 5% -10% 25%;
  clip-path: polygon(50% 0,65% 7%,60% 23%,86% 48%,100% 100%,0 100%,15% 60%,44% 29%);
  background: repeating-radial-gradient(ellipse at 50% 0,transparent 0 12px,#fff2b96b 14px,transparent 17px 32px);
  mix-blend-mode: soft-light;
  opacity: .75;
  animation: river-current 4s linear infinite;
}
.waterfall {
  position: absolute;
  width: 16%;
  height: 21%;
  background: repeating-linear-gradient(92deg,transparent 0 5px,#e6f9ff99 6px,transparent 9px 15px);
  mask-image: linear-gradient(transparent,#000 20%,#000 70%,transparent);
  mix-blend-mode: screen;
  animation: falling-water 1.5s linear infinite;
  opacity: .55;
}
.waterfall-one { left: 25%; top: 44%; clip-path: polygon(0 0,92% 0,96% 100%,12% 100%); }
.waterfall-two { left: 62%; top: 35%; width: 19%; height: 19%; animation-delay: -.7s; }
.water-mist {
  position: absolute;
  inset: 39% 7% 20% 13%;
  background: radial-gradient(ellipse at 34% 65%,#e6e5fa77,transparent 35%),radial-gradient(ellipse at 74% 40%,#faf2db66,transparent 27%);
  filter: blur(12px);
  animation: mist-breath 13s ease-in-out infinite alternate;
}
.city-radiance {
  position: absolute;
  left: 40%; top: 2%; width: 39%; height: 65%;
  background: radial-gradient(ellipse,#fff9bf88,transparent 67%);
  mix-blend-mode: screen;
  animation: radiant-heart 7s ease-in-out infinite;
}
.halo-radiance {
  position: absolute;
  left: 22%; top: 4%; width: 67%; height: 28%;
  border-top: 3px solid #fff4c6;
  border-radius: 50%;
  filter: drop-shadow(0 0 12px #ffdd93);
  opacity: .65;
  animation: halo-shimmer 9s ease-in-out infinite;
}
.flower-garden { position: absolute; inset: 0; }
.living-flower {
  position: absolute; left: var(--x); bottom: -2%; width: var(--size); height: auto;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 7px #e9c8ff44);
  animation: flower-sway 6s var(--delay) ease-in-out infinite alternate;
}
.flower-head { fill: var(--petal); transform-origin: 25px 29px; animation: flower-open 10s var(--delay) ease-in-out infinite alternate; }
.petal {
  position: absolute; width: 8px; height: 13px; border-radius: 80% 10% 70% 30%;
  background: #f4c8ed; left: 10%; top: 52%; opacity: 0;
  animation: floating-petal 18s linear infinite;
}
.petal-two { left: 15%; top: 70%; animation-delay: -7s; background: #e4d0ff; }
.petal-three { left: 75%; top: 55%; animation-delay: -13s; }
.halo { animation: orbit-halo 24s ease-in-out infinite alternate; }
@keyframes river-current { to { background-position: 0 64px; } }
@keyframes falling-water { from { background-position: 0 -24px; transform: translateY(-2%); } to { background-position: 3px 24px; transform: translateY(5%); } }
@keyframes mist-breath { to { transform: translate(3%, -2%) scale(1.08); opacity: .45; } }
@keyframes radiant-heart { 50% { transform: scale(1.2); opacity: .45; } }
@keyframes halo-shimmer { 50% { opacity: .3; filter: drop-shadow(0 0 24px #ffdd93); } }
@keyframes flower-sway { from { transform: rotate(-7deg); } to { transform: rotate(8deg); } }
@keyframes flower-open { from { transform: scale(.87); } to { transform: scale(1.04); } }
@keyframes floating-petal { 10% { opacity: .8; } 85% { opacity: .7; } to { transform: translate(180px,-160px) rotate(400deg); opacity: 0; } }
@keyframes orbit-halo { to { transform: rotate(-12deg) scaleX(.95); } }
body.motion-paused *, body.motion-paused *:before, body.motion-paused *:after { animation-play-state: paused !important; }
body.motion-paused .lazarus-figure,body.motion-paused .tomb-stone,body.motion-paused .resurrection-light { transition: none; }
@media(prefers-reduced-motion:reduce) {
  .river-flow,.waterfall,.water-mist,.city-radiance,.halo-radiance,.living-flower,.flower-head,.petal,.halo { animation: none; }
}

/* The landscape has its own moving ecosystem above the painted scenery. */
.orb { position: relative; overflow: hidden; background-size: auto 110%; animation: world-turn 36s ease-in-out infinite alternate, breathe 10s ease-in-out infinite; }
.orb-atmosphere { position: absolute; inset: -10%; background: conic-gradient(from 10deg at 55% 40%,transparent 0deg,#fff7b744 30deg,transparent 60deg,#d7bcff33 110deg,transparent 145deg,#fff6bd33 200deg,transparent 250deg); mix-blend-mode: screen; animation: atmosphere-turn 40s linear infinite; pointer-events: none; }
.orb-clouds { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 20% 70%,#eef4ff33,transparent 26%),radial-gradient(ellipse at 70% 40%,#fff6d52e,transparent 30%); animation: cloud-wander 13s ease-in-out infinite alternate; }
.landscape-life { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.vista-label { z-index: 4; pointer-events: none; }
.vista-label h2 { font-size: clamp(32px,5vw,64px); }
.vista-label p { margin: 8px 0; }
.vista:after { background: linear-gradient(transparent 72%,#080d22cc); z-index: 3; }
.garden-breeze { position: absolute; inset: 0; z-index: 1; background: url('fathers-house-realistic.jpg') center/cover; pointer-events: none; transform-origin: bottom left; }
.garden-left { mask-image: radial-gradient(ellipse at 0% 73%,#000 0 15%,transparent 35%); animation: garden-wind 7s ease-in-out infinite alternate; }
.garden-right { mask-image: radial-gradient(ellipse at 100% 80%,#000 0 10%,transparent 30%); transform-origin: bottom right; animation: garden-wind 8s -3s ease-in-out infinite alternate-reverse; }
.living-flower { display: none; }
.river-flow { opacity: .23; }
.waterfall { opacity: .18; }
.city-radiance { animation: radiant-heart 5s ease-in-out infinite; }
.vista-rays { opacity: .9; animation-duration: 18s; }
@keyframes world-turn { from { background-position: 40% center; } to { background-position: 60% center; } }
@keyframes atmosphere-turn { to { transform: rotate(360deg); } }
@keyframes cloud-wander { to { transform: translate(4%,-3%) scale(1.08); opacity: .45; } }
@keyframes garden-wind { from { transform: rotate(-.45deg) scale(1.012); } to { transform: rotate(.6deg) scale(1.02); } }
@media(prefers-reduced-motion:reduce) {
  .orb,.orb-atmosphere,.orb-clouds,.garden-breeze { animation: none; }
}

/* Reserve enough vertical space for the spherical world. */
.world { aspect-ratio: 1.1; margin-top: 42px; }
@media(max-width:600px) { .world { aspect-ratio: 1.05; margin-top: 28px; } }

/* The same moving water and sky now render on the globe and the vista. */
#orbLife { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; pointer-events:none; z-index:1; }
.orb { background-size:cover; background-position:center; animation:breathe 10s ease-in-out infinite; }
.orb-atmosphere,.orb-clouds { z-index:2; }
.garden-breeze,.waterfall,.river-flow,.halo-radiance { display:none; }

/* Match Rainbow Promise's feathered photographic lighting. */
.vista-rays,.river-flow,.waterfall,.halo-radiance { display:none; }
.orb-atmosphere { background:radial-gradient(ellipse at 62% 35%,#fff1bd22,transparent 52%),radial-gradient(ellipse at 23% 45%,#c9b8ff16,transparent 48%); }
.halo { border-width:1px; opacity:.65; }