:root {
  --ink: #071014;
  --deep: #0c242c;
  --tide: #16343c;
  --foam: #e7f3ee;
  --mist: #9bb6b1;
  --brass: #d4b483;
  --lantern: #f0b56a;
  --sea: #0a3038;
  --sea-mid: #0e4450;
  --sea-front: #08262e;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--foam);
  font-family: "Outfit", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 700px at 75% 8%, rgba(212, 180, 131, 0.16), transparent 55%),
    linear-gradient(180deg, #05090c 0%, #0a1c24 46%, #10343c 72%, #07161c 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0.18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.moon {
  position: absolute;
  top: 9vh;
  right: 14vw;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, #fff6e4 0 18%, #f0d7aa 42%, #c9a56a 78%);
  box-shadow:
    0 0 40px 8px rgba(240, 181, 106, 0.28),
    0 0 120px 30px rgba(212, 180, 131, 0.12);
}

.moon::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(122, 96, 58, 0.18);
  top: 22px;
  left: 18px;
  box-shadow:
    28px 16px 0 6px rgba(122, 96, 58, 0.12),
    8px 40px 0 2px rgba(122, 96, 58, 0.1);
}

.stars {
  position: absolute;
  inset: 0 0 40% 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(231, 243, 238, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 14%, rgba(231, 243, 238, 0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 46% 28%, rgba(231, 243, 238, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, rgba(231, 243, 238, 0.75) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 81% 24%, rgba(231, 243, 238, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 18% 48%, rgba(231, 243, 238, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 42%, rgba(231, 243, 238, 0.4) 50%, transparent 51%);
}

.mist {
  position: absolute;
  left: -10%;
  height: 90px;
  width: 70%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190, 214, 210, 0.16), transparent 72%);
  filter: blur(2px);
}

.mist-a {
  top: 48%;
  animation: drift 36s linear infinite;
}

.mist-b {
  top: 56%;
  width: 55%;
  left: 20%;
  animation: drift 48s linear infinite reverse;
}

main {
  position: relative;
  z-index: 2;
  min-height: 62vh;
  min-height: 62dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10vh 1.5rem 4rem;
}

.kicker {
  margin: 0 0 1.1rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--brass);
}

.bell {
  width: 42px;
  height: 48px;
  color: var(--brass);
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(3.4rem, 9vw, 7.4rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.deck {
  margin: 1.35rem 0 0;
  max-width: 28rem;
  color: var(--mist);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.5;
}

.soon {
  margin: 1.8rem 0 0;
  padding: 0.55rem 1.05rem;
  border: 1px solid rgba(212, 180, 131, 0.55);
  border-radius: 999px;
  color: var(--brass);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  background: rgba(7, 16, 20, 0.35);
}

.horizon {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42vh;
  height: 42dvh;
  z-index: 1;
  pointer-events: none;
}

.islands {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  width: 100%;
  height: 78%;
}

.isle-far {
  fill: #1a4650;
}

.isle-near {
  fill: #0d2c34;
}

.water {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  overflow: hidden;
}

.wave {
  position: absolute;
  left: -50%;
  width: 200%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: 50% 100%;
}

.wave-back {
  bottom: 28%;
  height: 70%;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23124a54' d='M0 70c80 20 140-30 220-20s140 40 220 20 150-40 230-18 150 36 230 16 140-28 230-10 120 24 170 18v44H0z'/%3E%3C/svg%3E");
  animation: swell 22s linear infinite;
}

.wave-mid {
  bottom: 8%;
  height: 78%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 140' preserveAspectRatio='none'%3E%3Cpath fill='%230e3c46' d='M0 78c90 28 160-24 250-8s170 36 260 12 160-40 250-16 180 34 270 14 140-22 170-8v68H0z'/%3E%3C/svg%3E");
  animation: swell 16s linear infinite reverse;
}

.wave-front {
  bottom: 0;
  height: 62%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath fill='%23071c22' d='M0 64c70 18 130-16 210-4s150 28 230 8 140-30 220-10 160 26 250 10 150-18 200-6 90 16 90 16v42H0z'/%3E%3C/svg%3E");
  animation: swell 12s linear infinite;
}

.cast {
  position: absolute;
  left: 18%;
  bottom: 16%;
  width: 2px;
  height: 92px;
}

.line {
  display: block;
  width: 1px;
  height: 70px;
  margin: 0 auto;
  background: linear-gradient(rgba(231, 243, 238, 0), rgba(231, 243, 238, 0.55));
}

.bobber {
  display: block;
  width: 14px;
  height: 22px;
  margin-left: -6px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.28);
  animation: bob 3.4s ease-in-out infinite;
}

.bobber-top,
.bobber-bottom {
  display: block;
  height: 50%;
}

.bobber-top {
  background: #f4f7f4;
}

.bobber-bottom {
  background: #c4493a;
}

@keyframes swell {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(25%);
  }
}

@keyframes drift {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(28vw);
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(7px) rotate(5deg);
  }
}

@media (max-width: 700px) {
  .moon {
    width: 64px;
    height: 64px;
    right: 8vw;
    top: 6vh;
  }

  main {
    min-height: 58dvh;
    padding-top: 8vh;
  }

  .horizon {
    height: 38dvh;
  }

  .cast {
    left: 12%;
    height: 70px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mist-a,
  .mist-b,
  .wave,
  .bobber {
    animation: none;
  }
}