/* firebird.ventures home page: layout between the kit's components. Tokens only. */

html {
  scroll-behavior: auto;
  scrollbar-gutter: stable;
}
body {
  background: var(--surface);
  transition: background-color var(--dur-slow) var(--ease-standard), color var(--dur-slow) var(--ease-standard);
}

.skip-link {
  position: fixed;
  left: var(--space-page);
  top: var(--space-3);
  z-index: calc(var(--z-overlay) + 10);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.skip-link:focus-visible {
  transform: none;
}

/* ── Header: past the first screen the wordmark steps aside (it returns with the menu); Menu and Contact stay ── */

.site-header .header__slot--centre {
  transition: color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), visibility 0s;
}
.site-header.is-scrolled:not(.is-menu-open) .header__slot--centre {
  opacity: 0;
  visibility: hidden;
  transition: color var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base);
}

/* ── Hero: one idea held through the whole sunrise, so it needs less scrolling than two headlines did ── */

.hero {
  --hero-length: 220vh;
}

/* ── Day: proof, what we build, how we work ── */

.site-proof,
.site-offer,
.site-process {
  background: var(--surface);
  color: var(--ink);
}
/* The proof picks up the sky where the sunrise ends: the globe's day horizon is porcelain with a little peach
   (phoenix-globe.js, the last sky keyframe), so the strip starts in that colour and settles into porcelain. */
.site-proof {
  padding-top: var(--space-6);
  background: linear-gradient(180deg, color-mix(in oklab, var(--color-porcelain) 72%, var(--color-dawn-peach)), var(--surface) 240px);
}
/* The day's sections share one rule between them, inset to the page margins. */
.site-offer,
.site-process {
  position: relative;
}
.site-process::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-page);
  right: var(--space-page);
  height: 1px;
  background: var(--hairline);
}

/* Room for each section until it mounts, so a link to it lands on it: without it the browser's scroll
   anchoring holds on to what follows and carries the page past the section as it fills in. */
.site-proof:empty {
  min-height: 40vh;
}
.site-offer:empty,
.site-process:empty {
  min-height: 100vh;
}

/* ── Sunset: porcelain through peach, amber, rust and plum into night ── */

.site-dusk {
  display: grid;
  height: 56vh;
  background: linear-gradient(
    180deg,
    var(--color-porcelain) 0%,
    var(--color-dawn-peach) 22%,
    var(--color-dawn-amber) 40%,
    var(--color-dawn-rust) 60%,
    var(--color-dawn-plum) 80%,
    var(--color-night) 100%
  );
}

/* The page never scrolls sideways; only the cockpits' rows of screens (footer, menu) scroll inside themselves. */
html {
  overflow-x: clip;
}
body {
  overflow-x: hidden; /* browsers without clip */
  overflow-x: clip;
}

/* ── The selected work (night) ── */

.site-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-9) 0 var(--space-10);
  background: var(--surface);
  color: var(--ink);
}
.site-index__cloud {
  min-height: 60vh;
}

/* ── Work: the pinned full-screen presentation ── */

.work {
  position: relative;
  height: calc((var(--slides, 8) + var(--slides-tail, 0)) * 100vh);
  background: var(--color-night);
}
.work__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.work__slides {
  position: absolute;
  inset: 0;
}
/* The dock only appears while the stage is pinned. */
.work__dock {
  transition: opacity var(--dur-slow) var(--ease-standard), translate var(--dur-slow) var(--ease-out-expo), background var(--dur-slow) var(--ease-standard);
}
.work:not(.is-pinned) .work__dock {
  opacity: 0;
  translate: -16px 0;
  pointer-events: none;
}
/* Phones too short for the dock above a topic's text (an iPhone SE with Safari's bars): the slide's counter stays. */
@media (max-width: 720px) and (max-height: 600px) {
  .work__dock {
    display: none;
  }
}

/* ── Why Firebird (night): three reasons, Florian and the partners, the logos ── */

.site-why {
  padding-bottom: var(--space-10);
  background: var(--surface);
  color: var(--ink);
}
.site-why .founder {
  padding-top: var(--space-6);
}
.site-founder:focus {
  outline: none;
}
.site-why__points:empty {
  min-height: 80vh;
}
/* Room for Florian until he mounts, so /#florian lands on him. */
.site-founder:empty {
  min-height: 100vh;
}
.site-why__logos {
  display: grid;
  gap: var(--space-9);
  margin: var(--space-9) var(--space-page) 0;
  padding-top: var(--space-9);
  border-top: 1px solid var(--hairline);
}
/* The second row reveals just after the first. */
.site-why__logos [data-logo-row='funding'] {
  --logo-row-delay: 320ms;
}

/* Room for the footer until it mounts (it mounts as it comes near). */
body > footer:empty {
  min-height: 100vh;
  background: var(--color-night);
}

@media (max-width: 720px) {
  .site-dusk {
    height: 40vh;
  }
  .site-index {
    padding-top: var(--space-8);
  }
  .site-why__logos {
    margin-top: var(--space-8);
    padding-top: var(--space-8);
  }
}