/* Lightweight autumn leaves overlay. Place the overlay inside your hero element. */
.falling-leaves-host { position: relative; }
.falling-leaves-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  z-index: var(--falling-leaves-z, 2);
  pointer-events: none;
  user-select: none;
  contain: layout style paint;
}
.falling-leaf {
  position: absolute;
  left: var(--left);
  top: 0;
  width: var(--size);
  height: var(--size);
  opacity: 0;
  will-change: transform, opacity;
  animation: falling-leaf-path var(--duration) linear var(--delay) infinite;
}
.falling-leaf img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(var(--blur, 0px));
  transform-origin: 50% 50%;
  will-change: transform;
  animation: falling-leaf-flutter var(--flutter-duration) ease-in-out var(--flutter-delay) infinite alternate;
}
@keyframes falling-leaf-path {
  0%   { transform: translate3d(0, -110px, 0) rotate(var(--rotation)); opacity: 0; }
  7%   { opacity: var(--opacity); }
  24%  { transform: translate3d(var(--x1), var(--y1), 0) rotate(var(--rotation1)); }
  48%  { transform: translate3d(var(--x2), var(--y2), 0) rotate(var(--rotation2)); }
  74%  { transform: translate3d(var(--x3), var(--y3), 0) rotate(var(--rotation3)); }
  94%  { opacity: var(--opacity); }
  100% { transform: translate3d(var(--x4), var(--y4), 0) rotate(var(--rotation4)); opacity: 0; }
}
@keyframes falling-leaf-flutter {
  0%   { transform: perspective(170px) rotateY(-38deg) rotateX(15deg) rotateZ(-13deg); }
  100% { transform: perspective(170px) rotateY(39deg) rotateX(-15deg) rotateZ(13deg); }
}
.falling-leaves-layer.is-paused .falling-leaf,
.falling-leaves-layer.is-paused .falling-leaf img {
  animation-play-state: paused;
}
.osen-page .hero-card, .osen-page .hero-sale { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .falling-leaves-layer { display: none; }
}