/* Sizes are fractions of the screen width, so the headline always fills the page like in the design */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.text { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 3vw 1vw; text-align: center; }
h1 { margin: 0; font-weight: 800; font-size: min(15.2vw, 27vh); line-height: .82; letter-spacing: 0; cursor: pointer; }
h1 .line { display: block; }
.sub { margin: 1.4vw auto 0; max-width: 90vw; font-size: min(2.3vw, 4.1vh); font-weight: 400; line-height: 1.2; }
.help { position: absolute; top: 22px; right: 24px; z-index: 6; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(91, 180, 245, .75); color: #000; font: 800 17px/1 "Electric Blue", sans-serif; cursor: pointer; transition: background .2s, transform .2s; }
.help:hover { background: var(--pool); transform: scale(1.1); }

/* ---------- the water ---------- */
.sea { position: relative; z-index: 2; flex: none; height: clamp(190px, 25vh, 280px); background: var(--pool); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: clamp(30px, 6vh, 60px) 3vw 0; }
.waves { position: absolute; left: 0; right: 0; top: -4.1vw; height: 4.2vw; overflow: hidden; pointer-events: none; }
.wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.wave path { fill: var(--pool); }
.wave.back path { fill: var(--back); }
.wave.back { bottom: .35vw; animation: drift 14s linear infinite reverse; }
.wave.front { animation: drift 9s linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.duckbox { position: absolute; left: 0; right: 0; top: -13vw; height: 13vw; overflow: hidden; pointer-events: none; }
.swim { position: absolute; right: 6.4vw; bottom: -.9vw; width: 11vw; height: 9.6vw; pointer-events: auto; cursor: pointer; transition: transform 2.6s cubic-bezier(.4, .1, .25, 1); }
.face { width: 100%; height: 100%; transform: scaleX(var(--f, 1)); }
.duck { display: block; width: 100%; height: 100%; transform-origin: 50% 85%; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(.2vw) rotate(-3deg); } 50% { transform: translateY(-.4vw) rotate(3deg); } }
/* hover: the duck swims sideways along the waterline (in front of the text), bobbing faster while it paddles */
.swim.going .duck { animation: paddle .7s ease-in-out infinite; }
@keyframes paddle { 0%, 100% { transform: translateY(.1vw) rotate(-5deg); } 50% { transform: translateY(-.5vw) rotate(5deg); } }

.cta { position: relative; padding: 1.35vw 3.4vw; border: 3px solid #fff; border-radius: 999px; color: #fff; font-size: 1.9vw; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.cta:hover, .cta:focus-visible { background: #fff; color: var(--pool); outline: none; }
.links { position: absolute; left: 0; right: 0; bottom: 1.6vw; display: flex; justify-content: center; gap: 2.4vw; font-size: max(12px, .85vw); color: #fff; }
.links a { color: #fff; text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* ---------- bubbles drift up through the whole screen ---------- */
.bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bubbles i { position: absolute; bottom: -4vw; border-radius: 50%; background: rgba(160, 210, 250, .9); opacity: 0; animation: rise 14s ease-in infinite; }
.bubbles i:nth-child(1) { left: 14%; width: 2.4vw; height: 2.4vw; animation-duration: 13s; }
.bubbles i:nth-child(2) { left: 31%; width: 1.5vw; height: 1.5vw; animation-duration: 10s; animation-delay: -3s; }
.bubbles i:nth-child(3) { left: 47%; width: 3vw;   height: 3vw;   animation-duration: 16s; animation-delay: -8s; }
.bubbles i:nth-child(4) { left: 62%; width: 1.7vw; height: 1.7vw; animation-duration: 11s; animation-delay: -2s; }
.bubbles i:nth-child(5) { left: 76%; width: 2.2vw; height: 2.2vw; animation-duration: 15s; animation-delay: -6s; }
.bubbles i:nth-child(6) { left: 88%; width: 1.2vw; height: 1.2vw; animation-duration: 9s;  animation-delay: -4s; }
.bubbles i:nth-child(7) { left: 22%; width: 1.1vw; height: 1.1vw; animation-duration: 12s; animation-delay: -9s; }
.bubbles i:nth-child(8) { left: 54%; width: 1.9vw; height: 1.9vw; animation-duration: 17s; animation-delay: -11s; }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(1.5vw, -95vh); opacity: 0; } }

/* ---------- letters: thin to black with a soft bounce, once, about 2 seconds ---------- */
.anim .w { display: inline-block; white-space: nowrap; }
.anim .ch { display: inline-block; transform-origin: 50% 80%; font-variation-settings: "wght" 800; animation: bubble 1.2s cubic-bezier(.45, 0, .25, 1) both; animation-delay: var(--d, 0s); }
@keyframes bubble {
  0%   { font-variation-settings: "wght" 260; transform: scale(.94); }
  55%  { font-variation-settings: "wght" 950; transform: scale(1.05); }
  80%  { font-variation-settings: "wght" 860; transform: scale(.99); }
  100% { font-variation-settings: "wght" 800; transform: scale(1); }
}

/* ---------- How it works ---------- */
.about { position: fixed; inset: 0; z-index: 10; overflow: auto; background-color: var(--tile); background-image: linear-gradient(var(--grout) 2px, transparent 2px), linear-gradient(90deg, var(--grout) 2px, transparent 2px); background-size: 25px 25px; background-position: -1px -1px; animation: fade .35s ease both; }
.about[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.about:focus { outline: none; }
.tide { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.level { position: absolute; inset: 0; background: var(--pool); animation: drain 3s cubic-bezier(.4, .1, .2, 1) forwards; }
@keyframes drain { from { transform: translateY(0); } to { transform: translateY(calc(100% - 12vh)); } }
.level .swim { right: 6.4vw; }
.copy { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 12vh 24px 26vh; }
.copy h2 { margin: 0 0 4vh; font-size: clamp(56px, 9vw, 150px); line-height: .9; font-weight: 800; }
.copy p { margin: 0 0 1.1em; font-size: clamp(20px, 2vw, 34px); line-height: 1.35; }
.copy .small { font-size: clamp(16px, 1.3vw, 22px); }
.close { position: fixed; top: 22px; right: 24px; z-index: 11; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(91, 180, 245, .75); color: #000; font: 800 20px/1 system-ui, sans-serif; cursor: pointer; }
.close:hover { background: var(--pool); }

/* ---------- phones and narrow windows ---------- */
@media (max-width: 700px) {
  .text { padding: 0 3vw 6vw; }
  h1 { font-size: 23.5vw; line-height: .85; }
  h1 .line { display: inline; }
  .sub { margin-top: 7vw; font-size: 5.2vw; }
  .help, .close { top: 16px; right: 16px; }
  .sea { height: clamp(200px, 28vh, 260px); padding-top: 9vw; }
  .waves { top: -9vw; height: 9.2vw; }
  .duckbox { top: -26vw; height: 26vw; }
  .swim { width: 24vw; height: 21vw; right: 6vw; bottom: -2vw; }
  .cta { padding: 4vw 7vw; font-size: 4.6vw; }
  .links { bottom: 5vw; gap: 6vw; font-size: 15px; }
  .copy { padding-top: 16vh; padding-bottom: 28vh; }
  .level .swim { right: 6vw; }
}
@media (prefers-reduced-motion: reduce) {
  .anim .ch, .wave, .duck, .swim.going .duck, .bubbles i { animation: none; }
  .level { animation: none; transform: translateY(calc(100% - 12vh)); }
  .swim { transition-duration: .01s; }
  .bubbles { display: none; }
}