/* =========================================================
   Welcome splash — the bee writes "Move Up Academy" (homepage only, once per visit)
   Works with assets/js/splash.js. Colors follow home.css (navy + gold).
   ========================================================= */
.mu-splash {
  --sp-navy: #1B2F5E;
  --sp-night: #0D1934;
  --sp-gold: #D8B051;
  --sp-gold-hi: #F3D58A;
  --sp-ink: #FFFFFF;
  --sp-muted: rgba(255, 255, 255, .72);
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(216, 176, 81, .16), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, var(--sp-navy) 0%, var(--sp-night) 78%);
  color: var(--sp-ink);
  overflow: hidden;
  transition: transform .8s cubic-bezier(.7, 0, .2, 1), opacity .6s ease;
  font-family: "Sora", "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
.mu-splash.is-leaving { transform: translateY(-100%); }
.mu-splash.is-fading { opacity: 0; }

/* honeycomb texture, very faint */
.mu-splash::before {
  content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0l28 16v32L28 64 0 48V16zM28 64l28 16v32M28 64L0 80v32' fill='none' stroke='%23D8B051' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 56px 97px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
          mask-image: radial-gradient(closest-side, #000, transparent);
}

.mu-splash__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }

.mu-splash__word {
  position: relative; margin: 0;
  font-size: clamp(34px, 8.4vw, 88px); font-weight: 800; line-height: 1.05; letter-spacing: -.015em;
  white-space: nowrap; padding-bottom: .18em;
}
.mu-splash__word span { display: inline-block; opacity: 0; transform: translateY(.18em) scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1), color .5s ease; }
.mu-splash__word span.on { opacity: 1; transform: none; }
.mu-splash__word span.gold { color: var(--sp-gold); }
.mu-splash__word .sp { width: .28em; }

.mu-splash__line {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: max(3px, .06em); border-radius: 3px;
  background: linear-gradient(90deg, var(--sp-gold), var(--sp-gold-hi), var(--sp-gold));
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 14px rgba(216, 176, 81, .55);
}

.mu-splash__msg { display: grid; gap: 8px; opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; max-width: 34ch; }
.mu-splash__msg.on { opacity: 1; transform: none; }
.mu-splash__msg b { font-size: clamp(17px, 2.6vw, 24px); font-weight: 700; text-wrap: balance; }
.mu-splash__msg i { font-style: normal; font-size: clamp(13px, 1.6vw, 15px); letter-spacing: .14em; text-transform: uppercase; color: var(--sp-gold); }

.mu-splash__bee { position: fixed; left: 0; top: 0; width: clamp(64px, 9vw, 112px); pointer-events: none; will-change: transform;
  transform-origin: 3.6% 61%; /* = the stinger tip, so the bee "writes" with it */
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.mu-splash__bee svg { display: block; width: 100%; height: auto; overflow: visible; }
.mu-splash__wings { transform-origin: 84px 40px; animation: mu-flap .055s linear infinite alternate; }
@keyframes mu-flap { from { transform: rotate(-16deg) scaleY(1); } to { transform: rotate(22deg) scaleY(.55); } }

.mu-splash__dot { position: fixed; width: 5px; height: 5px; border-radius: 50%; background: var(--sp-gold-hi); pointer-events: none;
  box-shadow: 0 0 8px var(--sp-gold); animation: mu-dot 1s ease-out forwards; }
@keyframes mu-dot { to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }

.mu-splash__skip {
  position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  font: inherit; font-size: 13px; color: var(--sp-muted); background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.mu-splash__skip:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.mu-splash__skip:focus-visible { outline: 2px solid var(--sp-gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mu-splash, .mu-splash__word span, .mu-splash__msg { transition: opacity .4s ease; }
  .mu-splash.is-leaving { transform: none; opacity: 0; }
  .mu-splash__wings { animation: none; }
}