/* Shirts4Christ v63.84 — S4C full-body mascot on the home-page Charity Impact Tracker. */
#charity-impact-tracker{
  position:relative!important;
  overflow:visible!important;
  isolation:isolate;
}
#charity-impact-tracker>.s4c-section-heading,
#charity-impact-tracker>.s4c-charity-subtitle,
#charity-impact-tracker>.s4c-charity-logo-grid,
#charity-impact-tracker>.s4c-mascot-replay{
  position:relative;
  z-index:3;
}
#charity-impact-tracker::after{
  content:"";
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  top:-1px;
  height:12px;
  border-radius:24px 24px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,0));
  border-top:2px solid rgba(8,36,82,.16);
  pointer-events:none;
}
.s4c-charity-mascot{
  position:absolute;
  z-index:6;
  bottom:calc(100% - 1px);
  width:clamp(88px,8.4vw,120px);
  pointer-events:none;
}
.s4c-charity-mascot.spot-left{left:18px;right:auto}
.s4c-charity-mascot.spot-mid-left{left:24%;right:auto}
.s4c-charity-mascot.spot-mid-right{right:24%;left:auto}
.s4c-charity-mascot.spot-right{right:16px;left:auto}
.s4c-charity-mascot-viewport{
  position:relative;
  width:100%;
  height:clamp(128px,12vw,172px);
  overflow:hidden;
  clip-path:inset(0 0 0 0);
}
.s4c-charity-mascot-motion{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  opacity:0;
  transform:translateY(114%) scale(.98);
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
#charity-impact-tracker .s4c-charity-mascot-image{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  filter:drop-shadow(0 9px 9px rgba(3,27,61,.18));
}
.s4c-charity-mascot-bubble{
  position:absolute;
  top:14px;
  width:clamp(188px,17vw,236px);
  padding:14px 16px;
  border:3px solid #0b4f96;
  border-radius:24px;
  background:#fff;
  color:#082452;
  box-shadow:0 14px 28px rgba(3,27,61,.16);
  font-size:15px;
  font-weight:900;
  line-height:1.34;
  text-align:center;
  opacity:0;
  transform:translateY(12px) scale(.94);
  transition:opacity .28s ease,transform .28s ease;
}
.s4c-charity-mascot.bubble-left .s4c-charity-mascot-bubble{right:calc(100% + 12px);left:auto}
.s4c-charity-mascot.bubble-right .s4c-charity-mascot-bubble{left:calc(100% + 12px);right:auto}
.s4c-charity-mascot-bubble::after{
  content:"";
  position:absolute;
  bottom:24px;
  width:24px;
  height:24px;
  background:#fff;
  transform:rotate(45deg);
}
.s4c-charity-mascot.bubble-left .s4c-charity-mascot-bubble::after{right:-15px;border-right:3px solid #0b4f96;border-top:3px solid #0b4f96}
.s4c-charity-mascot.bubble-right .s4c-charity-mascot-bubble::after{left:-15px;border-left:3px solid #0b4f96;border-bottom:3px solid #0b4f96}
.s4c-charity-mascot-bubble strong{
  display:block;
  margin-bottom:3px;
  color:#f24a13;
  font-size:17px;
}
.s4c-charity-mascot-bubble.show{opacity:1;transform:translateY(0) scale(1)}
.s4c-mascot-replay{
  position:relative;
  z-index:10;
  display:block;
  margin:8px auto 18px;
  border:0;
  border-radius:999px;
  padding:9px 16px;
  background:#082452;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(3,27,61,.16);
}
.s4c-mascot-replay:hover,.s4c-mascot-replay:focus-visible{background:#f24a13}
.s4c-charity-mascot.is-active .s4c-charity-mascot-motion{opacity:1}
.s4c-charity-mascot.is-active.enter-rise .s4c-charity-mascot-motion{animation:s4cEnterRise 1.05s cubic-bezier(.2,.86,.24,1) both}
.s4c-charity-mascot.is-active.enter-jump .s4c-charity-mascot-motion{animation:s4cEnterJump 1.2s cubic-bezier(.23,.88,.22,1) both}
.s4c-charity-mascot.is-exiting.exit-back .s4c-charity-mascot-motion{animation:s4cExitBack 1.05s ease-in forwards}
.s4c-charity-mascot.is-exiting.exit-left .s4c-charity-mascot-motion{animation:s4cExitLeft 1.05s ease-in forwards}
.s4c-charity-mascot.is-exiting.exit-right .s4c-charity-mascot-motion{animation:s4cExitRight 1.05s ease-in forwards}
@keyframes s4cEnterRise{
  0%{opacity:0;transform:translateY(114%) scale(.98)}
  38%{opacity:1}
  72%{opacity:1;transform:translateY(-3px) scale(1.01)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes s4cEnterJump{
  0%{opacity:0;transform:translateY(114%) scale(.98)}
  30%{opacity:1;transform:translateY(8px) scale(1)}
  58%{opacity:1;transform:translateY(-18px) scale(1.02)}
  76%{transform:translateY(4px) scale(.99)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes s4cExitBack{
  0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  30%{transform:translateY(-4px) scale(1.01) rotate(0deg)}
  100%{opacity:0;transform:translateY(116%) scale(.76) rotateX(68deg)}
}
@keyframes s4cExitLeft{
  0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  25%{transform:translateY(-3px) scale(1.01) rotate(-2deg)}
  100%{opacity:0;transform:translate(-24px,116%) rotate(-22deg) scale(.86)}
}
@keyframes s4cExitRight{
  0%{opacity:1;transform:translateY(0) scale(1) rotate(0deg)}
  25%{transform:translateY(-3px) scale(1.01) rotate(2deg)}
  100%{opacity:0;transform:translate(24px,116%) rotate(22deg) scale(.86)}
}
@media(max-width:900px){
  .s4c-charity-mascot{width:104px}
  .s4c-charity-mascot-viewport{height:150px}
  .s4c-charity-mascot.spot-mid-left{left:21%}
  .s4c-charity-mascot.spot-mid-right{right:21%}
  .s4c-charity-mascot-bubble{width:176px;font-size:13px;padding:12px}
  .s4c-charity-mascot.bubble-left .s4c-charity-mascot-bubble{right:calc(100% + 8px)}
  .s4c-charity-mascot.bubble-right .s4c-charity-mascot-bubble{left:calc(100% + 8px)}
}
@media(max-width:650px){
  #charity-impact-tracker{padding-top:22px!important}
  .s4c-charity-mascot{width:82px}
  .s4c-charity-mascot.spot-left{left:8px}
  .s4c-charity-mascot.spot-mid-left{left:16%}
  .s4c-charity-mascot.spot-mid-right{right:16%}
  .s4c-charity-mascot.spot-right{right:6px}
  .s4c-charity-mascot-viewport{height:118px}
  .s4c-charity-mascot-bubble{width:126px;padding:9px 10px;font-size:11px;border-width:2px;top:4px}
  .s4c-charity-mascot-bubble strong{font-size:13px}
  .s4c-charity-mascot-bubble::after{width:18px;height:18px;bottom:16px}
  .s4c-charity-mascot.bubble-left .s4c-charity-mascot-bubble{right:calc(100% + 6px)}
  .s4c-charity-mascot.bubble-right .s4c-charity-mascot-bubble{left:calc(100% + 6px)}
  .s4c-charity-mascot.bubble-left .s4c-charity-mascot-bubble::after{right:-11px;border-width:2px}
  .s4c-charity-mascot.bubble-right .s4c-charity-mascot-bubble::after{left:-11px;border-width:2px}
}
@media(prefers-reduced-motion:reduce){
  .s4c-charity-mascot-motion{animation:none!important;opacity:1!important;transform:translateY(0) scale(1)!important}
  .s4c-charity-mascot-bubble{transition:none}
}