/* Natsco boot splash (#4133), built to Enable.App.Splash from Natsco's own splash page. Every selector and
   custom property is scoped to #splash and every keyframe is nt- prefixed: the page claimed .mark, .stage,
   .app and --bg on :root, and Bootstrap styles .mark as highlighted text. Follows the device's light or
   dark setting, as the page does. */

#splash {
  --nt-bg: #0b0f17;
  --nt-bg-lift: #18223a;
  --nt-halo: rgba(24,80,163,.62);
  --nt-halo-y: 0%;
  --nt-ease-out: cubic-bezier(.16,1,.3,1);
  --nt-badge: min(88vw, 560px, 158vh);
  position: fixed;
  inset: 0;
  z-index: 2147483647; /* the maximum: anything in #app at an equal z-index comes later and would float over it */
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: radial-gradient(120% 85% at 50% 45%, var(--nt-bg-lift) 0%, var(--nt-bg) 66%);
  transition: opacity 760ms ease; /* keep in step with EXIT_MS in index.html */
}
@media (prefers-color-scheme: light) {
  #splash { --nt-bg: #e9eef5; --nt-bg-lift: #fff; --nt-halo: rgba(15,23,42,.22); --nt-halo-y: 9%; }
}
#splash[hidden] { display: none; } /* an id selector outranks the user-agent [hidden] rule */
#splash.is-exiting { opacity: 0; }
#splash.is-exiting .nt-stage { animation: ntZoomThrough 760ms cubic-bezier(.6,0,.85,.3) forwards; }
@keyframes ntZoomThrough { to { transform: scale(6); filter: blur(14px); opacity: 0; } }

#splash .nt-markwrap { position: relative; display: grid; place-items: center; }

/* tilted to sit under the badge: a blue backlight on dark, a soft shadow on light */
#splash .nt-halo {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--nt-badge) * 1.1118); height: calc(var(--nt-badge) * .5191);
  translate: -50% calc(-50% + var(--nt-halo-y)); rotate: -11.1174deg;
  border-radius: 50%; background: radial-gradient(closest-side, var(--nt-halo), transparent);
  filter: blur(18px); opacity: 0; pointer-events: none;
}
#splash.is-playing .nt-halo { animation: ntHaloIn 1.3s var(--nt-ease-out) .15s forwards; }
@keyframes ntHaloIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

#splash .nt-mark { display: block; width: var(--nt-badge); height: auto; overflow: visible; opacity: 0; }
#splash.is-playing .nt-mark { animation: ntMarkZoom 900ms cubic-bezier(.2,1.25,.4,1) forwards; }
@keyframes ntMarkZoom { 0% { opacity: 0; transform: scale(1.9); filter: blur(16px); } 55% { opacity: 1; } 100% { opacity: 1; transform: scale(1); filter: blur(0); } }

/* the outline draws clockwise from the left, the direction everything travels */
#splash .nt-ring { stroke-dasharray: 4710; stroke-dashoffset: 4710; }
#splash.is-playing .nt-ring { animation: ntDraw 1100ms cubic-bezier(.65,0,.35,1) 150ms forwards; }
@keyframes ntDraw { to { stroke-dashoffset: 0; } }

/* the train and the lower swoosh ride the ellipse itself into place, clockwise: the chain squashes the
   ellipse to a circle, rotates and unsquashes, so any point on the loop stays on it. The train
   overshoots a hair and settles, like braking. */
#splash .nt-trk { opacity: 0; transform-box: view-box; transform-origin: 0 0; }
#splash.is-playing .nt-train { animation: ntTrainIn 1150ms 380ms forwards; }
#splash.is-playing .nt-swoosh { animation: ntSwooshIn 1050ms 470ms forwards; }
@keyframes ntTrainIn {
  0%  {opacity:0;transform:translate(978.4px,495.5px) rotate(-11.1174deg) scale(1,0.4669) rotate(-26deg) scale(1,2.1417) rotate(11.1174deg) translate(-978.4px,-495.5px);animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  30% {opacity:1}
  82% {transform:translate(978.4px,495.5px) rotate(-11.1174deg) scale(1,0.4669) rotate(0.9deg) scale(1,2.1417) rotate(11.1174deg) translate(-978.4px,-495.5px);animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%{opacity:1;transform:translate(978.4px,495.5px) rotate(-11.1174deg) scale(1,0.4669) rotate(0deg) scale(1,2.1417) rotate(11.1174deg) translate(-978.4px,-495.5px)}
}
@keyframes ntSwooshIn {
  0%  {opacity:0;transform:translate(978.4px,495.5px) rotate(-11.1174deg) scale(1,0.4669) rotate(-26deg) scale(1,2.1417) rotate(11.1174deg) translate(-978.4px,-495.5px);animation-timing-function:cubic-bezier(.2,.7,.25,1)}
  30% {opacity:1}
  100%{opacity:1;transform:translate(978.4px,495.5px) rotate(-11.1174deg) scale(1,0.4669) rotate(0deg) scale(1,2.1417) rotate(11.1174deg) translate(-978.4px,-495.5px)}
}

/* the italic wordmark arrives leaning into it, then straightens to its own slant */
#splash .nt-lt, #splash .nt-wd { opacity: 0; transform-box: view-box; transform-origin: var(--ox) var(--oy); }
#splash.is-playing .nt-lt { animation: ntLetterIn 640ms var(--nt-ease-out) forwards; animation-delay: calc(820ms + var(--i) * 60ms); }
#splash.is-playing .nt-wd { animation: ntWordIn 620ms var(--nt-ease-out) forwards; animation-delay: calc(1260ms + var(--i) * 90ms); }
@keyframes ntLetterIn { from { opacity: 0; transform: translateX(-70px) skewX(-12deg); } to { opacity: 1; transform: none; } }
@keyframes ntWordIn { from { opacity: 0; transform: translateX(-48px) skewX(-8deg); } to { opacity: 1; transform: none; } }

/* decorative, so reduced motion cross-fades instead: same timing structure, no movement */
@media (prefers-reduced-motion: reduce) {
  @keyframes ntMarkZoom { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ntZoomThrough { to { opacity: 0; } }
  @keyframes ntHaloIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ntTrainIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ntSwooshIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ntLetterIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ntWordIn { from { opacity: 0; } to { opacity: 1; } }
  #splash .nt-ring { stroke-dashoffset: 0; }
  #splash.is-playing .nt-ring { animation: none; }
  #splash.is-playing .nt-mark { animation-duration: .4s; }
  #splash.is-playing .nt-train, #splash.is-playing .nt-swoosh { animation-duration: .3s; animation-delay: .1s; }
  #splash.is-playing .nt-lt, #splash.is-playing .nt-wd { animation-duration: .3s; animation-delay: calc(.15s + var(--i) * 30ms); }
}