html:has(.welcome-page){background:#000}
.welcome-page{width:100%;min-height:100svh;background:#000;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;overflow:hidden}
.welcome-stage{width:100%;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:32px 22px;transition:opacity .7s,transform .7s}
.welcome-identity{position:relative;width:min(96vw,1200px);max-width:100%;min-width:0;margin-top:-34px;text-align:center}
.welcome-brand{width:100%;max-width:100%;min-width:0;justify-content:center}
.welcome-logo{width:100%;aspect-ratio:16/5.5;filter:none;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 100%)}
.brand .welcome-logo img{width:50%;height:auto;inset:auto;left:25%;top:50%;transform:translateY(-50%);clip-path:none;mask-image:linear-gradient(to bottom,#000 0 62%,transparent 69%);-webkit-mask-image:linear-gradient(to bottom,#000 0 62%,transparent 69%)}
.welcome-logo .brand-animation{width:100%;height:auto;left:0;top:50%;transform:translateY(-50%);clip-path:none;mask-image:linear-gradient(to bottom,#000 0 53%,rgba(0,0,0,.8) 54%,rgba(0,0,0,.25) 55.5%,transparent 57%);-webkit-mask-image:linear-gradient(to bottom,#000 0 53%,rgba(0,0,0,.8) 54%,rgba(0,0,0,.25) 55.5%,transparent 57%);mix-blend-mode:screen;filter:none}
.welcome-logo.playing img{visibility:visible}
.welcome-website{position:absolute;top:calc(50% + 58px);left:0;width:100%;margin:0;color:var(--bronze-light);font-size:16px;letter-spacing:2.5px;font-weight:400}
.welcome-enter{position:absolute;top:calc(50% + 112px);left:50%;transform:translateX(-50%);padding:14px 34px;min-width:150px;min-height:49px;border:1px solid rgba(169,158,137,.6);color:var(--bronze-light);font-size:10px;letter-spacing:3px;text-transform:uppercase;text-align:center;transition:background .25s,color .25s}
.welcome-enter:hover{background:var(--ral-1035-metal);color:#161816}
.welcome-page.leaving .welcome-stage{opacity:0;transform:translateY(-5px)}
@media(max-width:600px){.welcome-identity{width:100%;max-width:100%;min-width:0;margin-top:-74px}.welcome-logo{width:100%;min-width:0}.welcome-logo .brand-animation{width:150%;left:50%;transform:translate(-50%,-50%)}.brand .welcome-logo img{width:75%;left:50%;transform:translate(-50%,-50%)}.welcome-website{font-size:14px;letter-spacing:1.8px;top:calc(50% + 44px)}.welcome-enter{top:calc(50% + 96px);min-width:140px}}
@media(prefers-reduced-motion:reduce){.welcome-stage{transition:none}}

/* Keep the original sparkle frame visible without seeking the video. */
.brand .welcome-logo img.welcome-sparkle{width:100%;height:auto;inset:auto;left:0;top:50%;transform:translateY(-50%);clip-path:none;mask-image:linear-gradient(to bottom,#000 0 53%,rgba(0,0,0,.8) 54%,rgba(0,0,0,.25) 55.5%,transparent 57%);-webkit-mask-image:linear-gradient(to bottom,#000 0 53%,rgba(0,0,0,.8) 54%,rgba(0,0,0,.25) 55.5%,transparent 57%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.welcome-logo.held .brand-animation,.welcome-logo.held img:not(.welcome-sparkle){opacity:0}
.brand .welcome-logo.held img.welcome-sparkle{opacity:1}
@media(max-width:600px){.brand .welcome-logo img.welcome-sparkle{width:150%;left:50%;transform:translate(-50%,-50%)}}

/* RAL 1035 pearl-gold static logo: neutralise yellow while retaining the sparkle. */
.welcome-color-filter{position:absolute;pointer-events:none;overflow:hidden}
.brand .welcome-logo img{filter:url(#welcome-ral1035)}