/* ============================================================
 *  00-countdown.css — Velvet Room birthday lock
 * ============================================================ */

#scene-countdown {
  background:
    radial-gradient(ellipse at 50% 8%, rgba(212, 175, 55, 0.18), transparent 38%),
    radial-gradient(ellipse at 50% 100%, rgba(37, 64, 143, 0.35), transparent 55%),
    radial-gradient(circle at 50% 50%, #0c1b4a 0%, #060d2c 48%, #02050f 100%);
  contain: paint;
  overflow: hidden;
}

/* --- Starfield ------------------------------------------------ */
.countdown-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(255, 245, 220, 0.85), transparent 60%),
    radial-gradient(1px 1px at 78% 24%, rgba(180, 210, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 72%, rgba(255, 240, 200, 0.75), transparent 60%),
    radial-gradient(1px 1px at 88% 66%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 22% 54%, rgba(212, 175, 55, 0.7), transparent 60%),
    radial-gradient(1px 1px at 62% 12%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.2px 1.2px at 50% 88%, rgba(180, 210, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 7% 86%, rgba(255, 245, 220, 0.5), transparent 60%),
    radial-gradient(1px 1px at 94% 40%, rgba(255, 255, 255, 0.55), transparent 60%);
  animation: countdownStarsTwinkle 6s ease-in-out infinite;
}

/* --- Aura behind the card ------------------------------------- */
.countdown-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.16), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(37, 64, 143, 0.28), transparent 50%);
  animation: countdownAuraPulse 5.2s ease-in-out infinite;
}

/* --- Rotating prism glow -------------------------------------- */
.countdown-prism,
.countdown-rings {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  will-change: transform, opacity;
}

.countdown-prism {
  width: min(120vmin, 1400px);
  height: min(120vmin, 1400px);
  margin: calc(min(120vmin, 1400px) / -2) 0 0 calc(min(120vmin, 1400px) / -2);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 228, 160, 0) 0deg,
    rgba(255, 230, 180, 0.14) 30deg,
    rgba(96, 164, 255, 0.16) 90deg,
    rgba(212, 175, 55, 0.26) 182deg,
    rgba(255, 230, 180, 0.10) 262deg,
    rgba(255, 228, 160, 0) 360deg
  );
  filter: blur(22px);
  animation: countdownPrismSpin 32s linear infinite;
}

/* --- Concentric runic rings ----------------------------------- */
.countdown-rings {
  --cd-ring-size: clamp(520px, 80vmin, 840px);
  width: var(--cd-ring-size);
  height: var(--cd-ring-size);
  margin: calc(var(--cd-ring-size) / -2) 0 0 calc(var(--cd-ring-size) / -2);
}

.countdown-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.countdown-ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.25));
}
.countdown-ring--outer { animation: countdownRingSpinCW 68s linear infinite; }
.countdown-ring--mid   { animation: countdownRingSpinCCW 44s linear infinite; }
.countdown-ring--inner {
  animation: countdownRingSpinCW 28s linear infinite,
             countdownRingPulse 4.2s ease-in-out infinite;
}

/* --- Invitation card / shell ---------------------------------- */
.countdown-shell {
  position: relative;
  z-index: 4;
  width: min(92vw, 620px);
  padding: 62px 56px 44px;
  border: 1px solid rgba(201, 164, 97, 0.65);
  background:
    linear-gradient(180deg,
      rgba(10, 20, 56, 0.92) 0%,
      rgba(7, 14, 40, 0.96) 55%,
      rgba(5, 10, 32, 0.98) 100%),
    radial-gradient(circle at 50% 0%, rgba(212, 175, 55, 0.10), transparent 55%);
  box-shadow:
    0 0 40px rgba(201, 164, 97, 0.14),
    0 0 90px rgba(37, 64, 143, 0.25),
    inset 0 0 0 1px rgba(245, 230, 200, 0.10),
    inset 0 0 60px rgba(37, 64, 143, 0.22);
  text-align: center;
  overflow: visible;
}
.countdown-shell::selection { background: transparent; }

/* Filigree corners */
.countdown-shell::before,
.countdown-shell::after {
  content: '';
  position: absolute;
  width: 72px;
  height: 72px;
  border: 0 solid rgba(212, 175, 55, 0.85);
  pointer-events: none;
}
.countdown-shell::before {
  top: 10px;
  left: 10px;
  border-top-width: 2px;
  border-left-width: 2px;
  filter: drop-shadow(-1px -1px 6px rgba(212, 175, 55, 0.18));
}
.countdown-shell::after {
  right: 10px;
  bottom: 10px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  filter: drop-shadow(1px 1px 6px rgba(212, 175, 55, 0.18));
}

/* Butterfly sigil */
.countdown-sigil {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(10, 20, 56, 0.98) 40%, rgba(10, 20, 56, 0) 72%);
  color: var(--vr-gold-bright);
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.55));
  animation: countdownSigilFlicker 3.4s ease-in-out infinite;
}
.countdown-sigil svg { width: 40px; height: 40px; }

/* Eyebrow / kicker */
.countdown-kicker {
  font-family: var(--font-p5-mono);
  font-size: 0.7rem;
  letter-spacing: 8px;
  color: rgba(245, 230, 200, 0.72);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

/* Title */
.countdown-title {
  margin-top: 1.05rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 3.2rem);
  line-height: 1;
  letter-spacing: 8px;
  /* Letter-spacing is applied after each glyph including the last, which
     shifts the visual center right — negate with a left margin so the
     word stays optically centered inside the card. */
  margin-right: -8px;
  color: var(--vr-ivory);
  text-transform: uppercase;
  text-shadow:
    0 0 30px rgba(212, 175, 55, 0.38),
    0 0 2px rgba(255, 245, 220, 0.6),
    2px 2px 0 rgba(0, 0, 0, 0.5);
}

/* Divider */
.countdown-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 1.15rem auto 0;
  width: min(84%, 420px);
  color: var(--vr-gold);
}
.countdown-divider span:first-child,
.countdown-divider span:last-child {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212, 175, 55, 0.6),
    transparent);
}
.countdown-divider-mark {
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--vr-gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Body copy */
.countdown-copy {
  width: min(88%, 460px);
  margin: 0.9rem auto 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.55;
  letter-spacing: 0.4px;
  color: rgba(245, 230, 200, 0.88);
  font-style: italic;
}

/* Countdown grid */
.countdown-grid {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  margin-top: 2.1rem;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  min-width: 72px;
}

.countdown-unit-sep {
  display: flex;
  align-items: center;
  padding-bottom: 1.9rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 600;
  color: rgba(212, 175, 55, 0.55);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
  animation: countdownColonBlink 1s ease-in-out infinite;
}

.countdown-unit-tile {
  position: relative;
  width: 100%;
  padding: 14px 10px 12px;
  border: 1px solid rgba(201, 164, 97, 0.5);
  background:
    linear-gradient(180deg,
      rgba(16, 28, 68, 0.96) 0%,
      rgba(5, 11, 34, 0.98) 50%,
      rgba(16, 28, 68, 0.96) 100%);
  box-shadow:
    inset 0 1px 0 rgba(245, 230, 200, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45),
    0 0 14px rgba(212, 175, 55, 0.1);
  overflow: hidden;
}
/* Hinge line through the middle like a flip-clock */
.countdown-unit-tile::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(245, 230, 200, 0.08);
  pointer-events: none;
}
/* Sweeping highlight — subtle gold shimmer, below the digit */
.countdown-unit-tile::before {
  content: '';
  position: absolute;
  inset: -20% auto -20% -40%;
  width: 36%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 230, 180, 0.10) 45%,
    rgba(255, 230, 180, 0.22) 50%,
    rgba(255, 230, 180, 0.10) 55%,
    rgba(255, 255, 255, 0)
  );
  rotate: 14deg;
  opacity: 0;
  animation: countdownUnitSweep 5.2s ease-in-out infinite;
  z-index: 0;
}
.countdown-grid > .countdown-unit:nth-of-type(2) .countdown-unit-tile::before { animation-delay: 0.6s; }
.countdown-grid > .countdown-unit:nth-of-type(3) .countdown-unit-tile::before { animation-delay: 1.2s; }
.countdown-grid > .countdown-unit:nth-of-type(4) .countdown-unit-tile::before { animation-delay: 1.8s; }

.countdown-unit-value {
  position: relative;
  z-index: 2;
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--vr-ivory);
  text-shadow:
    0 0 20px rgba(212, 175, 55, 0.4),
    0 0 2px rgba(255, 245, 220, 0.55);
}

/* Flip-in when value changes */
.countdown-unit-value.is-flipping {
  animation: countdownValueFlip 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.countdown-unit-label {
  display: block;
  font-family: var(--font-p5-mono);
  font-size: 0.6rem;
  letter-spacing: 4px;
  color: var(--vr-gold);
  text-transform: uppercase;
}

/* Target + note */
.countdown-target {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(201, 164, 97, 0.28);
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 5px;
  color: var(--vr-gold-bright);
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.countdown-note {
  margin-top: 0.75rem;
  font-family: var(--font-p5-mono);
  font-size: 0.6rem;
  letter-spacing: 3px;
  color: rgba(245, 230, 200, 0.55);
}

/* --- Keyframes ----------------------------------------------- */
@keyframes countdownPrismSpin {
  from { rotate: 0deg; }
  to   { rotate: 360deg; }
}

@keyframes countdownRingSpinCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes countdownRingSpinCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

@keyframes countdownRingPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@keyframes countdownAuraPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

@keyframes countdownStarsTwinkle {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

@keyframes countdownSigilFlicker {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5)); }
  50%      { filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.85)); }
}

@keyframes countdownUnitSweep {
  0%, 18% { transform: translateX(0); opacity: 0; }
  30%     { opacity: 0.8; }
  54%     { transform: translateX(320%); opacity: 0.8; }
  100%    { transform: translateX(320%); opacity: 0; }
}

@keyframes countdownColonBlink {
  0%, 49%  { opacity: 0.35; }
  50%, 100%{ opacity: 0.9; }
}

@keyframes countdownValueFlip {
  0%   { transform: translateY(-6px) rotateX(-90deg); opacity: 0; }
  55%  { transform: translateY(0)    rotateX(0);      opacity: 1; }
  100% { transform: translateY(0)    rotateX(0);      opacity: 1; }
}

/* --- Tablet (≤ 820px) --------------------------------------- */
@media (max-width: 820px) {
  .countdown-rings {
    width: min(118vw, 680px);
    height: min(118vw, 680px);
    margin: calc(min(118vw, 680px) / -2) 0 0 calc(min(118vw, 680px) / -2);
  }
  .countdown-prism {
    width: 140vw;
    height: 140vw;
    margin: -70vw 0 0 -70vw;
  }
  .countdown-shell {
    width: min(92vw, 500px);
    padding: 54px 34px 38px;
  }
  .countdown-title {
    letter-spacing: 7px;
  }
}

/* --- Mobile (≤ 640px) --------------------------------------- */
@media (max-width: 640px) {
  /* Rings/prism scale with viewport width so they always halo the card */
  .countdown-rings {
    width: min(128vw, 620px);
    height: min(128vw, 620px);
    margin: calc(min(128vw, 620px) / -2) 0 0 calc(min(128vw, 620px) / -2);
    opacity: 0.95;
  }
  .countdown-prism {
    width: 160vw;
    height: 160vw;
    margin: -80vw 0 0 -80vw;
  }
  .countdown-ring--outer svg text {
    font-size: 11px !important;
    letter-spacing: 6px !important;
  }

  .countdown-shell {
    width: min(94vw, 420px);
    padding: 44px 16px 28px;
  }
  .countdown-shell::before,
  .countdown-shell::after {
    width: 48px;
    height: 48px;
  }

  .countdown-sigil {
    top: -20px;
    width: 42px;
    height: 42px;
  }
  .countdown-sigil svg { width: 28px; height: 28px; }

  .countdown-kicker {
    font-size: 0.54rem;
    letter-spacing: 4px;
  }
  .countdown-title {
    margin-top: 0.85rem;
    letter-spacing: 5px;
    font-size: clamp(1.7rem, 8vw, 2.3rem);
  }
  .countdown-divider { width: 100%; }
  .countdown-copy {
    width: 100%;
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .countdown-grid {
    margin-top: 1.5rem;
    gap: 2px;
  }
  .countdown-unit { min-width: 0; flex: 1 1 0; gap: 0.4rem; }
  .countdown-unit-tile {
    padding: 9px 4px 8px;
  }
  .countdown-unit-value {
    font-size: clamp(1.3rem, 7vw, 1.9rem);
    letter-spacing: 1px;
  }
  .countdown-unit-sep {
    padding-bottom: 1.4rem;
    font-size: 1.2rem;
  }
  .countdown-unit-label {
    font-size: 0.48rem;
    letter-spacing: 2px;
  }

  .countdown-target {
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    font-size: 0.68rem;
    letter-spacing: 3px;
  }
  .countdown-note {
    font-size: 0.5rem;
    letter-spacing: 2px;
  }
}

/* --- Small mobile (≤ 380px) — hide separators, tighten all --- */
@media (max-width: 380px) {
  .countdown-rings {
    width: min(140vw, 520px);
    height: min(140vw, 520px);
    margin: calc(min(140vw, 520px) / -2) 0 0 calc(min(140vw, 520px) / -2);
  }
  .countdown-shell {
    padding: 38px 10px 22px;
  }
  .countdown-shell::before,
  .countdown-shell::after {
    width: 38px;
    height: 38px;
  }
  .countdown-title {
    letter-spacing: 3px;
  }
  .countdown-unit-sep { display: none; }
  .countdown-grid { gap: 5px; }
  .countdown-unit-tile { padding: 8px 3px 7px; }
  .countdown-unit-value {
    font-size: 1.35rem;
  }
  .countdown-unit-label {
    font-size: 0.44rem;
    letter-spacing: 1.5px;
  }
  .countdown-ring--outer svg text {
    font-size: 9px !important;
    letter-spacing: 4px !important;
  }
}

/* --- Short viewports (landscape phones) --------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .countdown-shell {
    padding: 34px 32px 22px;
  }
  .countdown-sigil { top: -18px; width: 38px; height: 38px; }
  .countdown-sigil svg { width: 24px; height: 24px; }
  .countdown-title {
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    letter-spacing: 5px;
  }
  .countdown-copy { font-size: 0.88rem; }
  .countdown-grid { margin-top: 1rem; }
  .countdown-unit-tile { padding: 8px 6px 7px; }
  .countdown-target { margin-top: 0.9rem; padding-top: 0.6rem; }
}