/*
 * /islands atmospheric hero
 *
 * Three copies of one transparent cloud bank move at different scales and
 * speeds. The separation creates depth without changing the LCP hero image.
 */
body .image-container-main {
  isolation: isolate;
}

.hero-atmosphere--island-clouds {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.hg-islands-cloud {
  --cloud-opacity: 0.23;
  --cloud-scale: 1;
  --cloud-rise: 0px;
  position: absolute;
  left: -72%;
  display: block;
  aspect-ratio: 900 / 380;
  background: url("/files/images/effects/islands-cloud-bank-v1.svg") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  filter: drop-shadow(0 18px 22px rgba(0, 30, 62, 0.2));
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0) scale(var(--cloud-scale));
  animation: hg-islands-cloud-drift var(--cloud-duration) linear infinite;
  animation-delay: var(--cloud-delay);
}

.hg-islands-cloud--far {
  --cloud-opacity: 0.2;
  --cloud-scale: 0.78;
  --cloud-rise: 12px;
  --cloud-duration: 92s;
  --cloud-delay: -39s;
  top: 7%;
  width: clamp(260px, 37vw, 620px);
  filter: blur(1.1px) drop-shadow(0 10px 16px rgba(0, 30, 62, 0.13));
}

.hg-islands-cloud--middle {
  --cloud-opacity: 0.23;
  --cloud-scale: 0.96;
  --cloud-rise: -8px;
  --cloud-duration: 68s;
  --cloud-delay: -51s;
  top: 37%;
  width: clamp(330px, 50vw, 820px);
}

.hg-islands-cloud--near {
  --cloud-opacity: 0.26;
  --cloud-scale: 1.12;
  --cloud-rise: 18px;
  --cloud-duration: 51s;
  --cloud-delay: -17s;
  top: 57%;
  width: clamp(440px, 68vw, 1100px);
  filter: blur(0.35px) drop-shadow(0 25px 30px rgba(0, 25, 58, 0.25));
}

@keyframes hg-islands-cloud-drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(var(--cloud-scale));
  }
  8% {
    opacity: var(--cloud-opacity);
  }
  82% {
    opacity: var(--cloud-opacity);
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(100vw + 170%), var(--cloud-rise), 0) scale(var(--cloud-scale));
  }
}

@media (max-width: 641px) {
  .hg-islands-cloud--far {
    --cloud-opacity: 0.18;
    top: 4%;
  }

  .hg-islands-cloud--middle {
    --cloud-opacity: 0.21;
    top: 33%;
  }

  .hg-islands-cloud--near {
    --cloud-opacity: 0.24;
    top: 54%;
  }

  @keyframes hg-islands-cloud-drift {
    0% {
      opacity: 0;
      transform: translate3d(0, 0, 0) scale(var(--cloud-scale));
    }
    10% {
      opacity: var(--cloud-opacity);
    }
    80% {
      opacity: var(--cloud-opacity);
    }
    100% {
      opacity: 0;
      transform: translate3d(calc(100vw + 170%), var(--cloud-rise), 0) scale(var(--cloud-scale));
    }
  }
}

/*
 * Phones get a dedicated caption dock below the map instead of the shared
 * floating title card. This preserves the full island view while keeping the
 * page title, author, date, and scroll cue together as one clear hero footer.
 * Tablets retain the overlay treatment.
 */
@media (max-width: 480px) {
  #hawaii-top:has(.hero-atmosphere--island-clouds) {
    --hg-islands-phone-image-height: clamp(300px, 90vw, 350px);
    --hg-islands-phone-caption-height: 96px;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .bg-image-top {
    height: calc(var(--hg-islands-phone-image-height) + var(--hg-islands-phone-caption-height));
    border-bottom: 0;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .image-container-main {
    display: grid;
    grid-template: var(--hg-islands-phone-image-height) var(--hg-islands-phone-caption-height) / 100%;
    height: 100%;
    aspect-ratio: auto;
    background: #082d4b;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-img {
    grid-area: 1 / 1;
    height: var(--hg-islands-phone-image-height);
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-atmosphere--island-clouds {
    inset: 0 0 auto;
    height: var(--hg-islands-phone-image-height);
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .image-container-main.has-overlay-title::after {
    display: none;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-title-overlay-box {
    position: relative;
    grid-area: 2 / 1;
    align-self: stretch;
    box-sizing: border-box;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
    padding: 10px 62px 27px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    background: linear-gradient(135deg, #082d4b, #0b385a);
    box-shadow: none;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-title-overlay-box .hero-overlay-title {
    margin-bottom: 5px;
    max-width: 100%;
    font-size: clamp(18px, 5.2vw, 21px) !important;
    line-height: 1.15;
    white-space: nowrap;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.58);
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-overlay-byline {
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-overlay-byline img {
    width: 28px !important;
    height: 28px !important;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-overlay-byline span {
    font-size: 12px;
    line-height: 1.2;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .hero-overlay-byline > span + span {
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, 0.38);
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .scroll-indicator {
    right: 14px;
    bottom: 34px;
    left: auto;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transform: none;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .scroll-indicator svg {
    width: 30px;
    height: 30px;
  }

  #hawaii-top:has(.hero-atmosphere--island-clouds) .wave {
    z-index: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-islands-cloud {
    animation: none;
    opacity: 0.17;
    will-change: auto;
  }

  .hg-islands-cloud--far {
    left: 10%;
  }

  .hg-islands-cloud--middle {
    left: 54%;
  }

  .hg-islands-cloud--near {
    left: -24%;
  }
}