/* Opening brand sequence: plays once per browser session, then reveals the sign-in page underneath. */
.splash{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;overflow:hidden;cursor:pointer;background:radial-gradient(120% 90% at 50% 42%,#16303f 0%,#0c1b25 46%,#060d12 100%);color:#c9a56a;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-user-select:none;user-select:none}
html.splash-active,html.splash-active body{overflow:hidden}
.splash::before{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 40%,rgba(201,165,106,.16),transparent 70%);opacity:0}
.splash::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 88px);-webkit-mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent);mask-image:radial-gradient(60% 60% at 50% 45%,#000,transparent);opacity:0}
.splash-stage{position:relative;width:min(640px,86vw);display:grid;justify-items:center}
.splash-piece{position:relative;width:100%;opacity:0}
.splash-piece img{display:block;width:100%;height:auto}
.splash-wordmark{margin-top:3%}
.splash-tagline{margin-top:1.8%}
.splash-horizon{position:absolute;left:-18%;right:-18%;top:0;margin-top:21.9%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,165,106,.0) 8%,rgba(236,205,140,.85) 50%,rgba(201,165,106,0) 92%,transparent);transform:scaleX(0);opacity:0}
.splash-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 0 38%,rgba(255,244,214,.95) 50%,transparent 62% 100%);background-size:260% 100%;background-position:130% 0;-webkit-mask-size:100% 100%;mask-size:100% 100%;mix-blend-mode:screen;opacity:0}
.splash-jet .splash-shine{-webkit-mask-image:url(/static/splash-jet.png);mask-image:url(/static/splash-jet.png)}
.splash-wordmark .splash-shine{-webkit-mask-image:url(/static/splash-wordmark.png);mask-image:url(/static/splash-wordmark.png)}
.splash-caption{margin-top:7%;font-size:clamp(10px,1.5vw,12.5px);font-weight:600;letter-spacing:.5em;text-indent:.5em;color:#a9bbc7;opacity:0;white-space:nowrap}
.splash-caption b{color:#c9a56a;font-weight:700}
.splash-skip{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));background:none;border:1px solid rgba(169,187,199,.28);color:#a9bbc7;font-family:inherit;font-size:11px;font-weight:600;line-height:1;letter-spacing:.14em;text-transform:uppercase;padding:10px 14px;border-radius:999px;cursor:pointer;opacity:0;transition:opacity .4s,border-color .2s,color .2s}
.splash-skip:hover,.splash-skip:focus-visible{color:#fff;border-color:#c9a56a;outline:none}

/* Timeline — starts once the logo pieces have loaded. */
.splash.play::before{animation:splash-fade 2.2s .1s ease-out forwards}
.splash.play::after{animation:splash-fade 3s .3s ease-out forwards}
.splash.play .splash-horizon{animation:splash-horizon 2.1s .2s cubic-bezier(.22,1,.36,1) forwards}
.splash.play .splash-jet{animation:splash-approach 1.9s .35s cubic-bezier(.16,1,.3,1) forwards}
.splash.play .splash-wordmark{animation:splash-open 1.1s 1.5s cubic-bezier(.65,0,.35,1) forwards}
.splash.play .splash-tagline{animation:splash-rise 1s 2.15s cubic-bezier(.22,1,.36,1) forwards}
.splash.play .splash-caption{animation:splash-caption 1.2s 2.6s cubic-bezier(.22,1,.36,1) forwards}
.splash.play .splash-jet .splash-shine{animation:splash-shine 1.3s 2.8s ease-in-out forwards}
.splash.play .splash-wordmark .splash-shine{animation:splash-shine 1.3s 3.05s ease-in-out forwards}
.splash.play .splash-skip{opacity:.9;transition-delay:.6s}
.splash.leave{animation:splash-leave .9s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
.splash.leave .splash-stage{animation:splash-lift .9s cubic-bezier(.4,0,.2,1) forwards}
/* A click or key skip goes straight to sign-in with a quick fade. */
.splash.leave.fast,.splash.leave.fast .splash-stage{animation-duration:.3s}

@keyframes splash-fade{to{opacity:1}}
@keyframes splash-horizon{0%{transform:scaleX(0);opacity:0}25%{opacity:1}70%{transform:scaleX(1);opacity:.9}100%{transform:scaleX(1);opacity:.28}}
@keyframes splash-approach{0%{opacity:0;transform:translateY(14%) scale(.38);filter:blur(10px)}35%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
@keyframes splash-open{0%{opacity:0;clip-path:inset(0 50% 0 50%)}20%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes splash-rise{0%{opacity:0;transform:translateY(40%);clip-path:inset(0 30% 0 30%)}100%{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes splash-caption{0%{opacity:0;letter-spacing:.9em;text-indent:.9em}100%{opacity:1;letter-spacing:.5em;text-indent:.5em}}
@keyframes splash-shine{0%{opacity:1;background-position:130% 0}100%{opacity:1;background-position:-30% 0}}
@keyframes splash-leave{to{opacity:0;visibility:hidden}}
@keyframes splash-lift{to{transform:translateY(-3%) scale(1.06);filter:blur(4px)}}

@media (max-width:600px){.splash-stage{width:88vw}.splash-caption{letter-spacing:.34em;text-indent:.34em}}
@media (prefers-reduced-motion:reduce){
 .splash.play .splash-piece,.splash.play .splash-caption,.splash.play .splash-horizon,.splash.play::before,.splash.play::after{animation:splash-fade .5s ease-out forwards;transform:none;clip-path:none;filter:none}
 .splash.play .splash-horizon{transform:scaleX(1)}
 .splash.play .splash-shine{animation:none}
 .splash.leave,.splash.leave .splash-stage{animation-duration:.35s}
 .splash.leave .splash-stage{animation-name:none}
}

/* Work Records sign-in: the logo file has a black background. On the dark sign-in page, screen blending drops
   the black so only the gold emblem shows (same treatment Command uses for its logo on dark surfaces). */
.login-logo{mix-blend-mode:screen}