:root {
  /* Typography */
  --font-sans: "europa", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-size-base: 1rem;
  --text-size-sm: 0.75rem;
  --text-size-lg: 1rem;
  --text-size-xl: 1.25rem;
  --line-height: 1.4;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --content-max-width: 64rem;
  --page-padding-inline: var(--space-lg);

  /* Colors */
  --color-bg: #236a75;
  --color-text: rgba(255, 255, 255, 0.8);
}

@media (min-width: 37.5rem) {
  :root {
    --text-size-sm: 0.875rem;
    --text-size-lg: 1.125rem;
    --text-size-xl: 1.5rem;
  }
}


/* Reset: only what's needed */
*, *::before, *::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-timeline: --page block;
}
body { margin: 0; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Scroll detection sentinel */
#scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

/* Parallax stack: fixed viewport-filling layers, stacked back to front */
.parallax-stack {
  animation: load-zoom-out 1.2s ease-out both;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  contain: layout style paint;
  transform-style: preserve-3d;
  perspective: 1px;
  overflow: hidden;
}
@supports (animation-timeline: view()) {
  .parallax-stack {
    position: fixed;
  }
}

@keyframes load-zoom-out {
  from { transform: scale(1.1); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-stack {
    animation: none;
  }
}

.parallax-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
@supports (animation-timeline: view()) {
  .parallax-layer {
    contain: strict;
    animation-timeline: --page;
    animation-range: 0% 50%; /* full effect by ~55% scroll so you don't have to scroll as far */
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-duration: 1ms;
    backface-visibility: hidden;
  }
}

/* Only oversize the background layer to prevent gap on mobile */
.layer-back {
  display: block;
  top: -5%;
  left: 0;
  width: 100%;
  height: 110%;
  height: 110lvh;
  position: fixed;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 0;
}

.parallax-layer__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* STRATEGIC FLOATING: Animate layers 2-6 and front (6 layers) */
.layer-2 .parallax-layer__inner,
.layer-3 .parallax-layer__inner,
.layer-4 .parallax-layer__inner,
.layer-5 .parallax-layer__inner,
.layer-6 .parallax-layer__inner,
.layer-front .parallax-layer__inner {
  animation: float 7s ease-in-out infinite;
  will-change: transform;
}

/* Stagger + vary movement for more dynamic look */
.layer-2 .parallax-layer__inner { 
  animation-delay: -0.5s; 
  animation-name: float-medium;
}
.layer-3 .parallax-layer__inner { 
  animation-delay: -1.8s; 
  animation-name: float-medium;
}
.layer-4 .parallax-layer__inner { 
  animation-delay: -3.2s; 
  animation-name: float-large;
}
.layer-5 .parallax-layer__inner { 
  animation-delay: -4.5s; 
  animation-name: float-large;
}
.layer-6 .parallax-layer__inner { 
  animation-delay: -5.8s; 
  animation-name: float-medium;
}
.layer-front .parallax-layer__inner { 
  animation-delay: -7s; 
  animation-name: float-large;
}

/* Varied float animations for more noticeable movement */
@keyframes float-large {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -18px, 0); }
}

@keyframes float-medium {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

/* Control floating based on scroll position */
body:not(.at-top) .parallax-layer__inner {
  animation-play-state: paused;
}

/* Back (slowest) → front (fastest) z-index and parallax travel */
.layer-1      { z-index: 2; animation-name: parallax-subtle; }
.layer-1 .parallax-layer__inner {
  animation: none; /* No float on masked layer */
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  mask-size: cover;
  mask-position: center;
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
}
.layer-2      { z-index: 3; animation-name: parallax-2; }
.layer-3      { z-index: 4; animation-name: parallax-3; }
.layer-4      { z-index: 5; animation-name: parallax-4; }
.layer-5      { z-index: 6; animation-name: parallax-5; }
.layer-6      { z-index: 7; animation-name: parallax-6; }
.layer-front  { z-index: 8; animation-name: parallax-front; }

@media (prefers-reduced-motion: reduce) {
  .parallax-layer {
    animation: none;
  }
  .parallax-layer__inner {
    animation: none !important;
  }
}
@keyframes parallax-subtle {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -100%, 0); }
}
@keyframes parallax-1 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -110%, 0); }
}
@keyframes parallax-2 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -120%, 0); }
}
@keyframes parallax-3 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -130%, 0); }
}
@keyframes parallax-4 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -140%, 0); }
}
@keyframes parallax-5 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -150%, 0); }
}
@keyframes parallax-6 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -160%, 0); }
}
@keyframes parallax-front {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -170%, 0); }
}

/* Main content */
main {
  position: relative;
  z-index: 10;
  max-inline-size: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}

h1 {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 400;
  text-wrap: balance;
}

h2 {
  font-size: var(--text-size-lg);
  font-weight: 400;
  text-wrap: balance;
}

p {
  font-size: var(--text-size-lg);
  font-weight: 300;
  margin-block: 0 1em;
  max-inline-size: 60ch;
  text-wrap: pretty;
  width: 100%;
}

small {
  font-size: 70%;
}

.text-xl {
  font-size: var(--text-size-xl);
  font-weight: 300;
  text-wrap: balance;
}

/* Section inner: padded blocks with min height */
.section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: var(--space-xl);
  opacity: 1;
}
.section:first-child {
  min-block-size: 100vh;
  animation: load-fade-in 0.7s ease-out 750ms both;
}
@supports (animation-timeline: view()) {
  .section:not(:first-child) {
    animation: section-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 25% entry 100%;
  }
}
@keyframes load-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes section-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Utilities */
.stack {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.inline {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (min-width: 60rem) {
  .inline {
    display: inline-flex;
    flex-direction: row;
  }
}
.gap-sm {
  gap: var(--space-sm);
}
@media (min-width: 60rem) {
  .md\:gap-lg {
    gap: var(--space-lg);
  }
}
.gap-xl {
  gap: var(--space-xl);
}
.gap-2xl {
  gap: var(--space-2xl);
}
.my-0 {
  margin-block: 0;
}
.pt-md {
  padding-top: var(--space-md);
}
.pt-4xl {
  padding-top: var(--space-4xl);
}
.py-2xl {
  padding-block: var(--space-2xl);
}
.text-center {
  text-align: center;
}
.text-uppercase {
  text-transform: uppercase;
}
.mx-auto {
  margin-inline: auto;
}

@media (min-width: 60rem) {
  .side-by-side {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }
}

.nowrap {
  white-space: nowrap;
}

/* 16:9 video embed container (image placeholder until video) */
.aspect-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.aspect-video iframe {
  border: none;
}