:root{color-scheme:dark;--pointer-x:0px;--pointer-y:0px}
*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.landscape{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.artwork-drift{position:absolute;inset:-12px;transform:translate3d(var(--pointer-x),var(--pointer-y),0)}
.artwork-frame{position:absolute;left:50%;top:50%;width:max(100vw,150dvh);height:max(100dvh,66.6667vw);margin-left:calc(max(100vw,150dvh)/-2);margin-top:calc(max(100dvh,66.6667vw)/-2);animation:landscape-breathe 30s ease-in-out infinite alternate;transform-origin:65% 62%}
.artwork{display:block;width:100%;height:100%;object-fit:cover}
.sun-glow{position:absolute;left:75.5%;top:63%;width:27%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,217,119,.23),rgba(255,164,75,.1) 33%,transparent 68%);mix-blend-mode:screen;animation:sun-breathe 13s ease-in-out infinite alternate}
.atmosphere{position:absolute;inset:-16px;transform:translate3d(calc(var(--pointer-x)*1.8),calc(var(--pointer-y)*1.8),0)}
.sky-light{position:absolute;inset:0;background:linear-gradient(180deg,rgba(89,36,83,.12),rgba(255,151,65,.055) 48%,transparent 72%);animation:sky-breathe 19s ease-in-out infinite alternate}
.cloud{position:absolute;width:130%;left:-15%;height:19%;filter:blur(24px);border-radius:50%;background:radial-gradient(ellipse at 26% 55%,rgba(251,142,93,.08),transparent 31%),radial-gradient(ellipse at 72% 48%,rgba(255,177,110,.07),transparent 30%);animation:cloud-drift 63s ease-in-out infinite alternate}
.cloud-far{top:17%}
.cloud-middle{top:36%;opacity:.7;animation-duration:43s;animation-direction:alternate-reverse}
.mountain-haze{position:absolute;inset:53% -12% 11%;background:radial-gradient(ellipse at 68% 42%,rgba(250,147,104,.075),transparent 54%);animation:haze-drift 37s ease-in-out infinite alternate}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 32%,rgba(17,10,31,.13) 100%),linear-gradient(0deg,rgba(10,9,28,.18),transparent 30%)}
.particles{position:absolute;inset:0}
.particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#ffe2ba;opacity:0;animation:particle-float var(--duration) var(--delay) ease-in-out infinite}
.content{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;height:100dvh;text-align:center;padding:24px}
h1{position:absolute;top:50%;left:0;width:100%;margin:0;transform:translateY(-50%);font-size:clamp(26px,4.25vw,78px);font-weight:600;line-height:1.2;letter-spacing:.23em;text-indent:.23em;color:#fff8ef;text-shadow:0 2px 22px rgba(39,16,37,.25);animation:title-enter 1.5s cubic-bezier(.16,1,.3,1) both,title-glow 12s 1.5s ease-in-out infinite alternate}
.content p{position:absolute;top:calc(50% + clamp(37px,4.5vw,68px));margin:0;font-size:10px;line-height:1.5;font-weight:500;letter-spacing:.43em;text-indent:.43em;color:rgba(255,245,230,.65);animation:brand-enter 1.5s .45s ease-out both}
@keyframes landscape-breathe{from{transform:scale(1.025) translate3d(-.15%,.1%,0)}to{transform:scale(1.065) translate3d(.2%,-.2%,0)}}
@keyframes cloud-drift{from{transform:translate3d(-3%,0,0)}to{transform:translate3d(4%,1%,0)}}
@keyframes haze-drift{from{transform:translate3d(-2%,0,0);opacity:.6}to{transform:translate3d(2%,-2%,0);opacity:1}}
@keyframes sun-breathe{from{opacity:.5;transform:translate(-50%,-50%) scale(.97)}to{opacity:.85;transform:translate(-50%,-50%) scale(1.07)}}
@keyframes sky-breathe{from{opacity:.4}to{opacity:1}}
@keyframes particle-float{0%,100%{opacity:0;transform:translate3d(0,14px,0)}30%,60%{opacity:.17}90%{opacity:0;transform:translate3d(15px,-42px,0)}}
@keyframes title-enter{from{opacity:0;filter:blur(7px);transform:translateY(calc(-50% + 17px));letter-spacing:.27em}to{opacity:1;filter:blur(0);transform:translateY(-50%);letter-spacing:.23em}}
@keyframes title-glow{from{text-shadow:0 2px 22px rgba(39,16,37,.25)}to{text-shadow:0 2px 22px rgba(39,16,37,.25),0 0 25px rgba(255,228,188,.12)}}
@keyframes brand-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-aspect-ratio:3/4){.artwork-frame{left:-5%}.content p{font-size:9px}h1{font-size:clamp(23px,6.3vw,42px);letter-spacing:.18em;text-indent:.18em}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.artwork-frame{transform:scale(1.025)}.sun-glow{opacity:.65}.particle{display:none}.artwork-drift,.atmosphere{transform:none}h1{filter:none;opacity:1}.content p{opacity:1}}
@media(prefers-reduced-motion:no-preference){.artwork-drift,.atmosphere{will-change:transform}}