/**
 * splash — the "ماهرانه استودیو تقدیم می‌کند" title card shown while the
 * sprites decode.
 *
 * It has to paint on the very first frame, before any script runs, so the
 * scene is inline SVG in index.html and everything here is plain CSS with no
 * webfont dependency for the first paint (Vazirmatn swaps in when it lands).
 *
 * Palette is the enchanted map's: night #1a0834, glow #8effd0, magenta #ff8ce6.
 */

#splash {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 12%, #4a2570 0%, #2a1148 42%, #14062b 78%, #0b0318 100%);
  /* the splash owns the screen: nothing behind it should be interactive */
  touch-action: none;
  cursor: pointer;
  transition: opacity .55s ease, visibility .55s ease;
}

#splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* the whole illustration scales as one unit so the composition never breaks */
#splash .splash-stage {
  position: relative;
  width: min(100%, 720px);
  height: min(100%, 720px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#splash .splash-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- title block ------------------------------------------------------- */
#splash .splash-title {
  position: relative;
  z-index: 3;
  text-align: center;
  transform: translateY(-6%);
  animation: splashTitleIn .9s cubic-bezier(.2, 1.4, .4, 1) both;
}

#splash .splash-studio {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-weight: 900;
  font-size: clamp(2.1rem, 9vw, 4.1rem);
  line-height: 1.15;
  color: #ffd45e;
  /* the cartoon look is a fat white outline under a warm fill, the same
     treatment the in-game logotype uses */
  -webkit-text-stroke: 7px #fffaf0;
  paint-order: stroke fill;
  filter:
    drop-shadow(0 5px 0 rgba(60, 20, 90, .55))
    drop-shadow(0 0 26px rgba(255, 190, 90, .45));
  letter-spacing: .01em;
}

#splash .splash-presents {
  margin-top: .55em;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-weight: 800;
  font-size: clamp(.86rem, 3.1vw, 1.22rem);
  color: #d8f7ee;
  -webkit-text-stroke: 3.5px rgba(20, 6, 43, .85);
  paint-order: stroke fill;
  opacity: 0;
  animation: splashFadeUp .7s ease .55s both;
}

#splash .splash-presents span {
  display: inline-block;
  padding: .32em 1.1em;
  border-radius: 999px;
  background: rgba(20, 6, 43, .5);
  border: 2px solid rgba(142, 255, 208, .38);
  -webkit-text-stroke: 0;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
}

/* ---- loading bar ------------------------------------------------------- */
#splash .splash-load {
  position: absolute;
  left: 50%;
  /* sits on the dark ground band below the mushroom caps — at 12% it cut
     straight through them on both portrait and desktop crops */
  bottom: 5.5%;
  transform: translateX(-50%);
  width: min(60%, 300px);
  z-index: 3;
  opacity: 0;
  /* NOT splashFadeUp: that keyframe ends on `transform: none`, which would
     cancel the translateX(-50%) doing the centring and throw the bar off the
     right edge. This one carries the centring through every frame. */
  animation: splashLoadIn .6s ease .85s both;
}

#splash .splash-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(10, 3, 24, .62);
  border: 2px solid rgba(142, 255, 208, .32);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}

#splash .splash-fill {
  height: 100%;
  width: 4%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2fa06a, #8effd0 55%, #ff8ce6);
  box-shadow: 0 0 14px rgba(142, 255, 208, .8);
  transition: width .35s cubic-bezier(.4, .8, .3, 1);
}

#splash .splash-hint {
  margin-top: 9px;
  text-align: center;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  color: rgba(216, 247, 238, .62);
}

/* ---- motion ------------------------------------------------------------ */
@keyframes splashTitleIn {
  from { opacity: 0; transform: translateY(-6%) scale(.72) rotate(-3deg); }
  to   { opacity: 1; transform: translateY(-6%) scale(1) rotate(0); }
}
@keyframes splashFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes splashLoadIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
@keyframes splashSway {
  50% { transform: rotate(1.6deg); }
}
@keyframes splashBob {
  50% { transform: translateY(-7px); }
}
@keyframes splashGlow {
  50% { opacity: .45; }
}
@keyframes splashBeam {
  0%, 100% { transform: rotate(-13deg); }
  50%      { transform: rotate(13deg); }
}
@keyframes splashFly {
  0%   { transform: translate(0, 0); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(var(--fx, 40px), var(--fy, -60px)); opacity: 0; }
}

/* animation hooks on the inline SVG */
#splash .s-tree   { transform-box: fill-box; transform-origin: 50% 100%; animation: splashSway 5s ease-in-out infinite; }
#splash .s-bush   { transform-box: fill-box; transform-origin: 50% 100%; animation: splashSway 4.2s ease-in-out infinite; }
#splash .s-hero   { transform-box: fill-box; transform-origin: 50% 100%; animation: splashBob 2.6s ease-in-out infinite; }
#splash .s-glow   { animation: splashGlow 2.8s ease-in-out infinite; }
#splash .s-beam   { transform-box: fill-box; transform-origin: 50% 0%; animation: splashBeam 4.6s ease-in-out infinite; }
#splash .s-fly    { animation: splashFly var(--d, 6s) linear infinite; }

/* Someone who asked for less motion still gets the card, just still. */
@media (prefers-reduced-motion: reduce) {
  #splash *, #splash *::before, #splash *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #splash .splash-title, #splash .splash-presents, #splash .splash-load { opacity: 1; }
}

/* short/landscape phones: keep the title and the bar from colliding */
@media (max-height: 480px) {
  #splash .splash-title { transform: translateY(-12%); }
  #splash .splash-load { bottom: 4%; }
}