:root {
  color-scheme: light;
  background: #65c4ed;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: clip;
}

body {
  background: #f5f0e7;
}

.scroll-story {
  position: relative;
  height: 132vh;
  height: 132svh;
}

.hero {
  --fog-bank-x: 112vw;
  --fog-bank-y: 0vh;
  --fog-engulf-y: 0vh;
  --fog-engulf-scale: 1;
  --fog-handoff: 0;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #65c4ed;
}

.hero::after {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  height: 28%;
  background: linear-gradient(to bottom, rgb(245 240 231 / 0) 0%, #f5f0e7 94%);
  content: "";
  opacity: var(--fog-handoff);
  pointer-events: none;
}

.hero__scene {
  position: absolute;
  inset: 0;
  display: block;
}

.hero__background {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

.hero__ambient,
.hero__bay {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: max(100vw, calc(100vh * 1.4045));
  width: max(100vw, calc(100svh * 1.4045));
  aspect-ratio: 1486 / 1058;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero__ambient {
  z-index: 1;
}

.hero__gull,
.hero__flagpole,
.hero__flag {
  position: absolute;
  display: block;
  height: auto;
}

.hero__gull {
  animation: gull-flap var(--flap-speed, 1.12s) ease-in-out var(--flap-delay, 0s) infinite;
  transform-origin: center;
  will-change: transform;
}

.hero__gull--1 {
  top: 23.8185%;
  left: 19.7847%;
  width: 2.6245%;
  --flap-speed: 1.16s;
  --flap-delay: -0.34s;
}

.hero__gull--2 {
  top: 9.8299%;
  left: 69.852%;
  width: 3.4993%;
  --flap-speed: 1.08s;
  --flap-delay: -0.78s;
}

.hero__gull--3 {
  top: 12.0983%;
  left: 74.2261%;
  width: 3.2301%;
  --flap-speed: 1.22s;
  --flap-delay: -0.15s;
}

.hero__gull--4 {
  top: 69.4707%;
  left: 17.7658%;
  width: 3.0956%;
  --flap-speed: 1.12s;
  --flap-delay: -0.62s;
}

.hero__gull--5 {
  top: 71.0775%;
  left: 20.5922%;
  width: 3.2301%;
  --flap-speed: 1.19s;
  --flap-delay: -0.26s;
}

.hero__gull--6 {
  top: 65.4064%;
  left: 81.965%;
  width: 3.3647%;
  --flap-speed: 1.14s;
  --flap-delay: -0.91s;
}

.hero__flag {
  top: 80.5293%;
  left: 36.07%;
  width: 1.817%;
  animation: flag-ripple 1.8s ease-in-out infinite;
  filter: saturate(1.65) brightness(1.06);
  transform-origin: 52% 50%;
  will-change: transform;
}

.hero__flagpole {
  top: 80.1512%;
  left: 36.6756%;
  width: 0.7402%;
}

.hero__bay {
  z-index: 1;
  overflow: hidden;
}

.hero__boat-entry {
  position: absolute;
  right: 0;
  bottom: 1%;
  left: 0;
  transform: translateX(23%);
}

.hero__boat-cruise {
  position: absolute;
  bottom: 0;
  left: 0;
  width: max-content;
  animation: boat-cruise 32s ease-in-out infinite both;
  transform-origin: center bottom;
}

.hero__boat {
  display: block;
  width: clamp(40px, 3.2vw, 58px);
  height: auto;
  filter: drop-shadow(0 3px 3px rgb(49 91 111 / 24%));
  animation: boat-bob 3.6s ease-in-out infinite;
  transform-origin: center bottom;
  will-change: transform;
}

.hero__foreground {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  pointer-events: none;
}

.hero__title-stage {
  position: absolute;
  z-index: 7;
  inset: 0 0 50%;
  display: grid;
  place-items: start center;
  padding: clamp(24px, 2vw, 36px);
  pointer-events: none;
}

.hero__title {
  display: block;
  width: min(64vw, 900px, 88vh);
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  transform-origin: center;
  animation: cloud-float 7s ease-in-out infinite;
  will-change: transform;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hero__fog-pieces,
.hero__fog-engulf {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

.hero__fog-pieces {
  z-index: 6;
  inset: 0;
  transform: translate3d(var(--fog-bank-x), var(--fog-bank-y), 0);
}

.hero__fog-piece {
  position: absolute;
  top: calc(100% - max(85px, 7.63vw));
  display: block;
  width: max(400px, 36vw);
  height: auto;
  filter: drop-shadow(0 6px 7px rgb(66 75 74 / 16%));
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 3.5%,
    #000 96.5%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 3.5%,
    #000 96.5%,
    transparent 100%
  );
  will-change: transform;
}

.hero__fog-piece--1 {
  z-index: 1;
  left: -12%;
}

.hero__fog-piece--2 {
  z-index: 2;
  left: 14%;
  transform: scaleX(-1);
}

.hero__fog-piece--3 {
  z-index: 3;
  left: 40%;
}

.hero__fog-piece--4 {
  z-index: 4;
  left: 66%;
  transform: scaleX(-1);
}

.hero__fog-engulf {
  z-index: 8;
  top: 100%;
  left: 50%;
  width: max(118vw, calc(100vh * 1.8713));
  width: max(118vw, calc(100svh * 1.8713));
  aspect-ratio: 1716 / 1834;
  transform: translate3d(-50%, var(--fog-engulf-y), 0);
  transform-origin: center bottom;
}

.hero__fog-engulf-art {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

.about {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: -100vh;
  margin-top: -100svh;
  display: grid;
  place-items: start center;
  padding: clamp(24px, 4vh, 56px) 0 40px;
  color: #294f63;
  background: transparent;
}

.about__inner {
  position: relative;
  width: 100%;
  text-align: center;
  opacity: var(--about-reveal, 1);
  visibility: var(--about-visibility, visible);
  transition: opacity 120ms linear;
}

.about__embed {
  display: block;
  width: 100%;
  height: min(72vh, 760px);
  min-height: 480px;
  border: 0;
  background: transparent;
}

.about__search {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: block;
  width: min(900px, calc(100% - 48px));
  transform: translate(-50%, -50%);
}

.about__search input {
  display: block;
  width: 100%;
  height: clamp(60px, 5.5vw, 80px);
  padding: 0 32px;
  border: 4px solid #35aaff;
  border-radius: 999px;
  outline: 0;
  color: #151515;
  background: rgb(255 255 255 / 94%);
  font: 400 clamp(1.25rem, 2.1vw, 2.1rem) / 1.1 "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.02em;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.about__search input::placeholder {
  color: #151515;
  opacity: 1;
}

.about__search input:focus {
  border-color: #188fe5;
  box-shadow: 0 0 0 5px rgb(53 170 255 / 18%);
}

.about__search button {
  position: absolute;
  top: 50%;
  right: 10px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #35aaff;
  font: 500 1.45rem / 1 system-ui, sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
}

.about__search button span {
  display: block;
  transform: translateY(-1px);
}

.about__search button[hidden] {
  display: none;
}

.about__search button:hover {
  background: #188fe5;
}

.about__search button:focus-visible {
  outline: 3px solid #151515;
  outline-offset: 3px;
}

.about__search input:not(:placeholder-shown) {
  padding-right: 84px;
}

.about__eyebrow {
  margin: 0 0 18px;
  color: #c85535;
  font: 700 clamp(0.78rem, 1.1vw, 0.95rem) / 1.2 system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.about h2 {
  margin: 0;
  font: 700 clamp(3rem, 8vw, 7.5rem) / 0.94 Georgia, serif;
  letter-spacing: -0.055em;
}

@keyframes cloud-float {
  0%,
  100% {
    transform: translateY(-7px) rotate(-0.2deg);
  }

  50% {
    transform: translateY(7px) rotate(0.2deg);
  }
}

@keyframes boat-cruise {
  0% {
    left: 0;
    transform: scaleX(1);
  }

  49.8% {
    left: 14%;
    transform: scaleX(1);
  }

  50% {
    left: 14%;
    transform: scaleX(-1);
  }

  99.8% {
    left: 0;
    transform: scaleX(-1);
  }

  100% {
    left: 0;
    transform: scaleX(1);
  }
}

@keyframes boat-bob {
  0%,
  100% {
    transform: translateY(0) rotate(-0.35deg);
  }

  50% {
    transform: translateY(3px) rotate(0.35deg);
  }
}

@keyframes gull-flap {
  0%,
  100% {
    transform: scaleY(1) rotate(-0.15deg);
  }

  50% {
    transform: scaleY(0.46) rotate(0.6deg);
  }
}

@keyframes flag-ripple {
  0%,
  100% {
    transform: scaleX(1) skewY(-1deg);
  }

  50% {
    transform: scaleX(0.8) skewY(3deg);
  }
}

@media (min-aspect-ratio: 9 / 4) {
  .hero__title-stage {
    inset: 0 0 64%;
    padding: 14px 24px;
  }

  .hero__title {
    width: min(44vw, 620px, 46vh);
    max-height: calc(100% - 28px);
  }

}

@media (max-aspect-ratio: 4 / 5) {
  html,
  body {
    overflow-x: clip;
    overflow-y: auto;
  }

  .scroll-story {
    height: 100vh;
    height: 100svh;
  }

  .hero {
    position: relative;
  }

  .hero__ambient,
  .hero__bay,
  .hero__foreground,
  .hero__fog-pieces,
  .hero__fog-engulf {
    display: none;
  }

  .hero::after {
    display: none;
  }

  .hero__background {
    object-fit: cover;
    object-position: center bottom;
  }

  .hero__title {
    width: min(92vw, 46vh);
    max-height: 100%;
  }

  .hero__title-stage {
    inset: 0 0 34%;
    place-items: center;
    padding: 24px 14px 0;
  }

  .about {
    margin-top: 0;
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-story {
    height: 100vh;
    height: 100svh;
  }

  .hero {
    position: relative;
  }

  .hero__title {
    animation: none;
    transform: none;
  }

  .hero__fog-pieces,
  .hero__fog-engulf {
    display: none;
  }

  .hero__boat-entry {
    animation: none;
    opacity: 1;
    transform: translateX(23%);
  }

  .hero__boat-cruise,
  .hero__boat {
    animation: none;
    transform: none;
  }

  .hero__gull,
  .hero__flag {
    animation: none;
    transform: none;
  }
}