/* Greybox homepage countdown — graphite glass with a quiet calendar.
 *
 * A wide, artwork-led stage directly under the hero. The composition follows
 * the site's own hero language instead of a generic centered card: the copy
 * (eyebrow, serif title, meta) and the countdown dock to the LEFT of the
 * frame, while the movie's backdrop stays readable on the right. The stage is
 * a thin glass rim, a top light and a bottom melt — not a printed invitation.
 *
 * The countdown is a TEAR-OFF CALENDAR in glass: one smoked rail, hairline
 * dividers, serif champagne numerals and translucent flip panes. Every change
 * flips the outgoing value away while the fresh number drops in (keyframes at
 * the bottom; parked under reduced motion). The motion says "days passing";
 * the material says "same black-glass system as the rest of Greybox".
 *
 * The palette borrows the site's graphite glass + restrained champagne
 * accent, and the translucent fill lets the selected movie's own palette
 * bleed through the blur. Like the hero scrims it is a deliberately LOCAL,
 * theme-stable anchor (ink/gold stay put under dark / amoled / light) instead
 * of following --gx-text flips. Width matches the shelf column exactly, so
 * the banner edges line up with the cards below.
 */

#home-countdown {
  /* ——— banner palette (local, theme-stable) ——— */
  --cd-ink: #f4f2ec;
  --cd-ink-2: rgba(238, 236, 229, 0.66);
  --cd-gold: #d0a24f;
  --cd-gold-hi: #e9cf9d;
  --cd-glass: rgba(35, 39, 46, 0.48);
  --cd-glass-line: rgba(255, 255, 255, 0.18);
  --cd-ink-bright: #fbf6ea;
  --cd-shell: linear-gradient(180deg, #1a1e25 0%, #12151a 55%, #0b0d11 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. */
  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(16px, 1.6vw, 24px);
  background: var(--cd-shell);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 40px 90px -50px rgba(0, 0, 0, 0.9),
    0 18px 48px -38px rgba(208, 162, 79, 0.24),
    0 2px 10px -6px rgba(0, 0, 0, 0.55);
  /* One quiet entrance, then static (no parallax, no zoom loop). */
  animation: gx-cd-in 0.7s var(--gx-ease-cinema) both;
}

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

/* Single glass rim: one specular top hairline, no double frame. */
.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.16),
    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% 28%;
  /* Let the selected movie's own grade come through — the glass in front
   * will carry the site's graphite tint. */
  filter: saturate(1.04) contrast(1.03) brightness(0.9);
  transform: scale(1.015);
}

/* Portrait poster fallback: softened 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% 18%;
  filter: blur(6px) saturate(1.14) brightness(0.66);
  transform: scale(1.09);
}

/* Scrims: a neutral graphite pool under the copy, a lighter top/bottom
 * falloff (the bottom melt is what makes the banner grow out of the page),
 * and a restrained champagne shimmer low-right. The movie supplies the
 * colour; the scrim only supplies contrast. */
.gx-cd-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(110% 120% at 12% 54%,
      rgba(8, 10, 14, 0.82) 0%,
      rgba(8, 10, 14, 0.56) 33%,
      rgba(8, 10, 14, 0.2) 61%,
      rgba(8, 10, 14, 0.03) 82%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(8, 10, 14, 0.34) 0%,
      rgba(8, 10, 14, 0.04) 30%,
      rgba(8, 10, 14, 0.2) 68%,
      rgba(6, 8, 11, 0.82) 100%),
    radial-gradient(78% 52% at 50% -10%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 68%),
    radial-gradient(62% 72% at 90% 108%, rgba(208, 162, 79, 0.1), rgba(208, 162, 79, 0) 70%);
}

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

.gx-cd-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  gap: clamp(12px, 1.4vw, 18px);
  min-height: clamp(380px, 25vw, 470px);
  padding: clamp(26px, 3.4vw, 56px) clamp(22px, 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.2vw, 16px);
  margin: 0;
}

.gx-cd-eyebrow-text {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cd-gold-hi);
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* Quiet live dot: this is a countdown, so a single breathing bead gives the
 * plate life without a blinking timer. */
.gx-cd-eyebrow-text::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--cd-gold-hi);
  box-shadow: 0 0 0 3px rgba(240, 217, 168, 0.12), 0 0 14px rgba(240, 217, 168, 0.65);
  animation: gx-cd-pulse 3.2s ease-in-out infinite;
}

@keyframes gx-cd-pulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 0 3px rgba(240, 217, 168, 0.08), 0 0 10px rgba(240, 217, 168, 0.35); }
  50% { opacity: 1; box-shadow: 0 0 0 3px rgba(240, 217, 168, 0.18), 0 0 16px rgba(240, 217, 168, 0.72); }
}

.gx-cd-rule {
  width: clamp(20px, 5vw, 64px);
  height: 1px;
  flex: none;
  background: linear-gradient(90deg, rgba(208, 162, 79, 0), rgba(208, 162, 79, 0.55));
}

.gx-cd-rule:last-child {
  background: linear-gradient(90deg, rgba(208, 162, 79, 0.55), 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(2.15rem, 4.6vw, 3.9rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.008em;
  max-width: 20ch;
  text-wrap: balance;
  /* Off-white with the faintest champagne foothill, so the title sits in the
   * same light as the glass while the movie's grade does the colour work. */
  background: linear-gradient(180deg, #fffdfa 4%, #f7f1e5 58%, #e9d4ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 14px 34px rgba(0, 0, 0, 0.62));
}

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

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

.gx-cd-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cd-ink-2);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* Tiny rotated diamonds read as a printed credit line. */
.gx-cd-meta li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  flex: none;
  background: rgba(208, 162, 79, 0.55);
  transform: rotate(45deg);
  margin-right: 0.2rem;
}

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

/* ---------------- glass calendar ---------------- */

/* One smoked-glass rail: the site's graphite glass, a single specular
 * highlight and a champagne-warm tint. Because the fill is translucent, the
 * selected movie's own grade shows through the blur behind the numerals. */
.gx-cd-timer {
  position: relative;
  display: flex;
  align-items: stretch;
  width: min(100%, 720px);
  margin-top: clamp(4px, 0.6vw, 10px);
  padding: clamp(7px, 0.8vw, 10px);
  overflow: hidden;
  border-radius: 16px;
  background-color: var(--cd-glass);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.018) 34%, rgba(9, 10, 13, 0.12) 100%),
    linear-gradient(90deg, rgba(208, 162, 79, 0.05) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid var(--cd-glass-line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 22px 48px -26px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

/* Specular top edge + a slow diagonal pane reflection. */
.gx-cd-timer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.34) 30%, rgba(255, 255, 255, 0.08) 70%, transparent 96%);
}

.gx-cd-timer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.045) 48%, rgba(255, 255, 255, 0) 60%);
}

.gx-cd-cell {
  --cd-num-size: clamp(2.05rem, 3.5vw, 3rem);

  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
  padding: clamp(0.5rem, 0.8vw, 0.72rem) clamp(0.35rem, 0.7vw, 0.8rem) clamp(0.42rem, 0.65vw, 0.58rem);
  color: var(--cd-ink);
}

/* Hairline glass separator, not a perforation. */
.gx-cd-cell + .gx-cd-cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.17) 24%, rgba(255, 255, 255, 0.07) 78%, transparent 100%);
}

.gx-cd-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.gx-cd-num,
.gx-cd-flip {
  font-family: 'Marcellus', 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: var(--cd-num-size);
  font-weight: 400;
  line-height: 1;
  color: var(--cd-ink);
}

.gx-cd-num {
  position: relative;
  z-index: 1;
  display: block;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.005em;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

/* The pane that is torn off. Hidden at rest; only .is-flip plays it, so the
 * printed numeral never carries a permanent overlay. */
.gx-cd-flip {
  position: absolute;
  z-index: 2;
  inset: -5px -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.035) 44%, rgba(10, 12, 16, 0.16) 100%),
    rgba(35, 39, 46, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  box-shadow:
    0 14px 26px -16px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--cd-ink-bright);
  transform-origin: 50% 0%;
  backface-visibility: hidden;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

@keyframes gx-cd-tear {
  0% { opacity: 1; transform: perspective(620px) rotateX(0deg); }
  14% { transform: perspective(620px) rotateX(-9deg); }
  60% { opacity: 1; }
  100% { opacity: 0; transform: perspective(620px) rotateX(-104deg) translateY(1px); }
}

/* The fresh number waits under the glass pane, then drops in as the pane
 * clears. The delay is what keeps the old value readable while the sheet is
 * still large; the pane is edge-on by the time this starts. */
@keyframes gx-cd-arrive {
  0% { opacity: 0; transform: translateY(-34%) scale(0.96); }
  100% { opacity: 1; transform: none; }
}

.gx-cd-cell.is-flip .gx-cd-flip {
  animation: gx-cd-tear 600ms cubic-bezier(0.35, 0.05, 0.25, 1) both;
}

.gx-cd-cell.is-flip .gx-cd-num {
  animation: gx-cd-arrive 320ms cubic-bezier(0.2, 0.7, 0.2, 1) 480ms both;
}

.gx-cd-lab {
  display: block;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  text-transform: uppercase;
  color: rgba(233, 207, 157, 0.76);
}

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

.gx-cd-timer.is-done::before,
.gx-cd-timer.is-done::after { display: none; }

.gx-cd-out {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 1.4rem;
  border-radius: var(--gx-radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-ink);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 48%, rgba(10, 11, 15, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 28px -18px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
}

.gx-cd-out::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--cd-gold-hi);
  box-shadow: 0 0 12px rgba(208, 162, 79, 0.55);
}

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

.gx-cd-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(2px, 0.4vw, 6px);
  max-width: 780px;
}

.gx-cd-actions:empty { display: none; }

/* Glass CTA: the same smoked capsule as the site's nav / More Info chips,
 * with one champagne arrow as the only warm accent. */
.gx-cd-info {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 46px;
  padding: 0.62rem 1.35rem 0.62rem 1.5rem;
  border-radius: var(--gx-radius-pill);
  background-color: rgba(255, 255, 255, 0.1);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 52%, rgba(8, 10, 14, 0.16) 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--cd-ink);
  font-family: inherit;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.045em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 16px 36px -22px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transition:
    background-color 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);
}

/* The arrow rides in a small glass bead that warms to champagne on hover. */
.gx-cd-info .gx-cd-ico-arrow {
  width: 16px;
  height: 16px;
  flex: none;
  box-sizing: content-box;
  padding: 6px;
  border-radius: 50%;
  background: rgba(10, 11, 15, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--cd-gold-hi);
  transition:
    background 220ms var(--gx-ease-cinema),
    border-color var(--gx-transition),
    color var(--gx-transition),
    transform var(--gx-transition);
}

.gx-cd-info:hover {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(233, 207, 157, 0.42);
  color: #fffdf7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 18px 38px -20px rgba(208, 162, 79, 0.4);
  transform: translateY(-1px);
}

.gx-cd-info:hover .gx-cd-ico-arrow {
  background: var(--cd-gold);
  border-color: var(--cd-gold);
  color: #17130d;
  transform: translateX(2px);
}

.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: 38px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.gx-cd-note {
  margin: 0;
  max-width: 38ch;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.58;
  color: var(--cd-ink-2);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  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(20px, 4vw, 40px); }
  .gx-cd-title { max-width: 18ch; }
  .gx-cd-timer { width: 100%; max-width: 100%; }
  .gx-cd-note { max-width: 30ch; 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, calendar 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: 28px 18px 26px;
  }

  .gx-cd-eyebrow { gap: 10px; }
  .gx-cd-rule { width: 18px; }
  .gx-cd-title { max-width: 16ch; font-size: clamp(1.95rem, 8vw, 2.4rem); }

  .gx-cd-meta { gap: 0.32rem 0.8rem; }
  .gx-cd-meta li { font-size: 0.64rem; letter-spacing: 0.1em; }
  /* Wrapped credit lines read as a plain list on phones: a leading diamond
   * on the second line looks like a stray bullet. */
  .gx-cd-meta li + li::before { display: none; }
  .gx-cd-ico { width: 13px; height: 13px; }

  .gx-cd-timer { padding: 6px; border-radius: 14px; }

  .gx-cd-cell {
    --cd-num-size: 1.65rem;
    padding: 10px 4px 9px;
    gap: 0.22rem;
  }

  .gx-cd-flip { inset: -4px -5px; border-radius: 5px; }
  .gx-cd-lab { font-size: 0.52rem; letter-spacing: 0.16em; text-indent: 0.16em; }

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

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

/* Small phones (iPhone SE class): shave the last few pixels so 360px
 * never scrolls sideways. */
@media (max-width: 400px) {
  .gx-cd-body { padding: 24px 14px 22px; }
  .gx-cd-eyebrow-text { font-size: 0.6rem; letter-spacing: 0.22em; }
  .gx-cd-rule { width: 14px; }
  .gx-cd-title { font-size: 1.72rem; }
  .gx-cd-cell { --cd-num-size: 1.5rem; padding: 9px 3px 8px; }
  .gx-cd-lab { font-size: 0.47rem; letter-spacing: 0.12em; text-indent: 0.12em; }
  .gx-cd-info { width: auto; }
}

/* 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). The calendar pages stop
 * animating and their overlay is removed entirely. */
@media (prefers-reduced-motion: reduce) {
  .gx-cd-stage { animation: none; }
  .gx-cd-art-img.is-poster { transform: none; }
  .gx-cd-eyebrow-text::before { animation: none; }
  .gx-cd-cell.is-flip .gx-cd-flip,
  .gx-cd-cell.is-flip .gx-cd-num { animation: none; }
  .gx-cd-flip { display: none; }
  .gx-cd-info,
  .gx-cd-info .gx-cd-ico-arrow { transition: none; }
}