/* The photo hero, shared by the home and Photography pages. */

/* ---- Hero ---- */

.hero {
  --hero-fade: 1;
  position: relative;
  height: 100svh; min-height: 520px;
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) clamp(40px, 9vh, 96px);
}

.hero__stage {
  position: absolute; inset: 0;
  opacity: var(--hero-fade);
  background: var(--bg);
}

.hero__canvas {
  position: absolute; inset: -2%;
  width: 104%; height: 104%;
  filter: blur(5px) saturate(1.1);
  animation: hero-in 2.4s var(--ease) both;
}

.hero__stage--fallback .hero__fallback {
  position: absolute; inset: -10%;
  width: 120%; height: 120%;
  object-fit: cover;
  filter: blur(48px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

@keyframes hero-in { from { opacity: 0; } to { opacity: 1; } }

.hero__stage::after {
  /* keeps the type readable over bright frames */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0) 45%);
}

.hero__content { position: relative; opacity: var(--hero-fade); }

.hero__name { margin: 0; font-size: clamp(4rem, 14vw, 13rem); }

.hero__roles { margin: 16px 0 0 0.3em; font-size: clamp(1rem, 1.6vw, 1.25rem); }

.hero__cue {
  position: absolute; right: var(--gutter); bottom: clamp(40px, 9vh, 96px);
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim);
  opacity: var(--hero-fade);
}

.hero__cue::after {
  content: ''; display: block; width: 1px; height: 40px; margin: 12px auto 0;
  background: currentColor;
  transform-origin: top;
  animation: cue 2.2s var(--ease) infinite;
}

@keyframes cue {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* Compact: as tall as its title needs plus some breathing room (Photography page). */
.hero--compact {
  height: auto; min-height: 0;
  padding-top: calc(var(--nav-h) + clamp(72px, 13vh, 150px));
  padding-bottom: clamp(36px, 6vh, 64px);
}
.hero--compact .hero__cue { display: none; }