:root{color-scheme:dark;--cream:#f5e7df;--night-sky:#010103;--red-sky:#ca101e}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#0c0d11;font-family:Arial,Helvetica,sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased}
.stage{position:relative;isolation:isolate;margin:0;height:100%;min-height:100svh;width:100%;overflow:hidden;border-radius:0;background:var(--night-sky)}
.lunar-background,.lunar-sky,.lunar-terrain,.red-sky{position:absolute;inset:0;pointer-events:none}
.lunar-sky,.lunar-terrain{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.lunar-sky{mask-image:linear-gradient(#000 var(--sky-fade-start,100%),transparent var(--sky-fade-end,100%))}
.red-sky{background:var(--red-sky);opacity:var(--red-opacity,0)}
.lunar-terrain{clip-path:var(--terrain-clip,none);transform:translateY(var(--terrain-drop,0px))}
.header{position:absolute;inset:0 0 auto;z-index:5;padding:23px 27px}
.signature{margin:0;font-size:17px;font-weight:400;line-height:1.2;white-space:nowrap;text-shadow:0 1px 8px #000a}
.monogram{position:absolute;z-index:3;inset:0;pointer-events:none;animation:logo-reveal 2s cubic-bezier(.16,1,.3,1) both}
#logo{position:absolute;width:100%;height:100%;inset:0;opacity:0;transition:opacity .65s}
.logo-fallback{position:absolute;left:50%;top:50%;height:45%;width:auto;aspect-ratio:240/260;transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(1px 2px 2px #0008);animation:fallback-turn 16s ease-in-out infinite;color:#f5e7df}
.logo-fallback svg{position:absolute;inset:0;width:100%;height:100%;fill:transparent;stroke:#e5efffa0;stroke-width:.7}
.glass-fill{position:absolute;inset:0;background:linear-gradient(125deg,#ffffff03 15%,#ffffff45 28%,#ffffff03 35%,#ffffff02 62%,#d8e6ff38 73%,#ffffff05 82%);backdrop-filter:blur(.7px) brightness(1.1) saturate(1.1);-webkit-backdrop-filter:blur(.7px) brightness(1.1) saturate(1.1);mask:url(sn-logo.svg) center/contain no-repeat;-webkit-mask:url(sn-logo.svg) center/contain no-repeat}
@keyframes logo-reveal{from{opacity:0;transform:translateY(18px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fallback-turn{0%,100%{transform:translate(-50%,-50%) perspective(700px) rotateY(-27deg) rotate(-8deg)}50%{transform:translate(-50%,-50%) perspective(700px) rotateY(27deg) rotate(5deg)}}
@media(min-width:1500px){.header{padding:29px 32px}.signature{font-size:18px}}
@media(max-width:600px){.header{padding:19px 18px}.signature{font-size:16px}.logo-fallback{height:35%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}