/* Random front-facing animal fades across the complete homepage message section. */
.aynew-page > .animal-section {
  position: relative;
  isolation: isolate;
  gap: 0;
  background: #000;
  overflow: hidden;
}

.animal-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.aynew-page > .animal-section > .text-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2cqw, 28px);
  background: transparent;
  overflow: visible;
}

.aynew-page > .animal-section > .text-container > .aynew-message-rule,
.aynew-page > .animal-section > .text-container > h2,
.aynew-page > .animal-section > .text-container > p {
  position: relative;
  z-index: 2;
}

.aynew-animal-pop {
  position: absolute;
  display: block;
  object-fit: contain;
  opacity: 0;
  transition: opacity 520ms ease-in-out;
  will-change: opacity;
}

.aynew-animal-pop.is-visible { opacity: .54; }

@media (max-width: 999px) {
  .aynew-page > .animal-section > .text-container { gap: 20px; }
}

@media (min-width: 1000px) {
  .aynew-page > .animal-section > .text-container { gap: clamp(10px, 1.2cqw, 16px); }
}

@media (prefers-reduced-motion: reduce) {
  .aynew-animal-pop { transition-duration: 1ms; will-change: auto; }
}


/* The same fade layer is reused only in the marked black sections on inner pages. */
.animal-popins-host {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.animal-popins-host > :not(.animal-layer) {
  position: relative;
  z-index: 2;
}