/* ------------------------------------------------------------------
   Home: one full-viewport composition, no scroll.
   Matches the "Personal Showcase" reference: flat mist background, navy type,
   a slow name marquee behind a portrait cutout, quiet chrome in the corners.
------------------------------------------------------------------ */
:root {
  --stage-bg: var(--paper);
  --footer-h: 136px;              /* desktop: rule sits just above this band */
  --rise: cubic-bezier(0.22, 1, 0.36, 1);
  --sweep: cubic-bezier(0.76, 0, 0.24, 1);
}

html.hero-page, body.hero-page { height: 100%; overflow: hidden; }
/* The hero never scrolls, so it gives back the scrollbar space other pages keep
   (base.css) and the name runs edge to edge. --hero-sb is that width; the
   header, rule, footer and portrait step in by it to stay where they are on
   every other page. */
html:has(> body.hero-page) { scrollbar-gutter: auto; --hero-sb: var(--scrollbar, 0px); }
body.hero-page { background: var(--stage-bg); color: var(--ink); }

.stage {
  position: relative; height: 100dvh; width: 100%; overflow: hidden;
  background: var(--stage-bg);
  animation: stage-fade 0.8s ease-out both;
}

/* Marquee name (behind the portrait) ------------------------------- */
.stage__name {
  position: absolute; inset-inline: 0; top: 14vh; z-index: 1;
  overflow: hidden;
}
.stage__track {
  display: flex; width: max-content; white-space: nowrap;
  animation: marquee 30s linear infinite;
}
.stage__name-text {
  display: inline-block; padding-right: 6vw;
  font-family: var(--sans); font-weight: 300;
  font-size: 26vh; line-height: 1; letter-spacing: -0.03em;
  color: var(--accent);
}

/* Portrait --------------------------------------------------------- */
.stage__figure { display: contents; margin: 0; }
.stage__portrait {
  position: absolute; z-index: 2;
  left: calc(50% - var(--hero-sb, 0px) / 2); bottom: 0;
  height: min(82vh, 56vw);        /* never wide enough to reach the corner chrome */
  width: auto; max-width: none;
  transform: translateX(-50%);
  pointer-events: none; user-select: none;
  animation: portrait-rise 1.1s var(--rise) 0.1s both;
}

/* Header (shared, in base.css) ------------------------------------
   On the desktop hero it sits straight on the stage, over the name, as in
   the reference; it fades in with the stage on a fresh load only. */
@media (min-width: 901px) {
  .hero-page .site-header { background: transparent; }
}
:root:not([data-arrived]) .hero-page .site-header { animation: stage-fade 0.8s ease-out both; }

/* Rule and footer -------------------------------------------------- */
.stage__rule {
  position: absolute; z-index: 1;
  inset-inline: var(--stage-gutter) calc(var(--stage-gutter) + var(--hero-sb, 0px)); bottom: var(--footer-h);
  height: 2px; background: var(--ink);
  transform-origin: left; animation: rule-grow 1.1s var(--sweep) 0.6s both;
}
.stage__footer {
  position: absolute; inset-inline: 0 var(--hero-sb, 0px); bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 0 var(--stage-gutter) 32px;
  font-size: 14px; line-height: 1.6;
}
.stage__blurb { max-width: 220px; }
.stage__blurb-line { font: inherit; margin: 0; }
.stage__blurb-line--soft { color: var(--ink-soft); }

/* Footer links: plain right-aligned text, like the reference ------- */
.stage__links { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.stage__links a { transition: opacity 0.3s var(--ease); }
.stage__links a:hover { opacity: 0.6; }
.stage__links a:active { opacity: 0.4; transition-duration: 0.08s; }

/* Keyframes -------------------------------------------------------- */
@keyframes stage-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes portrait-rise {
  from { opacity: 0; transform: translate(-50%, 2.5vh); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes rule-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Responsive ------------------------------------------------------- */
@media (max-width: 900px) {
  /* Phones and narrow windows: a stacked column. The portrait box takes exactly
     the height that is left; its width follows from that height (aspect-ratio),
     so the crop always lands at the chest whatever the window shape. */
  /* Room for the fixed header's text; its bottom padding may overlap the name's margin */
  .stage { display: flex; flex-direction: column; padding-top: calc(var(--header-h) - 16px); padding-right: var(--hero-sb, 0px); }

  .stage__name { position: static; order: 2; flex: none; margin-top: 6vh; margin-right: calc(-1 * var(--hero-sb, 0px)); }
  .stage__name-text { font-size: min(15vh, 34vw); }

  .stage__footer { position: static; order: 3; flex: none; flex-direction: column; align-items: stretch; gap: 18px; padding: 4vh var(--stage-gutter) 0; font-size: 13px; }
  .stage__blurb { max-width: none; }
  .stage__blurb-line br { display: none; }
  .stage__links { align-items: flex-start; text-align: left; }

  .stage__rule { position: static; order: 4; flex: none; margin: 24px var(--stage-gutter) 0; }

  .stage__figure {
    display: block; order: 5;
    flex: 1 1 0; min-height: 300px;     /* exactly the leftover height */
    width: auto; max-width: 100%;
    aspect-ratio: 1.12 / 1;          /* width from height: head and shoulders fill the box */
    margin: 16px auto 0;
    overflow: hidden;
    animation: portrait-rise-stacked 1.1s var(--rise) 0.1s both;
  }
  .stage__portrait {
    position: static; display: block;
    width: 100%; height: 100%; max-width: none;
    object-fit: cover; object-position: top center;
    transform: none; animation: none;
  }
}
/* Windows too short to hold the column: the page scrolls, and the portrait moves
   up under the name so her whole face is in view on open. The box fades out at
   the bottom instead of ending in a hard edge; blurb, rule and buttons follow. */
@media (max-width: 900px) and (max-height: 760px) {
  html.hero-page, body.hero-page { height: auto; overflow: auto; }
  html:has(> body.hero-page) { scrollbar-gutter: stable; --hero-sb: 0px; }
  .stage { height: auto; min-height: 100dvh; overflow: visible; }
  .stage__name { margin-top: 4vh; }
  .stage__figure {
    order: 3; flex: none; height: max(50vh, 300px); margin-top: 3vh;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  .stage__rule { order: 4; margin: 0 var(--stage-gutter); }
  .stage__footer { order: 5; padding: 20px var(--stage-gutter) 32px; }
}
@keyframes portrait-rise-stacked {
  from { opacity: 0; transform: translateY(2.5vh); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .stage, .stage__portrait, .stage__rule { animation-duration: 0.01ms; animation-delay: 0s; }
  .stage__track { animation: none; }
}