/* Muse v9 hero: one full-bleed canvas image sequence, scroll only.
   Edge integration after pro-kit/references/edge-integration.md:
   - canvas paints its own bottom feather + scrim (canvas-overlay.js), no CSS mask on the canvas;
   - stage and bridge use the footage edge tones from assets/seq/manifest.json
     (top #44362b; bottom hue #513e33 held darker, see HANDOFF.md);
   - copy sits in the dark left zone, never over the face. */

@property --edge-top { syntax: '<color>'; inherits: true; initial-value: #3a2e25; }
@property --edge-bottom { syntax: '<color>'; inherits: true; initial-value: #231b16; }

.legacy-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.muse-hero {
  position: relative;
  color: #f4eae0;
  background: var(--bg, #080c0d);
  --edge-top: #3a2e25;
  --edge-bottom: #231b16;
  --feather: 0.3;
  --hero-accent: #ec9975;
}
.hero__stage {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(to bottom, var(--edge-top) 0%, var(--edge-bottom) 72%);
}
.hero__poster, .hero__poster img, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster img { object-fit: cover; object-position: 30% 40%; display: block; }
.hero__canvas { opacity: 0; }
.muse-hero.is-live .hero__canvas { opacity: 1; }
.muse-hero.is-live .hero__poster { visibility: hidden; }

/* Static layers (poster, veil) get the same bottom feather via CSS mask. */
.hero__poster, .hero__veil {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--feather) * 100%), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - var(--feather) * 100%), transparent 100%);
}
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 45%),
    linear-gradient(to right, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0) 70%);
}
.muse-hero.is-live .hero__veil { display: none; }

/* Header legibility over the warm key light in the top-left of the frame. */
.hero__stage::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 150px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(8, 7, 6, 0.62), rgba(8, 7, 6, 0));
}

/* Bridge: stage bottom tone -> the portfolio's own ground (#102622), no band. */
.muse-hero::after {
  content: ''; display: block; height: 30vh;
  background: linear-gradient(to bottom, var(--edge-bottom) 0%, #141d1a 45%, #102622 100%);
}

/* ---------------------------------------------------------------- copy */
.hero__copy {
  position: absolute; z-index: 2;
  left: 4vw; top: clamp(112px, 17vh, 190px);
  width: min(29vw, 440px);
}
.hero__copy .eyebrow { font-size: 11px; letter-spacing: 0.12em; color: #dcefe8; margin: 0 0 20px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.6); }
.hero__copy h1 { font: clamp(104px, 11.4vw, 200px)/0.8 Display; letter-spacing: -0.025em; margin: 0; color: #f4eae0; text-shadow: 0 2px 36px rgba(0, 0, 0, 0.35); }
.hero__copy h1 span { display: block; }
.hero__copy h1 .brand-tail { color: var(--hero-accent); margin-top: 16px; }
.hero__lede { font-size: 16px; line-height: 1.6; color: #e2e6de; margin: 30px 0 22px; max-width: 30ch; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5); }
.hero__copy .cut-button { font-size: 11px; min-height: 52px; }

.hero__meta {
  position: absolute; z-index: 2; left: 4vw; right: 4vw; bottom: 26px;
  display: flex; align-items: center; gap: 22px; padding-top: 16px;
  border-top: 1px solid rgba(196, 201, 183, 0.22);
}
.hero__meta p { flex: 1; font: 15px/1.5 Heading; color: var(--hero-accent); margin: 0; }
.hero__cue { font-size: 11px; letter-spacing: 0.08em; display: flex; align-items: center; min-height: 44px; color: #e2e6de; }

.hero__stills { display: none; }
.hero__beats { display: none; }
.muse-hero .nojs-note { position: absolute; z-index: 2; left: 4vw; bottom: 90px; font-size: 12px; margin: 0; }

/* The v8 copper rule under the hero would be a hard line at the bridge. */
.muse-hero + .portfolio { border-top: 0; }

@media (min-width: 768px) and (max-height: 800px) and (min-aspect-ratio: 1/1) {
  .hero__copy { top: 104px; }
  .hero__copy h1 { font-size: clamp(96px, 10vw, 150px); }
  .hero__lede { font-size: 14px; margin: 22px 0 16px; }
  .hero__meta { bottom: 14px; padding-top: 10px; }
}

/* ------------------------------------------------------- phone / portrait */
@media (max-width: 767px), (max-aspect-ratio: 1/1) {
  .hero__stage { min-height: 600px; }
  .hero__poster img { object-position: 72% 50%; }
  /* Compact block that starts below the chin (the portrait frame already fills the height). */
  .hero__copy { top: auto; left: 24px; right: 24px; width: auto; bottom: 66px; }
  .hero__copy .eyebrow { font-size: 10px; margin-bottom: 10px; }
  .hero__copy h1 { font-size: clamp(60px, 18vw, 96px); white-space: nowrap; }
  .hero__copy .cut-button { min-height: 46px; }
  .hero__copy h1 span { display: inline; }
  .hero__copy h1 .brand-tail { margin: 0; }
  .hero__lede { font-size: 14px; line-height: 1.45; margin: 10px 0 12px; }
  .hero__copy .cut-button { max-width: none; }
  .hero__meta { left: 24px; right: 24px; bottom: 16px; padding-top: 8px; gap: 12px; }
  .hero__meta p { font-size: 12px; }
  .hero__cue { display: none; }
  .hero__veil {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.62) 50%, rgba(0, 0, 0, 0.1) 80%);
  }
}
@media (max-width: 767px) and (max-height: 700px) {
  .hero__copy h1 { font-size: 60px; }
  .hero__lede { font-size: 13px; margin: 8px 0 10px; }
  .hero__copy .eyebrow { margin-bottom: 6px; }
}

/* --------------------------------------- static path: reduced motion / no JS */
.no-js .hero__canvas, .is-static .hero__canvas { display: none; }
.no-js .hero__poster, .is-static .hero__poster { visibility: visible; }
.is-static .muse-hero::after, .no-js .muse-hero::after { height: 10vh; }
.is-static .hero__stills:not(:empty) {
  display: grid; gap: 16px; padding: 6vh 4vw 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  background: var(--edge-bottom);
}
.hero__stills figure { margin: 0; }
.hero__stills img { width: 100%; height: auto; display: block;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 60%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 60%, transparent 100%); }
.hero__stills figcaption { margin-top: 8px; font-size: 0.85rem; color: #e2e6de; }