:root {
  color-scheme: light;
  --sky-top: #86c8d8;
  --sky-mid: #f1c98d;
  --sky-low: #f8efe0;
  --ink: #16303a;
  --cream: #fff9ea;
  --coral: #bd4f45;
  --teal: #0d6a73;
  --deep: #092d3b;
  --wave: #0f8792;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow: hidden;
  background: var(--sky-low);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.sea-stage {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 17%, rgba(255, 251, 229, .92) 0 8rem, rgba(255, 251, 229, 0) 18rem),
    linear-gradient(180deg, var(--sky-top) 0%, #b6d7d4 34%, var(--sky-mid) 64%, var(--sky-low) 100%);
}

.sky-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 74% 24%, rgba(250, 114, 91, .25), transparent 28rem),
    linear-gradient(95deg, rgba(18, 90, 102, .12), transparent 45%, rgba(255, 246, 203, .2));
  z-index: 0;
}

.sun {
  position: absolute;
  left: clamp(2rem, 8vw, 6rem);
  top: clamp(2.5rem, 8vh, 5rem);
  width: clamp(4.5rem, 9vw, 8rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 32%, #fff8c5, #f9ce6a 52%, #e88554 100%);
  box-shadow: 0 0 4rem rgba(250, 209, 111, .56);
  z-index: 1;
}

.cloud {
  position: absolute;
  width: 12rem;
  height: 3.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 244, .72);
  filter: blur(.2px);
  box-shadow:
    2.6rem -1rem 0 0 rgba(255, 255, 244, .62),
    5.8rem .25rem 0 -.3rem rgba(255, 255, 244, .58),
    -2.3rem .5rem 0 -.5rem rgba(255, 255, 244, .42);
  z-index: 1;
  animation: cloud-drift 34s linear infinite;
}

.cloud-one {
  left: 12vw;
  top: 21vh;
}

.cloud-two {
  left: 56vw;
  top: 12vh;
  transform: scale(.72);
  animation-duration: 44s;
  animation-delay: -9s;
}

.cloud-three {
  left: 78vw;
  top: 33vh;
  transform: scale(.54);
  animation-duration: 39s;
  animation-delay: -18s;
}

.title-block {
  position: absolute;
  left: clamp(1rem, 5vw, 4.6rem);
  top: clamp(1rem, 4vh, 3.8rem);
  z-index: 5;
  max-width: min(31rem, 88vw);
  text-shadow: 0 .14rem .7rem rgba(255, 252, 235, .7);
}

.eyebrow {
  margin: 0 0 .45rem;
  color: #9b493b;
  font-size: clamp(.74rem, 1.4vw, .9rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: #183b45;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 11vw, 10rem);
  font-weight: 700;
  line-height: .84;
  letter-spacing: 0;
}

.subtitle {
  margin: .9rem 0 0;
  max-width: 27rem;
  color: #294d54;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.45;
  font-weight: 650;
}

.yacht-scene {
  position: absolute;
  left: 50%;
  bottom: clamp(6rem, 11vh, 10rem);
  z-index: 3;
  width: min(74rem, 112vw);
  aspect-ratio: 1120 / 720;
  translate: -50% 0;
  pointer-events: none;
}

.yacht-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.yacht-rock {
  transform-box: fill-box;
  transform-origin: 54% 78%;
  animation: yacht-rock 5.6s ease-in-out infinite;
}

.rig-line,
.mast-line,
.boom-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rig-line {
  stroke: rgba(18, 58, 65, .72);
  stroke-width: 3;
}

.rig-line.light {
  stroke: rgba(29, 82, 88, .38);
  stroke-width: 2;
}

.mast-line {
  stroke: #18353d;
  stroke-width: 8;
}

.boom-line {
  stroke: #26464e;
  stroke-width: 7;
}

.main-sail,
.jib-sail {
  stroke: rgba(27, 63, 70, .48);
  stroke-width: 3;
}

.main-sail {
  fill: url(#sailMain);
  animation: sail-breathe 4.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 10% 80%;
}

.main-sail-panel,
.jib-sail-shade {
  fill: url(#sailShadow);
  opacity: .38;
}

.jib-sail {
  fill: url(#sailMain);
  animation: jib-breathe 4.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: 85% 80%;
}

.sail-seam {
  fill: none;
  stroke: rgba(60, 99, 105, .24);
  stroke-width: 2;
}

.deck {
  fill: #e7d8bb;
  stroke: rgba(77, 55, 40, .34);
  stroke-width: 3;
}

.hull {
  fill: url(#hullPaint);
  stroke: #5d3e30;
  stroke-width: 4;
}

.hull-stripe,
.water-edge {
  fill: none;
  stroke-linecap: round;
}

.hull-stripe {
  stroke: var(--coral);
  stroke-width: 9;
  opacity: .88;
}

.water-edge {
  stroke: url(#waterLine);
  stroke-width: 5;
}

.cabin {
  fill: #a8463e;
  stroke: #5f2e2c;
  stroke-width: 3;
}

.cabin-window {
  fill: #c9f2ed;
  stroke: rgba(19, 55, 61, .48);
  stroke-width: 2;
}

.cockpit {
  fill: #54433a;
  opacity: .9;
}

.bow-rail,
.stern-rail {
  fill: none;
  stroke: rgba(32, 58, 62, .76);
  stroke-linecap: round;
  stroke-width: 3;
}

.keel,
.rudder {
  fill: url(#keelPaint);
  opacity: .95;
}

.sea {
  position: absolute;
  left: -12vw;
  right: -12vw;
  bottom: -2rem;
  z-index: 4;
  height: 34vh;
  min-height: 15rem;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate3d(0, 0, 0);
}

.sea-back {
  bottom: 9.5rem;
  height: 16vh;
  min-height: 8rem;
  z-index: 2;
  opacity: .62;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='928' height='210' viewBox='0 0 928 210'%3E%3Cpath d='M0 92 C94 35 170 141 280 82 C403 15 478 135 598 80 C706 31 786 117 928 65 V210 H0Z' fill='%233fa4a9'/%3E%3Cpath d='M10 86 C89 47 179 123 276 80 C365 41 452 102 545 75' fill='none' stroke='%23d4fff2' stroke-opacity='.48' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: wave-slide 8.5s ease-in-out infinite;
}

.sea-mid {
  bottom: 4.1rem;
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='928' height='270' viewBox='0 0 928 270'%3E%3Cpath d='M0 72 C99 8 177 132 282 71 C392 8 471 140 589 72 C710 0 801 119 928 58 V270 H0Z' fill='%230e7882'/%3E%3Cpath d='M31 73 C117 31 187 117 282 72 C381 25 469 121 579 72 C691 21 783 100 899 59' fill='none' stroke='%23f0ffe9' stroke-opacity='.62' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M72 136 C185 100 264 174 377 127 C484 82 585 167 692 121 C779 84 838 115 907 94' fill='none' stroke='%23a6ede4' stroke-opacity='.26' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: wave-slide 6.5s ease-in-out infinite reverse;
}

.sea-front {
  bottom: -4.2rem;
  z-index: 6;
  height: 31vh;
  min-height: 14rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='928' height='260' viewBox='0 0 928 260'%3E%3Cpath d='M0 88 C80 13 183 144 287 91 C408 29 489 151 602 86 C727 15 807 124 928 74 V260 H0Z' fill='%2308505c'/%3E%3Cpath d='M5 91 C86 38 176 127 282 91 C390 55 493 132 599 87 C710 40 809 111 919 75' fill='none' stroke='%23fff7d4' stroke-opacity='.72' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M0 156 C129 116 212 196 334 151 C471 100 550 197 692 145 C790 109 838 135 928 116' fill='none' stroke='%236ed6cf' stroke-opacity='.36' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
  animation: wave-slide 5.4s ease-in-out infinite;
}

.foam {
  position: absolute;
  left: -10vw;
  right: -10vw;
  z-index: 7;
  height: .35rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 233, .85), transparent 28%, rgba(255, 255, 233, .55), transparent 72%);
  opacity: .82;
  filter: blur(.2px);
}

.foam-a {
  bottom: 17vh;
  animation: foam-skim 9s linear infinite;
}

.foam-b {
  bottom: 11vh;
  opacity: .55;
  animation: foam-skim 13s linear infinite reverse;
}

.gull-field {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.gull {
  position: absolute;
  width: var(--size);
  height: calc(var(--size) * .48);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--tilt)) scaleX(var(--flip));
  opacity: var(--alpha);
  filter: drop-shadow(0 .24rem .18rem rgba(11, 57, 66, .16));
}

.gull svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.gull .wing-left,
.gull .wing-right {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: flap var(--flap) ease-in-out infinite;
}

.gull .wing-right {
  animation-delay: calc(var(--flap) * -.5);
}

@keyframes yacht-rock {
  0%,
  100% {
    transform: rotate(-2.8deg) translateY(3px);
  }
  50% {
    transform: rotate(3.4deg) translateY(-10px);
  }
}

@keyframes sail-breathe {
  0%,
  100% {
    transform: skewX(-1.3deg);
  }
  50% {
    transform: skewX(2deg) translateX(2px);
  }
}

@keyframes jib-breathe {
  0%,
  100% {
    transform: skewX(1.6deg);
  }
  50% {
    transform: skewX(-2.4deg) translateX(-3px);
  }
}

@keyframes wave-slide {
  0%,
  100% {
    transform: translate3d(-1.2vw, 0, 0);
  }
  50% {
    transform: translate3d(1.2vw, -.35rem, 0);
  }
}

@keyframes foam-skim {
  0% {
    transform: translateX(-8vw) scaleX(.9);
  }
  50% {
    transform: translateX(8vw) scaleX(1.08);
  }
  100% {
    transform: translateX(-8vw) scaleX(.9);
  }
}

@keyframes cloud-drift {
  0% {
    translate: -8vw 0;
  }
  100% {
    translate: 8vw 0;
  }
}

@keyframes flap {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(-15deg) translateY(-7%);
  }
}

@media (max-width: 760px) {
  body {
    overflow: hidden;
  }

  .title-block {
    top: 1.1rem;
  }

  .subtitle {
    max-width: 18rem;
  }

  .yacht-scene {
    width: 132vw;
    bottom: 12vh;
  }

  .sea {
    min-height: 16rem;
  }

  .cloud-one {
    top: 18vh;
    left: 42vw;
  }

  .cloud-two {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}