/* ═══════════════════════════════════════════════════════════════════════════
   YemYem.fr — The Void × Interstella 5555
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & base ────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  background-color: #020810;

  /* Deep space fog — CSS layer under the canvas nebula blobs */
  background-image:
    radial-gradient(ellipse 90% 55% at  8% 85%,  rgba(200,  15,  65, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 92% 78%,  rgba(170,   8,  45, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 55% 40% at 50% 92%,  rgba(140,  10,  95, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 45% 38% at 18% 18%,  rgba( 15,  55, 185, 0.18) 0%, transparent 58%),
    radial-gradient(ellipse 40% 35% at 82% 16%,  rgba(  0, 120, 200, 0.15) 0%, transparent 55%),
    radial-gradient(ellipse 35% 30% at 50% 48%,  rgba( 90,  15, 165, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #020810 35%, #050d1e 100%);

  font-family: 'Cormorant Garamond', Georgia, serif;
  color: #e8f4fd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

/* ── Canvas starfield ────────────────────────────────────────────────────── */

#starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Main content ────────────────────────────────────────────────────────── */

.content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ── Title ───────────────────────────────────────────────────────────────── */

.title {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ddf0ff;

  /* Resting electric-cyan glow */
  text-shadow:
    0 0  8px rgba(  0, 180, 216, 0.55),
    0 0 22px rgba(  0, 180, 216, 0.30),
    0 0 55px rgba(  0, 180, 216, 0.12);

  opacity: 0;
  transform: translateY(14px);
  animation:
    fadeUp       0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.8s forwards,
    glowPulse    4.2s ease-in-out                     2.7s infinite;
}

/* ── Divider ─────────────────────────────────────────────────────────────── */

.divider {
  width: 0;
  height: 1px;
  margin: 2rem auto;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 180, 216, 0.35) 20%,
    rgba(0, 204, 255, 0.80) 50%,
    rgba(0, 180, 216, 0.35) 80%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.45);

  /* Grows from center after title appears */
  opacity: 0;
  animation: expandLine 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
}

/* ── Subtitle ────────────────────────────────────────────────────────────── */

.subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 2.8vw, 1.45rem);
  font-weight: 300;
  letter-spacing: 0.32em;
  color: rgba(200, 228, 248, 0.75);

  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 3.1s forwards;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;

  font-family: 'Courier New', Courier, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: rgba(140, 180, 210, 0.28);
  white-space: nowrap;

  opacity: 0;
  animation: fadeOnly 1.2s ease 4.4s forwards;
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOnly {
  to { opacity: 1; }
}

@keyframes expandLine {
  to {
    opacity: 1;
    width: min(180px, 40vw);
  }
}

@keyframes glowPulse {
  0%, 100% {
    text-shadow:
      0 0  8px rgba(  0, 180, 216, 0.55),
      0 0 22px rgba(  0, 180, 216, 0.30),
      0 0 55px rgba(  0, 180, 216, 0.12);
  }
  50% {
    text-shadow:
      0 0 12px rgba(  0, 200, 240, 0.85),
      0 0 35px rgba(  0, 190, 230, 0.50),
      0 0 80px rgba(  0, 180, 216, 0.22),
      0 0 120px rgba( 80, 140, 255, 0.08);
  }
}

/* ── Countdown ──────────────────────────────────────────────────────────── */

.countdown {
  position: fixed;
  bottom: 3.8rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  white-space: nowrap;

  opacity: 0;
  animation: fadeOnly 1.2s ease 4.4s forwards;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.countdown-value {
  font-family: 'Cinzel', 'Times New Roman', serif;
  font-size: clamp(0.8rem, 1.8vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ddf0ff;
  text-shadow:
    0 0  6px rgba(0, 180, 216, 0.45),
    0 0 18px rgba(0, 180, 216, 0.22);
  line-height: 1;
  text-align: center;
}

.countdown-sep {
  font-size: clamp(0.8rem, 1.8vw, 1.05rem);
  line-height: 1;
  color: rgba(0, 180, 216, 0.30);
  user-select: none;
}

.countdown-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(0.52rem, 1.3vw, 0.68rem);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(200, 228, 248, 0.45);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .title {
    letter-spacing: 0.14em;
  }
  .subtitle {
    letter-spacing: 0.18em;
  }
  .countdown {
    gap: 0.75rem;
    bottom: 3.4rem;
  }
}