/* Natural projected fern canopy, adapted from the Buro Floema scene's lighting. */
.hero.paak-kiwi-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.paak-fern-shadow {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 104%;
  height: 88%;
  left: -2%;
  top: -2%;
  background: url("assets/paak-fern-shadow-v2.webp") center top/cover no-repeat;
  opacity: 0.14;
  /* White stays clear; strengthen only the foliage ink, below the .16 floor shadow. */
  filter: grayscale(1) contrast(1.75) blur(3.8px);
  mix-blend-mode: multiply;
  transform-origin: 85% 0;
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 15%,
    rgba(0, 0, 0, 0.55) 36%,
    transparent 68%
  );
  animation: paak-fern-sway 22s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.paak-fern-shadow.is-active {
  animation-play-state: running;
}
@keyframes paak-fern-sway {
  from {
    transform: translate3d(0.7%, 0, 0) rotate(-0.9deg) skewX(-0.4deg);
  }
  to {
    transform: translate3d(-2.1%, 1.4%, 0) rotate(0.9deg) skewX(0.4deg);
  }
}
/* Icon direction remains deferred. */
.layout-header.is-on-hero .paak-header-icon {
  opacity: 0;
  visibility: hidden;
}
body.menu-open .layout-header.is-on-hero .paak-header-mark {
  opacity: 1;
  visibility: visible;
}
@media (width < 768px) {
  .paak-fern-shadow {
    width: 140%;
    height: 76%;
    left: -35%;
    top: -1%;
    opacity: 0.12;
    background-position: 70% top;
    mask-image: linear-gradient(
      to bottom,
      #000 0%,
      #000 12%,
      rgba(0, 0, 0, 0.45) 36%,
      transparent 73%
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .paak-fern-shadow {
    animation: none;
    transform: none;
  }
}

/* Live foliage flexes locally; the receiving plane stays still. */
.paak-fern-shadow canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.paak-fern-shadow.is-live {
  background: none;
  animation: none;
  transform: none;
}

.paak-fern-shadow canvas[hidden] {
  display: none;
}