.load-screen-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lavender-veil);
  /* Dismiss even if React JS never hydrates (static hosting / failed chunks) */
  animation: loadScreenDismiss 3.4s ease forwards;
}

@keyframes loadScreenDismiss {
  0%,
  75% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.load-screen-title {
  --reset-time: 3.2s;
  --neon: var(--pink-mist);
  --neon-bright: var(--blush-pop);
  --neon-dim: #d97a9a;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-color: var(--lavender-veil);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Garamond", "Times New Roman", Times, serif;
  user-select: none;
  box-sizing: border-box;
}

.load-screen-title *,
.load-screen-title *::before,
.load-screen-title *::after {
  box-sizing: border-box;
}

.load-screen-title .bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(
    circle,
    rgba(238, 146, 177, 0.35) 0%,
    transparent 62%
  );
  transform: translate(-50%, -50%);
  animation: loadGlowBreathing 3s ease-in-out 1 alternate;
  pointer-events: none;
  z-index: 1;
}

.load-screen-title .bg-noise {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(238, 171, 199, 0.15) 1px, transparent 1px),
    radial-gradient(rgba(238, 184, 210, 0.1) 1px, transparent 1px);
  background-size: 20px 20px, 15px 15px;
  background-position: 0 0, 7.5px 7.5px;
  opacity: 0.4;
  z-index: 2;
  pointer-events: none;
  animation: loadNoiseJitter 0.4s infinite;
}

.load-screen-title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    transparent 40%,
    rgba(238, 221, 243, 0.85) 100%
  );
  pointer-events: none;
  z-index: 20;
}

.load-screen-title .dust-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.load-screen-title .dust-layer::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow:
    3rem 4rem 1px rgba(238, 146, 177, 0.5),
    9rem 16rem 1px rgba(238, 171, 199, 0.4),
    18rem 7rem 1px rgba(238, 146, 177, 0.6),
    25rem 14rem 1px rgba(238, 184, 210, 0.45);
  animation: loadDustDrift 3s linear 1;
}

.load-screen-title .title-stage {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0.78);
}

.load-screen-title .main-title,
.load-screen-title .sub-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 0;
  padding: 0;
  text-transform: lowercase;
  color: transparent;
  line-height: 0.9;
}

.load-screen-title .main-title {
  font-size: clamp(2.8rem, 5.5rem, 6.5rem);
  letter-spacing: -0.05em;
  margin-bottom: 0.1em;
}

.load-screen-title .sub-title {
  font-size: clamp(1.3rem, 2.8rem, 3.2rem);
  letter-spacing: 0.2em;
  margin-bottom: 0.5em;
}

.load-screen-title .main-title .letter:first-child,
.load-screen-title .main-title .letter:last-child {
  font-size: 1.25em;
}

.load-screen-title .letter {
  position: relative;
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.5);
  -webkit-text-stroke: 2px var(--neon);
  text-shadow:
    0 0 5px rgba(238, 146, 177, 0.8),
    0 0 15px rgba(238, 171, 199, 0.6),
    0 0 30px rgba(217, 122, 154, 0.4);
  animation:
    loadLetterIntro var(--reset-time) cubic-bezier(0.2, 0.8, 0.2, 1) 1 forwards,
    loadNeonFlicker var(--reset-time) linear 1;
  animation-delay: var(--d), 0s;
}

.load-screen-title .letter::before,
.load-screen-title .letter::after {
  content: attr(data-char);
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  pointer-events: none;
}

.load-screen-title .letter::before {
  -webkit-text-stroke: 1px rgba(238, 184, 210, 0.8);
  transform: translate(2px, -2px) rotate(-1.5deg);
  z-index: -1;
  animation: loadSketchJitter 0.18s infinite alternate;
}

.load-screen-title .letter::after {
  -webkit-text-stroke: 1px rgba(217, 122, 154, 0.5);
  transform: translate(-2px, 1px) rotate(1.5deg);
  z-index: -2;
  animation: loadSketchJitter2 0.2s infinite alternate;
}

.load-screen-title .neon-line {
  position: relative;
  width: 0%;
  height: 2px;
  background: transparent;
  margin: 0.5em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loadLineReveal var(--reset-time) cubic-bezier(0.8, 0, 0.2, 1) 1
    forwards;
}

.load-screen-title .neon-line.top-line {
  margin-bottom: 0.8em;
}

.load-screen-title .neon-line.bottom-line {
  margin-top: 0.5em;
}

.load-screen-title .neon-line-inner {
  width: 100%;
  height: 100%;
  border-top: 1px solid var(--neon);
  border-bottom: 1px solid var(--neon);
  box-shadow:
    0 0 5px var(--neon),
    0 0 10px var(--neon-bright),
    0 0 20px var(--neon-dim),
    inset 0 0 2px var(--neon);
}

.load-screen-title .neon-line-inner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px dashed rgba(238, 171, 199, 0.6);
  transform: rotate(0.2deg);
  animation: loadDoodleJitter 0.2s infinite alternate;
}

.load-screen-title .caption {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  color: var(--neon-dim);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 2em;
  opacity: 0;
  text-shadow: 0 0 5px var(--neon-bright);
  animation: loadCaptionFade var(--reset-time) 1 forwards;
}

.load-screen-title .doodle-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.load-screen-title .doodle {
  position: absolute;
  opacity: 0;
  animation: loadDoodleFadeBlink 2.5s 1;
}

.load-screen-title .doodle.spark {
  width: 12px;
  height: 12px;
}

.load-screen-title .doodle.spark::before,
.load-screen-title .doodle.spark::after {
  content: "";
  position: absolute;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
  border-radius: 50%;
}

.load-screen-title .doodle.spark::before {
  width: 100%;
  height: 2px;
  top: 5px;
  left: 0;
}

.load-screen-title .doodle.spark::after {
  width: 2px;
  height: 100%;
  top: 0;
  left: 5px;
}

.load-screen-title .doodle.scratch {
  width: 20px;
  height: 2px;
  background: transparent;
  border-top: 2px solid var(--neon);
  border-bottom: 1px solid var(--neon-dim);
  transform: rotate(-35deg);
  box-shadow: 0 0 5px var(--neon);
}

.load-screen-title .doodle.dot {
  width: 4px;
  height: 4px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--neon);
}

.load-screen-title .d1 { animation-delay: 0.8s; }
.load-screen-title .d2 { animation-delay: 1.4s; }
.load-screen-title .d3 { animation-delay: 1.0s; }
.load-screen-title .d4 { animation-delay: 1.7s; }
.load-screen-title .d5 { animation-delay: 1.2s; }
.load-screen-title .d6 { animation-delay: 1.9s; }

@keyframes loadLetterIntro {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1.5);
  }
  35%,
  75% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes loadLineReveal {
  0%,
  12% {
    width: 0%;
    opacity: 0;
  }
  32%,
  75% {
    width: 110%;
    opacity: 1;
  }
  100% {
    width: 110%;
    opacity: 1;
  }
}

@keyframes loadCaptionFade {
  0%,
  30% {
    opacity: 0;
  }
  45%,
  100% {
    opacity: 0.6;
  }
}

@keyframes loadGlowBreathing {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
}

@keyframes loadNeonFlicker {
  0%,
  35%,
  70%,
  100% {
    opacity: 1;
  }
  22% {
    opacity: 0.5;
  }
}

@keyframes loadDoodleJitter {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(1px, -1px) rotate(0.3deg); }
  100% { transform: translate(-1px, 1px) rotate(-0.3deg); }
}

@keyframes loadSketchJitter {
  0% { transform: translate(2px, -2px) rotate(-1.5deg); }
  100% { transform: translate(3px, -1px) rotate(-1deg); }
}

@keyframes loadSketchJitter2 {
  0% { transform: translate(-2px, 1px) rotate(1.5deg); }
  100% { transform: translate(-3px, 2px) rotate(1deg); }
}

@keyframes loadNoiseJitter {
  0% { background-position: 0 0, 7.5px 7.5px; }
  50% { background-position: 2px -2px, 5.5px 9.5px; }
  100% { background-position: -2px 2px, 9.5px 5.5px; }
}

@keyframes loadDustDrift {
  0% { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-8rem) translateX(3rem); }
}

@keyframes loadDoodleFadeBlink {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@media (max-width: 600px) {
  .load-screen-title .title-stage {
    transform: scale(0.58);
  }

  .load-screen-title .dust-layer::before {
    display: none;
  }
}