/* ---------- Welcome video intro ---------- */
.hero {
  position: relative;
  width: 100%;
  /* Fullscreen until JS sets --hero-final-height once the video's
     shrink target is known (see js/intro.js), so the hero hugs the
     video's actual bottom edge instead of staying stuck at 100vh —
     that's what kept the gap to #work inconsistent across formats. */
  height: var(--hero-final-height, 100vh);
  height: var(--hero-final-height, 100dvh);
  overflow: hidden;
  transition: height 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Narrow viewports skip the shrink animation entirely (see
   isNarrowViewport() in js/intro.js) — the hero should land at its
   final height immediately too, not animate into it. */
.hero.is-narrow {
  transition: none;
}

.welcome-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  object-fit: cover;

  transition: top 0.8s cubic-bezier(0.65, 0, 0.35, 1), left 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.8s cubic-bezier(0.65, 0, 0.35, 1), height 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1);

  /* Safari's object-fit: cover can leave a subpixel gap between the video
     and its box, showing the video element's own black background as a
     hairline. Forcing an explicit clip snaps the render to the box. */
  clip-path: inset(0px round var(--video-radius, 0px));
}

/* Wide windows: the video shrinks to its own proportion, centred, the size of
   the one on mouthwash.studio (78% of the width), unless the first line of
   .work-intro would not show under it (js/intro.js, applyCompactSize). Width,
   left, top and height come from the variables that function sets. The corners
   are the ones of the project images (--nav-radius). */
.welcome-video.is-compact {
  --video-radius: var(--nav-radius);
  top: var(--compact-top, 10px);
  left: var(--compact-left, 10px);
  width: var(--compact-width, calc(100% - 20px));
  height: var(--compact-height, calc(100% - 20px));
}

/* Viewports too vertical for object-fit: cover to look right skip the
   full-screen intro entirely and land straight in this static state:
   the video's real proportions, top-aligned and centered, no animation. */
.welcome-video.is-narrow {
  --video-radius: var(--nav-radius);
  transition: none;
  top: 10px;
  left: var(--compact-left, 10px);
  width: var(--compact-width, calc(100% - 20px));
  height: var(--compact-height, calc(100% - 20px));
  object-fit: contain;
}

/* ---------- Entries without the intro: skip it ----------
   Returning from a project page, reloading, opening "/" again or "/work" in the
   same session, or "/contact": index.html's <head> script adds `skip-intro` to
   <html> before first paint, and js/intro.js removes it again once the end
   state has painted. Everything below is the intro's *end state* with no
   transitions, so the first frame is exactly what the animated intro would
   have ended on — JS computes the same sizes from the same rule.
   --skip-h is the video's final height, the same rule as applyCompactSize():
   the least of what 77.78% of the window width gives at 16:9 and the height
   that leaves the first line of .work-intro whole with 24px of air (the top gap
   --skip-top, 10px below the video, .work-intro's padding + one line of its
   text, see css/work-intro.css). --skip-top is 7.22% of the width. Windows
   too vertical for it (the ones that skip the animation, isNarrowViewport())
   take the narrow case: the video's width fitted to the window.
   :where() keeps these at the specificity of the plain rules above so the
   `.is-narrow` / `.is-compact` classes JS adds still win over them. */
:where(html.skip-intro) {
  --skip-top: 7.22vw;
  --skip-h: max(
    120px,
    min(
      calc(77.78vw * 9 / 16),
      calc(100vh - var(--skip-top) - 34px - var(--content-top-space) - 1.1 * clamp(28px, 2.5vw, 56px))
    )
  );
}

@media (max-aspect-ratio: 151/100) {
  :where(html.skip-intro) {
    --skip-top: 10px;
    --skip-h: min(calc((100vw - 20px) * 9 / 16), calc(100vh - 20px));
  }
}

:where(html.skip-intro) .hero,
:where(html.skip-intro) .welcome-video {
  transition: none;
}

:where(html.skip-intro) .hero {
  height: var(--hero-final-height, calc(var(--skip-top) + var(--skip-h) + 10px));
}

:where(html.skip-intro) .welcome-video {
  --video-radius: var(--nav-radius);
  top: var(--skip-top);
  left: calc((100% - var(--skip-h) * 16 / 9) / 2);
  width: calc(var(--skip-h) * 16 / 9);
  height: var(--skip-h);
}

:where(html.skip-intro) .floating-nav {
  transform: translateX(-50%) translateY(0);
  transition: none;
}