/* WhatsApp channel slide-to-join bar; the knob rings like an incoming call. Shared by every page with the WhatsApp box;
   behaviour is in wa-swipe.js. */
.swipe{
  position:relative;display:block;max-width:340px;height:60px;margin:0 auto;
  border-radius:99px;background:linear-gradient(90deg,#128C7E,#25D366);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.15),0 6px 16px rgba(18,140,126,.28);
  text-decoration:none;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.swipe:focus-visible{outline:3px solid #0e7a3c;outline-offset:3px;}
.swipe .fill{position:absolute;left:0;top:0;bottom:0;width:60px;border-radius:99px;background:rgba(255,255,255,.18);}
.swipe .label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding-left:48px;
  color:#fff;font-weight:800;font-size:16.5px;letter-spacing:.2px;pointer-events:none;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
  /* SOLID white with a gentle pulse. It used to be a gradient clipped to the
     letters; Samsung Internet's own darkening turned it invisible (owner's
     phone, 2026-10-10). Never use background-clip:text on this site. */
  animation:waLabelPulse 2.6s ease-in-out infinite;
}
.swipe .label i{font-style:normal;margin-left:7px;}
/* own name: waPulse is the knob's ring (it fades to 0) */
@keyframes waLabelPulse{0%,100%{opacity:1}50%{opacity:.8}}

.swipe .knob{
  position:absolute;left:5px;top:5px;width:50px;height:50px;border-radius:50%;background:#fff;
  display:grid;place-items:center;color:#25D366;cursor:grab;z-index:1;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
}
.swipe .knob svg{width:28px;height:28px;animation:waRing 2.4s ease-in-out infinite;transform-origin:50% 60%;}
/* pulsing rings, like an incoming call */
.swipe .knob::before,.swipe .knob::after{
  content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.85);
  animation:waPulse 2.4s ease-out infinite;pointer-events:none;
}
.swipe .knob::after{animation-delay:.6s;}
@keyframes waRing{
  0%,42%,100%{transform:rotate(0)}
  4%{transform:rotate(-16deg)} 8%{transform:rotate(14deg)} 12%{transform:rotate(-12deg)}
  16%{transform:rotate(10deg)} 20%{transform:rotate(-8deg)} 24%{transform:rotate(6deg)} 28%{transform:rotate(0)}
}
@keyframes waPulse{0%{transform:scale(1);opacity:.9}70%{transform:scale(1.75);opacity:0}100%{opacity:0}}

.swipe.dragging .knob{cursor:grabbing;}
.swipe.dragging .knob svg,.swipe.done .knob svg{animation:none;}
.swipe.dragging .knob::before,.swipe.dragging .knob::after,.swipe.done .knob::before,.swipe.done .knob::after{animation:none;opacity:0;}
.swipe.snap .knob,.swipe.snap .fill{transition:transform .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1);}
.swipe.nudge .knob{animation:waNudge .6s ease;}
@keyframes waNudge{30%{transform:translateX(26px)}60%{transform:translateX(-4px)}100%{transform:translateX(0)}}
.swipe.done .label{animation:none;-webkit-text-fill-color:#fff;}
.wa .hint{display:block;margin-top:9px;font-size:12.5px;color:#5a8f6c;}

@media(prefers-reduced-motion:reduce){
  .swipe .label{animation:none;-webkit-text-fill-color:#fff;}
  .swipe .knob svg,.swipe .knob::before,.swipe .knob::after{animation:none;}
}

/* Dark scheme: the box behind the bar turns dark green, so lift the hint
   text and the keyboard focus ring. */

  :root[data-theme="dark"] .swipe:focus-visible {outline-color:#7BDDA2;}
  :root[data-theme="dark"] .wa .hint {color:#8FCCA4;}
  :root[data-theme="dark"] .swipe {box-shadow:inset 0 2px 6px rgba(0,0,0,.15),0 6px 18px rgba(0,0,0,.35);}