/* Splash / intro loader — darkened cover purple-gray */
:root {
  --splash-bg: color-mix(in srgb, #8b90a8 40%, #12131a);
  --splash-petal-lg: #ffffff;
  --splash-petal-sm: #c4c7d4;
  --splash-text: #f4f5f8;
  --splash-outline: rgba(244, 245, 248, 0.55);
  --splash-lg-dur: 0.42s;
  --splash-lg-stagger: 48ms;
  --splash-lg-start: 36ms;
  --splash-sm-dur: 0.36s;
  --splash-sm-gap: 72ms;
  /* Must match cover.js SPLASH_BLOOM_* timing */
  --splash-bloom-start: 8ms;
  --splash-bloom-end: 1224ms;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: #3a3e50;
  background: color-mix(in srgb, #8b90a8 40%, #12131a);
  color: var(--splash-text);
  pointer-events: auto;
  transition: opacity 0.75s cubic-bezier(0.33, 0.1, 0.25, 1), visibility 0.75s;
}

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

/* Mosaic dissolve: splash stays visible; mask punches cells as wave arrives */
.splash.is-mosaic {
  pointer-events: none;
  transition: none;
  -webkit-mask-image: var(--splash-mask);
  mask-image: var(--splash-mask);
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.splash-mosaic-fx {
  position: fixed;
  inset: 0;
  z-index: 201;
  width: 100%;
  height: 100%;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.splash__dot {
  position: absolute;
  top: clamp(18px, 3.2vh, 36px);
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  transform: translateX(-50%);
  opacity: 0.95;
}

.splash__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.1rem, 2.8vh, 1.75rem);
  padding: 0 1.25rem;
  width: min(94vw, 520px);
}

.splash-flower {
  width: min(18vw, 76px);
  aspect-ratio: 1;
  overflow: visible;
}

.splash-flower__bloom {
  transform-origin: 50px 50px;
}

.splash-flower__petal,
.splash-flower__core {
  transform-box: view-box;
  transform-origin: 50px 50px;
  transform: scale(0);
  opacity: 0;
  will-change: transform, opacity;
}

.splash.is-bloom .splash-flower__petal--lg {
  animation: splash-petal-bloom var(--splash-lg-dur) cubic-bezier(0.22, 0.61, 0.36, 1)
    forwards;
  animation-delay: calc(var(--i, 0) * var(--splash-lg-stagger) + var(--splash-lg-start));
}

.splash.is-bloom .splash-flower__petal--sm {
  animation: splash-petal-bloom var(--splash-sm-dur) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(
    7 * var(--splash-lg-stagger) + var(--splash-lg-start) + var(--splash-lg-dur) +
      var(--splash-sm-gap)
  );
}

.splash-flower__petal--lg polygon {
  fill: var(--splash-petal-lg);
}

.splash-flower__petal--sm polygon,
.splash-flower__core {
  fill: var(--splash-petal-sm);
}

.splash.is-bloom .splash-flower__core {
  animation: splash-petal-bloom 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) var(--splash-bloom-start)
    forwards;
}

@keyframes splash-petal-bloom {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.splash-welcome {
  position: relative;
  margin: 0;
  width: max-content;
  max-width: 100%;
  text-align: center;
  font-family: Syne, "Noto Sans SC", sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  letter-spacing: -0.045em;
  line-height: 1.15;
  user-select: none;
  --splash-p: 0;
}

.splash-welcome__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.splash-welcome__outline,
.splash-welcome__embroider,
.splash-welcome__loose {
  display: block;
  white-space: nowrap;
}

/* Unloaded: hollow letters, stroke only — keep outline hairline-thin */
.splash-welcome__outline {
  color: transparent;
  -webkit-text-stroke: 0.7px var(--splash-outline);
  paint-order: stroke fill;
}

/* Tight vertical stitches — stop just behind the loose leading loop */
.splash-welcome__embroider {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 0;
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.98) 0 1.35px,
      transparent 1.35px 2.05px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 2.05px,
      rgba(236, 238, 248, 0.55) 2.05px 2.45px,
      transparent 2.45px 4.1px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0 2px,
      rgba(255, 255, 255, 0.22) 2px 2.6px,
      transparent 2.6px 5.2px
    ),
    linear-gradient(180deg, #f8f9fd, #eceef6 48%, #f4f5fa);
  background-size: 4.1px 100%, 4.1px 100%, 100% 5.2px, 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 max(0%, calc(var(--splash-p) * 100% - 2.6%)),
    transparent max(0.15%, calc(var(--splash-p) * 100% - 0.8%))
  );
  mask-image: linear-gradient(
    90deg,
    #000 0,
    #000 max(0%, calc(var(--splash-p) * 100% - 2.6%)),
    transparent max(0.15%, calc(var(--splash-p) * 100% - 0.8%))
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/*
 * Newest stitch still loose: rightward-bulging arc.
 * As --splash-p advances, that arc is left behind and becomes a vertical column.
 */
.splash-welcome__loose {
  position: absolute;
  inset: 0;
  color: transparent;
  pointer-events: none;
  background-image: radial-gradient(
    ellipse 12px 112% at 16% 50%,
    transparent 0 36%,
    rgba(255, 255, 255, 0.18) 41%,
    rgba(255, 255, 255, 0.98) 47%,
    rgba(255, 255, 255, 0.98) 64%,
    rgba(255, 255, 255, 0.28) 72%,
    transparent 80%
  );
  background-size: 18px 100%;
  background-repeat: no-repeat;
  background-position: calc(var(--splash-p) * 100% - 2px) 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    transparent max(0%, calc(var(--splash-p) * 100% - 1.4%)),
    #000 max(0%, calc(var(--splash-p) * 100% - 0.3%)),
    #000 calc(var(--splash-p) * 100% + 2.8%),
    transparent calc(var(--splash-p) * 100% + 3.6%)
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    transparent max(0%, calc(var(--splash-p) * 100% - 1.4%)),
    #000 max(0%, calc(var(--splash-p) * 100% - 0.3%)),
    #000 calc(var(--splash-p) * 100% + 2.8%),
    transparent calc(var(--splash-p) * 100% + 3.6%)
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* Hide at rest / complete via progress thresholds */
  opacity: clamp(0, calc((var(--splash-p) - 0.02) * 40), 1);
}

.splash-welcome.is-complete .splash-welcome__loose {
  opacity: 0;
}

/* Progress mask stops short for the leading loose stitch — force-fill trailing C */
.splash-welcome.is-complete .splash-welcome__embroider {
  -webkit-mask-image: linear-gradient(#000 0 100%);
  mask-image: linear-gradient(#000 0 100%);
}

.splash-welcome__emph {
  letter-spacing: -0.06em;
}

@media (prefers-reduced-motion: reduce) {
  .splash-flower__petal,
  .splash.is-bloom .splash-flower__petal,
  .splash-flower__core,
  .splash.is-bloom .splash-flower__core {
    animation: none;
    opacity: 1;
    transform: scale(1);
  }

  .splash-welcome__embroider {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .splash-welcome__loose {
    display: none;
  }
}