/* Splash (T-1003): painted from index.html before the app loads, removed by src/app/splash/dismiss.ts.
   A linked file because the CSP allows no inline <style>. Brand colours are literal here: the token
   stylesheet arrives with the app bundle, after this has already painted.
   Entrance: the four pieces of the mark slide together and lock (≤ 900ms), then the wordmark rises.
   Only transform and opacity animate. */
.splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #181818;
  color: #b7dd00;
  pointer-events: none;
}

.splash svg {
  display: block;
  fill: currentColor;
  overflow: visible;
}

/* Brandbook cover: the mark oversized, cropped at the edge, barely there. */
.splash__ghost {
  position: absolute;
  top: 6vh;
  left: 64vw;
  width: 220vmax;
  height: auto;
  opacity: 0.05;
}

/* Brandbook closing page: thin lines with one soft corner. */
.splash__line {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.splash__line--a {
  top: -1px;
  left: -1px;
  width: 72vw;
  height: 34vh;
  border-top: none;
  border-left: none;
  border-bottom-right-radius: 28px;
}
.splash__line--b {
  right: -1px;
  bottom: -1px;
  width: 58vw;
  height: 52vh;
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 28px;
}

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

.splash__mark {
  width: 112px;
  height: auto;
}
.splash__word {
  width: 92px;
  height: auto;
  animation: splash-rise 350ms cubic-bezier(0.2, 0.8, 0.2, 1) 560ms both;
}

.splash__piece {
  transform-box: fill-box;
  transform-origin: center;
  animation: 460ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.splash__piece--frame {
  animation-name: splash-from-left;
  animation-delay: 40ms;
}
.splash__piece--corner {
  animation-name: splash-from-right;
  animation-delay: 120ms;
}
.splash__piece--bar {
  animation-name: splash-from-left-far;
  animation-delay: 260ms;
}
.splash__piece--dot {
  animation: splash-pop 340ms cubic-bezier(0.34, 1.5, 0.5, 1) 520ms both;
}

.splash--leaving {
  animation: splash-out 250ms ease-in forwards;
}
.splash--leaving .splash__center {
  transform: scale(1.06);
  transition: transform 250ms ease-in;
}

@keyframes splash-from-left {
  from {
    opacity: 0;
    transform: translateX(-28%);
  }
}
@keyframes splash-from-right {
  from {
    opacity: 0;
    transform: translateX(28%);
  }
}
@keyframes splash-from-left-far {
  from {
    opacity: 0;
    transform: translateX(-60%);
  }
}
@keyframes splash-pop {
  from {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes splash-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes splash-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash__piece,
  .splash__word {
    animation: none;
  }
  .splash__center {
    animation: splash-fade 200ms ease both;
  }
  .splash--leaving .splash__center {
    transform: none;
  }
  @keyframes splash-fade {
    from {
      opacity: 0;
    }
  }
}