/*
 * Closing tableau for the Dhamma sources globe.
 * The homepage Buddha is intentionally treated as atmosphere: the globe and
 * closing message remain the foreground, while the portrait slowly emerges
 * from the dark as the final section enters the viewport.
 */
.exit {
  overflow: hidden;
}

.exit::before,
.exit::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.exit::before {
  z-index: -2;
  inset: -8% 0 -4%;
  background:
    linear-gradient(180deg, #08090b 0%, transparent 24%, transparent 68%, #08090b 100%),
    linear-gradient(90deg, #08090b 0%, rgba(8, 9, 11, .78) 26%, rgba(8, 9, 11, .18) 64%, #08090b 100%),
    url("/assets/buddha-dawn-large.webp") 72% 34% / cover no-repeat;
  opacity: .28;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.025);
  transform-origin: 68% 42%;
  -webkit-mask-image: radial-gradient(ellipse 78% 92% at 69% 48%, #000 16%, rgba(0, 0, 0, .92) 54%, transparent 94%);
  mask-image: radial-gradient(ellipse 78% 92% at 69% 48%, #000 16%, rgba(0, 0, 0, .92) 54%, transparent 94%);
}

.exit::after {
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 70% 33%, rgba(230, 185, 102, .15), transparent 23%),
    linear-gradient(180deg, transparent 60%, rgba(8, 9, 11, .72) 88%, #08090b 100%);
}

.exit-inner {
  position: relative;
  z-index: 2;
}

.exit .kicker {
  color: rgba(232, 202, 146, .84);
}

.exit h2 {
  text-shadow: 0 2px 42px rgba(8, 9, 11, .96), 0 0 76px rgba(8, 9, 11, .7);
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .exit::before {
      animation: closing-buddha-reveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 62%;
    }

    .exit::after {
      animation: closing-radiance-reveal linear both;
      animation-timeline: view();
      animation-range: entry 18% cover 68%;
    }
  }
}

@keyframes closing-buddha-reveal {
  from {
    opacity: 0;
    transform: scale(1.09) translateY(3%);
  }
  to {
    opacity: .28;
    transform: scale(1.025) translateY(0);
  }
}

@keyframes closing-radiance-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 720px) {
  .exit::before {
    inset: -2% -22% 0;
    background-position: 69% 40%;
    background-size: auto 100%;
    opacity: .21;
    -webkit-mask-image: radial-gradient(ellipse 74% 82% at 67% 46%, #000 8%, rgba(0, 0, 0, .88) 52%, transparent 94%);
    mask-image: radial-gradient(ellipse 74% 82% at 67% 46%, #000 8%, rgba(0, 0, 0, .88) 52%, transparent 94%);
  }

  .exit::after {
    background:
      radial-gradient(circle at 68% 31%, rgba(230, 185, 102, .12), transparent 24%),
      linear-gradient(180deg, transparent 54%, rgba(8, 9, 11, .78) 86%, #08090b 100%);
  }

  @keyframes closing-buddha-reveal {
    from {
      opacity: 0;
      transform: scale(1.08) translateY(3%);
    }
    to {
      opacity: .21;
      transform: scale(1.025) translateY(0);
    }
  }
}