/* Scroll section page. css/hero.css is loaded unchanged; this only places the
   hero inside a pinned track and styles the overlay. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body.scroll-page { background: #282c20; }   /* reference --color--dark-green */

.scroll-track {
  position: relative;
  height: 300vh;                /* 1 viewport pinned + 1 viewport exit + the sticky element itself */
}

.scroll-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.scroll-sticky .hero { min-height: 0; }

.scroll-signature {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  will-change: transform;
}
.scroll-signature svg { display: block; }


/* Wordmark, top left. Sized like the reference: in vw (its rem is vw/108), hidden below 992px.
   On the hero it's dark and 1.2x; once the page scrolls it shrinks to 1x and turns light. */
.wordmark {
  position: fixed;
  top: 1.1574vw;                /* 1.25rem */
  left: 1.1574vw;
  z-index: 10;
  display: block;
  width: 5.75vw;                /* gives the reference's cap heights (26.6 / 22.7px at 1536) */
  transform-origin: 0 0;
  will-change: transform;
}
.wordmark-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wordmark-top, .wordmark-bottom {
  fill: #282c20;
  transition: fill 0.75s cubic-bezier(0.65, 0.05, 0, 1);
}
.wordmark.is-light .wordmark-top { fill: #c8cbbd; }
.wordmark.is-light .wordmark-bottom { fill: #ebeee0; }
/* the reference hides it below 992px; here it stays so phones see the name: as tall as the
   Resume button (the lockup is 0.679 as tall as it is wide) */
@media (max-width: 991px) { .wordmark { top: calc(1.25 * var(--r)); left: calc(1.25 * var(--r)); width: calc(4.5 * var(--r) / 0.679); } }
@media (max-width: 479px) { .wordmark { width: calc(4.7 * var(--r) / 0.679); } }

/* Primary action, top right (the reference's lime nav button). Sizes are in the reference's
   rem, which is a fixed fraction of the viewport width per breakpoint. */
@font-face {
  font-family: 'Hero Sans';
  src: url(../assets/fonts/archivo-latin-800-normal.woff2) format('woff2');
  font-weight: 800;
  font-display: swap;
}
:root { --r: calc(100vw / 108); }
@media (max-width: 991px) { :root { --r: calc(100vw / 86.4); } }
@media (max-width: 479px) { :root { --r: calc(100vw / 36); } }

.cta {
  position: fixed;
  top: calc(1.25 * var(--r));
  right: calc(1.25 * var(--r));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: calc(0.625 * var(--r));
  height: calc(4.5 * var(--r));
  padding: 0 calc(1 * var(--r));
  border: 1px solid #d2ff00;
  border-radius: calc(0.54 * var(--r));
  background: #d2ff00;
  color: #282c20;
  text-decoration: none;
}
@media (max-width: 479px) { .cta { height: calc(4.7 * var(--r)); } }
.cta__icon {
  width: calc(1.44 * var(--r));
  height: calc(1.44 * var(--r));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.949;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cta__label {                     /* for screen readers; the letters below are aria-hidden */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.cta__text {
  display: flex;
  overflow: hidden;
  font: 800 calc(1.35 * var(--r)) / 1.2 'Hero Sans', Arial, sans-serif;
  text-transform: uppercase;
}
/* each letter rolls up one line on hover, revealing its copy (the text-shadow) underneath */
.cta__char {
  display: block;
  text-shadow: 0 1.2em currentColor;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 0.03s);
}
.cta:hover .cta__char,
.cta:focus-visible .cta__char { transform: translateY(-1.2em); }
.cta:focus-visible { outline: 2px solid #282c20; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cta__char { transition: none; } }

/* phones: the helmet credit would sit on the photo the whole time; it is shown in the footer instead */
@media (max-width: 720px) { .scroll-page .hero__credit { display: none; } }
/* the helmet (and so its credit) is only on screen at the top; once scrolling, the work list
   slides up over the pinned hero and the credit box would show through it */
.scroll-page .hero__credit { transition: opacity 0.4s; }
html.is-scrolled .scroll-page .hero__credit { opacity: 0; pointer-events: none; }