/* Front-page-only overrides on top of the reusable section parts
   (assets/css/parts/section-*.css) — load-in timing tied to
   .page-transition-in, and margin tweaks that make sections overlap
   on this page specifically. Not full section definitions. */

/* Solid color instead of section-hero.css's shared photo fallback —
   this only ever shows briefly (video still loading, or the video's
   own opacity dip mid-loop, see hero-video.js), so a competing still
   photo underneath would look like a mismatched double-exposure
   instead of a clean fade. About page keeps the shared photo
   fallback; only the front page (behind the video) needs this. */
.section-hero {
  background-image: none;
  background-color: var(--brand-color-dark);
}

/* Front-page load-in — header slides down into place. Pairs with
   .page-transition-in. Only the front page replays this sequence on
   load. .section-hero__cta no longer joins in (used to slide up into
   place here too) — it's permanently in its small/shrunk state now
   (see section-hero.css), no entrance animation needed. */
.site-header {
  transform: translateY(0);
  /* translate + background-color: header.css's auto-hide and its own
     transition, listed here too since this declaration replaces that
     list. */
  transition: transform 1s var(--theme-ease-signature) 1s, translate 0.35s var(--theme-ease-signature), background-color 0.35s ease-in-out;

  @starting-style {
    transform: translateY(-200%);
  }
}

/* Gated on body.is-hero-video-ready (see page-transition.css's own
   comment on the same class) instead of @starting-style, so this
   starts 2.5s after the video's actually playing rather than a guessed
   delay from page load. */
.site-header__cell--logo {
  position: relative;
  background-color: var(--brand-color-dark);
  margin-right: -200%;
  transition: margin-right 1s var(--theme-ease-signature) 3.5s, background-color 1s var(--theme-ease-signature) 4s;
  backdrop-filter: blur(40px);
  background-color:
}

body.is-hero-video-ready .site-header__cell--logo {
  background-color: rgb(0 0 0 / 20%);
  margin-right: 0%;
}

/* Hero heading — gated on body.is-hero-video-ready like the entrance
   above, instead of section-hero.css's @starting-style (2.5s from page
   load, which landed while the wordmark was still up whenever the video
   took a while to get going). Comes in near the end of the whole
   intro (page-transition.css: the shape scales up from 5.5s and fades
   out at 5.75s), once the wordmark and logo cell are done.
   Logged-in users skip the entrance overlay, so no wait there. */
.section-hero__image-overlay .hero__heading {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 1s var(--theme-ease-signature) 5s, transform 1s var(--theme-ease-signature) 5s;
}

body.logged-in .section-hero__image-overlay .hero__heading {
  transition-delay: 0.5s;
}

body.is-hero-video-ready .section-hero__image-overlay .hero__heading {
  opacity: 1;
  transform: translateY(0);
}

/* Per-loop hide, driven by hero-video.js reading the video's own
   data-heading-hide-at (currentTime past that mark = the footage is
   into its logo animation). Fades out fast, no delay — only the
   reappearance on the next loop restart needs to wait for the logo
   animation to clear, and that reuses the base rule's own 1s/5s
   transition above (removing this class falls back to it), the same
   timing the very first reveal uses. */
body.is-hero-video-ready .section-hero__image-overlay.hero-heading-hidden .hero__heading {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.4s var(--theme-ease-signature), transform 0.4s var(--theme-ease-signature);
}

/* Mobile pre-reveal offset — -200% would push the logo cell too far off
   at header.css's narrower span-4 width. Compound selector so it beats
   the base -200% above, while the body.is-hero-video-ready rule (one
   type selector more specific) still wins once the video's ready — no
   !important, so the reveal actually happens. */
@media (width <= 768px) {
  .site-header__cell.site-header__cell--logo {
    margin-right: -50%;
  }
}


/* Pulls the portfolio heading up to overlap the hero section above it
   — front-page-specific layout, not part of the generic
   .section-objects rules in parts/section-objects-news.css. */
.section-objects {
  padding-top: 0;
}

.section-objects h2 {
  margin-top: -10rem;
  position: relative;
  z-index: 1;
}

/* Tablet/narrow tier, same layered approach as archive-object.css's
   identical pattern for the portfolio page — first object becomes a
   full-width featured card (both new columns), the rest sit 2 per row
   below it. Needs its own explicit <=768px revert below too, not just
   relying on brand-grid.css's shared 1-col rule at that width to win
   on its own — compound-selector specificity here persists past its
   own media query regardless of which query is narrower. */
@media (width <= 1024px) {
  .section-objects .object-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-objects .object-grid .object-card {
    grid-column: span 1;
  }

  .section-objects .object-grid .object-card[data-featured] {
    grid-column: span 2;
  }
}

@media (width <= 768px) {
  .section-objects .object-grid {
    grid-template-columns: 1fr;
  }

  .section-objects .object-grid .object-card[data-featured] {
    grid-column: span 1;
  }
}

/* Overrides .section-cta__frame's ::before spacer for this one
   front-page usage only — was .brand__frame::before when this section
   still shared that utility class. */
.section-cta .section-cta__frame::before {
  /* margin-top: calc(var(--theme-section-padding) * -1); */
}

@media (width <= 768px) {
  .section-objects h2 {
    padding: 0 var(--theme-space-sm);
    margin-top: -8rem;
  }
}

@media (width <= 640px) {
  .section-objects h2 {
    padding: 0 var(--theme-space-xs);
    margin-top: -8rem;
  }
}