@font-face {
  font-family: 'Seabirds';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SeabirdsTrial-Book.woff2') format('woff2');
}

@font-face {
  font-family: 'Seabirds';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SeabirdsTrial-BookItalic.woff2') format('woff2');
}

:root {
  /* Colors */
  --color-bg:     #BBC0C5;
  --color-nav:    white;
  --color-active: #ffd8fd;
  --color-hover:  #DADEE3;
  --color-accent: #5F8ABD;
  --color-bio:    #47A163;

  /* Typography */
  --font-nav:          40px;
  --font-nav-mobile:   24px;
  --font-bio:          32px;
  --font-bio-mobile:   24px;
  --tracking-nav: -0.04em;
  --tracking-bio: -0.02em;

  /* Spacing */
  --space:        16px;
  --space-x:      24px;
  --space-mobile: 24px;
  --space-bio-x:  100px;

  /* Image */
  --image-height: 524px;
}

@keyframes nav-enter {
  from { opacity: 0; transform: translateY(-140px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nav-enter-up {
  from { opacity: 0; transform: translateY(140px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-row:first-child .hero-text,
.nav .nav-text {
  animation: nav-enter 1350ms cubic-bezier(0.6, 0, 0, 1) both;
}

.hero-row--bottom .hero-text,
.bottom-text {
  animation: nav-enter-up 1350ms cubic-bezier(0.6, 0, 0, 1) both;
}

html.no-animate .hero-row:first-child .hero-text,
html.no-animate .nav .nav-text,
html.no-animate .hero-row--bottom .hero-text,
html.no-animate .bottom-text {
  animation: none;
}

a.hero-text,
a.nav-text,
.bottom-text {
  transition: color 0.4s ease-in-out;
}

a.hero-text:hover,
a.nav-text:hover {
  color: var(--color-hover);
}

.roll-clip {
  display: block;
  overflow: hidden;
  height: 1.25em;
  line-height: 1.25;
  pointer-events: none;
}

.roll-inner,
.roll-inner--down {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  transition: transform 0.4s cubic-bezier(0.6, 0, 0, 1);
}

/* bottom items start shifted so text 1 is visible, text 2 waits above */
.roll-inner--down {
  transform: translateY(-50%);
}

a.hero-text:hover .roll-inner,
a.nav-text:hover .roll-inner {
  transform: translateY(-50%);
}

/* bottom: on hover, inner slides down — text 2 enters from above */
[data-pair="bottom"].is-hovered .roll-inner--down {
  transform: translateY(0);
}

.hero-text.is-hovered,
.bottom-text.is-hovered {
  color: var(--color-hover);
}


.hero-text.hero-text--active,
.nav-text.nav-text--active {
  color: var(--color-active);
  line-height: 1.25;
}