/* Original balete branches hang above the hero's illustrated clearing. */
.hero-canopy {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  overflow: hidden;
}
.hero-hanging-branch { position: absolute; top: -35px; }
.hero-hanging-branch img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 0;
  animation: balete-sway 9.5s ease-in-out infinite alternate;
}
.hero-hanging-left { left: -6.5%; width: clamp(240px, 28vw, 460px); }
.hero-hanging-left img { transform-origin: 20% 0; }
.hero-hanging-right { right: -3.5%; top: -45px; width: clamp(220px, 25vw, 410px); }
.hero-hanging-right img { transform-origin: 85% 0; animation-duration: 12s; animation-delay: -5s; animation-direction: alternate-reverse; }
.hero .birthday-stamp { right: 19%; top: 26px; }
.intro-pending .hero-hanging-branch img { animation-play-state: paused; }
@keyframes balete-sway {
  from { transform: rotate(-1.3deg); }
  to { transform: rotate(1.5deg); }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero .birthday-stamp { right: 4%; top: 35px; }
}
@media (max-width: 760px) {
  .hero-hanging-left { width: clamp(170px, 46vw, 260px); left: -9%; top: -62px; }
  .hero-hanging-right { width: clamp(160px, 44vw, 245px); right: -8%; top: -74px; }
  .hero-hanging-branch img { animation-duration: 11s; }
  .hero-hanging-right img { animation-duration: 13s; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-hanging-branch img { animation: none; transform: none; }
}
@media (max-width: 360px) {
  .hero-hanging-left { left: -13%; }
  .hero-hanging-right { right: -11%; }
}