/* Seasonal layer (overlay) */
#seasonal-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 35; /* debajo de modales */
  overflow: hidden;
}

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce){
  #seasonal-layer{ display:none !important; }
}

.seasonal-item{
  position:absolute;
  top:-20vh;
  left:0;
  will-change: transform, opacity;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

@keyframes seasonal-fall{
  from{ transform: translate3d(var(--x,0px), -20vh, 0) rotate(var(--r0,0deg)); opacity:0; }
  10%{ opacity: 1; }
  to{ transform: translate3d(var(--x,0px), 120vh, 0) rotate(var(--r1,360deg)); opacity:0; }
}

.seasonal-fall{
  animation-name: seasonal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes seasonal-fly{
  from{ transform: translate3d(-30vw, var(--y,10vh), 0) scale(var(--s,1)); opacity:0; }
  8%{ opacity:1; }
  to{ transform: translate3d(130vw, var(--y,10vh), 0) scale(var(--s,1)); opacity:0; }
}

.seasonal-fly{
  animation-name: seasonal-fly;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes seasonal-peek-left{
  0%{ transform: translate3d(-120%, var(--y,20vh), 0) scale(var(--s,1)); opacity:0; }
  12%{ opacity:1; }
  20%{ transform: translate3d(0%, var(--y,20vh), 0) scale(var(--s,1)); }
  70%{ transform: translate3d(0%, var(--y,20vh), 0) scale(var(--s,1)); opacity:1; }
  100%{ transform: translate3d(-120%, var(--y,20vh), 0) scale(var(--s,1)); opacity:0; }
}
/*/@keyframes seasonal-peek-right{
  0%{ transform: translate3d(120%, var(--y,20vh), 0) scale(var(--s,1)); opacity:0; }
  12%{ opacity:1; }
  20%{ transform: translate3d(0%, var(--y,20vh), 0) scale(var(--s,1)); }
  70%{ transform: translate3d(0%, var(--y,20vh), 0) scale(var(--s,1)); opacity:1; }
  100%{ transform: translate3d(120%, var(--y,20vh), 0) scale(var(--s,1)); opacity:0; }
}
*/
@keyframes seasonal-peek-right{
  0%{
    transform: translate3d(120%, var(--y,20vh), 0) scale(var(--s,1)) rotateY(180deg);
    opacity:0;
  }
  12%{ opacity:1; }
  20%{
    transform: translate3d(0%, var(--y,20vh), 0) scale(var(--s,1)) rotateY(180deg);
  }
  70%{
    transform: translate3d(0%, var(--y,20vh), 0) scale(var(--s,1)) rotateY(180deg);
    opacity:1;
  }
  100%{
    transform: translate3d(120%, var(--y,20vh), 0) scale(var(--s,1)) rotateY(180deg);
    opacity:0;
  }
}
.seasonal-peek{
  top:0;
  left:0;
  position: absolute;
  will-change: transform, opacity;
}
.seasonal-peek.left{ left: 0; }
.seasonal-peek.right{ right: 0; left:auto; }