/* ==========================================================================
   Hot Talk — brand layer on top of sanitize.css + typography.css
   ==========================================================================

   BRAND COLOURS — the four configurable knobs. Edit these to re-theme the page.
   Everything else derives from them.
     --color-background : page background
     --color-body       : body copy / default text
     --color-highlight  : accent — countdown digits, links, question text
     --color-subtle     : muted — labels, dividers, the kicker line
   ------------------------------------------------------------------------ */
/*@font-face {
  font-family: "Winston VF";
  src: url("/assets/mulinito.vf.ttf") format("truetype");
  font-display: swap;
}*/

:root {
  --color-background: #e8e7ec;
  --color-body:       #2d2f64;
  --color-highlight:  #21be98;
  --color-subtle:     #2d2f644d;

  /* Typefaces (loaded via Google Fonts in the HTML head) */
  /* Holo Ventures branding */
  --font-heading: "Outfit", system-ui, sans-serif;         /* headings + countdown */
  --font-body:    "Space Grotesk", system-ui, sans-serif;   /* body copy */
  --font-size-prominent-p: 1.5rem; /* kicker, legalese, intro paragraph */
  /* HoloFuel branding */
  /*--font-body: "Winston VF", system-ui, sans-serif;
  --font-heading: var(--font-body);*/

  /* Layout constants for the collapsing countdown */
  --collapse:   0;        /* 0 = full-screen, 1 = fully collapsed; JS drives this */
}

@media (max-width: 570px) {
  :root {
    --font-size-prominent-p: 1rem;
  }
}

/* ---- Base ---------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-body);
  font-family: var(--font-body);
  line-height: 1.6;
}

h1, h2, h3, .countdown__time {
  font-family: var(--font-heading);
}

a {
  color: var(--color-highlight);
}

/* Override some styling from the reset stylesheet */
:where(abbr[title]) {
  text-decoration: none !important;
}

/* ==========================================================================
   Countdown stage
   ==========================================================================
   Graceful default (no JS / feature unsupported): a static, full-height block,
   no fixed positioning, no shrink. The `.has-collapse` class — added by
   countdown.js — opts into the fixed + scroll-driven shrink behaviour.
   ------------------------------------------------------------------------ */

.countdown {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  min-height: 100vh;   /* fallback for browsers without svh */
  min-height: 100svh;
  text-align: center;
  background: var(--color-background);   /* opaque so it can cover content */
}

.countdown__title, .faq__title {
  font-size: clamp(2.5rem, 5svw, 4rem);
  line-height: 1em;
}

.countdown__logo__img {
  width: clamp(2rem, 7vh, 4rem);
  height: auto;
}

@media ((max-width: 800px) and (min-aspect-ratio: 3/2)) or (max-height: 460px) {
  .countdown__title, .faq__title {
    font-size: 2.5rem;
  }

  .countdown__logo {
    display: none;
  }
}

.countdown__kicker, .countdown__legal {
  margin: 0 0 1rem;
  font-size: var(--font-size-prominent-p);
}

.countdown__time {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.35em;
  margin: 0 0 1rem;
  color: var(--color-highlight);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* stop per-tick horizontal jitter */
  /* Conservative pre-JS / no-JS size that will not overflow the width.
     When JS runs it measures and sets an exact fit inline. */
  font-size: min(11vw, 18vh);
}

/* Segments keep their intrinsic size (no flex shrink) so JS can measure the
   true content width for fitting. */
.countdown__seg,
.countdown__sep {
  flex: none;
}

.countdown__seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.countdown__num {
  display: block;
}

.countdown__label {
  color: var(--color-subtle);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.8rem, 0.18em, 0.18em);              /* relative to the big digits */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.countdown__sep {
  color: var(--color-subtle);
  align-self: flex-start;
}

/* Message shown once the timer reaches zero */
.countdown__done {
  font-size: min(9vw, 16vh);
}

/* ---- Enhanced behaviour (JS present) ------------------------------------ */

.has-collapse .countdown {
  position: fixed;
  inset: 0 0 auto 0;      /* pin to top; stays there for good */
  z-index: 10;
  min-height: 0;
  overflow: hidden;       /* clip any transient overflow during a resize frame */
  will-change: height;
  /* Height lerps from (viewport − teaser) down to --cd-min as --collapse 0→1 */
  height: calc(100vh - var(--collapse) * (100vh - var(--cd-min, 4.25em)));
  height: calc(100svh - var(--collapse) * (100svh - var(--cd-min, 4.25em)));
}

/* Reserve constant space so the content scrolls at true 1:1 speed and slides
   UNDER the opaque bar — independent of how far the bar has shrunk. */
.has-collapse .content {
  margin-top: 100vh;
  margin-top: 100svh;
}

/* The timer's siblings (title, kicker, and any content added above or below it)
   collapse out of the height budget and fade as we shrink, so the timer alone
   fills the compact bar. This is driven per-frame from countdown.js — see
   measureExtras/applyExtras — so the collapse tracks each element's actual
   natural height, whatever content lives there. */

/* ==========================================================================
   Content: FAQ + collaborators
   ========================================================================== */

.content {
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 1.25rem 4rem;
}

/* ---- FAQ (always visible, no disclosure widgets) ------------------------ */

.faq__title {
  text-align: center;
  margin: 0 0 3rem;
}

.faq__list {
  margin: 0;
}

.faq__intro {
  font-size: var(--font-size-prominent-p);
}

.faq__q {
  margin-top: 1.75rem;
  color: var(--color-highlight);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.5rem;
}

.faq__intro, .faq__a {
  margin: 0.5rem 0 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-subtle) 35%, transparent);
}

.faq__a:last-child {
  border-bottom: 0;
}

/* ---- Collaborators ----------------------------------------------------------- */

.collaborators {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 6vw, 3.5rem);
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--color-subtle) 35%, transparent);
}

.collaborators__link {
  display: inline-flex;
  height: 40px;
  color: var(--color-subtle);   /* SVGs use fill=currentColor */
  opacity: 50%;
}

.collaborators__link:hover, .collaborators__link:focus {
  opacity: 100%;
}

.collaborators__logo {
  fheight: 40px;
  width: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .collaborators__link {
    transition: color 0.2s ease, opacity 0.2s ease;
  }
}

.collaborators__link:hover,
.collaborators__link:focus-visible {
  color: var(--color-highlight);
}

/* ==========================================================================
   Nudge — the "there's more below" hint (added + driven by nudge.js)
   ==========================================================================
   A light-gray up-arrow pinned to the foot of the viewport. nudge.js fades it
   in, bounces it, and (on the third bounce) tugs .content up behind it. Purely
   decorative and non-interactive; absent entirely without JS.
   ------------------------------------------------------------------------ */

.nudge {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 20;                         /* above the fixed countdown bar (10) */
  transform: translateX(-50%);         /* nudge.js layers the bounce on top */
  color: var(--color-subtle);
  font-size: 2rem;
  line-height: 1;
  opacity: 0;                          /* hidden until a bounce run begins */
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nudge--on {
  opacity: 1;
}

/* During the reveal bounce, nudge.js lifts .content above the opaque countdown
   bar (z-index 10) so the FAQ rises OVER it instead of sliding under. Removed
   again the moment it settles, so normal scrolling still tucks content under. */
.nudge-lift {
  position: relative;
  z-index: 11;
}