/* assets/css/faro.css — Mascota Faro (generado del prototipo, no editar a mano salvo ajustes finos) */
#mascot{position:fixed;bottom:14px;left:0;z-index:8000;width:var(--size,140px);will-change:transform;transform:translateX(120px);cursor:crosshair;user-select:none;filter:drop-shadow(0 18px 14px rgba(0,0,0,.45));}
  #mascot.nofilter{filter:none;}
  #mascot .art{transform-origin:bottom center;animation:bob .62s ease-in-out infinite;animation-play-state:paused;}
  #mascot.walking .art{animation-play-state:running;}
  #mascot svg{display:block;width:100%;height:auto;overflow:visible;transition:transform .18s ease;}
  #mascot .shadow{position:absolute;bottom:9px;left:50%;width:50%;height:12px;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);z-index:-1;transition:opacity .3s;}
  @keyframes bob{0%,100%{transform:translateY(0) scaleX(var(--fx,1));}50%{transform:translateY(-3px) scaleX(var(--fx,1));}}

  #rig{transform-box:fill-box;transform-origin:50% 92%;transition:transform .25s ease;}
  .part{transform-box:fill-box;transform-origin:center;}
  #mascot.exploding .part{transition:transform var(--ptd,.5s) var(--pte,cubic-bezier(.45,0,.55,1)), opacity .3s;cursor:grab;}
  .gun{transition:opacity .12s;}

  .leg{transform-box:fill-box;transform-origin:top center;}
  .arm-free{transform-box:fill-box;transform-origin:top center;}
  #mascot.walking .leg-back{animation:stepBack var(--wcyc,.62s) ease-in-out infinite;}
  #mascot.walking .leg-front{animation:stepFront var(--wcyc,.62s) ease-in-out infinite;}
  #mascot.walking .arm-free{animation:armSwing var(--wcyc,.62s) ease-in-out infinite;}
  @keyframes stepFront{0%{transform:rotate(16deg);}25%{transform:rotate(0);}50%{transform:rotate(-16deg);}75%{transform:rotate(-4deg);}100%{transform:rotate(16deg);}}
  @keyframes stepBack{0%{transform:rotate(-16deg);}25%{transform:rotate(-4deg);}50%{transform:rotate(16deg);}75%{transform:rotate(0);}100%{transform:rotate(-16deg);}}
  @keyframes armSwing{0%,100%{transform:rotate(-10deg);}50%{transform:rotate(12deg);}}
  #mascot.running .leg-front{animation:stepFront .3s linear infinite !important;}
  #mascot.running .leg-back{animation:stepBack .3s linear infinite !important;}
  #mascot.running .arm-free{animation:armSwing .3s linear infinite !important;}

  #mascot.waving .arm-free{animation:wave .5s ease-in-out infinite !important;}
  @keyframes wave{0%,100%{transform:rotate(158deg);}50%{transform:rotate(184deg);}}
  #mascot.climbing .arm-free{animation:grab .5s ease-in-out infinite !important;}
  @keyframes grab{0%,100%{transform:rotate(150deg);}50%{transform:rotate(176deg);}}
  #mascot.climbing .leg-front{animation:scrF .4s ease-in-out infinite !important;}
  #mascot.climbing .leg-back{animation:scrB .4s ease-in-out infinite !important;}
  @keyframes scrF{0%,100%{transform:rotate(-14deg);}50%{transform:rotate(20deg);}}
  @keyframes scrB{0%,100%{transform:rotate(20deg);}50%{transform:rotate(-14deg);}}

  .banner{transform-box:fill-box;transform-origin:bottom center;animation:bannerSway 2.4s ease-in-out infinite;}
  @keyframes bannerSway{0%,100%{transform:rotate(-1.5deg);}50%{transform:rotate(2deg);}}
  .cloth{transform-box:fill-box;transform-origin:top center;animation:cloth 2.4s ease-in-out infinite;}
  @keyframes cloth{0%,100%{transform:skewX(-3deg);}50%{transform:skewX(4deg);}}
  #mascot.planted .banner{animation:none !important;transform:none !important;}
  #mascot.bannerkick .banner{animation:kick .5s ease-out !important;}
  @keyframes kick{0%{transform:rotate(0);}30%{transform:rotate(-7deg);}60%{transform:rotate(4deg);}100%{transform:rotate(0);}}
  #mascot.spinning .banner{animation:spin .5s linear !important;}
  @keyframes spin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
  #mascot.casting .banner{animation:none !important;transition:transform .25s ease;transform:rotate(-26deg) !important;}

  .head{transform-box:fill-box;transform-origin:bottom center;transition:transform .4s ease;}
  #mascot.looking .head{transform:rotate(var(--look,0deg)) translateY(-1px);}

  .eye{transform-box:fill-box;transform-origin:center;animation:glow 2.2s ease-in-out infinite;}
  @keyframes glow{0%,100%{opacity:.85;}50%{opacity:1;}}
  #mascot.blink .eye{animation:blink .22s ease forwards;}
  @keyframes blink{0%{transform:scaleY(1);}50%{transform:scaleY(.08);}100%{transform:scaleY(1);}}
  #mascot.calm .eye{animation:calm 3s ease-in-out infinite !important;}
  @keyframes calm{0%,100%{transform:scaleY(.62);opacity:.7;}50%{transform:scaleY(.5);opacity:.55;}}
  #mascot.sleeping .eye{animation:none !important;transform:scaleY(.12);opacity:.6;}
  #mascot.dizzy .eye{animation:dizzy 1.4s ease-in-out !important;}
  @keyframes dizzy{0%,100%{transform:scaleY(1);}25%{transform:scale(.6,.4);}50%{transform:scale(1.1,.5);}75%{transform:scale(.7,.5);}}
  #mascot.hitflash .eye{fill:#ff6450 !important;opacity:1 !important;animation:none !important;}
  #mascot.annoyed .eye{fill:#ff9a3a !important;opacity:1 !important;animation:none !important;}
  #mascot.scared .eye{transform:scale(1.4) !important;animation:none !important;}
  .core{animation:coreGlow 2.6s ease-in-out infinite;}
  @keyframes coreGlow{0%,100%{opacity:.45;}50%{opacity:.78;}}

  @media (prefers-reduced-motion: reduce){ #mascot *{animation:none !important;} }

  .faro-soul{position:fixed;width:16px;height:16px;pointer-events:none;z-index:8003;border-radius:50%;background:radial-gradient(circle at 50% 45%, #f0fff6 0%, #9bffce 38%, #46e39a 58%, rgba(34,180,110,0) 74%);filter:drop-shadow(0 0 8px #38e89a);}
  .faro-spark{position:fixed;width:11px;height:11px;border-radius:50%;pointer-events:none;z-index:8003;background:radial-gradient(circle,#bfffe0,rgba(70,227,154,0));}
  .faro-puff{position:fixed;width:14px;height:14px;border-radius:50%;pointer-events:none;z-index:8003;background:radial-gradient(circle,rgba(200,210,225,.8),rgba(150,160,180,0));}
  .faro-mflash{position:fixed;z-index:8003;pointer-events:none;width:30px;height:30px;background:radial-gradient(circle, #fff 0%, #ff9a3a 38%, rgba(255,120,30,0) 70%);}
  .faro-zzz{position:fixed;pointer-events:none;z-index:8003;color:#7af3ff;font:800 20px Georgia,serif;text-shadow:0 0 8px #39d4e8;}
  #fx{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:8003;overflow:visible;}
  .faro-cat{position:fixed;width:90px;height:56px;z-index:8003;pointer-events:auto;cursor:pointer;filter:drop-shadow(0 0 12px #9a4dff);opacity:.92;}
  .faro-cat .cat-body{transform-box:fill-box;transform-origin:center;animation:catBob var(--cls,.2s) ease-in-out infinite;}
  .faro-cat .leg{transform-box:fill-box;transform-origin:top center;}
  .faro-cat .l1{animation:catLegA var(--cls,.2s) linear infinite;}
  .faro-cat .l2{animation:catLegB var(--cls,.2s) linear infinite;}
  .faro-cat .l3{animation:catLegB var(--cls,.2s) linear infinite;}
  .faro-cat .l4{animation:catLegA var(--cls,.2s) linear infinite;}
  .faro-cat .tail{transform-box:fill-box;transform-origin:right center;animation:catTail .3s ease-in-out infinite;}
  .faro-cat.licking .leg{animation:none !important;}
  .faro-cat.licking .l4{animation:lick .5s ease-in-out infinite !important;transform-origin:bottom center;}
  .faro-cat.licking .cat-body{animation:lickBob .5s ease-in-out infinite !important;}
  @keyframes lick{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(-118deg);}}
  @keyframes lickBob{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-2px) rotate(-3deg);}}
  @keyframes catBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
  @keyframes catLegA{0%,100%{transform:rotate(30deg);}50%{transform:rotate(-30deg);}}
  @keyframes catLegB{0%,100%{transform:rotate(-30deg);}50%{transform:rotate(30deg);}}
  @keyframes catTail{0%,100%{transform:rotate(-10deg);}50%{transform:rotate(12deg);}}
  .faro-heart{position:fixed;pointer-events:none;z-index:8004;color:#ff7ad0;font-size:16px;text-shadow:0 0 6px #ff7ad0;}
  .faro-trail{position:fixed;z-index:8000;pointer-events:none;border-radius:50%;background:radial-gradient(circle,#c79bff,rgba(120,60,220,0));}

  
/* ── Apagado de velas y ánimas decorativas al recibir un disparo de Faro ── */
.faro-doused{ animation:none !important; opacity:0 !important; }
.hero-candle.faro-doused{ opacity:1 !important; }
.hero-candle.faro-doused .c-flame, .hero-candle.faro-doused .c-glow{ animation:none !important; opacity:0 !important; }
.faro-relight{ transition:opacity .9s ease !important; }