@charset "UTF-8";

:root { color-scheme: dark; }
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: #000; }
body { margin: 0; min-height: 100vh; font-family: Arial, sans-serif; }
img, video { display: block; max-width: 100%; }

/* Fit the Photoshop composition to the viewport while the artwork fills it. */
.landing {
  --scene-scale: min(calc(100vw / 1920), calc(100svh / 1080));
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(53 * var(--scene-scale)) 16px calc(205 * var(--scene-scale));
  background:
    linear-gradient(to bottom, transparent 82%, #000 100%),
    url("img/eruption-bg.webp") center top / cover no-repeat #000;
}
.landing__content {
  width: calc(602 * var(--scene-scale));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.landing__logo {
  width: calc(525 * var(--scene-scale));
  height: auto;
  margin-left: calc(5 * var(--scene-scale));
  margin-bottom: calc(22 * var(--scene-scale));
  user-select: none;
}
.landing__video-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border: calc(5 * var(--scene-scale)) solid transparent;
  border-radius: calc(20 * var(--scene-scale));
  /* Photoshop stroke: 114° (336° in CSS), eight custom color stops.
     Remap its 100% square-length ramp to CSS's longer diagonal gradient line. */
  background:
    linear-gradient(#350000, #350000) padding-box,
    linear-gradient(
      336deg,
      #fffc8b 12.12930557%,
      #ab7a15 22.85440458%,
      #fdb520 35.61357409%,
      #fffc8b 49.90754225%,
      #fdb520 60.91001451%,
      #ab7a15 70.96941772%,
      #fffc8b 79.27212367%,
      #fdb520 87.87069443%
    ) border-box;
}
.landing__video { width: 100%; height: 100%; object-fit: contain; }
.landing__play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: calc(112 * var(--scene-scale));
  height: calc(112 * var(--scene-scale));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: opacity .25s ease, visibility .25s ease;
}
.landing__play-image { width: 100%; height: auto; }
.landing__play--hidden { opacity: 0; visibility: hidden; pointer-events: none; }
/* The final CTA is part of the video. This transparent target uses its referral handler. */
.landing__cta {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
}
.landing__cta--visible { visibility: visible; pointer-events: auto; }
.landing__play:focus-visible, .landing__cta:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Reserve space for the smaller logo and fit the complete portrait frame above the fold. */
@media (max-width: 767px) {
  .landing {
    --scene-scale: min(1px, calc((100vw - 32px) / 602));
    --mobile-logo-height: min(64px, 9svh);
    --mobile-video-height: calc(100svh - var(--mobile-logo-height) - 34px);
    padding: 12px 16px;
  }
  .landing__content {
    width: min(100%, calc(var(--mobile-video-height) * 9 / 16));
  }
  .landing__logo {
    width: calc(var(--mobile-logo-height) * 525 / 198);
    height: auto;
    margin-left: 0;
    margin-bottom: 10px;
  }
  /* Apply the portrait ratio inside the border, so contain sizing adds no bars. */
  .landing__video-card { aspect-ratio: auto; border-width: 3px; }
  .landing__video { aspect-ratio: 9 / 16; height: auto; object-fit: contain; }
  .landing__play { width: min(80px, 20%); height: auto; aspect-ratio: 1; }
}