/* Prevent shifting of animated added text */
.title-base,
.title-glow {
  display: inline-block;
  position: relative;
  text-align: center;
  width: 100%;
}

/* Main title container */
.main-title {
  display: inline-block;
  position: relative;
}

/* Dynamically added text */
.added-title {
  position: absolute;
  top: 0;
  white-space: pre;
  transition: opacity 0.2s;
}

/* --- Title Styles (cleaned from styles.css) --- */

.title {
  position: relative;
  font-size: 2rem;
  margin-bottom: 8px;
  font-weight: 100;
  opacity: 80%;
}

/* Base title layer (solid text) */
.title-base {
  display: block;
  opacity: 0;
  animation: title-fade-in 1s ease forwards;
}

/* Glow layer (sits behind text) */
.title-glow {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  animation: glow-fade-in 1.6s ease forwards;
}

/* Stronger glows take longer by default */
.title-glow.glow-strong,
.title-glow.glow-melt {
  animation-duration: 2.5s;
}

/* --- Fade-in Keyframes --- */

@keyframes title-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glow-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Glow Styles --- */

/* No glow */
.title-glow.glow-none {
  text-shadow: none;
}

/* Soft glow */
.title-glow.glow-soft {
  text-shadow:
    0 4px 18px rgba(255, 255, 255, 1),
    0 1.5px 6px rgba(0, 0, 0, 0.4);
}

/* Strong glow */
.title-glow.glow-strong {
  text-shadow:
    0 0px 4px rgba(255, 255, 255, 1),
    0 0px 8px rgba(255, 255, 255, 1);
}

/* Neon glow */
.title-glow.glow-neon {
  text-shadow:
    0 0 1px var(--neon-glow-color, rgb(0, 183, 255)),
    0 0 4px var(--neon-glow-color, rgb(0, 183, 255)),
    0 0 8px var(--neon-glow-color, rgb(0, 183, 255)),
    0 0 16px var(--neon-glow-color, rgb(0, 183, 255));
}

/* Desktop enhancements */
@media (min-width: 768px) {
  .title-glow.glow-strong {
    text-shadow:
      0 0px 4px rgba(255, 255, 255, 1),
      0 0px 8px rgba(255, 255, 255, 1);
  }
}

.subtitle {
    font-size: 1rem;
    opacity: 0.9;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  }

  body.light-theme .title,
  body.light-theme .subtitle {
    text-shadow: 0 1px 5px rgba(255, 255, 255, 0.5);
  }

/* Tablet up */
@media (min-width: 480px) {
  .title {
    font-size: 3.5rem;
  }
    /* Melt glow (desktop) */
    .title-glow.glow-melt {
    text-shadow:
        0 8px 4px rgba(255, 46, 39, 0.5),
        0 4px 4px rgba(255, 117, 53, 0.75),
        0 4px 2px rgb(255, 229, 81),
        0 0px 4px rgb(51, 105, 255);
    }
}

/* Melt glow (mobile refinement) */
@media (max-width: 479px) {
  .title-glow.glow-melt {
    text-shadow:
      0 5px 4px rgba(255, 125, 39, 0.5),
      0 2px 4px rgba(255, 117, 53, 0.75),
      0 1px 2px rgba(255, 229, 81, 1),
      0 0px 4px rgba(51, 105, 255, 1);
  }
}