/* 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;
}

.mast {
  background: radial-gradient(circle at 50% 38%, #c7c7c7 0%, #b0b0b0 45%, #8c8c8c 100%);
  min-height: 100vh;
  overflow: hidden;
}
.mast:before,
.mast:after { content: none; }

.name-wordmark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-inline-start: var(--outerPad);
  transform: translateY(0.06em);
}
.name-wordmark .line {
  display: block;
  overflow: hidden;
  font-family: var(--font-standard);
  font-weight: 700;
  font-size: clamp(4.5rem, 15vw, 13.5rem);
  line-height: 1.08;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
.name-wordmark .line span {
  display: inline-block;
  color: #1a1a1a;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.23,1,.32,1), opacity .5s ease, color .3s cubic-bezier(.23,1,.32,1);
}
.loaded .name-wordmark .line span { color: #fdfdfd; opacity: 1; transform: none; }
.name-wordmark .line-1 { position: relative; z-index: 1; }
.name-wordmark .line-2 { position: relative; z-index: 3; margin-block-start: -0.3em; }

.name-photo {
  position: absolute;
  z-index: 2;
  left: 56%;
  bottom: -9%;
  top: auto;
  height: 86%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom;
  filter: grayscale(1);
  opacity: 0;
  transform: translateX(-50%) translateY(6%) scale(1.04);
  transition: transform 1s cubic-bezier(.16,1,.3,1), opacity .8s ease;
  transition-delay: .15s;
}
.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; }
  .name-wordmark .line { font-size: clamp(2.75rem, 16vw, 4.5rem); }
  .name-photo { height: 68%; bottom: -8%; }
}