/* Localized atmosphere adds depth without changing the original photo treatment. */
.fog {
  inset: 0;
  height: auto;
  z-index: 0;
  background: none;
  filter: none;
  animation: none;
  mask-image: linear-gradient(90deg, transparent 20%, #0004 48%, #000 78%);
}
.fog span {
  position: absolute;
  left: -25%;
  bottom: 3%;
  width: 150%;
  height: 32%;
  background:
    radial-gradient(ellipse at 40% 58%, #dce6de38, transparent 29%),
    radial-gradient(ellipse at 74% 50%, #dce6de50, transparent 34%);
  opacity: .5;
  animation: forest-fog 26s ease-in-out -9s infinite alternate;
}
.fog span:nth-child(2) {
  bottom: 28%;
  height: 18%;
  left: 22%;
  width: 100%;
  opacity: .3;
  animation: forest-fog 34s ease-in-out -23s infinite alternate-reverse;
}
.fog span:nth-child(3) {
  bottom: 48%;
  height: 24%;
  left: 40%;
  width: 85%;
  opacity: .22;
  animation: forest-fog-high 41s ease-in-out -16s infinite alternate;
}
.depth-light {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: none;
  animation: none;
  background: radial-gradient(ellipse at 25% 5%, #668d7520, transparent 55%);
}
.depth-light span {
  position: absolute;
  top: -12%;
  left: 32%;
  width: 19%;
  height: 82%;
  transform-origin: 50% 0%;
  background: linear-gradient(180deg, #b5e2df50, #94c9c428 25%, #83b7b509 55%, transparent 78%);
  mask-image:
    conic-gradient(from 160deg at 50% 0%, transparent 0deg, #0003 7deg, #000 13deg, #000 25deg, #0003 33deg, transparent 40deg),
    linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-composite: intersect;
  opacity: .4;
  --ray-angle: 23deg;
  transform: rotate(var(--ray-angle));
  animation: underwater-ray 18s ease-in-out -6s infinite alternate;
}
.depth-light span:nth-child(2) {
  left: 59%;
  width: 13%;
  height: 73%;
  --ray-angle: 18deg;
  opacity: .3;
  animation-duration: 25s;
  animation-delay: -17s;
  animation-direction: alternate-reverse;
}
.depth-light span:nth-child(3) {
  left: 80%;
  width: 21%;
  --ray-angle: 28deg;
  opacity: .25;
  animation-duration: 31s;
  animation-delay: -11s;
}
.hermon-feature-copy { position: relative; z-index: 2; }
.hermon-page-copy { z-index: 2; }
@keyframes forest-fog {
  from { transform: translate3d(-5%, 0, 0) scale(1); }
  to { transform: translate3d(7%, -4%, 0) scale(1.06); }
}
@keyframes forest-fog-high {
  from { transform: translate3d(4%, 3%, 0) scale(1.04); }
  to { transform: translate3d(-8%, -2%, 0) scale(1); }
}
@keyframes underwater-ray {
  from { transform: rotate(calc(var(--ray-angle) - 3deg)); opacity: .28; }
  to { transform: rotate(calc(var(--ray-angle) + 3deg)); opacity: .55; }
}
@media (max-width: 600px) {
  .fog { mask-image: linear-gradient(90deg, transparent 15%, #0005 62%, #000); }
  .fog span { height: 26%; bottom: 4%; }
  .fog span:nth-child(2) { bottom: 30%; height: 16%; }
  .fog span:nth-child(3), .depth-light span:nth-child(3) { display: none; }
  .depth-light span { left: 48%; width: 31%; height: 68%; }
  .depth-light span:nth-child(2) { left: 88%; width: 24%; height: 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .fog span, .depth-light span { animation: none !important; }
}