:root {
  --foreground: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #087d97;
}

body {
  color: var(--foreground);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
}

.hero__background,
.hero__shade {
  position: absolute;
  inset: 0;
}

.hero__background {
  z-index: -2;
  background: url("assets/sca-yachts-hero.png") center center / cover no-repeat;
  animation: ocean-breathe 18s ease-in-out infinite alternate;
}

.hero__shade {
  z-index: -1;
  background:
    linear-gradient(
      180deg,
      rgba(0, 36, 55, 0.28) 0%,
      transparent 45%,
      rgba(0, 34, 44, 0.08) 100%
    ),
    radial-gradient(
      ellipse 48% 36% at center 42%,
      rgba(0, 33, 52, 0.5),
      transparent 100%
    );
}

.hero__content {
  display: flex;
  width: min(72vw, 720px);
  flex-direction: column;
  align-items: center;
  margin-top: -12vh;
  text-align: center;
  filter: drop-shadow(0 2px 18px rgba(0, 24, 40, 0.55));
  animation: rise-in 1.5s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.hero__logo {
  display: block;
  width: 100%;
  height: auto;
}

.hero__tagline {
  margin: clamp(14px, 2.3vh, 24px) 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 2.3vw, 1.8rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-shadow: 0 2px 16px rgba(0, 34, 50, 0.46);
}

.hero__scroll {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  width: 1px;
  height: 38px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.3);
}

.hero__scroll span {
  position: absolute;
  inset: 0;
  background: white;
  transform: translateY(-100%);
  animation: tide-line 2.4s ease-in-out infinite;
}

.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;
}

@keyframes ocean-breathe {
  from {
    transform: scale(1.01);
  }

  to {
    transform: scale(1.055);
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tide-line {
  0% {
    transform: translateY(-100%);
  }

  45%,
  55% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(100%);
  }
}

@media (max-width: 640px) {
  .hero__background {
    background-position: 50% center;
  }

  .hero__content {
    width: min(88vw, 520px);
    margin-top: -24vh;
  }

  .hero__tagline {
    font-size: clamp(1.05rem, 5vw, 1.35rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__background,
  .hero__content,
  .hero__scroll span {
    animation: none;
  }
}