/*
 * Module      : Title (styles)
 * Description : Styles for the title screen: scene transitions, the glowing
 *               title logo (text and image), the tagline, and the blinking
 *               start prompt.
 */

.scene { position: absolute; inset: 0; transition: opacity 0.8s ease; }
.scene.hidden { opacity: 0; pointer-events: none; }

.title-screen {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  height: 100%;
}
.title-logo {
  font-family: var(--font-title);
  font-size: clamp(72px, 10vw, 120px);
  font-weight: 500;
  font-style: italic;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  text-shadow:
    0 0 40px rgba(230, 181, 168, 0.6),
    0 0 80px rgba(200, 140, 130, 0.4),
    0 4px 8px rgba(0, 0, 0, 0.5);
  margin-bottom: 16px;
}
.title-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.title-logo-glow {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 170%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(247, 226, 214, 0.50) 0%,
    rgba(230, 181, 168, 0.34) 28%,
    rgba(196, 132, 124, 0.18) 52%,
    rgba(150, 80, 88, 0.06) 74%,
    rgba(0, 0, 0, 0) 100%);
  filter: blur(34px);
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  animation: title-glow-breathe 5.5s ease-in-out infinite;
}
.title-logo-img {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: clamp(170px, 23.4vw, 282px);
  display: block;
  filter:
    drop-shadow(0 0 24px rgba(230, 181, 168, 0.5))
    drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}
@keyframes title-glow-breathe {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
  .title-logo-glow { animation: none; opacity: 0.78; }
}
.title-tagline {
  font-size: 15px;
  color: var(--text-mid);
  letter-spacing: 0.4em;
  font-style: italic;
  margin-bottom: 60px;
  text-transform: lowercase;
}
.title-start {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.3em;
  animation: blink 2s ease-in-out infinite;
  cursor: pointer;
  padding: 20px 40px;
  text-transform: uppercase;
}
@keyframes blink { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }