/* countdown.css
   The countdown clock (digits, labels, glow) and the sound button.
   Loaded by index.html (order matters). */

/* ============================================================
   COUNTDOWN COMPONENT
   ============================================================ */
.lc-countdown {
  --lc-color: #f2f2ee;
  --lc-label: rgba(242, 242, 238, 0.72);
  --lc-glow: rgba(22, 180, 215, 0.22);
  --lc-digit-size: clamp(28px, 5.2vw, 64px);
  --lc-label-size: clamp(8px, 0.9vw, 12px);

  position: absolute; left: 50%; bottom: var(--clock-bottom, 8%); z-index: 3;
  transform: translate(calc(-50% + var(--plx-x, 0px)), var(--plx-y, 0px));
  display: flex; align-items: flex-start;
  gap: clamp(6px, 1.4vw, 22px);
  font-family: "Barlow", system-ui, sans-serif;
  color: var(--lc-color);
  pointer-events: none;
  opacity: 0; visibility: hidden;
  user-select: none;
}
.lc-countdown.is-visible { visibility: visible; opacity: 1; }

.lc-unit {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; filter: blur(10px); transform: translateY(12px);
  transition: opacity 900ms ease, filter 1100ms ease, transform 1100ms cubic-bezier(.2,.7,.2,1);
}
.lc-countdown.is-visible .lc-unit { opacity: 1; filter: blur(0); transform: none; }

.lc-sep {
  font-size: var(--lc-digit-size); font-weight: 500; line-height: 1;
  opacity: 0; transition: opacity 900ms ease;
  padding-top: 0.02em;
}
.lc-countdown.is-visible .lc-sep { opacity: 0.85; }

.lc-digits {
  display: flex; gap: 0.12em;
  font-size: var(--lc-digit-size); font-weight: 600; line-height: 1;
  /* drop-shadow on the container so the glow is not clipped by each digit window */
  filter: drop-shadow(0 0 9px var(--lc-glow));
  transition: filter var(--lc-glow-fade, 900ms) ease-out, color var(--lc-glow-fade, 900ms) ease-out;
}

/* INTRO GLOW: digits start glowing strongly, then fade to the base glow.
   Values come from introGlow in the config (see --lc-intro-* below). */
.lc-countdown.lc-intro-glow .lc-digits {
  color: #ffffff;
  filter: drop-shadow(0 0 var(--lc-intro-size, 8px) var(--lc-intro-color, rgba(210,255,200,.9)))
          drop-shadow(0 0 calc(var(--lc-intro-size, 8px) * 3) var(--lc-intro-color, rgba(160,255,150,.6)));
}
.lc-digit {
  position: relative; display: inline-block;
  width: 0.62em; height: 1em; overflow: hidden; text-align: center;
  font-variant-numeric: tabular-nums;
}
.lc-digit span {
  position: absolute; left: 0; right: 0; top: 0;
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease;
}
.lc-digit .lc-out { transform: translateY(-100%); opacity: 0; }
.lc-digit .lc-in-start { transform: translateY(100%); opacity: 0; transition: none; }
.lc-digit.is-scrambling span { transition: none; opacity: 0.5; }

/* lock: hard cut from the spinning digit to the real one, with a short snap */
.lc-digit .lc-lock { animation: lc-snap 380ms cubic-bezier(.2,.8,.2,1); }
@keyframes lc-snap {
  0%   { transform: scale(1.18); opacity: 0.4; filter: brightness(2.2); }
  100% { transform: scale(1);    opacity: 1;   filter: brightness(1); }
}

.lc-countdown.lc-pulse .lc-digits {
  transition: filter 50ms ease, color 50ms ease;
  color: #ffffff;
  filter: drop-shadow(0 0 6px rgba(210, 255, 200, 0.9)) drop-shadow(0 0 18px rgba(160, 255, 150, 0.55));
}

.lc-label {
  margin-top: 0.9em;
  font-size: var(--lc-label-size); font-weight: 500;
  letter-spacing: 0.22em; color: var(--lc-label);
}
.lc-finished { font-size: var(--lc-digit-size); font-weight: 600; letter-spacing: 0.18em; }

.lc-sound-toggle {
  position: absolute; right: 20px; bottom: 20px; z-index: 6;
  font: 500 11px/1 "Barlow", system-ui, sans-serif; letter-spacing: 0.2em;
  color: rgba(242, 242, 238, 0.72); background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .2); padding: 9px 14px; cursor: pointer;
  opacity: 0; transition: opacity 600ms ease;
}
.lc-sound-toggle.is-visible { opacity: 1; }