/* Beat one: the photograph, and one panel of glass over it.
 * The hero sticks to the top of the viewport while the sheet that follows it
 * scrolls up and covers it. The rise is therefore the browser's own scroll
 * position, not a timeline: it can be scrubbed both ways and it cannot play
 * itself. site/scroll.js only reports how far it has gone, so the photograph
 * can settle back as the sheet takes over. */
.stage { position: relative; }

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-cape.jpg');
  background-size: cover;
  background-position: 50% 50%;
  /* The photograph recedes as the sheet arrives, so the two beats read as two
     planes rather than one flat swap. */
  transform: scale(calc(1 + 0.04 * var(--rise, 0)));
  transform-origin: 62% 50%;
  will-change: transform;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--resurs-photo-scrim), transparent 34%);
  opacity: calc(1 - 0.5 * var(--rise, 0));
}

.glass {
  position: relative;
  margin-left: clamp(var(--resurs-glass-left-min), var(--resurs-glass-left-vw),
                     var(--resurs-glass-left-max));
  margin-top: -2vh;
  width: min(var(--resurs-glass-width-vw), var(--resurs-glass-width-max));
  padding: var(--resurs-glass-pad);
  border-radius: var(--resurs-radius-panel);
  border: 1px solid var(--resurs-glass-edge);
  background: var(--resurs-glass-fill);
  backdrop-filter: blur(var(--resurs-glass-blur)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--resurs-glass-blur)) saturate(1.1);
  color: var(--resurs-on-photo);
}

.hero-headline {
  font-size: var(--resurs-size-display);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.025em;
  max-width: var(--resurs-headline-width);
}

.hero-lead {
  margin-top: 30px;
  font-size: var(--resurs-size-lead);
  line-height: 1.72;
  color: var(--resurs-on-photo-dim);
  max-width: var(--resurs-headline-width);
}

.glass .pill { margin-top: 42px; }

@media (max-width: 1080px) {
  .glass {
    width: auto;
    margin-inline: var(--resurs-gutter);
    margin-top: 0;
    padding: 44px 36px 40px 36px;
  }
  .hero { align-items: flex-end; padding-bottom: 12vh; }
  /* Below the measured canvas the panel no longer covers the part of the frame
     that had to be rebuilt, so the hero switches to the crop taken entirely to
     the right of it. */
  .hero-photo {
    background-image: url('assets/hero-cape-tall.jpg');
    background-position: 50% 50%;
  }
  .hero-headline, .hero-lead { max-width: none; }
  .hero-lead { margin-top: 20px; }
  .glass .pill { margin-top: 30px; }
}

@media (max-width: 560px) {
  .hero { min-height: 520px; padding-bottom: 8vh; }
  .glass { padding: 30px 22px 26px 22px; }
  .hero-photo { background-position: 58% 50%; }
}

/* Reduced motion: no sticky, no rise. Two sections, one after the other. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* relative, not static: the photograph is positioned against the hero, and a
     static hero hands that job to .stage - which is the hero AND the sheet, so
     the frame stretches to twice the height and cover crops it to bare sky. */
  .hero { position: relative; }
  .hero-photo { transform: none; }
  .hero-photo::after { opacity: 1; }
}