/**
 * 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.avif") type("image/avif"),
    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.avif") type("image/avif"),
    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;
}

/*
 * Dark twin of light .lander-eagle-pup — lionfish in the same slot/size.
 * Assets: /images/lionfish.{avif,webp,png}
 */
.lander-lionfish {
  display: none;
  pointer-events: none;
  position: absolute;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
}

html[data-theme="dark"] .lander-lionfish {
  display: block;
  background-image: url("../images/lionfish.png?v=fish-5");
  background-image: -webkit-image-set(
    url("../images/lionfish.avif?v=fish-5") type("image/avif"),
    url("../images/lionfish.webp?v=fish-5") type("image/webp"),
    url("../images/lionfish.png?v=fish-5") type("image/png")
  );
  background-image: image-set(
    url("../images/lionfish.avif?v=fish-5") type("image/avif"),
    url("../images/lionfish.webp?v=fish-5") type("image/webp"),
    url("../images/lionfish.png?v=fish-5") type("image/png")
  );
  /* Eagle-pup slot ×0.67 (−33%); +60px right, +25px down */
  width: calc(46.4% * 0.67);
  height: calc(40% * 0.67);
  top: calc(2% + 95px);
  left: calc(-16% + 70px);
  z-index: 2;
}

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

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

  /* Eagle-pup tablet slot ×0.67 (−33%); +60px right, +25px down */
  html[data-theme="dark"] .lander-lionfish {
    width: calc(144px * 0.67);
    height: calc(112px * 0.67);
    top: calc(18% + 25px);
    left: auto;
    right: 140px;
    bottom: auto;
  }
}

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

  /* Lionfish fully on-screen over full-width circle */
  html[data-theme="dark"] .lander-lionfish {
    width: calc(0.47 * 0.67 * 100cqw);
    height: calc(0.37 * 0.67 * 100cqw);
    top: calc(0.02 * 100cqw);
    left: calc(0.04 * 100cqw);
    right: auto;
    bottom: auto;
    z-index: 2;
  }
}