/* Opening splash: shown once per browser session. Without the html.splash-on class it never renders. */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.dlr-splash { display: none; }
/* Reserve the scrollbar gutter so the page doesn't shift when scrolling returns; navy fills it meanwhile. */
html.splash-on { overflow: hidden; scrollbar-gutter: stable; background: #0d1b30; }
html.splash-on .dlr-splash {
  --emblem: min(46vmin, 330px);
  --film: min(90vw, 60vh, 760px);
  --word: min(80vw, 520px, 90vh);
  position: fixed; inset: 0; z-index: 2147483000; display: block; overflow: hidden;
  color: #fff; cursor: pointer;
}
/* Everything the visitor sees, on one GPU layer: the exit scales and fades this layer only. */
.splash-scene { position: absolute; inset: 0; will-change: transform, opacity;
  background: radial-gradient(ellipse at 50% 42%, #23446d 0%, #172d4d 48%, #0d1b30 100%); }
.splash-glow {
  position: absolute; left: 50%; top: 44%; width: 120vmax; height: 120vmax; translate: -50% -50%;
  background: radial-gradient(circle, #a4d8ff2e 0%, #a4d8ff0d 22%, transparent 48%); opacity: 0;
}
.splash-dust { position: absolute; inset: 0; opacity: 0;
  background-image: radial-gradient(1.5px 1.5px at 12% 22%, #d7ac48aa, transparent), radial-gradient(1px 1px at 78% 18%, #fff8, transparent),
    radial-gradient(1.5px 1.5px at 85% 70%, #a4d8ffaa, transparent), radial-gradient(1px 1px at 22% 78%, #fff6, transparent),
    radial-gradient(1.2px 1.2px at 40% 12%, #a4d8ff88, transparent), radial-gradient(1.2px 1.2px at 64% 86%, #d7ac4888, transparent); }
.splash-film { position: absolute; left: 50%; top: 50%; width: var(--film); aspect-ratio: 1; translate: -50% -50%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
/* Feather the clip's square edges into the splash background; the monocle stays dead centre. */
.splash-video, .splash-anim { display: block; width: 100%; height: 100%; object-fit: cover; background: transparent;
  -webkit-mask: radial-gradient(closest-side, #000 68%, transparent 100%); mask: radial-gradient(closest-side, #000 68%, transparent 100%); }
.splash-video[hidden], .splash-anim[hidden] { display: none; }
.splash-emblem {
  position: absolute; left: 50%; top: 50%; width: var(--emblem); aspect-ratio: 640 / 586;
  translate: -50% -50%; transform-origin: 58.94% 48.26%; perspective: 900px;
}
.splash-emblem img { position: absolute; display: block; height: auto; user-select: none; -webkit-user-drag: none; }
.splash-mark { inset: 0; width: 100%; opacity: 0;
  -webkit-mask: conic-gradient(from 180deg at 50% 56%, #000 var(--sweep), transparent var(--sweep) calc(360deg - var(--sweep)), #000 calc(360deg - var(--sweep)));
  mask: conic-gradient(from 180deg at 50% 56%, #000 var(--sweep), transparent var(--sweep) calc(360deg - var(--sweep)), #000 calc(360deg - var(--sweep))); }
.splash-face { left: 19.82%; top: 18.57%; width: 58.3%; opacity: 0; transform-origin: 50% 60%; filter: drop-shadow(0 18px 30px #0007); }
.splash-glint { position: absolute; left: 58.94%; top: 48.26%; width: 24%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #fff 0 7%, #fff3d0ee 14%, #ffd27a99 28%, #fea00233 48%, transparent 68%); }
.splash-glint::before, .splash-glint::after { content: ''; position: absolute; left: 50%; top: 50%; width: 300%; height: 2px; translate: -50% -50%;
  background: linear-gradient(90deg, transparent, #fffbe9 50%, transparent); border-radius: 2px; box-shadow: 0 0 8px #ffd27a; }
.splash-glint::after { rotate: 90deg; width: 220%; }
.splash-ring { position: absolute; border-radius: 50%; border: 3px solid #fea002; box-shadow: 0 0 22px #fea00299, inset 0 0 14px #fea00266;
  opacity: 0; pointer-events: none; will-change: transform, opacity; }
.splash-word { position: absolute; left: 50%; top: 50%; width: var(--word); translate: -50% -50%; }
.splash-word img { display: block; width: 100%; height: auto; opacity: 0; }
.splash-rule { display: block; height: 2px; margin: calc(var(--word) * .035) auto 0; width: 42%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #d7ac48 20%, #f3d58b 50%, #d7ac48 80%, transparent); transform: scaleX(0); }
.splash-skip { position: absolute; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 2;
  font: 600 .78rem/1 'DM Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #cfe6fa;
  background: #ffffff10; border: 1px solid #ffffff2a; border-radius: 999px; padding: 10px 16px; cursor: pointer; opacity: 0; transition: background .2s, opacity .4s; }
.splash-skip:hover { background: #ffffff22; }
.splash-skip:focus-visible { outline: 2px solid #a4d8ff; outline-offset: 3px; opacity: 1; }
html.splash-ready .splash-skip { opacity: 1; transition-delay: .9s; }
@media (prefers-reduced-motion: reduce) { html.splash-on .dlr-splash { display: none; } html.splash-on { overflow: auto; scrollbar-gutter: auto; background: unset; } }