/* ==============================================
   PAGE: COUNTDOWN
   Layout specific to countdown.html
   ============================================== */

.page-countdown {
  min-height: 100vh;
  overflow: hidden;
}

/* ── Countdown content area ── */
.countdown-stage {
  position: relative;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-4);
  text-align: center;
}

/* ── Wooden sign title ── */
.countdown-sign-wrap {
  margin-bottom: var(--sp-4);
}

/* ── Timer card ── */
.countdown-card {
  background: var(--parchment);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--parchment-dk);
  max-width: 520px;
  width: 100%;
  animation: float-in var(--dur-slow) var(--ease-out) both;
}

.countdown-eta {
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  color: var(--muted);
  margin: 0;
}

.countdown-actions {
  margin-top: var(--sp-4);
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Back link ── */
.back-link {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 100;
  font-family: var(--font-hand);
  font-size: var(--text-lg);
  color: var(--grass-dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--parchment);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.back-link:hover { transform: translateX(-3px); }

/* ── Scene: fewer elements than index ── */
/* Trees only on sides, no deer */
.tree-blob--1 {
  width: 200px; height: 220px;
  background: #4e8040;
  bottom: 0; left: -30px;
}
.tree-blob--2 {
  width: 180px; height: 190px;
  background: #5a8a4a;
  bottom: 0; right: -20px;
}

/* ── Plant positions (fewer) ── */
.plant--1  { left: 1%;  height: 70px; width: 38px; }
.plant--2  { left: 7%;  height: 80px; width: 44px; }
.plant--3  { right: 1%; height: 75px; width: 40px; }
.plant--4  { right: 7%; height: 85px; width: 42px; }

/* ── Clouds ── */
.cloud--1 {
  top: 10%; left: -15%;
  width: 180px;
  animation: cloud-drift 90s linear infinite;
  animation-delay: -30s;
}
.cloud--2 {
  top: 20%; left: -25%;
  width: 140px;
  animation: cloud-drift 120s linear infinite;
  animation-delay: -60s;
  opacity: 0.6;
}