@font-face {
  font-family: Biko;
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/biko-black.woff");
}

body {
  background: white;
  margin: 0;
  overflow-x: hidden;
}

/* Fixed full-viewport hero: video stays in place */
.hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

.hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: var(--hero-overlay-opacity, 1);
  transition: opacity 0.08s ease-out;
}

/* Lockup at half size on both heroes; center of viewBox 0 0 514 224 */
.hero .mask-lockup {
  transform-origin: 257px 112px;
  transform: scale(calc(0.5 * var(--text-scale, 1)));
}

.hero-image .mask-lockup {
  transform-origin: 257px 112px;
  transform: scale(calc(0.5 * var(--image-text-scale, 1)));
}

.hero-svg rect {
  fill: white;
}

.hero-svg > rect {
  -webkit-mask: url(#mask);
  mask: url(#mask);
}

/* Spacer creates scroll distance; when done, video is full screen */
.scroll-spacer {
  position: relative;
  z-index: 1;
  height: 200vh;
}

/* Sections below hero for testing scroll flow */
.page-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  box-sizing: border-box;
}

.page-section h2 {
  margin: 0 0 1rem;
  font-family: Biko, sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-section p {
  margin: 0;
  max-width: 36ch;
  text-align: center;
  line-height: 1.6;
  font-size: 1.1rem;
}

.page-section--1 {
  background: #e8f4f8;
  color: #0d3d56;
}

.page-section--2 {
  background: #1a4d6d;
  color: #e8f4f8;
}

.page-section--3 {
  background: #0d3d56;
  color: #fff;
}

/* Image hero: same effect as video hero, in flow with sticky + spacer */
.hero-image-wrapper {
  position: relative;
  z-index: 1;
  /* Height = hero 100vh + spacer 200vh */
}

.hero-image {
  position: sticky;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
}

.hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image .hero-svg {
  opacity: var(--image-hero-overlay-opacity, 1);
  transition: opacity 0.08s ease-out;
}

.hero-image .hero-svg > rect {
  -webkit-mask: url(#mask-image);
  mask: url(#mask-image);
}


.scroll-spacer-image {
  height: 200vh;
  pointer-events: none;
}

.page-section--4 {
  background: #2d6a4f;
  color: #fff;
}

.page-section--5 {
  background: #40916c;
  color: #fff;
}

.page-section--6 {
  background: #1b4332;
  color: #d8f3dc;
}