:root{color-scheme:dark;background:#080d12;color:#f4efe7;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #eed2a5;outline-offset:-8px}header{position:absolute;top:39px;left:0;right:0;z-index:3;text-align:center;pointer-events:none}header a{display:inline-block;pointer-events:auto;padding:10px}header img{width:clamp(230px,25vw,360px);height:auto;display:block}main{height:100svh;min-height:630px;position:relative;overflow:hidden}h1{position:absolute;z-index:3;top:19%;left:20px;right:20px;margin:0;text-align:center;font:400 clamp(25px,2.6vw,43px)/1.2 Georgia,serif;letter-spacing:-.035em;color:#f1ebe1e6;pointer-events:none;text-shadow:0 2px 25px #0008}.portals{display:flex;height:100%}.portal{position:relative;isolation:isolate;flex:1;min-width:0;overflow:hidden;transition:flex 1.3s cubic-bezier(.2,.7,.3,1)}.scene{position:absolute;inset:-3%;z-index:-3;animation:journey 24s ease-in-out infinite alternate;transform-origin:50% 60%}.scene img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.8)}.chill .scene{animation-name:float;animation-duration:20s;transform-origin:50% 75%}.chill .scene img{object-position:50% 62%}.shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(#060b13b8 0%,#060d1470 24%,#070d1408 48%,#070b1235 67%,#060a12ba 100%)}.chill .shade{background:linear-gradient(#060b13b8 0%,#060d1470 24%,#070d1408 48%,#0e090c35 67%,#080b11ba 100%)}.choice{position:absolute;bottom:12%;left:15%;right:15%;display:flex;align-items:center;justify-content:space-between;gap:18px}.choice h2{font:400 clamp(65px,7.3vw,116px)/1.15 Georgia,serif;letter-spacing:-.055em;margin:0;text-shadow:0 3px 32px #0006}.choice>span{display:grid;place-items:center;width:45px;height:45px;border:1px solid #e8e6e557;border-radius:50%;font-size:23px;transition:transform .6s,background .6s}.portal:hover .choice>span,.portal:focus-visible .choice>span{transform:translate(3px,-3px);background:#ffffff14}.portals:has(.portal:hover) .portal:hover{flex:1.07}.mist{position:absolute;left:-50%;top:40%;width:180%;height:30%;opacity:.25;background:radial-gradient(ellipse at 25% 55%,#c9d8d640,transparent 40%),radial-gradient(ellipse at 65% 35%,#dbe7e852,transparent 45%);filter:blur(20px);animation:mist 22s ease-in-out infinite alternate;mix-blend-mode:screen}.mist.second{top:58%;opacity:.17;animation-duration:31s;animation-delay:-14s;transform:scaleX(-1)}.firelight{position:absolute;left:32%;top:57%;width:36%;height:29%;border-radius:50%;background:radial-gradient(ellipse,#ff942926,#e66b1110 35%,transparent 70%);mix-blend-mode:screen;animation:glow 3.7s ease-in-out infinite alternate}.embers{position:absolute;left:50%;top:74%;width:1px;height:1px}.ember{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffb66e;box-shadow:0 0 7px #f89943;animation:rise var(--duration) linear infinite;animation-delay:var(--delay);opacity:0}#motion{position:absolute;bottom:23px;right:26px;z-index:4;width:38px;height:38px;display:grid;place-items:center;background:#0a10112b;color:#ece8dd91;border:1px solid #f3e9d51f;border-radius:50%;cursor:pointer}#motion svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3}#motion:hover{color:#fff;border-color:#ffffff70}#motion[hidden]{display:none}body.still *,body.still *:before,body.still *:after{animation-play-state:paused!important;transition:none!important}
@keyframes journey{from{transform:scale(1.02) translate(-.8%,.5%)}to{transform:scale(1.14) translate(.8%,-1%)}}@keyframes float{from{transform:scale(1.04) translate(.7%,.3%)}to{transform:scale(1.12) translate(-.7%,-.7%)}}@keyframes mist{from{translate:-5% 0}to{translate:18% -6%}}@keyframes glow{0%,100%{opacity:.4;scale:.95}30%{opacity:.75}56%{opacity:.48;scale:1.07}80%{opacity:.85}}@keyframes rise{0%{opacity:0;transform:translate(var(--start),0) scale(.7)}15%{opacity:.75}70%{opacity:.35}100%{opacity:0;transform:translate(var(--end),-230px) scale(.2)}}
@media(max-width:700px){header{top:22px}header img{width:225px}main{height:100svh;min-height:700px}h1{top:112px;font-size:27px}.portals{flex-direction:column}.portal{flex:1!important}.explore{flex:1.15!important}.choice{left:30px;right:30px;bottom:28px}.choice h2{font-size:58px}.choice>span{width:37px;height:37px;font-size:20px}.explore .scene img{object-position:50% 49%}.explore .shade{background:linear-gradient(#060b13c4,#060d145c 40%,transparent 65%,#060a1280)}.chill .scene img{object-position:50% 67%}.chill .shade{background:linear-gradient(#070c1330,transparent 40%,#060a129c)}.chill .choice{bottom:48px}.chill .firelight{top:42%;height:48%}.chill .embers{top:70%}#motion{width:29px;height:29px;bottom:12px;right:17px}.mist{filter:blur(12px)}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) *,body:not(.motion-enabled) *:before,body:not(.motion-enabled) *:after{animation:none!important;transition:none!important}body:not(.motion-enabled) .ember{display:none}}

/* Cinemagraph layers remain aligned with their source image. */
.chill .scene img{object-position:50% 50%}.living-fire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:saturate(.8)}
.smoke{position:absolute;left:50%;top:61%;width:10%;height:15%;mix-blend-mode:screen;pointer-events:none}.smoke i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,#b7b9ad25,transparent 65%);filter:blur(9px);animation:smoke-rise 14s ease-out infinite;opacity:0}.smoke i:nth-child(2){animation-delay:-5s;animation-duration:17s}.smoke i:nth-child(3){animation-delay:-10s;animation-duration:20s}.mist{opacity:.4;animation-duration:17s}.mist.second{opacity:.25;animation-duration:25s}.explore .scene{animation-duration:18s}.chill .scene{animation-duration:22s}
@keyframes smoke-rise{0%{opacity:0;transform:translate(-40%,0) scale(.65)}20%{opacity:.65}65%{opacity:.4}100%{opacity:0;transform:translate(-110%,-170%) scale(2.8)}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .living-fire,body:not(.motion-enabled) .smoke{display:none}}

/* Keep a visible opt-in even when the device requests reduced motion. */
#motion{position:fixed;min-width:44px;min-height:44px;bottom:max(18px,env(safe-area-inset-bottom));right:20px;color:#f4eee4;background:#080d1275;backdrop-filter:blur(8px)}
#motion[aria-pressed="true"]{width:auto;display:flex;gap:7px;padding:0 14px;border-radius:24px}.motion-label{font:11px Arial,sans-serif;white-space:nowrap}.motion-label:empty{display:none}
.explore .scene{animation-duration:12s;animation-delay:-4s}.chill .scene{animation-duration:14s;animation-delay:-4s}.mist{opacity:.58;animation-duration:12s}.mist.second{opacity:.35;animation-duration:18s}.ember{width:3px;height:3px}.smoke i{background:radial-gradient(ellipse,#b7b9ad42,transparent 65%)}