/* Greybox homepage countdown — cinematic upcoming-title hero banner.
 *
 * A wide, artwork-led stage directly under the hero: the TMDB backdrop
 * (poster fallback) bleeds edge-to-edge under layered scrims so the copy
 * always sits on readable dark, while the artwork still reads on the
 * flanks. Editorial serif title, a compact meta row, ONE cohesive 4-cell
 * countdown, and a single understated CTA with the optional overview line.
 *
 * Consumes Phase 1 tokens (css/tokens.css). The banner palette below is
 * deliberately LOCAL: like the hero scrims it is a dark cinematic anchor,
 * so it keeps the same ink and gold under dark / amoled / light themes
 * instead of following --gx-text flips (which would invert the whole
 * banner). Width matches the shelf column exactly (no extra inset), so the
 * banner edges line up with the cards below on every viewport.
 */

#home-countdown {
  /* ——— banner palette (local, theme-stable) ——— */
  --cd-ink: #f7f3ea;
  --cd-ink-2: rgba(247, 243, 234, 0.76);
  --cd-ink-3: rgba(247, 243, 234, 0.56);
  --cd-line: rgba(255, 255, 255, 0.1);
  --cd-line-soft: rgba(255, 255, 255, 0.06);
  --cd-gold: #e6bd73;
  --cd-gold-hi: #f3dfb2;
  --cd-gold-line: rgba(208, 162, 79, 0.4);
  --cd-shell: linear-gradient(180deg, #0d1118 0%, #0a0d14 55%, #070910 100%);

  position: relative;
  width: 100%;
  /* Single content column: .gx-page already caps + insets the page, so the
   * banner aligns with the shelf rows below it at every width (the old
   * strip added its own inset and read as a floating island). */
  margin: 1.5rem auto 2.25rem;
  box-sizing: border-box;
  z-index: 1;
}

#home-countdown.hidden { display: none; }

/* While the banner is up, shelves start in normal flow (no tuck): the
 * countdown's own bottom margin is the single gap source. Hidden banner →
 * the classic hero tuck returns untouched. */
body.has-countdown #home-sections:not(:empty) { margin-top: 0; }

/* ---------------- stage + artwork ---------------- */

.gx-cd-stage {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 1.5vw, 22px);
  background: var(--cd-shell);
  border: 1px solid var(--cd-line);
  box-shadow:
    0 30px 70px -46px rgba(0, 0, 0, 0.95),
    0 2px 10px -6px rgba(0, 0, 0, 0.6);
  /* One quiet entrance, then static (no parallax, no zoom loop). */
  animation: gx-cd-in 0.6s var(--gx-ease-cinema) both;
}

@keyframes gx-cd-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Fine illuminated edge: a single top hairline + inner ring, the only
 * "highlight" on the whole banner. */
.gx-cd-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.gx-cd-art {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.gx-cd-art-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Slightly high crop keeps faces/action out from under the copy block. */
  object-position: 50% 26%;
}

/* Portrait poster fallback: softened + darkened so an upscaled 2:3 image
 * reads as ambient theme art instead of a blurry photograph. */
.gx-cd-art-img.is-poster {
  object-position: 50% 20%;
  filter: blur(4px) saturate(1.25) brightness(0.6);
  transform: scale(1.06);
}

/* Scrims: horizontal pool for the centred copy, vertical falloff top and
 * bottom (the bottom melt is what makes the banner feel like it grows out
 * of the page), plus a restrained warm pool under the timer. */
.gx-cd-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(7, 9, 14, 0.9) 0%,
      rgba(7, 9, 14, 0.42) 14%,
      rgba(7, 9, 14, 0.6) 34%,
      rgba(7, 9, 14, 0.82) 50%,
      rgba(7, 9, 14, 0.6) 66%,
      rgba(7, 9, 14, 0.42) 86%,
      rgba(7, 9, 14, 0.9) 100%),
    linear-gradient(180deg,
      rgba(7, 9, 14, 0.52) 0%,
      rgba(7, 9, 14, 0.2) 28%,
      rgba(7, 9, 14, 0.5) 70%,
      rgba(7, 9, 14, 0.93) 100%),
    radial-gradient(62% 78% at 50% 116%, rgba(208, 162, 79, 0.3), rgba(208, 162, 79, 0) 72%);
}

/* ---------------- body ---------------- */

.gx-cd-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(10px, 1.3vw, 16px);
  min-height: clamp(320px, 23vw, 430px);
  padding: clamp(26px, 3vw, 44px) clamp(16px, 4vw, 60px);
  font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------------- eyebrow ---------------- */

.gx-cd-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 18px);
  margin: 0;
}

.gx-cd-eyebrow-text {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* balances the tracked spacing against the rules */
  text-transform: uppercase;
  color: var(--cd-gold);
  white-space: nowrap;
}

.gx-cd-rule {
  width: clamp(22px, 6vw, 76px);
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, rgba(208, 162, 79, 0), rgba(208, 162, 79, 0.75), rgba(208, 162, 79, 0));
}

/* ---------------- title ---------------- */

.gx-cd-title {
  margin: 0;
  /* Marcellus: an inscription-style display serif that reads like a title
   * card. Explicit line-height keeps the box height font-metric
   * independent, so the serif swap (display=swap) never shifts the timer. */
  font-family: 'Marcellus', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.9rem, 4.8vw, 3.6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
  max-width: 22ch;
  text-wrap: balance;
  /* Restrained gold wash: the strongest text element on the page. */
  background: linear-gradient(178deg, #fdfaf3 8%, #f4e7cb 52%, #dcbb80 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.55));
}

/* ---------------- meta row ---------------- */

.gx-cd-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 46rem;
}

.gx-cd-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--cd-ink-2);
}

.gx-cd-meta li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(247, 243, 234, 0.34);
  margin-right: 0.15rem;
}

.gx-cd-ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--cd-gold);
  opacity: 0.85;
}

/* ---------------- countdown ---------------- */

.gx-cd-timer {
  display: flex;
  align-items: stretch;
  gap: clamp(6px, 0.7vw, 10px);
  max-width: 100%;
  margin-top: clamp(2px, 0.4vw, 6px);
  padding: clamp(6px, 0.7vw, 10px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(10, 13, 19, 0.74), rgba(6, 8, 12, 0.66));
  border: 1px solid var(--cd-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 24px 50px -30px rgba(0, 0, 0, 0.95),
    0 16px 44px -32px rgba(208, 162, 79, 0.55);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.gx-cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: clamp(62px, 7vw, 104px);
  padding: clamp(0.5rem, 0.8vw, 0.7rem) 0.5rem 0.55rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  border: 1px solid var(--cd-line-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gx-cd-num {
  display: block;
  font-size: clamp(1.5rem, 2.7vw, 2.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #f8f2e5;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.gx-cd-lab {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--cd-ink-3);
}

/* Expired: the whole unit collapses into one pill. Never a negative value,
 * never a leftover ticker (js/countdown.js stops it here). */
.gx-cd-timer.is-done {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.gx-cd-out {
  display: inline-flex;
  align-items: center;
  padding: 0.62rem 1.5rem;
  border-radius: var(--gx-radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cd-gold-hi);
  background: rgba(208, 162, 79, 0.12);
  border: 1px solid var(--cd-gold-line);
}

/* ---------------- action row ---------------- */

.gx-cd-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(12px, 1.8vw, 24px);
  margin-top: clamp(2px, 0.5vw, 8px);
}

.gx-cd-info {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0.7rem 1.5rem;
  border-radius: var(--gx-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  border: 1px solid var(--cd-gold-line);
  color: var(--cd-ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 12px 26px -16px rgba(0, 0, 0, 0.9);
  transition:
    background 220ms var(--gx-ease-cinema),
    border-color var(--gx-transition),
    color var(--gx-transition),
    box-shadow 220ms var(--gx-ease-cinema),
    transform var(--gx-transition);
}

.gx-cd-info .gx-cd-ico-arrow {
  width: 15px;
  height: 15px;
  flex: none;
  transition: transform var(--gx-transition);
}

.gx-cd-info:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07));
  border-color: rgba(226, 186, 107, 0.7);
  color: #fffdf7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 16px 32px -16px rgba(208, 162, 79, 0.5);
  transform: translateY(-1px);
}

.gx-cd-info:hover .gx-cd-ico-arrow { transform: translateX(3px); }

.gx-cd-info:active { transform: translateY(0); }

.gx-cd-info:focus-visible {
  outline: 2px solid var(--gx-accent);
  outline-offset: 3px;
}

.gx-cd-divider {
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.gx-cd-note {
  margin: 0;
  max-width: 30ch;
  text-align: left;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.45;
  color: var(--cd-ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------- responsive ---------------- */

/* Tablet / small laptop: keep the composition, tighten the rhythm. */
@media (max-width: 1024px) {
  .gx-cd-body { padding-inline: clamp(16px, 4vw, 36px); }
  .gx-cd-title { max-width: 20ch; }
  .gx-cd-note { max-width: 24ch; font-size: 0.78rem; }
}

/* Phone: a deliberate stacked layout, not a shrunken desktop one — the
 * overview line and its divider drop out so the title, countdown and CTA
 * keep their room and the banner never turns into a tall wall. */
@media (max-width: 720px) {
  #home-countdown { margin: 1rem auto 1.75rem; }

  .gx-cd-body {
    min-height: 0;
    gap: 12px;
    padding: 26px 16px 24px;
  }

  .gx-cd-title { max-width: 16ch; }

  .gx-cd-meta {
    max-width: 30rem;
    gap: 0.3rem 0.75rem;
    font-size: 0.78rem;
  }

  .gx-cd-meta li { font-size: 0.76rem; }

  .gx-cd-timer { gap: 6px; padding: 6px; border-radius: 16px; }
  .gx-cd-cell { min-width: 62px; border-radius: 11px; }
  .gx-cd-num { font-size: 1.5rem; }

  .gx-cd-actions { width: 100%; }
  .gx-cd-info { min-width: 200px; }
  .gx-cd-note,
  .gx-cd-divider { display: none; }

  .gx-cd-art-img { object-position: 50% 22%; }
}

/* Small phones (iPhone SE class): shave the last few pixels so 360px
 * never scrolls sideways. */
@media (max-width: 400px) {
  .gx-cd-eyebrow-text { font-size: 0.62rem; letter-spacing: 0.22em; text-indent: 0.22em; }
  .gx-cd-rule { width: 18px; }
  .gx-cd-title { font-size: 1.7rem; }
  .gx-cd-cell { min-width: 56px; padding-inline: 0.35rem; }
  .gx-cd-num { font-size: 1.35rem; }
  .gx-cd-lab { font-size: 0.55rem; letter-spacing: 0.12em; text-indent: 0.12em; }
  .gx-cd-info { width: 100%; }
}

/* Motion: the entrance is already off under the global reduced-motion rule;
 * the poster fallback's scale is parked here too (it is a transform, not an
 * animation, so the global rule never reaches it). */
@media (prefers-reduced-motion: reduce) {
  .gx-cd-stage { animation: none; }
  .gx-cd-art-img.is-poster { transform: none; }
  .gx-cd-info,
  .gx-cd-info .gx-cd-ico-arrow { transition: none; }
}