/* CFW animated footer logo — continuous metallic shine (CSS mask) + timed spark bursts (canvas) */
.cfw-logo-anim{
  --cfw-logo-w: 280px;          /* rendered logo width */
  --cfw-shine-dur: 4.8s;        /* one full left-to-right sweep, loops forever */
  position: relative;
  display: inline-block;
  width: var(--cfw-logo-w);
  aspect-ratio: 1224 / 927;
  line-height: 0;
  isolation: isolate;
}
.cfw-logo-anim__base{
  display:block; width:100%; height:100%;
  user-select:none; -webkit-user-drag:none;
  filter: brightness(.86) contrast(1.04);         /* leaves headroom so the white shine pops */
}
/* Shine layer: clipped to the logo's alpha with a CSS mask */
.cfw-logo-anim__shine{
  position:absolute; inset:0; overflow:hidden; pointer-events:none;
  -webkit-mask-image: var(--cfw-mask, url("cfw-logo-mask.png"));
          mask-image: var(--cfw-mask, url("cfw-logo-mask.png"));
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  visibility: hidden;             /* shown by JS once the mask image has decoded (avoids a Chrome repaint bug) */
}
.cfw-logo-anim.is-mask-ready .cfw-logo-anim__shine{ visibility: visible; }
.cfw-logo-anim__shine::before{
  content:""; position:absolute; top:-10%; bottom:-10%; left:0;
  width:25%;                                    /* band ≈ 1/4 of logo width */
  /* chrome reflection: faint dark wings + hot white core reads clearly even on bright silver */
  background: linear-gradient(90deg,
     rgba(0,0,0,0) 0%,
     rgba(0,0,0,.26) 15%,
     rgba(255,255,255,.22) 30%,
     rgba(255,255,255,.75) 40%,
     rgba(255,255,255,1) 46%,
     rgba(255,255,255,1) 54%,
     rgba(255,255,255,.75) 60%,
     rgba(255,255,255,.22) 70%,
     rgba(0,0,0,.26) 85%,
     rgba(0,0,0,0) 100%);
  transform: translateX(-170%) skewX(-16deg);
  animation: cfw-shine var(--cfw-shine-dur) cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform;
}
@keyframes cfw-shine{
  0%   { transform: translateX(-170%) skewX(-16deg); }
  86%  { transform: translateX(470%)  skewX(-16deg); }   /* band fully past the right edge */
  100% { transform: translateX(470%)  skewX(-16deg); }   /* short off-logo beat, then repeat */
}
/* Effects canvas: larger than the logo so sparks can fly out to the lower right */
.cfw-logo-anim__fx{
  position:absolute; pointer-events:none;
  left:-6%; top:-6%; width:166%; height:172%;
}
@media (prefers-reduced-motion: reduce){
  .cfw-logo-anim__shine::before{ animation:none; transform: translateX(-170%) skewX(-16deg); }
  .cfw-logo-anim__fx{ display:none; }
}