/* Shared whiteboard/classroom reaction engine.
   Every reaction originates from the lower-left edge of the active whiteboard
   and each individual particle moves for a full five seconds. */
.azc-reaction-fx-layer{
  position:fixed;
  inset:0;
  z-index:2147482000;
  overflow:visible;
  pointer-events:none;
  font-family:"Cairo",system-ui,sans-serif;
}
.azc-reaction-fx{
  position:fixed;
  left:var(--fx-left);
  top:var(--fx-top);
  width:var(--fx-width);
  height:var(--fx-height);
  overflow:hidden;
  pointer-events:none;
  contain:layout paint;
}
.azc-reaction-particle{
  position:absolute;
  left:var(--start-x);
  bottom:-1.25em;
  z-index:2;
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  font-size:var(--size);
  line-height:1;
  opacity:0;
  user-select:none;
  pointer-events:none;
  transform-origin:50% 50%;
  filter:drop-shadow(0 7px 12px rgba(25,52,44,.18));
  will-change:transform,opacity;
  animation:azc-reaction-rise var(--dur) cubic-bezier(.18,.68,.22,1) var(--delay) both;
}
@keyframes azc-reaction-rise{
  0%{
    opacity:0;
    transform:translate3d(0,0,0) scale(.58) rotate(var(--rot));
  }
  8%{opacity:1}
  24%{
    transform:translate3d(var(--x1),var(--y1),0) scale(.9) rotate(calc(var(--rot) * -.45));
  }
  50%{
    opacity:1;
    transform:translate3d(var(--x2),var(--y2),0) scale(1.05) rotate(calc(var(--rot) * .35));
  }
  76%{
    opacity:1;
    transform:translate3d(var(--x3),var(--y3),0) scale(.98) rotate(calc(var(--rot) * -.25));
  }
  100%{
    opacity:0;
    transform:translate3d(var(--x4),var(--y4),0) scale(.78) rotate(calc(var(--rot) * .55));
  }
}

/* Each reaction has one clear visual language; no cross-reaction emoji mixing. */
.azc-reaction-fx--clap .azc-reaction-particle{filter:drop-shadow(0 7px 12px rgba(133,88,28,.18))}
.azc-reaction-fx--like .azc-reaction-particle{filter:drop-shadow(0 7px 12px rgba(54,116,157,.22))}
.azc-reaction-fx--stars .azc-reaction-particle{filter:drop-shadow(0 7px 12px rgba(145,103,17,.18))}

/* Hearts keep their useful pop interaction while following the same 5s path. */
.azc-reaction-heart{
  cursor:pointer;
  pointer-events:auto;
}
.azc-reaction-heart:hover{filter:drop-shadow(0 9px 16px rgba(135,23,46,.30))}
.azc-reaction-heart.is-popped{
  animation:none!important;
  opacity:0!important;
  transform:scale(1.55)!important;
  transition:transform .24s ease,opacity .24s ease;
  pointer-events:none;
}
.azc-heart-pop-bit{
  position:fixed;
  z-index:2147482002;
  margin:-8px 0 0 -8px;
  color:#EF5B70;
  font-size:17px;
  font-style:normal;
  line-height:1;
  pointer-events:none;
  animation:azc-heart-pop .7s ease-out forwards;
}
@keyframes azc-heart-pop{
  0%{opacity:1;transform:translate(0,0) scale(.55)}
  72%{opacity:1}
  100%{opacity:0;transform:translate(var(--pop-x),var(--pop-y)) scale(1.08)}
}

/* Celebration streamers: curved paper ribbons rather than rectangular confetti bars. */
.azc-confetti-streamer{
  width:var(--streamer-w);
  height:var(--streamer-h);
  overflow:visible;
  transform-box:fill-box;
  transform-origin:50% 50%;
  filter:drop-shadow(0 4px 6px rgba(75,54,18,.12));
}
.azc-confetti-streamer path{
  vector-effect:non-scaling-stroke;
}
.azc-confetti-streamer path:first-child{
  opacity:.42;
}
.azc-confetti-streamer path:last-child{
  stroke-linecap:round;
  stroke-linejoin:round;
}
.azc-celebration-symbol{
  filter:drop-shadow(0 8px 14px rgba(120,75,20,.20));
}

@media(max-width:600px){
  .azc-reaction-particle{font-size:clamp(27px,var(--size),56px)}
}
@media(prefers-reduced-motion:reduce){
  .azc-reaction-particle{animation-timing-function:linear}
}