/* Boot splash for #sk-splash in index.html. Kept out of the Tailwind bundle
   (and out of an inline <style>, which trips a Vite path bug on Windows) so it
   is ready before the app CSS and JS. Only transform and opacity are animated,
   so it stays smooth while the bundle parses. src/lib/splash.ts adds
   .is-leaving once the first screen is ready. */

#sk-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Glow centred on the nugget: the mark sits 3vh above the middle and the
     nugget's centre is 73px above the mark's. */
  background: radial-gradient(75% 48% at 50% calc(47% - 73px), #16247A 0%, rgba(2, 9, 61, 0) 100%), #02093D;
  transition: opacity 0.42s ease;
}
#sk-splash.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.sk-splash__mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -6vh;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
#sk-splash.is-leaving .sk-splash__mark {
  transform: scale(1.04);
}
/* Soft light behind the nugget; top is the nugget's vertical centre. */
.sk-splash__halo {
  position: absolute;
  left: 50%;
  top: 50px;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 196, 255, 0.24) 0%, rgba(176, 196, 255, 0.08) 38%, rgba(176, 196, 255, 0) 68%);
  animation: sk-splash-breathe 3.2s ease-in-out infinite;
}
/* Ground shadow under the nugget. It shrinks and fades as the nugget rises,
   on the same clock as sk-splash-float. */
.sk-splash__shadow {
  position: absolute;
  left: 50%;
  top: 118px;
  width: 96px;
  height: 12px;
  margin-left: -48px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
  animation:
    sk-splash-fade 0.7s ease both,
    sk-splash-shadow 4.2s ease-in-out 0.7s infinite;
}
.sk-splash__nugget {
  position: relative;
  width: 132px;
  height: 100px;
  animation:
    sk-splash-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both,
    sk-splash-float 4.2s ease-in-out 0.7s infinite;
}
.sk-splash__nugget img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 18px rgba(120, 150, 255, 0.18));
}
/* A band of light crossing the metal, clipped to the nugget's own shape.
   Overlay lifts the bright facets and leaves the dark ones dark. */
.sk-splash__sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mix-blend-mode: overlay;
  -webkit-mask: url("/splash-nugget.webp") center / 100% 100% no-repeat;
  mask: url("/splash-nugget.webp") center / 100% 100% no-repeat;
}
.sk-splash__sheen::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 46%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-14deg);
  animation: sk-splash-sheen 2.6s cubic-bezier(0.4, 0, 0.6, 1) 0.55s infinite;
}
.sk-splash__name {
  display: block;
  width: 230px;
  height: auto;
  margin-top: 48px;
  animation: sk-splash-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
.sk-splash__bar {
  position: relative;
  width: 92px;
  height: 2px;
  margin-top: 36px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  animation: sk-splash-fade 0.6s ease 0.4s both;
}
.sk-splash__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(221, 227, 236, 0) 0%, #DDE3EC 50%, rgba(221, 227, 236, 0) 100%);
  transform: translateX(-100%);
  animation: sk-splash-run 1.5s cubic-bezier(0.45, 0, 0.2, 1) 0.4s infinite;
}
@keyframes sk-splash-breathe {
  0%, 100% { opacity: 0.8; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.04); }
}
@keyframes sk-splash-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes sk-splash-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes sk-splash-shadow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.82); }
}
@keyframes sk-splash-sheen {
  0% { transform: translateX(-120%) skewX(-14deg); }
  60%, 100% { transform: translateX(240%) skewX(-14deg); }
}
@keyframes sk-splash-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sk-splash-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes sk-splash-run {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  #sk-splash,
  .sk-splash__mark {
    transition: none;
  }
  .sk-splash__halo,
  .sk-splash__shadow,
  .sk-splash__nugget,
  .sk-splash__name,
  .sk-splash__bar {
    animation: none;
  }
  .sk-splash__sheen {
    display: none;
  }
  .sk-splash__bar::after {
    transform: none;
    animation: sk-splash-fade 1.2s ease-in-out infinite alternate;
  }
}