:root {
  --pointer-x: 50vw;
  --pointer-y: 50vh;
  --reveal-size: clamp(190px, 25vw, 430px);
  --ease-cinematic: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#020507; }
body { font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; touch-action:none; -webkit-tap-highlight-color:transparent; }
.experience { position:fixed; inset:0; isolation:isolate; overflow:hidden; background:#020507; opacity:0; transition:opacity 2.1s var(--ease-cinematic); }
body.is-ready .experience { opacity:1; }
.drift,.camera,.layer,.reveal-light,.night-wash,.vignette,.grain,.fog { position:absolute; inset:0; }
.drift { animation:drift 52s ease-in-out infinite alternate; transform:scale(1.025); transform-origin:50% 54%; will-change:transform; }
.camera { will-change:transform; }
.layer { left:0; top:0; background-repeat:no-repeat; background-size:100% 100%; will-change:transform,width,height; }
.layer--base {
  background-image:image-set(url("assets/day12-base.webp") type("image/webp"),url("assets/day12-base.jpg") type("image/jpeg"));
  filter:brightness(.43) contrast(1.22) saturate(.38) hue-rotate(7deg);
}
.layer--house {
  background-image:url("assets/day12-house.webp");
  filter:brightness(.47) contrast(1.18) saturate(.34) hue-rotate(6deg);
  opacity:.24;
}
.layer--trees {
  background-image:url("assets/day12-trees.webp");
  filter:brightness(.32) contrast(1.28) saturate(.32) hue-rotate(4deg);
  opacity:.34;
}
.reveal-light { z-index:4; pointer-events:none; background:radial-gradient(circle var(--reveal-size) at var(--pointer-x) var(--pointer-y),rgba(151,180,193,.15) 0%,rgba(118,149,163,.09) 28%,rgba(76,105,119,.035) 62%,transparent 100%); mix-blend-mode:screen; }
.window-layer { position:absolute; z-index:3; overflow:hidden; border-radius:1px; pointer-events:none; opacity:.92; }
.window-room { position:absolute; inset:0; background:linear-gradient(90deg,rgba(65,82,94,.38),rgba(133,155,169,.48) 46%,rgba(72,89,102,.30)),radial-gradient(circle at 63% 48%,rgba(181,204,218,.44),rgba(101,128,143,.20) 52%,transparent 84%); box-shadow:0 0 12px rgba(102,139,160,.10),0 0 28px rgba(87,119,139,.06); mix-blend-mode:screen; animation:room-flicker 9.2s steps(1,end) infinite; }
.window-silhouette { position:absolute; left:50%; bottom:5%; width:45%; height:76%; transform:translateX(-50%); opacity:.22; filter:blur(.45px); animation:silhouette-presence 18s steps(1,end) infinite; }
.window-silhouette::before,.window-silhouette::after { content:""; position:absolute; left:50%; transform:translateX(-50%); background:rgba(7,7,8,.96); }
.window-silhouette::before { top:3%; width:46%; height:31%; border-radius:50%; }
.window-silhouette::after { bottom:0; width:62%; height:72%; border-radius:20% 20% 5% 5% / 12% 12% 4% 4%; }
.window-frame-shadow { position:absolute; inset:0; box-shadow:inset 0 0 0 2px rgba(0,0,0,.32),inset 0 0 18px rgba(0,0,0,.18); }
.night-wash { z-index:5; pointer-events:none; background:linear-gradient(to bottom,rgba(2,8,12,.20),rgba(0,4,7,.28)),radial-gradient(ellipse at 80% 68%,rgba(13,28,36,.04),rgba(0,0,0,.16) 68%); mix-blend-mode:multiply; }
.fog { z-index:6; pointer-events:none; opacity:.06; filter:blur(28px); mix-blend-mode:screen; }
.fog--far { inset:36% -20% -14%; background:radial-gradient(ellipse at 43% 72%,rgba(146,165,171,.20),transparent 48%),radial-gradient(ellipse at 73% 57%,rgba(128,149,158,.11),transparent 39%); animation:fog-far 82s ease-in-out infinite alternate; }
.fog--near { inset:50% -35% -20%; background:radial-gradient(ellipse at 35% 68%,rgba(153,169,173,.12),transparent 42%),radial-gradient(ellipse at 66% 82%,rgba(128,143,149,.09),transparent 47%); opacity:.04; filter:blur(44px); animation:fog-near 99s ease-in-out infinite alternate; }
.vignette { z-index:7; pointer-events:none; background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(0,0,0,.18) 72%,rgba(0,0,0,.60) 120%),linear-gradient(to bottom,rgba(0,0,0,.08),transparent 45%,rgba(0,0,0,.18)); }
.grain { z-index:8; pointer-events:none; background-image:url("assets/grain.png"); background-repeat:repeat; opacity:.10; mix-blend-mode:soft-light; animation:grain-shift .7s steps(2,end) infinite; }
.motion-permission { position:absolute; z-index:10; left:50%; bottom:max(14vh,calc(env(safe-area-inset-bottom) + 82px)); transform:translateX(-50%); padding:12px 18px; border:0; border-bottom:1px solid rgba(226,231,231,.24); background:transparent; color:rgba(228,232,231,.65); font-size:.67rem; letter-spacing:.42em; text-indent:.42em; opacity:0; transition:opacity 1.3s 1.5s var(--ease-cinematic),color .3s,border-color .3s; }
.motion-permission:not([hidden]) { display:block; }
body.is-ready .motion-permission:not([hidden]) { opacity:1; }
.motion-permission.is-leaving { opacity:0!important; pointer-events:none; transition-delay:0ms; transition-duration:.5s; }
.title { position:absolute; z-index:9; left:50%; bottom:max(7vh,calc(env(safe-area-inset-bottom) + 28px)); margin:0; transform:translateX(-50%); color:rgba(231,234,233,.80); font-size:clamp(1.15rem,1.9vw,2.05rem); font-weight:300; line-height:1; letter-spacing:.48em; text-indent:.48em; white-space:nowrap; opacity:0; transition:opacity 2s .8s var(--ease-cinematic); user-select:none; }
body.is-ready .title { opacity:1; }
.title.is-glitching { animation:title-glitch 120ms steps(2,end) both; }
@keyframes drift { 0%{transform:scale(1.025) translate3d(-.30%,-.10%,0)} 40%{transform:scale(1.025) translate3d(.14%,-.28%,0)} 72%{transform:scale(1.025) translate3d(.36%,.02%,0)} 100%{transform:scale(1.025) translate3d(-.06%,.24%,0)} }
@keyframes room-flicker { 0%,7%,15%,31%,39%,55%,64%,72%,100%{opacity:.25} 8%,32%,56%,73%{opacity:.55} 12%{opacity:.17} 46%{opacity:.42} 88%{opacity:.34} }
@keyframes silhouette-presence { 0%,14%,28%,47%,61%,74%,100%{opacity:.05} 15%,29%,62%{opacity:.22} 41%{opacity:.12} 87%{opacity:.18} }
@keyframes fog-far { 0%{transform:translate3d(-5%,1%,0) scale(1.04);opacity:.045} 52%{transform:translate3d(2%,-1%,0) scale(1.08);opacity:.075} 100%{transform:translate3d(7%,0,0) scale(1.03);opacity:.05} }
@keyframes fog-near { 0%{transform:translate3d(8%,1%,0) scale(1.04)} 100%{transform:translate3d(-6%,-1%,0) scale(1.1)} }
@keyframes grain-shift { 0%{transform:translate3d(0,0,0)} 25%{transform:translate3d(-1.5%,1%,0)} 50%{transform:translate3d(1%,-1.5%,0)} 75%{transform:translate3d(.5%,1.5%,0)} 100%{transform:translate3d(-1%,-.5%,0)} }
@keyframes title-glitch { 0%{transform:translateX(-50%);opacity:1} 24%{transform:translateX(calc(-50% - 2px));opacity:.62;filter:blur(.35px)} 47%{transform:translateX(calc(-50% + 1px));opacity:.94} 73%{transform:translateX(calc(-50% - 1px));opacity:.55} 100%{transform:translateX(-50%);opacity:1;filter:blur(0)} }
@media (pointer:coarse){ :root{--reveal-size:clamp(155px,49vw,285px)} .title{bottom:max(8vh,calc(env(safe-area-inset-bottom) + 24px));font-size:clamp(1rem,5vw,1.45rem);letter-spacing:.4em;text-indent:.4em} }
@media (max-aspect-ratio:4/5){ .drift{transform:scale(1.012);animation-name:drift-mobile} .motion-permission{bottom:max(15vh,calc(env(safe-area-inset-bottom) + 90px))} }
@keyframes drift-mobile { 0%{transform:scale(1.012) translate3d(-.15%,-.07%,0)} 48%{transform:scale(1.012) translate3d(.12%,-.17%,0)} 100%{transform:scale(1.012) translate3d(-.05%,.15%,0)} }
@media (prefers-reduced-motion:reduce){ .drift,.fog,.grain,.window-room,.window-silhouette,.title.is-glitching{animation:none!important} .experience,.title,.motion-permission{transition-duration:.01ms;transition-delay:0ms} }