/* Coming Soon extras: signing watermark, monogram wall, lights off, hidden VIP list */
#soon{isolation:auto}
#soon>*{position:relative;z-index:1}
#soon>#lgwall{position:absolute;z-index:0}
#lgwall{left:0;top:0;width:100%;pointer-events:none;overflow:hidden}
#lgwall i{position:absolute;-webkit-mask:url(/assets/dark2/lg_mono_a.png) center/contain no-repeat;mask:url(/assets/dark2/lg_mono_a.png) center/contain no-repeat;background:rgba(233,228,214,.024);transition:background .9s,opacity .9s}
.shero .ssig{position:absolute;z-index:0;left:46%;top:50%;width:min(64vw,880px);aspect-ratio:1;transform:translate(-50%,-50%) rotate(-8deg);-webkit-mask:url(/assets/dark2/lg_mono_a.png) center/contain no-repeat;mask:url(/assets/dark2/lg_mono_a.png) center/contain no-repeat;background:linear-gradient(115deg,#7a5a1e,#d8b25a 30%,#fff1c1 45%,#c9973a 60%,#7a5a1e);background-size:250% 100%;opacity:.13;clip-path:inset(0 100% 0 0);pointer-events:none}
.shero{position:relative}
.shero>*{position:relative;z-index:1}
.shero>.ssig{position:absolute;z-index:0}

/* the pull chain hint */
#lightsNav .hint{position:absolute;right:calc(100% + 6px);top:calc(100% - 44px);font:400 15px "Permanent Marker",cursive;color:var(--goldc);white-space:nowrap;opacity:0;transform:rotate(-8deg);transition:opacity .6s;pointer-events:none}
#lightsNav.nudge .hint{opacity:1}
#lightsNav.nudge{animation:tug 1.6s ease-in-out 2}
@keyframes tug{0%,100%{transform:rotate(0)}20%{transform:rotate(7deg)}45%{transform:rotate(-6deg)}70%{transform:rotate(3deg)}}

/* hidden VIP list: glow ink, so in daylight it's only a ghost */
.vip{padding:clamp(18px,2.5vw,32px) 16px 0;text-align:center;display:grid;justify-items:center}
/* daylight: only a faint ghost of the heading; the rest unfolds when the lights go out */
.vip p,.vip .vform{display:none}
.vip .vin{gap:6px}
.vip h2{font-size:clamp(34px,4.5vw,64px)!important}
body.off .vip{padding:clamp(70px,9vw,130px) 16px}
body.off .vip p{display:block}
body.off .vip .vform{display:block}
body.off .vip .vin{gap:16px}
body.off .vip h2{font-size:clamp(52px,8vw,124px)!important}
.vip .vin{width:min(620px,100%);display:grid;justify-items:center;gap:16px}
.vip .mono,.vip h2,.vip p{color:rgba(233,228,214,.022);transition:color 1.2s,text-shadow 1.2s}
.vip h2{font:400 clamp(52px,8vw,124px)/.86 "Permanent Marker",cursive;transform:rotate(-3deg)}
.vip p{max-width:42ch;line-height:1.6}
.vip .vform{width:100%;visibility:hidden;opacity:0;transition:opacity 1s}
.vip .vlock{font:500 10px "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(233,228,214,.06)}

/* LIGHTS OFF */
/* in the dark: drop the stacking so glowing pieces can rise above the blackout */
body.off #soon,body.off #soon>*,body.off #soon .shero>*{z-index:auto}
body.off #soon #lgwall{z-index:31}
body.off #soon #sgoat{z-index:32}
body.off #soon #sH1{position:relative;z-index:32}
body.off #soon #vip{z-index:32}
body.off #lgwall i{background:rgba(157,255,176,.3);transition-delay:var(--d,0s)}
body.off #soon #lgwall{filter:drop-shadow(0 0 5px rgba(157,255,176,.5))}
body.off #sgoat .gSk{filter:brightness(.18)}
body.off #sgoat .hlens{-webkit-mask:none;mask:none}
body.off #sgoat .hlens>div{opacity:1}
body.off #sgoat .crownclip{opacity:.15}
body.off .scopy h1{color:#050705;-webkit-text-stroke:2px var(--glow);text-shadow:0 0 22px rgba(157,255,176,.5)}
body.off .scopy h1 em{-webkit-text-stroke:2px var(--glow)}
body.off .vip .mono,body.off .vip p{color:#bff5cc}
body.off .vip h2{color:var(--glow);text-shadow:0 0 12px rgba(157,255,176,.85),0 0 46px rgba(157,255,176,.35)}
body.off .vip .vform{visibility:visible;opacity:1}
body.off .vip .vlock{display:none}
body.off .vip .herdform label,body.off .vip .herdform .consent{color:#9fd8ac}
body.off .vip .herdform input,body.off .vip .herdform select{border-color:rgba(157,255,176,.5);background:#040a06}
body.off .vip .herdform button[type=submit]{background:var(--glow)}
body.off .vip .herdform .ok{color:var(--glow)}
@media (prefers-reduced-motion:reduce){#lightsNav.nudge{animation:none}}
.herdform.done p{margin:12px auto 0;max-width:42ch}
body.off .vip .herdform .ok em{color:var(--glow)}

/* the goat: regular crowned goat in daylight; the half skull only exists in the dark */
#sgoat .sreg{--fill:var(--bone);transition:opacity 1s}
#sgoat .sbone,#sgoat .hlens{opacity:0!important;transition:opacity 1.2s}
body.off #soon #sgoat .sreg{opacity:0}
body.off #soon #sgoat .sbone{opacity:1!important}
body.off #soon #sgoat .hlens{opacity:1!important}