/* ---------------------------------------------------------------------------
   MS Wager boot splash — full choreography.

   Shared by the inline index.html #boot poster and the React <Intro>, so the
   hand-off between them never changes shape. Render-blocking and self-
   sufficient: index.html links this before the JS bundle so the splash is
   painted instantly, which means every token it needs carries a local
   fallback (the Tailwind @theme vars land with the bundle, too late for boot).

   Phases, fixed by spec (do not retune):
     · frog jump       600ms, 4 phases (crouch / rise / fall / land) + shadow
     · name            +250ms after touchdown, enters +7px
     · slogan          +100ms after the name
     · ring glint      1000ms sweep, light texture spins 7s in the ellipse plane
     · spotlights      400–600ms build-up, 8–10s sway with phase offset
     · indicator       1200ms, no percentages
     · exit            250ms on ready (never a mandatory splash)

   Animated properties are transform/opacity ONLY. Gradients, masks and filters
   are static paint, never interpolated.

   Every dimension is exactly ×2 the previous 80px-card splash:
     frog 48→96 · title 24→48 · caption 10→20 · capsule 112×4→224×8,
     with tracking kept in em so its ratio is preserved.
--------------------------------------------------------------------------- */

.ms-splash {
  --ms-splash-elapsed: 0ms;
  --ms-splash-t0: calc(-1 * var(--ms-splash-elapsed, 0ms));

  --ms-frog-h: 96px;
  --ms-title-size: 48px;
  --ms-slogan-size: 22px;
  --ms-caption-size: 20px;
  --ms-ind-w: 224px;
  --ms-ind-h: 8px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(
    --font-sans,
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'Segoe UI',
    Roboto,
    sans-serif
  );
}

/* Ambient wash — the only full-viewport light. */
.ms-splash__glow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 50% 46%,
    rgba(184, 167, 240, 0.16) 0%,
    rgba(184, 167, 240, 0.05) 38%,
    transparent 68%
  );
}

/* --- Spotlights ---------------------------------------------------------- */
.ms-splash__lights {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.ms-splash__beam {
  position: absolute;
  top: -8%;
  left: 50%;
  width: 168px;
  height: 66%;
  margin-left: -84px;
  transform: rotate(var(--ms-beam-rot, 0deg));
  transform-origin: 50% 0;
}
.ms-splash__beam-body {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(228, 220, 253, 0.46) 0%,
    rgba(201, 188, 245, 0.2) 34%,
    rgba(184, 167, 240, 0.06) 66%,
    transparent 92%
  );
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  opacity: 0;
  /* Build-up (opacity) and sway (transform) own disjoint properties, so both
     can drive one element. */
  animation:
    msSplashBeamIn var(--ms-beam-in, 520ms)
      var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))
      calc(var(--ms-splash-t0) + var(--ms-beam-delay, 0ms)) both,
    msSplashBeamSway var(--ms-beam-sway, 9s)
      var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1))
      calc(var(--ms-splash-t0) + var(--ms-beam-delay, 0ms) + var(--ms-beam-in, 520ms))
      infinite;
}
.ms-splash__beam--a {
  --ms-beam-rot: -13deg;
  --ms-beam-delay: 0ms;
  --ms-beam-in: 420ms;
  --ms-beam-sway: 8.4s;
  width: 150px;
  margin-left: -75px;
}
.ms-splash__beam--b {
  --ms-beam-rot: 13deg;
  --ms-beam-delay: 90ms;
  --ms-beam-in: 480ms;
  --ms-beam-sway: 9.6s;
  width: 150px;
  margin-left: -75px;
}
.ms-splash__beam--c {
  --ms-beam-rot: 0deg;
  --ms-beam-delay: 190ms;
  --ms-beam-in: 600ms;
  --ms-beam-sway: 8.9s;
  width: 196px;
  margin-left: -98px;
}

/* --- Stage: frog + floor ring -------------------------------------------- */
.ms-splash__stack {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* The stage box tightly bounds the settled artwork (ring bottom → frog top),
   so centring the stack centres the artwork itself. */
.ms-splash__stage {
  position: relative;
  width: 320px;
  height: 148px;
}
/* Circle squashed into a floor ellipse by an orthographic rotateX:
   cos(71deg) × 320px ≈ 104px of visual height. */
.ms-splash__ring-plane {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: 320px;
  height: 320px;
  margin: 0 0 -160px -160px;
  transform: rotateX(71deg);
}
/* Volumetric rim: lit band with a darker inner falloff. */
.ms-splash__ring-core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    transparent 0 58%,
    rgba(142, 122, 201, 0.22) 66%,
    rgba(221, 212, 250, 0.62) 78%,
    rgba(184, 167, 240, 0.28) 86%,
    transparent 94%
  );
}
/* Lit floor inside the ring. Static paint, but load-bearing: without it the
   contact shadow falls on the unlit interior and reads as nothing. */
.ms-splash__floor {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(184, 167, 240, 0.22) 0%,
    rgba(184, 167, 240, 0.11) 44%,
    rgba(142, 122, 201, 0.04) 64%,
    transparent 80%
  );
}
/* Light texture, spinning inside the already-tilted plane. */
.ms-splash__ring-texture {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(221, 212, 250, 0.9) 34deg,
    rgba(184, 167, 240, 0.35) 66deg,
    transparent 108deg,
    transparent 196deg,
    rgba(201, 188, 245, 0.75) 232deg,
    transparent 278deg
  );
  -webkit-mask-image: radial-gradient(
    closest-side,
    transparent 0 60%,
    #000 68% 88%,
    transparent 94%
  );
  mask-image: radial-gradient(
    closest-side,
    transparent 0 60%,
    #000 68% 88%,
    transparent 94%
  );
  animation: msSplashRingSpin 7s linear var(--ms-splash-t0) infinite;
}
/* One-shot glint travelling the rim (1000ms). */
.ms-splash__ring-gloss {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.85) 22deg,
    transparent 54deg
  );
  -webkit-mask-image: radial-gradient(
    closest-side,
    transparent 0 64%,
    #000 72% 86%,
    transparent 92%
  );
  mask-image: radial-gradient(
    closest-side,
    transparent 0 64%,
    #000 72% 86%,
    transparent 92%
  );
  opacity: 0;
  animation: msSplashRingGloss 1000ms
    var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))
    calc(var(--ms-splash-t0) + 260ms) both;
}
/* Contact shadow — squashed by the plane, so it reads as lying on the floor. */
.ms-splash__shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 132px;
  height: 132px;
  margin: -66px 0 0 -66px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.34) 46%,
    transparent 76%
  );
  animation: msSplashShadow 600ms
    var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) var(--ms-splash-t0) both;
}
.ms-splash__frog {
  position: absolute;
  left: 50%;
  bottom: 52px;
  width: calc(var(--ms-frog-h) * 1.0802);
  height: var(--ms-frog-h);
  margin-left: calc(var(--ms-frog-h) * -0.5401);
  filter: drop-shadow(0 8px 22px rgba(184, 167, 240, 0.45));
  transform-origin: 50% 100%;
  animation: msSplashJump 600ms
    var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) var(--ms-splash-t0) both;
}

/* --- Wordmark, slogan, indicator ---------------------------------------- */
.ms-splash__title {
  margin-top: 28px;
  max-width: 100%;
  font-size: var(--ms-title-size);
  font-weight: 700;
  line-height: 64px;
  letter-spacing: -0.025em;
  color: #ffffff;
  opacity: 0;
  animation: msSplashRise 250ms
    var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))
    calc(var(--ms-splash-t0) + 600ms) both;
}
.ms-splash__title span {
  color: var(--color-accent, #b8a7f0);
}
/* Tracking kept modest: at 22px this runs ~350px wide, so 375px phones keep a
   comfortable margin and 320px phones wrap to two centred lines instead of
   clipping against the viewport edge. */
.ms-splash__slogan {
  margin: 8px 0 0;
  max-width: 100%;
  font-size: var(--ms-slogan-size);
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: #b8a7f0;
  opacity: 0;
  animation: msSplashRise 250ms
    var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))
    calc(var(--ms-splash-t0) + 950ms) both;
}
.ms-splash__loader {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.ms-splash__indicator {
  position: relative;
  width: var(--ms-ind-w);
  height: var(--ms-ind-h);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  opacity: 0;
  animation: msSplashRise 250ms
    var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))
    calc(var(--ms-splash-t0) + 1150ms) both;
}
.ms-splash__indicator span {
  position: absolute;
  top: 0;
  left: 0;
  width: 44%;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    rgba(184, 167, 240, 0.15) 0%,
    #d3c7fc 50%,
    rgba(184, 167, 240, 0.15) 100%
  );
  animation: msSplashIndicator 1200ms
    var(--ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) var(--ms-splash-t0)
    infinite;
}
.ms-splash__caption {
  font-family: var(
    --font-mono,
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace
  );
  font-size: var(--ms-caption-size);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #8e8b99;
  opacity: 0;
  animation: msSplashRise 250ms
    var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1))
    calc(var(--ms-splash-t0) + 1250ms) both;
}

/* --- Keyframes ----------------------------------------------------------- */
/* 4 phases over 600ms: 0–15% crouch, 15–50% rise to apex, 50–80% fall,
   80–100% land squash + settle. Transform only. */
@keyframes msSplashJump {
  0% {
    transform: scale(1, 1);
  }
  15% {
    transform: translate3d(0, 6px, 0) scale(1.1, 0.86);
  }
  50% {
    transform: translate3d(0, -64px, 0) scale(0.94, 1.1);
  }
  80% {
    transform: translate3d(0, 0, 0) scale(0.97, 1.05);
  }
  90% {
    transform: translate3d(0, 5px, 0) scale(1.13, 0.83);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes msSplashShadow {
  0% {
    transform: scale(1, 1);
    opacity: 0.55;
  }
  15% {
    transform: scale(1.12, 1.12);
    opacity: 0.62;
  }
  50% {
    transform: scale(0.6, 0.6);
    opacity: 0.2;
  }
  80% {
    transform: scale(1.06, 1.06);
    opacity: 0.58;
  }
  90% {
    transform: scale(1.14, 1.14);
    opacity: 0.62;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0.55;
  }
}
@keyframes msSplashRingSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes msSplashRingGloss {
  0% {
    transform: rotate(-24deg);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: rotate(196deg);
    opacity: 0;
  }
}
@keyframes msSplashBeamIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes msSplashBeamSway {
  0%,
  100% {
    transform: rotate(-2.4deg);
  }
  50% {
    transform: rotate(2.4deg);
  }
}
@keyframes msSplashRise {
  from {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
/* Indeterminate sweep — deliberately carries no percentage. */
@keyframes msSplashIndicator {
  0% {
    transform: translate3d(-100%, 0, 0) scaleX(0.4);
  }
  50% {
    transform: translate3d(64%, 0, 0) scaleX(1);
  }
  100% {
    transform: translate3d(228%, 0, 0) scaleX(0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-splash__frog,
  .ms-splash__shadow,
  .ms-splash__ring-texture,
  .ms-splash__ring-gloss,
  .ms-splash__beam-body,
  .ms-splash__indicator span,
  .ms-splash__title,
  .ms-splash__slogan,
  .ms-splash__caption,
  .ms-splash__indicator {
    animation: none;
  }
  /* Land on the settled frame instead of the 0% keyframe. */
  .ms-splash__shadow {
    opacity: 0.55;
  }
  .ms-splash__title,
  .ms-splash__slogan,
  .ms-splash__caption,
  .ms-splash__indicator,
  .ms-splash__beam-body {
    opacity: 1;
  }
  .ms-splash__ring-texture {
    transform: rotate(120deg);
  }
  .ms-splash__ring-gloss {
    opacity: 0;
  }
  .ms-splash__indicator span {
    transform: translate3d(64%, 0, 0) scaleX(1);
  }
}

/* --- Determinate boot progress (pipeline-gated reveal) -------------------- */
/* Real pipeline progress fills the capsule; the indeterminate sweep yields to
   it once the first progress event lands. Phase timings above are untouched. */
.ms-splash__fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: linear-gradient(90deg, rgba(184, 167, 240, 0.45) 0%, #d3c7fc 100%);
  transition: width 600ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
}
.ms-splash[data-determinate] .ms-splash__indicator span {
  animation: none;
  opacity: 0;
}
.ms-splash[data-boot-state='error'] .ms-splash__indicator span {
  animation: none;
  opacity: 0;
}
.ms-splash[data-boot-state='error'] .ms-splash__fill {
  transition: none;
}
.ms-splash__retry {
  padding: 12px 28px;
  border-radius: 14px;
  border: none;
  background: #b8a7f0;
  color: #1c1c22;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .ms-splash__fill {
    transition: none;
  }
}