/* ==========================================================================
   Neighborhood Cutz  ·  neighborhoodcutz.com

   Design and development by NORTH CODE LLC
   https://northcodellc.com  ·  hello@northcodellc.com

   Copyright (c) 2026 North Code LLC. All rights reserved.
   Original work, licensed to Neighborhood Cutz for use on this domain.
   Not to be copied, republished or adapted for another site without
   written consent.
   ========================================================================== */

/* HERO
   Full-viewport video, centre logo, load counter and the open/closed card. */

/* ============================================================
   8. HERO
   ============================================================ */
.section-hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: #000; }
.hero-bg { position: absolute; inset: 0; }

/* Laid out once at full size and NEVER hidden, clipped or resized. The
   Vimeo iframe must look like a plain visible embed from the first paint:
   clipping it to nothing (or opacity:0 + visibility) makes Chromium
   throttle the cross-origin frame, and the player then refuses to start
   playback for ~30s. The intro instead covers it with .hero-aperture
   below and reveals it by moving the covers, not the frame. */
.hero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden; z-index: 1;
}
.hero-media-inner { width: 100%; height: 100%; }
.hero-media-fill { position: relative; width: 100%; height: 100%; overflow: hidden; }
.hero-media-fill video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Iframe embeds cannot use object-fit and the hero box changes aspect
   ratio mid-animation, so size against the container's own box. */
.hero-media-fill { container-type: size; }
.hero-media-fill iframe {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  z-index: 1;                       /* above the poster */
  border: 0; pointer-events: none;
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
}
.hero-scrim { position: absolute; inset: 0; z-index: 2; background: #000; opacity: .35; pointer-events: none; }

/* The reveal aperture: four opaque panels over the media that scale away
   toward their own edge. Where they part, a centred rectangle of video
   appears — the same hole clip-path drew, but the iframe underneath stays
   fully visible to the browser the whole time. Panels are 50.5% deep so
   opposite pairs overlap at the centre; without that, subpixel rounding
   shows a hairline of video down the middle before the reveal. */
.hero-aperture { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-aperture i { position: absolute; display: block; background: #000; will-change: transform; }
.hero-aperture .top    { top: 0; left: 0; right: 0; height: 50.5%; transform-origin: 50% 0; }
.hero-aperture .bottom { bottom: 0; left: 0; right: 0; height: 50.5%; transform-origin: 50% 100%; }
.hero-aperture .left   { top: 0; bottom: 0; left: 0; width: 50.5%; transform-origin: 0 50%; }
.hero-aperture .right  { top: 0; bottom: 0; right: 0; width: 50.5%; transform-origin: 100% 50%; }

/* Poster frame, sits under the video player. Lives at images/hero-poster.jpg
   (the URL below resolves relative to this CSS file). Replace it whenever the
   video changes, or the still and the first frame will not match. */
.hero-still {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../images/hero-poster.jpg');
  background-size: cover; background-position: center;
  background-color: #16181a;
}

/* Preloader counter. Bottom centre, and ABOVE the red transition panel
   (z-index 9999 in effects.css): the red screen is the loading screen,
   and the counter runs on top of it. Plain white, no blend — the brand
   red bar would vanish against the red panel.
   For bottom-LEFT instead, change justify-content to flex-start and
   .loader's align-items to flex-start. */
.loader-wrap {
  position: absolute; inset: 0; z-index: 10000; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 var(--pad-global) 2.75em;
}
.loader { opacity: 0; display: flex; flex-direction: column; align-items: center; gap: .75em; color: #fff; }
.loader-bar { width: 7em; height: 1px; background: rgba(255,255,255,.35); }
.loader-bar-inner { width: 0%; height: 100%; background: #fff; }

/* Centre logo with its own crop marks */
.hero-logo-wrap {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  z-index: 5; transform: scale(0); transform-origin: center;
  width: 30em; height: 12em; display: grid; place-items: center; gap: .5em;
  align-content: center; text-align: center;
}
.hero-logo {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.4em; line-height: .92; letter-spacing: -.05em;
  color: #fff; mix-blend-mode: difference;
}
.hero-sub { color: #fff; mix-blend-mode: difference; }
.hero-logo-wrap .crop { color: #fff; mix-blend-mode: difference; opacity: 0; }
@media (max-width: 767px) {
  .hero-logo-wrap { width: 17em; height: 11em; }
  .hero-logo { font-size: 2em; }
}

/* Bottom bar: copy left, live status card right */
.hero-bottom { position: absolute; left: 0; right: 0; bottom: 1.75em; z-index: 6; }
.hero-bottom > .container { opacity: 0; transform: translateY(2em); }
.hero-copy { grid-column: 1 / 6; color: #fff; mix-blend-mode: difference; display: flex; flex-direction: column; gap: .75em; }
.hero-status {
  grid-column: 9 / 13; display: flex; flex-direction: column; gap: .6em;
  background: rgba(0,0,0,.4); backdrop-filter: blur(20px); padding: 1em; color: #fff;
}
/* The page h1. Deliberately small: it is a line of copy in the bottom
   bar, not the display type. The wordmark above already carries the
   visual weight, and an h1 at --t-h-lg here would fight it and overrun
   the bar on a phone. Sizing is em, so it still scales with the
   viewport like everything else. */
.hero-h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5em; line-height: 1.05; letter-spacing: -.03em;
  max-width: 14em;
}
.hero-trust { color: rgba(255,255,255,.75); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6em; }
/* .btn sets align-self: flex-start for a column parent. In this row it
   would shrink the buttons to different heights. */
.hero-actions .btn { align-self: stretch; }
.hero-status .btn { border-color: rgba(255,255,255,.5); }
.hero-status .btn.is-solid { border-color: var(--c-brand); }
.status-line { display: flex; align-items: center; gap: .5em; font-size: var(--t-tag); letter-spacing: .06em; }
.status-dot { width: .5em; height: .5em; flex: none; background: var(--c-line); border-radius: 50%; }
.status-dot.is-open { background: var(--c-open); box-shadow: 0 0 0 0 rgba(28,156,74,.7); animation: pulse 2.4s infinite; }
.status-dot.is-closed { background: var(--c-brand); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(28,156,74,.6); }
  70%  { box-shadow: 0 0 0 .55em rgba(28,156,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(28,156,74,0); }
}
@media (max-width: 991px) {
  /* The bar carries an h1, two buttons and the rating line now. Give the
     copy and the status card the full width each rather than squeezing
     both onto one row. */
  .hero-copy { grid-column: 1 / 8; }
  .hero-status { grid-column: 8 / 13; }
}
@media (max-width: 767px) {
  .hero-copy { grid-column: 1 / 5; }
  .hero-status { grid-column: 1 / 5; margin-top: 1em; }
  .hero-h1 { font-size: 1.25em; max-width: none; }
  /* Side by side these two wrap to four lines on a 375px screen. */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { justify-content: center; }
}