#welcome{isolation:isolate;background:#191714;--intro-x:0px;--intro-y:0px}
#welcome .logo-mark{mix-blend-mode:normal;isolation:isolate}#welcome .logo-mark .welcome-logo{mix-blend-mode:normal;filter:url(#intro-logo-key) drop-shadow(0 5px 14px #0003)}
.intro-scene{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#191714 url('assets/intro/cinematic-poster-v1.webp') center 65%/cover no-repeat}
.intro-film{width:100%;height:100%;object-fit:cover;object-position:center 65%;transform:translate(var(--intro-x),var(--intro-y)) scale(1.055);transition:transform 1.4s cubic-bezier(.2,.7,.2,1);opacity:.86}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,#100e0a26 0%,#18161345 20%,#1816138c 46%,#15120f40 65%,#0b0908b3 100%)}
.intro-light{position:absolute;inset:-15%;background:radial-gradient(ellipse at 75% 20%,#f2b54824,transparent 40%);transform:translate(calc(var(--intro-x)*-1),calc(var(--intro-y)*-1));transition:transform 1.5s,opacity .5s;mix-blend-mode:screen}
.intro-controls{position:absolute;z-index:3;top:78px;left:28px;right:28px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.intro-hint{font-size:9px;letter-spacing:.5px;color:#ded3bf}
.intro-toggle{background:#19171475;border:1px solid #ebdfc32e;border-radius:30px;color:#eaddc0;padding:10px 13px;min-height:44px;font-size:10px;display:flex;align-items:center;gap:10px;cursor:pointer;backdrop-filter:blur(10px)}
.intro-toggle[hidden]{display:none}.intro-toggle:focus-visible{outline:2px solid #f0d572;outline-offset:4px}
#welcome .welcome-centre{padding:60px 0 90px;position:relative}#welcome .welcome-top,#welcome .welcome-bottom{position:relative}
#welcome .welcome-centre .eyebrow{color:#e2d6bc;text-shadow:0 1px 10px #000}
#welcome .welcome-centre>p:not(.eyebrow){color:#e9dfce;text-shadow:0 2px 12px #000}
#welcome .welcome-centre h1{text-shadow:0 3px 22px #0008}
#welcome .welcome-table{color:#eadfc9;text-shadow:0 1px 8px #000}
#welcome .welcome-bottom{color:#ede0c9;text-shadow:0 1px 8px #000}
#welcome #commence{box-shadow:0 6px 35px #e6b54e26;border:1px solid #ffe69b7a;border-radius:7px;min-height:56px}
.intro-dust{position:absolute;inset:0;background-image:radial-gradient(circle at 12% 32%,#fff1c8a0 0 1px,transparent 2px),radial-gradient(circle at 86% 57%,#fff1c875 0 1px,transparent 2px),radial-gradient(circle at 19% 67%,#fff1c850 0 1px,transparent 2px);opacity:0}
.intro-active .intro-dust{opacity:.6;animation:intro-float 8s ease-in-out infinite alternate}
.intro-touched .intro-light{animation:intro-warmth 1.5s ease-out}
.logo-melting .intro-controls{opacity:0;transition:opacity .3s;pointer-events:none}
@keyframes intro-float{from{transform:translateY(12px)}to{transform:translateY(-20px)}}
@keyframes intro-warmth{0%,100%{opacity:1}40%{opacity:2}}
@media(min-width:800px){.intro-scene{background-size:cover;background-position:center 72%}.intro-film{object-position:center 72%}.intro-shade{background:linear-gradient(90deg,#12110fd9,#18161377 40%,#18161377 60%,#12110fd9),linear-gradient(0deg,#0c0a08b3,transparent 45%,#15120e80)}.intro-controls{left:max(28px,calc((100vw - 1080px)/2));right:max(28px,calc((100vw - 1080px)/2))}}
@media(max-width:650px){#welcome .welcome-centre{padding:72px 0 80px}.intro-controls{top:62px;left:24px;right:24px}.intro-hint{font-size:8px;max-width:155px;line-height:1.6}#welcome .logo-mark{width:100%;max-width:420px}#welcome .welcome-centre h1{font-size:40px;margin-bottom:12px}}
@media(max-height:700px){#welcome .welcome-centre{padding:66px 0 30px}#welcome .logo-mark{max-width:280px;margin:8px 0}#welcome .welcome-centre h1{font-size:30px}#welcome #commence{margin-top:14px}#welcome .welcome-centre>p:not(.eyebrow){margin:4px 0}}
@media(prefers-reduced-motion:reduce){.intro-film,.intro-light{transform:none;transition:none}.intro-dust{display:none}.intro-touched .intro-light{animation:none}}