/* exitStatus — splash */
:root {
  --bg: #0d0d0c;
  --ink: #f1ede4;
  --dim: #6f6b63;
  --ok: #3dff8b;
  --okglow: rgba(61, 255, 139, .45);
  --wait: #f3b33d;
  --waitglow: rgba(243, 179, 61, .4);
  --mono: "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --u: min(100vw, 100svh);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); overflow: hidden; -webkit-font-smoothing: antialiased; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); letter-spacing: .04em; white-space: pre; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.splash { position: fixed; inset: 0; }
.splash__vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 80% at 50% 45%, transparent 40%, rgba(0, 0, 0, .5) 100%); }

/* same geometry as the motion kit splash */
.splash__logo {
  --size: min(56svh, 70vw);
  position: absolute; left: 50%; top: calc((100svh - (var(--size) + var(--u) * .05 + var(--u) * .0312)) / 2 - 1.5svh);
  width: var(--size); height: var(--size); margin-left: calc(var(--size) / -2);
}
.splash__tag {
  position: absolute; left: 0; right: 0; margin: 0; text-align: center;
  top: calc((100svh - (min(56svh, 70vw) + var(--u) * .05 + var(--u) * .0312)) / 2 - 1.5svh + min(56svh, 70vw) + var(--u) * .05);
  font-size: max(15px, calc(var(--u) * .026)); line-height: 1.2;
}
.splash__tag .p { color: var(--dim); }
.splash__tag .z { color: var(--wait); text-shadow: 0 0 .5em var(--waitglow); font-weight: 600; }
.splash__tag .note { color: var(--dim); }
.splash__tag .note::before { content: " · "; }
.cur { display: inline-block; width: .6em; height: 1.05em; vertical-align: -.17em; background: var(--ink); margin-left: .25em; opacity: .85; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.mark { --m: calc(var(--u) * .035); --i: calc(var(--u) * .045); position: absolute; width: var(--m); height: var(--m); border: 0 solid var(--dim); opacity: .7; }
.mark.tl { top: var(--i); left: var(--i); border-top-width: 1px; border-left-width: 1px; }
.mark.tr { top: var(--i); right: var(--i); border-top-width: 1px; border-right-width: 1px; }
.mark.bl { bottom: var(--i); left: var(--i); border-bottom-width: 1px; border-left-width: 1px; }
.mark.br { bottom: var(--i); right: var(--i); border-bottom-width: 1px; border-right-width: 1px; }

.foot, .replay {
  position: absolute; margin: 0; color: var(--dim); text-transform: uppercase; letter-spacing: .18em;
  font-size: max(10px, calc(var(--u) * .0125)); bottom: calc(var(--u) * .045 + var(--u) * .035 * .35);
}
.foot--l { left: calc(var(--u) * .08 + max(10px, calc(var(--u) * .0125))); }
.foot--r { right: calc(var(--u) * .08 + max(10px, calc(var(--u) * .0125))); }
.foot--c { left: 0; right: 0; text-align: center; }
.replay {
  bottom: auto; top: calc(var(--u) * .045 + var(--u) * .035 * .35 - 8px); right: calc(var(--u) * .08 + max(10px, calc(var(--u) * .0125)) - 12px);
  background: none; border: 0; padding: 8px 12px; cursor: pointer; font-family: var(--mono); transition: color .3s;
}
.replay:hover, .replay:focus-visible { color: var(--ink); }
.replay:focus-visible { outline: 1px solid var(--dim); outline-offset: 2px; }

/* entrance — runs when the intro hands over (and on a plain visit) */
.splash > * { opacity: 0; }
.splash.on .splash__vig { opacity: 1; transition: opacity 2s; }
.splash.on .splash__logo { animation: logoIn 2.6s cubic-bezier(.22, .8, .2, 1) both; }
.splash.on .splash__tag { animation: fadeIn 1.4s 1.5s var(--ease) both; }
.splash.on .mark, .splash.on .foot, .splash.on .replay { animation: fadeIn 1.6s 2.1s var(--ease) both; }
@keyframes logoIn {
  0% { opacity: 0; transform: scale(.965); filter: blur(10px) brightness(1.8); }
  40% { opacity: .85; filter: blur(2px) brightness(1.25); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.splash.on .mark { animation-name: markIn; }
@keyframes markIn { from { opacity: 0; } to { opacity: .7; } }

/* first-visit gate hint */
.hint {
  position: fixed; left: 0; right: 0; bottom: calc(var(--u) * .08); margin: 0; text-align: center; z-index: 2147483001;
  color: var(--dim); text-transform: uppercase; letter-spacing: .18em; font-size: max(10px, calc(var(--u) * .0125));
  opacity: 0; pointer-events: none; transition: opacity .6s;
}
.hint.on { opacity: 1; animation: pulse 2.4s ease-in-out .6s infinite; }
@keyframes pulse { 50% { opacity: .45; } }
exit-status-intro.esi-wait .esi-cur { animation: blink 1.1s steps(1) infinite; }
exit-status-intro.esi-wait { cursor: pointer; }

@media (max-width: 520px) {
  .foot--l, .foot--r { display: none; }
  .splash__tag .note { display: block; margin-top: .5em; font-size: .7em; }
  .splash__tag .note::before { content: ""; }
}
@media (prefers-reduced-motion: reduce) {
  .splash.on > * { animation: none !important; opacity: 1; }
  .splash.on .mark { opacity: .7; }
  .cur, .hint.on { animation: none; }
}

/* credit */
.foot--c { pointer-events: none; }
.credit {
  pointer-events: auto; color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(241, 237, 228, .35); padding-bottom: 2px; transition: color .3s, border-color .3s;
}
.credit:hover, .credit:focus-visible { color: var(--wait); border-color: var(--wait); outline: none; }