/* ==========================================================================
   SNICKERS BARBER — v2 hero overrides
   Loaded after style.css. Only touches the hero, so the rest of the design
   system stays shared with the original page.
   ========================================================================== */

/* --- Pillarbox crop ------------------------------------------------------
   The tools clip is 1280x720 with a baked-in 100px black bar down each side
   (7.81% per side, 1080px of real picture). object-fit: cover alone does not
   remove them: at a 16:10 viewport it only trims ~5% per side, leaving a
   visible black strip. Scaling the frame by 1.22 pushes both bars outside
   the viewport with a margin to spare, at the cost of ~9% off the top and
   bottom — where this clip has only empty backdrop anyway. */
.hero--tools .hero__video {
  transform: scale(1.22);
  transform-origin: center center;
}

/* --- White palette -------------------------------------------------------
   Retunes the page from the warm cream base to white. The tokens cover most
   of it, but style.css also hardcodes the cream as rgba(246,241,232,…) in a
   few places (sticky header, hero veil, lightbox chrome), so those are
   restated below — otherwise the header would still wash cream over a white
   page. The raised tone stays a hair off-white so the stats band and photo
   frames remain visible as bands instead of vanishing into the background. */
:root {
  --color-bg: #FFFFFF;
  --color-bg-raised: #F2F2F0;
  --color-surface: #FAFAFA;
}

.site-header {
  background: rgba(255, 255, 255, 0.82);
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
}

/* Lightbox chrome sits on a near-black scrim, so these need the new light
   tone too or the controls keep a cream cast against white imagery. */
.lightbox__counter {
  color: rgba(255, 255, 255, 0.7);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  border-color: rgba(255, 255, 255, 0.35);
}

.lightbox__close:hover, .lightbox__close:focus-visible,
.lightbox__prev:hover, .lightbox__prev:focus-visible,
.lightbox__next:hover, .lightbox__next:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.7);
}

/* --- Veil ----------------------------------------------------------------
   This clip is the inverse of the mirror one: a bright near-white studio
   backdrop, so the black wordmark reads unaided most of the time. The risk
   is the falling tools — they are near-black and pass straight through the
   centre, collapsing contrast for the frames they cover the type. A soft
   white wash keeps those frames legible while staying far lighter than the
   veil the dark clip needed. */
.hero--tools .hero__veil {
  background:
    radial-gradient(62% 46% at 50% 48%,
      rgba(255, 255, 255, 0.72) 0%,
      rgba(255, 255, 255, 0.58) 40%,
      rgba(255, 255, 255, 0.30) 66%,
      rgba(255, 255, 255, 0.08) 85%,
      rgba(255, 255, 255, 0) 100%);
}

/* The clip's own backdrop is near-white, so the cream page colour is a
   closer match than the black used behind the mirror footage — this only
   shows for the instant before the poster paints. */
.hero--tools {
  background: var(--color-bg);
}

/* --- Hero type entrance --------------------------------------------------
   The shared 18px rise was too short to read as movement against footage —
   it looked like the type simply faded in on the spot. Longer travel, longer
   duration, and a symmetric ease so it drifts up and settles rather than
   snapping into place. Pure translateY: no scale, so the wordmark never
   looks like it is zooming at the viewer. */
@keyframes hero-rise-soft {
  from { opacity: 0; transform: translateY(56px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero--tools .hero__name,
.hero--tools .hero__tagline {
  opacity: 0;
  animation: hero-rise-soft 1400ms cubic-bezier(0.33, 0, 0.12, 1) forwards;
}

.hero--tools .hero__name { animation-delay: 900ms; }
.hero--tools .hero__tagline { animation-delay: 1450ms; }

/* This file loads after style.css, so its reduced-motion block would
   otherwise be overridden by the rules above — restate it here. */
@media (prefers-reduced-motion: reduce) {
  .hero--tools .hero__name,
  .hero--tools .hero__tagline {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* --- About: brand mark ---------------------------------------------------
   Fills the empty column beneath the bio, where the text ran short against
   the portrait next to it. Sized off the text column rather than the raw
   asset so it stays subordinate to the name above it. The PNG carries its
   own transparency, so it needs no plate behind it and works if the page
   background changes again. */
.about__logo {
  display: block;
  width: clamp(150px, 45%, 240px);
  height: auto;
  margin-top: 2rem;
  opacity: 0.9;
}

@media (max-width: 899px) {
  /* The portrait moves below the text on narrow screens, so the mark would
     otherwise sit wedged between the two. */
  .about__logo {
    width: clamp(140px, 38vw, 200px);
    margin-top: 1.75rem;
  }
}