/* Decoration stays in narrow outer gutters and never intercepts input. */
.hero-festive{position:absolute;z-index:5;inset:0;overflow:hidden;pointer-events:none;user-select:none}
.hero-festive__edge{position:absolute;top:0;bottom:0;left:0;width:clamp(14px,2.2vw,54px);overflow:hidden}
.hero-festive__edge--right{right:0;left:auto}
.hero-festive__piece{position:absolute;top:-24px;left:var(--piece-left);width:var(--piece-width);height:var(--piece-height);border-radius:1px;background:var(--piece-color);opacity:0;animation:hero-edge-fall var(--piece-duration) linear var(--piece-delay) infinite;will-change:transform}
@keyframes hero-edge-fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--piece-rotation)) rotateY(0deg)}
  8%{opacity:.8}
  35%{transform:translate3d(5px,calc(var(--confetti-travel)*.35),0) rotate(calc(var(--piece-rotation) + 110deg)) rotateY(125deg)}
  68%{transform:translate3d(-4px,calc(var(--confetti-travel)*.68),0) rotate(calc(var(--piece-rotation) + 240deg)) rotateY(280deg)}
  90%{opacity:.8}
  100%{opacity:0;transform:translate3d(0,var(--confetti-travel),0) rotate(calc(var(--piece-rotation) + 360deg)) rotateY(360deg)}
}
.hero-festive.is-paused .hero-festive__piece{animation-play-state:paused}
@media(max-width:520px){
  .hero-festive__edge{width:14px}
  .hero-festive__piece:nth-child(n+9){display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-festive__piece{top:var(--piece-rest);opacity:.65;animation:none;transform:rotate(var(--piece-rotation));will-change:auto}
}