/**
 * Sibling dark lander — bank-style underwater skyrays + coral reef.
 * Assets must live in each site's /images/ (copied by apply-network-visual-chrome).
 * Loaded after theme-dark.css so it beats the solid dark lander fallback.
 */

/* Beat shared solid dark lander — underwater waves / rays */
html[data-theme="dark"] .landing-content-section {
  background-color: #010106;
  background-image: url("../images/underwater-skyrays-hero.jpg");
  background-image: -webkit-image-set(
    url("../images/underwater-skyrays-hero.webp") type("image/webp"),
    url("../images/underwater-skyrays-hero.jpg") type("image/jpeg")
  );
  background-image: image-set(
    url("../images/underwater-skyrays-hero.webp") type("image/webp"),
    url("../images/underwater-skyrays-hero.jpg") type("image/jpeg")
  );
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Shared theme-dark paints .top-container solid — keep it clear so rays show */
html[data-theme="dark"] .landing-content-section > .top-container,
html[data-theme="dark"] .landing-content-section-container.top-container {
  background-color: transparent;
  background-image: none;
}

.coral-reef {
  display: none;
}

html[data-theme="dark"] .coral-reef {
  display: block;
  background-color: transparent;
  background-image: url("../images/coral-reef.webp");
  background-image: -webkit-image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  background-image: image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 115%;
  height: 72%;
  position: absolute;
  top: 34%;
  left: -18%;
  pointer-events: none;
  z-index: 1;
}

html[data-theme="dark"] .lander-globe-cash,
html[data-theme="dark"] .lander-globe-chart,
html[data-theme="dark"] .coral-reef {
  z-index: 1;
}

html[data-theme="dark"] .lander-globe-iconography {
  z-index: 2;
}

html[data-theme="dark"] .coral-reef::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(1, 1, 6, 0.08) 0%,
    rgba(1, 1, 6, 0.16) 28%,
    rgba(1, 1, 6, 0.4) 62%,
    rgba(1, 1, 6, 0.72) 100%
  );
  pointer-events: none;
  -webkit-mask-image: url("../images/coral-reef.webp");
  mask-image: url("../images/coral-reef.webp");
  -webkit-mask-image: -webkit-image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  mask-image: image-set(
    url("../images/coral-reef.avif") type("image/avif"),
    url("../images/coral-reef.webp") type("image/webp")
  );
  -webkit-mask-position: 50% 60%;
  mask-position: 50% 60%;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media screen and (max-width: 991px) {
  html[data-theme="dark"] .coral-reef {
    width: 420px;
    height: 280px;
    top: 36%;
    left: auto;
    right: -70px;
  }
}

@media screen and (max-width: 767px) {
  html[data-theme="dark"] .coral-reef {
    width: calc(1.15 * 155cqh);
    height: calc(0.72 * 155cqh);
    top: calc(0.14 * 155cqh);
    left: calc(50% + (-0.18 - 0.5) * 155cqh);
    right: auto;
    z-index: 1;
  }
}