:root {
  --ghost: #FFFFFF;
  --ink: #212121;
  --place: #A3AFC4;
}

html.intro-lock,
html.intro-lock body {
  overflow: hidden;
  height: 100%;
  touch-action: none;
}

.swell-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: block;
  overflow: hidden;
  background: var(--ghost);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 560ms cubic-bezier(.4, 0, .2, 1),
              transform 560ms cubic-bezier(.4, 0, .2, 1);
  will-change: opacity, transform;
}

.swell-intro.is-out {
  opacity: 0;
  transform: translate3d(0, -1.6vh, 0);
  pointer-events: none;
}

.swell-intro.is-fast { transition-duration: 220ms; }

.swell-intro__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.swell-intro__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.swell-intro__wordmask {
  overflow: hidden;
  padding: 0 .08em;
}

.swell-intro__wordtext {
  display: block;
  font-family: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(62px, 15.5vw, 196px);
  line-height: .88;
  letter-spacing: -.05em;
  color: #fff;
  mix-blend-mode: difference;
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: transform 780ms cubic-bezier(.16, 1, .3, 1), opacity 480ms linear;
}

.swell-intro.is-word .swell-intro__wordtext {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.swell-intro.is-wordout .swell-intro__wordtext {
  opacity: 0;
  transform: translate3d(0, -22px, 0);
  transition: transform 530ms cubic-bezier(.4, 0, 1, 1), opacity 420ms linear;
}

.swell-intro__skip {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  min-width: 44px;
  min-height: 44px;
  padding: 4px 2px;
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--place);
  background: transparent;
  color: var(--ink);
  font-family: "Urbanist", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
  cursor: pointer;
  transition: opacity 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .swell-intro__skip:hover { opacity: 1; }
}

/* the wave drains: Skip leaves with it, before the page and its nav fade in under the same corner */
.swell-intro.is-drain .swell-intro__skip,
.swell-intro.is-out .swell-intro__skip { opacity: 0; pointer-events: none; transition: opacity 220ms ease; }

.swell-intro__skip:focus-visible {
  opacity: 1;
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .swell-intro { display: none; transition: none; }
  .swell-intro__wordtext { transition: none; }
}


/* d1: the word sits exactly on the hero's Swell (same font, size and place) and never leaves. */
.swell-intro__word.is-matched { inset: auto; display: block; }
.swell-intro__word.is-matched .swell-intro__wordmask { overflow: visible; padding: 0; }
.swell-intro__word.is-matched .swell-intro__wordtext {
  font-family: "Jost", system-ui, sans-serif; font-weight: 700; font-size: inherit; line-height: .8; letter-spacing: -0.055em; white-space: nowrap;
  color: #DEDEDE;   /* with difference: #212121 on white, light on the ink wave */
}
.swell-intro.is-out:has(.is-matched) { transform: none; }

/* hold (his idea, 3 Nov): "Click to enter" in the water under the word while the wave swells; it goes as they come in */
.swell-intro__enter {
  position: absolute; left: 50%; top: 86%;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px; background: rgba(255,255,255,.95); color: #0A2A4A; cursor: pointer; white-space: nowrap;
  font-family: "Jost", system-ui, sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0;
  box-shadow: 0 18px 40px -16px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px) scale(.94);
  transition: opacity 500ms ease, transform 650ms cubic-bezier(.34, 1.56, .64, 1);
}
.swell-intro.is-hold .swell-intro__enter { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.swell-intro.is-hold .swell-intro__enter:hover { background: #fff; }
.swell-intro__enter:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.swell-intro__enter.is-nudge { animation: swell-intro-nudge 520ms cubic-bezier(.34, 1.56, .64, 1); }
@keyframes swell-intro-nudge { 0% { transform: translate(-50%, 0) scale(1); } 40% { transform: translate(-50%, -4px) scale(1.07); } 100% { transform: translate(-50%, 0) scale(1); } }
.swell-intro__bars { display: flex; gap: 2.5px; align-items: center; height: 16px; color: #FF5A36; }
.swell-intro__bars i { width: 2.5px; height: 6px; border-radius: 2px; background: currentColor; animation: swell-intro-bar 1.2s ease-in-out infinite; }
.swell-intro__bars i:nth-child(2) { animation-delay: -.3s; } .swell-intro__bars i:nth-child(3) { animation-delay: -.7s; } .swell-intro__bars i:nth-child(4) { animation-delay: -.45s; }
@keyframes swell-intro-bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.swell-intro.is-hold { cursor: pointer; }