/* The hero: a portrait sequence played with the scroll (js/hero.js). */
/* Layout knobs: move the portrait or the headline by changing these. */
.hero {
  --headline-top: 25svh;
  --headline-size: min(30vw, 17svh);
  --portrait-height: 86svh;
  --portrait-left: -24%;
  --portrait-right: -24%;
  --outline-width: 1;
  --ui-inset: var(--gutter);
  /* Where the wall meets the floor, as a share of the photo's height from its top. */
  --horizon: 0.8;

  /* Where the photo lands; set from the frames in js/hero.js, these are only first guesses. */
  --frame-x: 0px;
  --frame-w: 100vw;
  --frame-h: 56vw;
  --floor: calc(var(--frame-h) * (1 - var(--horizon)));

  position: relative;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-bg);
}

/* ---- Studio backdrop: light from the left, as in the photo, and a floor under the chair ---- */
/* Layers, top first: texture; the wall darkening into the cove above the floor; the wall
   falling off into shade away from the light; the light itself. */
.hero__studio {
  --light-x: calc(var(--frame-x) + var(--frame-w) * 0.27);
  --light-y: calc(100% - var(--frame-h) * 0.6);

  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    var(--texture-grain),
    var(--texture-mottle),
    linear-gradient(
      to top,
      var(--color-studio-dim) var(--floor),
      transparent calc(var(--floor) + var(--frame-h) * 0.4)
    ),
    radial-gradient(
      calc(var(--frame-w) * 1.1) calc(var(--frame-h) * 1.5) at var(--light-x) var(--light-y),
      transparent 35%,
      var(--color-studio-corner)
    ),
    radial-gradient(
      calc(var(--frame-w) * 1.2) calc(var(--frame-h) * 2) at var(--light-x) var(--light-y),
      var(--color-studio-light) 15%,
      color-mix(in srgb, var(--color-studio-light), var(--color-studio-shade)) 55%,
      var(--color-studio-shade)
    );
  background-size: auto, cover, auto, auto, auto;
}

/* The floor: darkest in the corner where it meets the wall, catching the light under the chair. */
.hero__studio::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--floor);
  background:
    var(--texture-grain),
    linear-gradient(
      to bottom,
      var(--color-studio-dim),
      color-mix(in srgb, var(--color-studio-dim), transparent 50%) 12%,
      transparent 60%
    ),
    radial-gradient(
      calc(var(--frame-w) * 1.1) calc(var(--floor) * 4) at var(--light-x) 0,
      transparent 35%,
      var(--color-studio-corner)
    ),
    radial-gradient(
      calc(var(--frame-w) * 0.9) calc(var(--frame-h) * 0.5) at var(--light-x) 100%,
      var(--color-studio-light) 30%,
      var(--color-studio-shade)
    );
}

/* ---- Headline: behind the portrait; its outline over her is drawn on the canvas ---- */
.hero__headline {
  position: absolute;
  z-index: 1;
  inset-inline: 0;
  top: var(--headline-top);
  color: var(--color-text);
  pointer-events: none;
  user-select: none;
}

.hero__line {
  display: inline-flex;
  white-space: nowrap;
  padding-inline: var(--gutter);
  font-family: var(--font-heading);
  font-size: var(--headline-size);
  font-style: italic;
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.035em;
  transform-origin: 0 50%;
  will-change: transform;
}

.hero__char,
.hero__char-inner {
  display: inline-block;
  will-change: transform, opacity;
}

/* ---- Portrait ---- */
.hero__portrait {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: var(--portrait-left);
  right: var(--portrait-right);
  height: var(--portrait-height);
  transform-origin: 50% 100%;
  will-change: transform;
}

.hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---- Camera flash: light from the flash on top of her camera scatters, then white ---- */
/* A zero-size point at the camera's flash, as a share of the frame; 0.83 includes the
   portrait's lean-in at the end. The glows are centered on it. */
.hero__flash-point {
  position: absolute;
  z-index: 5;
  left: calc(var(--frame-x) + var(--frame-w) * 0.488);
  top: calc(100% - var(--frame-h) * 0.83);
  pointer-events: none;
}

/* Part of the hero's lighting, like the studio: the other allowed gradients. */
.hero__bloom,
.hero__halo,
.hero__streak {
  position: absolute;
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  width: var(--w);
  height: var(--h);
  visibility: hidden;
  opacity: 0;
}

/* The core of the flash. */
.hero__bloom {
  --w: 60vmax;
  --h: 60vmax;

  background: radial-gradient(closest-side, var(--color-flash) 35%, transparent);
}

/* Light scattered into the room: wide, soft, spreading slower than the core. */
.hero__halo {
  --w: 150vmax;
  --h: 150vmax;

  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-flash) 70%, transparent),
    color-mix(in srgb, var(--color-flash) 25%, transparent) 55%,
    transparent
  );
}

/* The flare a flash leaves across the frame. */
.hero__streak {
  --w: 180vmax;
  --h: 5vmax;

  background: radial-gradient(closest-side, var(--color-flash) 20%, transparent);
}

.hero__flash {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: var(--color-flash);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

/* ---- Small UI ---- */
.hero__top {
  position: absolute;
  z-index: 4;
  top: var(--ui-inset);
  inset-inline: var(--ui-inset);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.hero__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1;
}

.hero__label,
.hero__counter,
.hero__cue {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.hero__label {
  display: none;
  color: var(--color-muted);
}

.hero__counter {
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.hero__counter-total {
  color: var(--color-muted);
}

.hero__subline {
  position: absolute;
  z-index: 4;
  top: calc(var(--ui-inset) + 4.25rem);
  left: var(--ui-inset);
  max-width: min(17rem, 70vw);
  font-size: var(--text-lg);
  line-height: 1.45;
}

/* On phones the bottom of the screen is the photo, so progress sits under the top bar. */
.hero__bottom {
  position: absolute;
  z-index: 4;
  top: calc(var(--ui-inset) + 2rem);
  inset-inline: var(--ui-inset);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.hero__cue {
  color: var(--color-muted);
}

.hero__track {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.hero__progress {
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

@media (min-width: 48rem) {
  .hero {
    --headline-top: 22svh;
    --headline-size: min(22vw, 24svh);
    --portrait-height: 88svh;
    --portrait-left: 0%;
    --portrait-right: -10%;
    --outline-width: 1.25;
  }

  .hero__label {
    display: block;
  }
}

@media (min-width: 64rem) {
  .hero {
    --headline-top: 21svh;
    --headline-size: min(15vw, 30svh);
    --portrait-height: 94svh;
    --portrait-left: 16%;
    --portrait-right: 4%;
  }

  .hero__subline {
    top: auto;
    bottom: calc(var(--ui-inset) + 3.5rem);
    max-width: 22rem;
  }

  .hero__bottom {
    top: auto;
    bottom: var(--ui-inset);
    right: auto;
    width: min(22rem, 30vw);
  }
}