/* Pink Friday motion kit, from the campaign's motion kit page.
   Colours: pink #E61B77, black #140A10, yellow #F5B21E, green #62AE45.

   Everything here is inert until .pf-campaign is on <body>, which _Layout adds
   only inside the campaign dates. .pf-health turns the celebrations off again on
   clinical pages — see pfMotionOK() in pf-motion.js. */
:root{--pf-pink:#E61B77;--pf-black:#140A10;--pf-yellow:#F5B21E;--pf-green:#62AE45;--pf-white:#FFFFFF}

/* Two ways to ask for less motion: the device setting, and the pf-reduce class the
   JS also checks. The kit shipped only the first, so a manual toggle changed the
   JavaScript's mind but not the CSS. */
.pf-reduce *{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
@media (prefers-reduced-motion: reduce){.pf-campaign *{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}

.pf-sticker{display:inline-block;background:var(--pf-yellow);color:var(--pf-black);border:2px solid #fff;border-radius:50px;padding:4px 12px;font:800 13px/1.1 Figtree,Inter,system-ui,sans-serif;box-shadow:2px 3px 0 rgba(20,10,16,.45);transform:rotate(-5deg);white-space:nowrap}
.pf-confetti{position:absolute;inset:0;pointer-events:none;overflow:visible}
.pf-bit{position:absolute;left:50%;top:40%;width:8px;height:12px;border-radius:2px;animation:pf-burst var(--d,1.2s) cubic-bezier(.2,.7,.4,1) forwards}
.pf-bit.round{width:9px;height:9px;border-radius:50%}
@keyframes pf-burst{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}35%{transform:translate(calc(-50% + var(--x)*.6),calc(-50% - var(--up)));opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r));opacity:0}}

.pf-wheel-wrap{position:relative;width:164px;height:164px;margin:10px auto 0}
.pf-wheel{width:100%;height:100%;border-radius:50%;box-sizing:border-box;border:7px solid var(--pf-black);box-shadow:0 0 0 3px var(--pf-yellow);
  background:conic-gradient(from -25.71deg,#E61B77 0 51.43deg,#fff 0 102.86deg,#140A10 0 154.29deg,#E61B77 0 205.71deg,#fff 0 257.14deg,#140A10 0 308.57deg,#F5B21E 0 360deg);transform:rotate(0deg)}
.pf-wheel.is-spinning{transition:transform 4s cubic-bezier(.12,.8,.18,1);transform:rotate(var(--to))}
.pf-hub{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:#fff;border:4px solid var(--pf-pink);display:grid;place-items:center;font:800 13px Figtree,sans-serif;color:var(--pf-black)}
.pf-pointer{position:absolute;left:50%;top:-12px;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:22px solid #fff;filter:drop-shadow(0 2px 0 var(--pf-black));transform:translateX(-50%);transform-origin:50% 0}
.pf-pointer.is-tick{animation:pf-tick .3s ease-out 2}
@keyframes pf-tick{50%{transform:translateX(-50%) rotate(-14deg)}}

.pf-prize{display:inline-block;white-space:nowrap;font:800 34px/1 Figtree,sans-serif;color:#fff;-webkit-text-stroke:4px var(--pf-pink);paint-order:stroke fill;text-shadow:0 3px 0 rgba(20,10,16,.35);transform:rotate(-3deg);margin-top:10px}
.pf-prize.is-in{animation:pf-pop .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pf-pop{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.08) rotate(-2deg);opacity:1}100%{transform:scale(1) rotate(-3deg)}}

/* The flying "+1" rides above the sticky header, which sits in the 1000s. The kit
   shipped z-index 50 and would have been clipped by it. */
.pf-fly{position:fixed;z-index:3000;pointer-events:none;background:var(--pf-pink);color:#fff;border:2px solid #fff;border-radius:50px;padding:2px 8px;font:800 12px Figtree,sans-serif;animation:pf-fly .55s cubic-bezier(.55,0,.75,.45) forwards}
@keyframes pf-fly{to{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:.2}}
.pf-count.is-bump{animation:pf-bump .35s ease-out}
@keyframes pf-bump{40%{transform:scale(1.4) rotate(-10deg)}}

.pf-stamp.is-in{animation:pf-stamp .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pf-stamp{0%{transform:scale(1.9) rotate(-18deg);opacity:0}70%{transform:scale(.94) rotate(-4deg);opacity:1}100%{transform:scale(1) rotate(-5deg)}}
.pf-row-glow{animation:pf-glow .9s ease-out}
@keyframes pf-glow{0%{background:rgba(230,27,119,.18)}100%{background:transparent}}

.pf-ok{position:relative;display:block;margin:6px auto 10px}
.pf-ok path{stroke-dasharray:44;stroke-dashoffset:0}
.pf-ok.is-in{animation:pf-pop .45s cubic-bezier(.2,1.4,.4,1) both}
.pf-ok.is-in path{animation:pf-draw .5s ease-out .25s both}
@keyframes pf-draw{from{stroke-dashoffset:44}to{stroke-dashoffset:0}}
.pf-rays{position:absolute;left:50%;top:52px;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;opacity:0;
  background:repeating-conic-gradient(rgba(255,255,255,.14) 0 6deg,transparent 6deg 15deg);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.pf-rays.is-in{animation:pf-rays 1.6s ease-out forwards}
@keyframes pf-rays{0%{opacity:0;transform:rotate(0) scale(.7)}30%{opacity:1}100%{opacity:.35;transform:rotate(25deg) scale(1)}}

.pf-toast{position:fixed;left:12px;right:12px;top:12px;z-index:3000;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;background:var(--pf-black);color:#fff;border-radius:14px;padding:12px 14px;font:500 13px Inter,sans-serif;box-shadow:0 8px 20px rgba(20,10,16,.3);transform:translateY(-140%)}
.pf-toast b{font:800 16px Figtree,sans-serif;color:var(--pf-pink);width:100%}
.pf-toast.is-in{animation:pf-slide .5s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes pf-slide{to{transform:translateY(0)}}
.pf-toast.is-out{transform:translateY(0);animation:pf-slideout .3s ease-in forwards}
@keyframes pf-slideout{to{transform:translateY(-140%)}}
.pf-drop{opacity:0}
.pf-toast.is-in .pf-drop{animation:pf-drop .45s cubic-bezier(.2,1.5,.4,1) .35s forwards}
@keyframes pf-drop{0%{opacity:0;transform:translateY(-26px) rotate(-22deg)}100%{opacity:1;transform:translateY(0) rotate(-5deg)}}

.pf-digit{position:relative;display:block;height:30px;overflow:hidden;font:800 26px/30px Figtree,sans-serif;min-width:34px;text-align:center}
.pf-digit span{display:block}
.pf-digit .in{position:absolute;left:0;right:0;top:0;animation:pf-up-in .35s ease-out both}
.pf-digit .out{animation:pf-up-out .35s ease-in both}
@keyframes pf-up-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pf-up-out{to{transform:translateY(-100%);opacity:0}}

.pf-fab.is-nudge{animation:pf-hop 1.1s ease-in-out}
.pf-fab.is-nudge .pf-fab-icon{animation:pf-turn 1.1s ease-in-out}
@keyframes pf-hop{20%{transform:translateY(-6px)}40%{transform:translateY(0)}55%{transform:translateY(-3px)}70%{transform:translateY(0)}}
@keyframes pf-turn{to{transform:rotate(360deg)}}