/* Hero: wordmark + photo. Overrides the base .mast rules from vibes.tokenized.css. */

:root {
  --cb-bg: 246, 246, 246;
  --cb-highlight: 34, 34, 34;
  --color-fill-light: #8a8a8a;
  /* Both wordmark lines share this. 400 is the lightest weight in the
     Rethink Sans variable file and matches the reference lockup; 700 is the
     previous heavier setting. */
  --wordmark-weight: 400;
  /* Wipe-up reveal. The names land first, hold, then the grey ground and
     portrait wipe up from the bottom while the type flips dark -> white.
     Measured off the reference: ~450ms wipe, mild ease-out. */
  /* Fraction of the full hero width the last name fills. 1 = edge to edge.
     Lower values shrink both lines together and pull the block down the
     torso, since the wordmark is bottom-anchored. */
  --wordmark-fit: 0.5;
  /* Scroll parallax. scripts.js already publishes --plax on .mast as
     scrollY * 0.48, capped at the hero's own height. The reference drifts
     its portrait at 0.079px per px of scroll, so scale that down:
     0.48 * 0.165 = 0.079. The type is left at natural scroll speed - the
     portrait lagging is what reads as the type moving faster. */
  --photo-drift: 0.165;
  --wipe-delay: 1.5s;
  --wipe-dur: .45s;
  --wipe-ease: cubic-bezier(.33,.7,.35,1);
}

.mast {
  position: relative;
  background: rgb(var(--cb-bg));
  min-height: 100vh;
  overflow: hidden;
}
.mast:before,
.mast:after { content: none; }
/* content:none stops the box being generated but Chrome still fetches a
   background-image declared on the pseudo-element, so vibes.tokenized.css's
   640KB gi_full.lum.4.webp downloaded on every load with nothing painting it. */
.mast:before { background-image: none; }

/* The grey ground, revealed by a bottom-up clip wipe. Sits above the light
   .mast background and below the wordmark, so the portrait and type ride
   over it once it lands. A real element rather than .mast:before, which the
   base stylesheet already loads with a background image, its own opacity,
   a parallax transform, and `right` overrides at several breakpoints. */
.mast-wipe {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 38%, #c7c7c7 0%, #b0b0b0 45%, #8c8c8c 100%);
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--wipe-dur) var(--wipe-ease);
  transition-delay: var(--wipe-delay);
}
.loaded .mast-wipe { clip-path: inset(0 0 0 0); }

.name-wordmark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-inline-start: var(--outerPad);
  padding-inline-end: var(--outerPad);
  padding-block-end: 0.04em;
  /* Both lines share one size. The fit routine in index.html sets it so the
     last name spans the full hero width; the first name inherits and lands
     about half as wide, matching the reference lockup. This clamp is the
     pre-JS fallback. */
  font-size: clamp(4.5rem, 26vw, 24rem);
}
.name-wordmark .line {
  display: block;
  /* Colour lives here, not on the spans: the inline per-letter
     transition-delay in the markup would otherwise pin the dark -> white
     flip to each letter's entrance instead of to the wipe. */
  color: #1a1a1a;
  transition: color var(--wipe-dur) var(--wipe-ease);
  transition-delay: var(--wipe-delay);
  /* Reveal mask. Padding extends the mask below the baseline so descenders
     (the g in gabe / iglesias) are not clipped; .line-1 reclaims the space. */
  overflow: hidden;
  padding-block-end: 0.26em;
  font-family: var(--font-standard);
  font-weight: var(--wordmark-weight);
  font-size: inherit;
  line-height: 1.08;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
.name-wordmark .line span {
  display: inline-block;
  color: inherit;
  opacity: 0;
  transform: translateY(130%);
  transition: transform .5s cubic-bezier(.23,1,.32,1), opacity .5s ease;
}
.loaded .name-wordmark .line { color: #fdfdfd; }
.loaded .name-wordmark .line span { opacity: 1; transform: none; }

/* Both lines sit above the photo (z-index 2); the last name sits above the
   first where they overlap. */
.name-wordmark .line-1 {
  position: relative;
  z-index: 3;
  margin-block-end: -0.26em;
}
.name-wordmark .line-2 {
  position: relative;
  z-index: 4;
  /* Set from real font metrics by the fit routine in index.html: the g of
     "gabe" and the ascenders of "iglesias" share the same x range, so the
     lines have to clear rather than overlap. This is the pre-JS fallback. */
  margin-block-start: var(--line-lead, -0.07em);
  margin-block-end: -0.06em;
  white-space: nowrap;
}
.name-wordmark .line-2 span:last-child { margin-inline-end: -0.02em; }

.name-photo {
  position: absolute;
  z-index: 2;
  /* Sized and placed to match the reference's figure proportions, measured
     off both silhouettes: head top at 11.5% of the hero, head width at 24.7%
     of hero height, shoulders at ~51%. Our cutout is a taller, narrower crop
     than theirs, so it has to run past the hero's bottom edge to put the head
     and shoulders in the same place. */
  left: 62.5%;
  bottom: -30.8%;
  top: auto;
  height: 119.5%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  filter: grayscale(1);
  /* Parallax rides on the standalone `translate` property so it composes with
     - and is not eased by - the entrance transition on `transform`. */
  translate: 0 calc(var(--plax, 0px) * var(--photo-drift));
  opacity: 0;
  transform: translateX(-50%) translateY(6%) scale(1.04);
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  transition-delay: calc(var(--wipe-delay) + .06s);
}
.loaded .name-photo { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* Header pill: hidden until the hero scrolls out of view.
   Extra class chain needed to outrank the generic .loaded .drift reveal rule. */

.me.jelly.noline.drift.left {
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
body.hero-cleared .me.jelly.noline.drift.left {
  opacity: 1;
  pointer-events: auto;
}

@media screen and (width < 768px) {
  .name-wordmark {
    padding-inline-start: 6vw;
    padding-inline-end: 6vw;
    font-size: clamp(2.75rem, 26vw, 8rem);
    /* Narrow screens never had the height problem - the block already sits in
       the lower third - and shrinking it here just makes the name a caption. */
    --wordmark-fit: 1;
  }
  /* The desktop figure is placed to match the reference's proportions in a
     landscape hero. A narrow portrait frame needs its own placement, so pin
     all three here rather than inheriting the desktop left. */
  .name-photo { left: 56%; height: 68%; bottom: -8%; }
}