/* =========================================================
   Teaser homepage (Stage 1). Builds on the tokens, fonts and
   atmosphere in styles.css; only adds the teaser layout.
   Remove this file together with the teaser on launch day.
   ========================================================= */

.teaser-page { min-height: 100vh; min-height: 100svh; }

.teaser {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  /* Equal top and bottom rows keep the announcement in the true centre of the screen;
     the X link sits at the foot of the bottom row. */
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  padding:
    max(var(--gutter), env(safe-area-inset-top))
    var(--gutter)
    max(clamp(1.5rem, 4vh, 2.75rem), env(safe-area-inset-bottom));
  text-align: center;
}

.teaser__core {
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Headline: the same expanded italic as the full site's hero title */
.teaser__title {
  margin: 0;
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-style: italic;
  /* "A NEW CHAPTER." is about 11.1em wide in Archivo Expanded, so 7.9vw keeps it within ~88% of the screen */
  font-size: clamp(1.4rem, 7.2vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.teaser__title > span {
  display: inline-block;
  padding: 0 0.14em 0.08em;
  background: linear-gradient(180deg, var(--ink) 30%, var(--lilac-soft) 125%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Secondary line: the site's editorial serif */
.teaser__sub {
  margin: clamp(1.1rem, 2.4vw, 1.9rem) 0 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.5vw, 2.15rem);
  line-height: 1.2;
  color: var(--ink-2);
}

/* Date: gold accent, the same star colour as the "+" on the full site */
.teaser__date {
  margin: clamp(1.4rem, 3vw, 2.4rem) 0 0;
  font-variation-settings: "wdth" 125;
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  letter-spacing: 0.32em;
  margin-right: -0.32em; /* keep the tracked text optically centred */
  font-variant-numeric: tabular-nums;
  color: var(--star);
}

/* Countdown */
.countdown {
  margin-top: clamp(2.75rem, 7vh, 4.75rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(0.6rem, 2.2vw, 2rem);
  border-top: 1px solid var(--rule);
  min-width: min(100%, 40rem);
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  min-width: 2ch;
}
.countdown__num,
.countdown__sep {
  font-variation-settings: "wdth" 125;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(2rem, 5.6vw, 4.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.countdown__num { color: var(--ink); }
.countdown__sep { color: var(--ink-3); opacity: 0.55; font-weight: 500; }
.countdown__label {
  font-size: clamp(0.62rem, 0.9vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* X link: quiet, at the foot of the page */
.teaser__x {
  grid-row: 3;
  align-self: end;
  margin-top: clamp(1.5rem, 4vh, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--t-s);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s var(--ease-out);
}
.teaser__x svg { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.teaser__x:hover { color: var(--ink); }
.teaser__x:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; color: var(--ink); }

/* Entrance: a single, slow rise, in reading order */
@media (prefers-reduced-motion: no-preference) {
  .teaser__title > span,
  .teaser__sub,
  .teaser__date,
  .countdown,
  .teaser__x {
    opacity: 0;
    transform: translateY(14px);
    animation: teaser-rise 1.1s var(--ease-out) forwards;
  }
  .teaser__sub { animation-delay: 0.35s; }
  .teaser__date { animation-delay: 0.55s; }
  .countdown { animation-delay: 0.8s; }
  .teaser__x { animation-delay: 1.1s; }
}
@keyframes teaser-rise { to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .countdown { min-width: 100%; }
  .countdown__unit { gap: 0.55rem; }
}

/* Short screens (phones held sideways): tighten the vertical rhythm so it fits */
@media (max-height: 520px) and (orientation: landscape) {
  .teaser { padding-top: 1rem; padding-bottom: 0.75rem; }
  .teaser__title { font-size: clamp(1.4rem, 6.4vw, 4rem); }
  .teaser__sub { margin-top: 0.6rem; font-size: 1.15rem; }
  .teaser__date { margin-top: 0.75rem; font-size: 0.9rem; }
  .countdown { margin-top: 1.1rem; padding-top: 1rem; }
  .countdown__num, .countdown__sep { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
  .countdown__unit { gap: 0.4rem; }
  .teaser__x { margin-top: 0.75rem; padding: 0.35rem 0.8rem; }
}

/* ---------- Background: blurred GTA thumbnails drifting very slowly ---------- */
.drift { position: absolute; inset: 0; overflow: hidden; }
.drift__card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-w, 17vw);
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0.9rem;
  opacity: 0.3;
  filter: blur(11px) saturate(1.05);
  will-change: transform;
  /* teaser.js sets a new random position every few seconds; the transition makes it a slow glide */
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

/* Keeps the centre dark so the text always reads cleanly over the thumbnails */
.drift__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 55% at 50% 50%, rgba(13, 11, 30, 0.9) 0%, rgba(13, 11, 30, 0.7) 55%, rgba(13, 11, 30, 0.45) 100%);
}

@media (max-width: 760px) {
  .drift__card { border-radius: 0.6rem; filter: blur(7px) saturate(1.1); }
  .drift__veil { background: radial-gradient(ellipse 90% 45% at 50% 50%, rgba(13, 11, 30, 0.9) 0%, rgba(13, 11, 30, 0.7) 60%, rgba(13, 11, 30, 0.45) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .drift__card { transition: none; }
}