:root{--wine:#800000;--metal:#cbbbae;--charcoal:#17191c}
*{box-sizing:border-box}
html{min-height:100%;width:100%}
body{margin:0;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--charcoal);font-family:system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}
.backdrop{position:fixed;inset:0;isolation:isolate;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse 57% 69% at 50% 49%,#faf8f4 0%,#f3f0eb 24%,#ddd9d3 44%,#979494 64%,#4b4b4e 81%,#1b1d21 100%)}
.backdrop::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 82% at 50% 50%,transparent 37%,rgba(24,25,29,.06) 59%,rgba(10,11,14,.42) 100%),linear-gradient(135deg,rgba(255,255,255,.08),transparent 42%,rgba(0,0,0,.14));}
.backdrop::after{content:"";position:absolute;inset:clamp(12px,1.35vw,23px);border:1px solid rgba(231,224,214,.24);box-shadow:inset 0 0 0 1px rgba(10,10,10,.13),0 0 0 1px rgba(10,10,10,.16);z-index:5}
/* Muted moving pools of reflected light: slow, visible motion rather than fast flickering. */
.ambient{position:absolute;z-index:2;width:max(55vw,450px);aspect-ratio:1;border-radius:50%;filter:blur(clamp(65px,8vw,160px));opacity:.56;will-change:transform}
.ambient--one{top:-47%;left:-23%;background:radial-gradient(circle,rgba(250,245,236,.42),rgba(230,225,218,.12) 45%,transparent 70%);animation:float-left 48s ease-in-out infinite alternate}
.ambient--two{right:-21%;bottom:-46%;background:radial-gradient(circle,rgba(243,226,213,.30),rgba(255,255,255,.10) 42%,transparent 72%);animation:float-right 57s ease-in-out infinite alternate}
/* Large ceremonial rings read on dark and light areas. */
.ornament{position:absolute;z-index:2;top:50%;left:50%;border-radius:50%;border:1px solid rgba(91,71,69,.16);box-shadow:0 0 45px rgba(255,255,255,.075),inset 0 0 30px rgba(255,255,255,.025);will-change:transform}
.ornament--outer{width:min(105vw,1450px);aspect-ratio:1;animation:orbit-outer 85s ease-in-out infinite alternate}
.ornament--inner{width:min(72vw,990px);aspect-ratio:1;border-color:rgba(96,68,64,.14);animation:orbit-inner 70s ease-in-out infinite alternate}
#particles{position:absolute;z-index:3;inset:0;width:100%;height:100%;opacity:.9}
.stage{position:relative;z-index:6;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:max(36px,env(safe-area-inset-top)) max(30px,env(safe-area-inset-right)) max(36px,env(safe-area-inset-bottom)) max(30px,env(safe-area-inset-left))}
.brand{width:min(73vw,920px);position:relative;animation:reveal 1.6s cubic-bezier(.2,.75,.2,1) both}
.brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 22px rgba(27,12,11,.11))}
.brand::before{content:"";position:absolute;left:16%;right:16%;bottom:-47px;height:1px;background:linear-gradient(90deg,transparent,rgba(105,54,48,.27),transparent)}
@keyframes reveal{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes float-left{from{transform:translate(-10%,1%) scale(.86)}to{transform:translate(54%,38%) scale(1.24)}}
@keyframes float-right{from{transform:translate(8%,6%) scale(.85)}to{transform:translate(-52%,-38%) scale(1.2)}}
@keyframes orbit-outer{from{transform:translate(-50%,-50%) rotate(-12deg) scale(.93);opacity:.38}to{transform:translate(-50%,-50%) rotate(20deg) scale(1.13);opacity:.78}}
@keyframes orbit-inner{from{transform:translate(-50%,-50%) scale(1.11);opacity:.68}to{transform:translate(-50%,-50%) scale(.91);opacity:.27}}
@media(max-width:700px){.backdrop{background:radial-gradient(ellipse 93% 47% at 50% 50%,#faf8f4 0%,#f2efea 35%,#d0cbc5 60%,#7b797b 80%,#1a1c20 100%)}.brand{width:min(89vw,530px)}.brand::before{bottom:-29px}.ornament--outer{width:195vw}.ornament--inner{width:135vw}.ambient{width:105vw}.ambient--one{left:-67%;top:-11%}.ambient--two{right:-67%;bottom:-11%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}#particles{display:none}.brand{opacity:1}}