.god-ray {
  
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(48vw, 880px);
  
  height: 200vh;
  pointer-events: none;
  
  mix-blend-mode: screen;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  will-change: translate, opacity;

  animation-name: godRayBreathe, godRayParallax;
  animation-duration: 9s, 1s;
  animation-timing-function: ease-in-out, linear;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, both;
  animation-timeline: auto, scroll();
}

@keyframes godRayParallax {
  from { translate: 0 0; }
  to   { translate: 0 80vh; }
}

.god-ray__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: saturate(1.05) blur(0.5px);
}

@property --drop-progress {
  syntax: '<number>';
  initial-value: 0;
  inherits: false;
}

.god-ray__drop {
  position: absolute;
  top: 0;
  left: var(--x-top, 50%);
  width: 6px;
  height: 11%;
  
  transform: translateX(-50%) translateY(calc(-16vh + 226vh * var(--drop-progress)));
  pointer-events: none;
  background: radial-gradient(
    ellipse 100% 60% at 50% 50%,
    rgba(255, 250, 230, 1)    0%,
    rgba(255, 235, 190, 0.75) 35%,
    rgba(255, 215, 150, 0.30) 65%,
    transparent              100%
  );
  filter: blur(3px);
  mix-blend-mode: color-dodge;
  animation: godRayDrop var(--dur, 5s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

.bottom-glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  
  height: 480px;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  overflow: hidden;
  
  mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 22%);
  animation: bottomGlowBreathe 11s ease-in-out infinite;
  will-change: opacity;
}
.bottom-glow__img {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: cover;
  
  transform: translate(-50%, 0);
  filter: saturate(1.05);
}

@keyframes bottomGlowBreathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.00; }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-glow { animation: none; opacity: 0.9; }
}

@keyframes godRayDrop {
  0%   { --drop-progress: 0; opacity: 0; }
  20%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { --drop-progress: var(--drop-max, 0.7); opacity: 0; }
}

@keyframes godRayBreathe {
  0%, 100% { opacity: 0.92; }
  50%      { opacity: 1.00; }
}

@media (max-width: 960px) {
  .god-ray { width: 80vw; animation: none; }
}

@media (max-width: 560px) {
  .god-ray__drop {
    display: none;
  }
}