/* Ramazzini — Fizzy hover-orbit particles
   Adapted from the supplied codepen "Fizzy CSS Button".
   Apply to any element with class="fizzy". Insert 52 .fizzy__spot
   children programmatically (see fizzy.js) — they orbit on hover. */

.fizzy {
  position: relative;
}

.fizzy__well {
  /* anchor for the orbit — positioned at center of the button */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fizzy__spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

/* color cycle — sage palette */
.fizzy__spot:nth-child(5n+1) { background: hsl(160 50% 55%); }
.fizzy__spot:nth-child(5n+2) { background: hsl(152 45% 45%); }
.fizzy__spot:nth-child(5n+3) { background: hsl(145 60% 65%); }
.fizzy__spot:nth-child(5n+4) { background: hsl(155 70% 50%); }
.fizzy__spot:nth-child(5n+5) { background: hsl(165 55% 60%); }

/* ============================================================
   Hover orbit keyframes — 52 stable points around an ellipse,
   gently breathing (radius * 1.07 mid-cycle).
   Generated, not hand-tuned.
   ============================================================ */
@keyframes fizzy-orbit-1  { 0%,100% {opacity:0;transform:translate(100px,0px)        scale(.5)} 20%,80% {opacity:1;transform:translate(100px,0px)        scale(1)} 50% {opacity:.6;transform:translate(107px,0px)       scale(.85)} }
@keyframes fizzy-orbit-2  { 0%,100% {opacity:0;transform:translate(99px,4px)         scale(.5)} 20%,80% {opacity:1;transform:translate(99px,4px)         scale(1)} 50% {opacity:.6;transform:translate(106px,4px)       scale(.85)} }
@keyframes fizzy-orbit-3  { 0%,100% {opacity:0;transform:translate(97px,8px)         scale(.5)} 20%,80% {opacity:1;transform:translate(97px,8px)         scale(1)} 50% {opacity:.6;transform:translate(104px,9px)       scale(.85)} }
@keyframes fizzy-orbit-4  { 0%,100% {opacity:0;transform:translate(93px,12px)        scale(.5)} 20%,80% {opacity:1;transform:translate(93px,12px)        scale(1)} 50% {opacity:.6;transform:translate(100px,13px)      scale(.85)} }
@keyframes fizzy-orbit-5  { 0%,100% {opacity:0;transform:translate(89px,16px)        scale(.5)} 20%,80% {opacity:1;transform:translate(89px,16px)        scale(1)} 50% {opacity:.6;transform:translate(95px,17px)       scale(.85)} }
@keyframes fizzy-orbit-6  { 0%,100% {opacity:0;transform:translate(82px,19px)        scale(.5)} 20%,80% {opacity:1;transform:translate(82px,19px)        scale(1)} 50% {opacity:.6;transform:translate(88px,20px)       scale(.85)} }
@keyframes fizzy-orbit-7  { 0%,100% {opacity:0;transform:translate(75px,23px)        scale(.5)} 20%,80% {opacity:1;transform:translate(75px,23px)        scale(1)} 50% {opacity:.6;transform:translate(80px,25px)       scale(.85)} }
@keyframes fizzy-orbit-8  { 0%,100% {opacity:0;transform:translate(66px,25px)        scale(.5)} 20%,80% {opacity:1;transform:translate(66px,25px)        scale(1)} 50% {opacity:.6;transform:translate(71px,27px)       scale(.85)} }
@keyframes fizzy-orbit-9  { 0%,100% {opacity:0;transform:translate(57px,28px)        scale(.5)} 20%,80% {opacity:1;transform:translate(57px,28px)        scale(1)} 50% {opacity:.6;transform:translate(61px,30px)       scale(.85)} }
@keyframes fizzy-orbit-10 { 0%,100% {opacity:0;transform:translate(46px,30px)        scale(.5)} 20%,80% {opacity:1;transform:translate(46px,30px)        scale(1)} 50% {opacity:.6;transform:translate(49px,32px)       scale(.85)} }
@keyframes fizzy-orbit-11 { 0%,100% {opacity:0;transform:translate(36px,32px)        scale(.5)} 20%,80% {opacity:1;transform:translate(36px,32px)        scale(1)} 50% {opacity:.6;transform:translate(39px,34px)       scale(.85)} }
@keyframes fizzy-orbit-12 { 0%,100% {opacity:0;transform:translate(24px,33px)        scale(.5)} 20%,80% {opacity:1;transform:translate(24px,33px)        scale(1)} 50% {opacity:.6;transform:translate(26px,35px)       scale(.85)} }
@keyframes fizzy-orbit-13 { 0%,100% {opacity:0;transform:translate(12px,34px)        scale(.5)} 20%,80% {opacity:1;transform:translate(12px,34px)        scale(1)} 50% {opacity:.6;transform:translate(13px,36px)       scale(.85)} }
@keyframes fizzy-orbit-14 { 0%,100% {opacity:0;transform:translate(0px,34px)         scale(.5)} 20%,80% {opacity:1;transform:translate(0px,34px)         scale(1)} 50% {opacity:.6;transform:translate(0px,36px)        scale(.85)} }
@keyframes fizzy-orbit-15 { 0%,100% {opacity:0;transform:translate(-12px,34px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-12px,34px)       scale(1)} 50% {opacity:.6;transform:translate(-13px,36px)      scale(.85)} }
@keyframes fizzy-orbit-16 { 0%,100% {opacity:0;transform:translate(-24px,33px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-24px,33px)       scale(1)} 50% {opacity:.6;transform:translate(-26px,35px)      scale(.85)} }
@keyframes fizzy-orbit-17 { 0%,100% {opacity:0;transform:translate(-36px,32px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-36px,32px)       scale(1)} 50% {opacity:.6;transform:translate(-39px,34px)      scale(.85)} }
@keyframes fizzy-orbit-18 { 0%,100% {opacity:0;transform:translate(-46px,30px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-46px,30px)       scale(1)} 50% {opacity:.6;transform:translate(-49px,32px)      scale(.85)} }
@keyframes fizzy-orbit-19 { 0%,100% {opacity:0;transform:translate(-57px,28px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-57px,28px)       scale(1)} 50% {opacity:.6;transform:translate(-61px,30px)      scale(.85)} }
@keyframes fizzy-orbit-20 { 0%,100% {opacity:0;transform:translate(-66px,25px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-66px,25px)       scale(1)} 50% {opacity:.6;transform:translate(-71px,27px)      scale(.85)} }
@keyframes fizzy-orbit-21 { 0%,100% {opacity:0;transform:translate(-75px,23px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-75px,23px)       scale(1)} 50% {opacity:.6;transform:translate(-80px,25px)      scale(.85)} }
@keyframes fizzy-orbit-22 { 0%,100% {opacity:0;transform:translate(-82px,19px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-82px,19px)       scale(1)} 50% {opacity:.6;transform:translate(-88px,20px)      scale(.85)} }
@keyframes fizzy-orbit-23 { 0%,100% {opacity:0;transform:translate(-89px,16px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-89px,16px)       scale(1)} 50% {opacity:.6;transform:translate(-95px,17px)      scale(.85)} }
@keyframes fizzy-orbit-24 { 0%,100% {opacity:0;transform:translate(-93px,12px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-93px,12px)       scale(1)} 50% {opacity:.6;transform:translate(-100px,13px)     scale(.85)} }
@keyframes fizzy-orbit-25 { 0%,100% {opacity:0;transform:translate(-97px,8px)        scale(.5)} 20%,80% {opacity:1;transform:translate(-97px,8px)        scale(1)} 50% {opacity:.6;transform:translate(-104px,9px)      scale(.85)} }
@keyframes fizzy-orbit-26 { 0%,100% {opacity:0;transform:translate(-99px,4px)        scale(.5)} 20%,80% {opacity:1;transform:translate(-99px,4px)        scale(1)} 50% {opacity:.6;transform:translate(-106px,4px)      scale(.85)} }
@keyframes fizzy-orbit-27 { 0%,100% {opacity:0;transform:translate(-100px,0px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-100px,0px)       scale(1)} 50% {opacity:.6;transform:translate(-107px,0px)      scale(.85)} }
@keyframes fizzy-orbit-28 { 0%,100% {opacity:0;transform:translate(-99px,-4px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-99px,-4px)       scale(1)} 50% {opacity:.6;transform:translate(-106px,-4px)     scale(.85)} }
@keyframes fizzy-orbit-29 { 0%,100% {opacity:0;transform:translate(-97px,-8px)       scale(.5)} 20%,80% {opacity:1;transform:translate(-97px,-8px)       scale(1)} 50% {opacity:.6;transform:translate(-104px,-9px)     scale(.85)} }
@keyframes fizzy-orbit-30 { 0%,100% {opacity:0;transform:translate(-93px,-12px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-93px,-12px)      scale(1)} 50% {opacity:.6;transform:translate(-100px,-13px)    scale(.85)} }
@keyframes fizzy-orbit-31 { 0%,100% {opacity:0;transform:translate(-89px,-16px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-89px,-16px)      scale(1)} 50% {opacity:.6;transform:translate(-95px,-17px)     scale(.85)} }
@keyframes fizzy-orbit-32 { 0%,100% {opacity:0;transform:translate(-82px,-19px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-82px,-19px)      scale(1)} 50% {opacity:.6;transform:translate(-88px,-20px)     scale(.85)} }
@keyframes fizzy-orbit-33 { 0%,100% {opacity:0;transform:translate(-75px,-23px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-75px,-23px)      scale(1)} 50% {opacity:.6;transform:translate(-80px,-25px)     scale(.85)} }
@keyframes fizzy-orbit-34 { 0%,100% {opacity:0;transform:translate(-66px,-25px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-66px,-25px)      scale(1)} 50% {opacity:.6;transform:translate(-71px,-27px)     scale(.85)} }
@keyframes fizzy-orbit-35 { 0%,100% {opacity:0;transform:translate(-57px,-28px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-57px,-28px)      scale(1)} 50% {opacity:.6;transform:translate(-61px,-30px)     scale(.85)} }
@keyframes fizzy-orbit-36 { 0%,100% {opacity:0;transform:translate(-46px,-30px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-46px,-30px)      scale(1)} 50% {opacity:.6;transform:translate(-49px,-32px)     scale(.85)} }
@keyframes fizzy-orbit-37 { 0%,100% {opacity:0;transform:translate(-36px,-32px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-36px,-32px)      scale(1)} 50% {opacity:.6;transform:translate(-39px,-34px)     scale(.85)} }
@keyframes fizzy-orbit-38 { 0%,100% {opacity:0;transform:translate(-24px,-33px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-24px,-33px)      scale(1)} 50% {opacity:.6;transform:translate(-26px,-35px)     scale(.85)} }
@keyframes fizzy-orbit-39 { 0%,100% {opacity:0;transform:translate(-12px,-34px)      scale(.5)} 20%,80% {opacity:1;transform:translate(-12px,-34px)      scale(1)} 50% {opacity:.6;transform:translate(-13px,-36px)     scale(.85)} }
@keyframes fizzy-orbit-40 { 0%,100% {opacity:0;transform:translate(0px,-34px)        scale(.5)} 20%,80% {opacity:1;transform:translate(0px,-34px)        scale(1)} 50% {opacity:.6;transform:translate(0px,-36px)       scale(.85)} }
@keyframes fizzy-orbit-41 { 0%,100% {opacity:0;transform:translate(12px,-34px)       scale(.5)} 20%,80% {opacity:1;transform:translate(12px,-34px)       scale(1)} 50% {opacity:.6;transform:translate(13px,-36px)      scale(.85)} }
@keyframes fizzy-orbit-42 { 0%,100% {opacity:0;transform:translate(24px,-33px)       scale(.5)} 20%,80% {opacity:1;transform:translate(24px,-33px)       scale(1)} 50% {opacity:.6;transform:translate(26px,-35px)      scale(.85)} }
@keyframes fizzy-orbit-43 { 0%,100% {opacity:0;transform:translate(36px,-32px)       scale(.5)} 20%,80% {opacity:1;transform:translate(36px,-32px)       scale(1)} 50% {opacity:.6;transform:translate(39px,-34px)      scale(.85)} }
@keyframes fizzy-orbit-44 { 0%,100% {opacity:0;transform:translate(46px,-30px)       scale(.5)} 20%,80% {opacity:1;transform:translate(46px,-30px)       scale(1)} 50% {opacity:.6;transform:translate(49px,-32px)      scale(.85)} }
@keyframes fizzy-orbit-45 { 0%,100% {opacity:0;transform:translate(57px,-28px)       scale(.5)} 20%,80% {opacity:1;transform:translate(57px,-28px)       scale(1)} 50% {opacity:.6;transform:translate(61px,-30px)      scale(.85)} }
@keyframes fizzy-orbit-46 { 0%,100% {opacity:0;transform:translate(66px,-25px)       scale(.5)} 20%,80% {opacity:1;transform:translate(66px,-25px)       scale(1)} 50% {opacity:.6;transform:translate(71px,-27px)      scale(.85)} }
@keyframes fizzy-orbit-47 { 0%,100% {opacity:0;transform:translate(75px,-23px)       scale(.5)} 20%,80% {opacity:1;transform:translate(75px,-23px)       scale(1)} 50% {opacity:.6;transform:translate(80px,-25px)      scale(.85)} }
@keyframes fizzy-orbit-48 { 0%,100% {opacity:0;transform:translate(82px,-19px)       scale(.5)} 20%,80% {opacity:1;transform:translate(82px,-19px)       scale(1)} 50% {opacity:.6;transform:translate(88px,-20px)      scale(.85)} }
@keyframes fizzy-orbit-49 { 0%,100% {opacity:0;transform:translate(89px,-16px)       scale(.5)} 20%,80% {opacity:1;transform:translate(89px,-16px)       scale(1)} 50% {opacity:.6;transform:translate(95px,-17px)     scale(.85)} }
@keyframes fizzy-orbit-50 { 0%,100% {opacity:0;transform:translate(93px,-12px)       scale(.5)} 20%,80% {opacity:1;transform:translate(93px,-12px)       scale(1)} 50% {opacity:.6;transform:translate(100px,-13px)    scale(.85)} }
@keyframes fizzy-orbit-51 { 0%,100% {opacity:0;transform:translate(97px,-8px)        scale(.5)} 20%,80% {opacity:1;transform:translate(97px,-8px)        scale(1)} 50% {opacity:.6;transform:translate(104px,-9px)     scale(.85)} }
@keyframes fizzy-orbit-52 { 0%,100% {opacity:0;transform:translate(99px,-4px)        scale(.5)} 20%,80% {opacity:1;transform:translate(99px,-4px)        scale(1)} 50% {opacity:.6;transform:translate(106px,-4px)     scale(.85)} }

/* Wire each spot to its orbit, staggered start so they appear sequentially. */
.fizzy:hover .fizzy__spot:nth-child(1)  { animation: fizzy-orbit-1   2.2s -0.00s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(2)  { animation: fizzy-orbit-2   2.2s -0.04s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(3)  { animation: fizzy-orbit-3   2.2s -0.08s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(4)  { animation: fizzy-orbit-4   2.2s -0.13s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(5)  { animation: fizzy-orbit-5   2.2s -0.17s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(6)  { animation: fizzy-orbit-6   2.2s -0.21s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(7)  { animation: fizzy-orbit-7   2.2s -0.25s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(8)  { animation: fizzy-orbit-8   2.2s -0.29s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(9)  { animation: fizzy-orbit-9   2.2s -0.34s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(10) { animation: fizzy-orbit-10  2.2s -0.38s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(11) { animation: fizzy-orbit-11  2.2s -0.42s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(12) { animation: fizzy-orbit-12  2.2s -0.46s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(13) { animation: fizzy-orbit-13  2.2s -0.51s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(14) { animation: fizzy-orbit-14  2.2s -0.55s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(15) { animation: fizzy-orbit-15  2.2s -0.59s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(16) { animation: fizzy-orbit-16  2.2s -0.63s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(17) { animation: fizzy-orbit-17  2.2s -0.68s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(18) { animation: fizzy-orbit-18  2.2s -0.72s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(19) { animation: fizzy-orbit-19  2.2s -0.76s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(20) { animation: fizzy-orbit-20  2.2s -0.80s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(21) { animation: fizzy-orbit-21  2.2s -0.85s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(22) { animation: fizzy-orbit-22  2.2s -0.89s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(23) { animation: fizzy-orbit-23  2.2s -0.93s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(24) { animation: fizzy-orbit-24  2.2s -0.97s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(25) { animation: fizzy-orbit-25  2.2s -1.02s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(26) { animation: fizzy-orbit-26  2.2s -1.06s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(27) { animation: fizzy-orbit-27  2.2s -1.10s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(28) { animation: fizzy-orbit-28  2.2s -1.14s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(29) { animation: fizzy-orbit-29  2.2s -1.19s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(30) { animation: fizzy-orbit-30  2.2s -1.23s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(31) { animation: fizzy-orbit-31  2.2s -1.27s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(32) { animation: fizzy-orbit-32  2.2s -1.31s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(33) { animation: fizzy-orbit-33  2.2s -1.36s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(34) { animation: fizzy-orbit-34  2.2s -1.40s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(35) { animation: fizzy-orbit-35  2.2s -1.44s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(36) { animation: fizzy-orbit-36  2.2s -1.48s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(37) { animation: fizzy-orbit-37  2.2s -1.53s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(38) { animation: fizzy-orbit-38  2.2s -1.57s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(39) { animation: fizzy-orbit-39  2.2s -1.61s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(40) { animation: fizzy-orbit-40  2.2s -1.65s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(41) { animation: fizzy-orbit-41  2.2s -1.70s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(42) { animation: fizzy-orbit-42  2.2s -1.74s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(43) { animation: fizzy-orbit-43  2.2s -1.78s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(44) { animation: fizzy-orbit-44  2.2s -1.82s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(45) { animation: fizzy-orbit-45  2.2s -1.87s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(46) { animation: fizzy-orbit-46  2.2s -1.91s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(47) { animation: fizzy-orbit-47  2.2s -1.95s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(48) { animation: fizzy-orbit-48  2.2s -1.99s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(49) { animation: fizzy-orbit-49  2.2s -2.04s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(50) { animation: fizzy-orbit-50  2.2s -2.08s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(51) { animation: fizzy-orbit-51  2.2s -2.12s ease-in-out infinite; }
.fizzy:hover .fizzy__spot:nth-child(52) { animation: fizzy-orbit-52  2.2s -2.16s ease-in-out infinite; }

/* tiny fizzies for the "Sign In" link — half-orbit size */
.fizzy.fizzy--sm .fizzy__spot { width: 4px; height: 4px; }
.fizzy.fizzy--sm:hover .fizzy__spot { animation-duration: 1.8s; animation-name: var(--orbit-name, fizzy-orbit-1); }

/* click ripple — soft sage circle pulsing out */
.fizzy { overflow: visible; }
.fizzy-ripple {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: hsl(160 60% 55% / 0.5);
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  animation: fizzy-ripple 0.65s var(--ease-out, cubic-bezier(0,0,0.2,1)) forwards;
}
@keyframes fizzy-ripple {
  to { transform: translate(-50%, -50%) scale(28); opacity: 0; }
}