/* ============================================================
   COMPONENTS — buttons, video, coming-soon, countdown
   ============================================================ */

/* ── BUTTON ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 14px 40px; border: 1px solid var(--gold-border);
  color: var(--fg-mid); font-family: var(--font-mono);
  font-size: 0.56rem; letter-spacing: 0.36em; text-transform: uppercase;
  transition: all 0.5s var(--ease); position: relative;
  background: var(--gold-dim); overflow: hidden; cursor: pointer;
}
.btn::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(201,168,76,0.08);
  transform: scaleX(0); transform-origin: left; transition: transform 0.44s var(--ease);
}
.btn:hover {
  border-color: rgba(201,168,76,0.42); color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 16px var(--gold-dim);
}
.btn:hover::before { transform: scaleX(1); }
.btn span { position: relative; z-index: 1; }

/* ── VIDEO BLOCK ──────────────────────────────────────────── */
.video-label {
  font-family: var(--font-mono); font-size: 0.5rem;
  letter-spacing: 0.48em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 1.4rem; display: flex;
  align-items: center; gap: 1.2rem;
}
.video-label::after { content: ''; flex: 1; height: 1px; background: var(--gold-line); }

.video-wrap {
  width: 100%; aspect-ratio: 16 / 9;
  background: var(--bg-raised); border: 1px solid var(--gold-border); overflow: hidden;
  position: relative;
}
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem;
  background: rgba(255,255,255,0.012);
}
.video-placeholder .vp-bracket {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.6rem; color: var(--fg-mid); letter-spacing: 0.15em;
  animation: blink-bracket 3.5s ease-in-out infinite;
}
.video-placeholder .vp-sub {
  font-family: var(--font-mono); font-size: 0.47rem;
  letter-spacing: 0.44em; text-transform: uppercase; color: var(--fg-dim);
}

/* ── STATUS CARD ──────────────────────────────────────────── */
.status-card {
  border: 1px solid var(--gold-line); max-width: 420px;
  margin: 0 auto; padding: 44px; background: var(--surface);
}
.status-card .s-label {
  font-family: var(--font-mono); font-size: 0.49rem;
  letter-spacing: 0.5em; color: var(--fg-dim); text-transform: uppercase;
}
.status-card .s-rule {
  margin: 20px 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-border), transparent);
}
.status-card .s-val {
  font-family: var(--font-display); font-size: 2rem;
  font-weight: 300; color: var(--fg-mid); letter-spacing: 0.22em;
}

/* ── COMING SOON BADGE ────────────────────────────────────── */
.cs-badge {
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 9px 26px; margin-bottom: 1.6rem;
  border: 1px solid var(--gold-border); background: var(--gold-dim);
}
.cs-badge span {
  font-family: var(--font-mono); font-size: 0.52rem;
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold);
}
.cs-badge::before,
.cs-badge::after { content: '✦'; font-size: 0.4rem; color: var(--gold); opacity: 0.5; }

/* ── VISUALS PLACEHOLDER ──────────────────────────────────── */
.vis-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
  gap: 2px; max-width: 860px; margin: 2.5rem auto 0; opacity: 0.18;
}
.vis-cell { aspect-ratio: 1; border: 1px solid var(--gold-line); }

/* ── COUNTDOWN ────────────────────────────────────────────── */
.cd-wrap {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh;
  padding: 40px var(--gutter); text-align: center;
}
.cd-eyebrow {
  font-family: var(--font-mono); font-size: 0.52rem;
  letter-spacing: 0.55em; text-transform: uppercase;
  color: var(--gold); opacity: 0.65; margin-bottom: 2.2rem;
}
.cd-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--fg); line-height: 0.88; margin-bottom: 0;
}
.cd-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--fg-mid); letter-spacing: 0.1em; margin: 1.5rem 0 0;
}
.cd-divider {
  width: 1px; height: 50px;
  background: linear-gradient(to bottom, transparent, var(--gold-border), transparent);
  margin: 2.8rem auto;
}
.cd-units {
  display: flex; align-items: flex-start;
  gap: clamp(1.5rem, 5vw, 5rem); margin-bottom: 3.5rem;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.cd-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 8rem); color: var(--fg);
  line-height: 1; letter-spacing: 0.05em; min-width: 2ch; text-align: center;
  transition: color 0.3s;
}
.cd-num.flash { color: var(--gold); }
.cd-unit-label {
  font-family: var(--font-mono); font-size: 0.48rem;
  letter-spacing: 0.5em; text-transform: uppercase; color: var(--fg-dim);
}
.cd-sep {
  font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem);
  color: var(--gold-border); line-height: 1; margin-top: 0.2em;
  animation: sep-pulse 1s step-start infinite;
}
.cd-note {
  font-family: var(--font-mono); font-size: 0.48rem;
  letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--fg-dim); margin-bottom: 2.8rem;
}
.cd-expired {
  font-family: var(--font-display); font-style: italic;
  font-size: 2rem; color: var(--gold); letter-spacing: 0.1em;
  margin-bottom: 2.5rem;
}