/* assets/especial/taca.css — La Taca, companya del Casanova · 01/11/2026
 * Tot amb prefix taca-. Només transform/opacity. Cap vermell. Pals: mitjanit #0C2A36, crema #E9E1D3, cian #5FD2CD.
 * Convenció d'art: totes les poses es dibuixen MIRANT A LA DRETA (com les del Casanova); aquí es gira quan cal. */

/* ===== poses apilades ===== */
.taca-cos{position:absolute;inset:0;transform-origin:50% 100%;}
.taca-pose{
  position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);
  opacity:0;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.taca-pose.taca-gira{transform:translateX(-50%) scaleX(-1);}
[data-img="assegut"]>.taca-pose.taca-p-assegut,
[data-img="camina"]>.taca-pose.taca-p-camina,
[data-img="celebra"]>.taca-pose.taca-p-celebra,
[data-img="dorm"]>.taca-pose.taca-p-dorm,
[data-img="cop"]>.taca-pose.taca-p-cop{opacity:1;}

/* ===== ACOMPANYANT a l'aula (dins #casanova-stage, a l'esquerra de l'avatar) ===== */
.taca-companya{
  --taca-h:clamp(90px,10.5vw,126px);--taca-w:calc(var(--taca-h) * .57);   /* ~75 % de l'alçada del Casanova; amplada = la de la pose asseguda */
  position:absolute;bottom:0;left:40%;width:var(--taca-w);height:var(--taca-h);pointer-events:none;
}
.taca-companya.taca-espera{visibility:hidden;}
.taca-companya.taca-amagada .taca-cos{display:none;}
.taca-companya.taca-apareix .taca-cos{animation:tacaApareix .6s cubic-bezier(.2,1.4,.4,1) 1;}
@keyframes tacaApareix{0%{transform:scale(.5);opacity:0;}100%{transform:scale(1);opacity:1;}}
.taca-companya .taca-cos{animation:tacaRespira 4s ease-in-out infinite;}
.taca-companya .taca-cos[data-pose="dorm"]{animation:tacaDorm 5s ease-in-out infinite;}
/* dormint sense art propi: el mateix sprite assegut, ajupit i atenuat (suau) */
.taca-cos[data-pose="dorm"][data-img="assegut"]{opacity:.8;}
.taca-companya .taca-cos[data-pose="dorm"][data-img="assegut"]{animation:tacaDormCss 5s ease-in-out infinite;}
@keyframes tacaDormCss{0%,100%{transform:scale(1,.9);}50%{transform:scale(1,.92);}}
@keyframes tacaRespira{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.015);}}
@keyframes tacaDorm{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.03);}}
.taca-companya .taca-cos.taca-salt{animation:tacaSalt 1.2s cubic-bezier(.2,.9,.3,1.1) 1;}
@keyframes tacaSalt{0%,100%{transform:translateY(0);}25%{transform:translateY(-24%) rotate(-4deg);}50%{transform:translateY(0) scale(1.05,.95);}70%{transform:translateY(-14%) rotate(3deg);}90%{transform:translateY(0);}}
.taca-companya .taca-cos.taca-cop{animation:tacaCop 1s ease-in-out 1;}
@keyframes tacaCop{0%,100%{transform:translateX(0);}40%,60%{transform:translateX(14%) rotate(4deg);}}
.taca-companya .taca-cos.taca-ronronet{animation:tacaRonronet .65s ease-in-out 4;}
@keyframes tacaRonronet{0%,100%{transform:rotate(0);}25%{transform:rotate(-2.5deg);}75%{transform:rotate(2.5deg);}}

/* botó discret per amagar/mostrar (zona de toc ampliada amb ::after, sense text visible) */
.taca-boto{
  position:absolute;top:-4px;right:-6px;width:22px;height:22px;padding:0;border-radius:50%;cursor:pointer;
  pointer-events:auto;border:1px solid rgba(233,225,211,.3);background:rgba(12,42,54,.55);color:#E9E1D3;
  opacity:.5;transition:opacity .2s ease;display:flex;align-items:center;justify-content:center;
}
.taca-boto::after{content:"";position:absolute;inset:-10px;}
.taca-boto:hover,.taca-boto:focus-visible{opacity:1;}
.taca-boto:focus-visible{outline:2px solid #5FD2CD;outline-offset:2px;}
.taca-boto svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.taca-boto .taca-ic-mostra{display:none;}
.taca-amagada .taca-boto{top:auto;bottom:0;right:0;}
.taca-amagada .taca-boto .taca-ic-amaga{display:none;}
.taca-amagada .taca-boto .taca-ic-mostra{display:block;}

/* ===== ESCENA de benvinguda (dins .esp-escenari: usa --esp-terra i --esp-h de benvinguda.css) =====
   Alçada = 75 % de la del Casanova (--esp-h); caixa = amplada de la pose asseguda (352/560); la caminant (més ampla) en sobreïx centrada. */
.taca-escena{
  --taca-eh:calc(var(--esp-h,384px) * .75);--taca-ew:calc(var(--taca-eh) * .57);
  position:absolute;bottom:var(--esp-terra,22vh);height:var(--taca-eh);width:var(--taca-ew);
  left:min(calc(50% + var(--esp-h,384px) * .3),calc(100% - var(--taca-ew) - 6px));pointer-events:none;
}
.taca-escena[data-fase="entra"]{animation:tacaEntra 1.3s cubic-bezier(.3,.7,.3,1) both;}
.taca-escena[data-fase="apareix"]{animation:tacaApareixEscena 1.1s cubic-bezier(.2,.8,.3,1) both;}
@keyframes tacaApareixEscena{from{opacity:0;transform:translate3d(9vw,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
.taca-escena[data-fase="entra"] .taca-cos{animation:tacaBotet .26s ease-in-out 5;}
@keyframes tacaEntra{from{transform:translate3d(70vw,0,0);}to{transform:translate3d(0,0,0);}}
@keyframes tacaBotet{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7%) rotate(-2deg);}}
.taca-escena[data-fase="cop"] .taca-cos{animation:tacaCopEscena 1s ease-in-out 1;}
@keyframes tacaCopEscena{0%,100%{transform:translateX(0);}40%,60%{transform:translateX(-14%) rotate(-4deg);}}
.taca-escena[data-fase="queda"] .taca-cos{animation:tacaRespira 4s ease-in-out infinite;}

@media (max-width:600px){                       /* mòbil: una mica més petita (~60 %) perquè càpiga al costat del Casanova */
  .taca-escena{--taca-eh:calc(var(--esp-h,300px) * .6);}
}

/* ===== REDUCED MOTION: poses estàtiques ===== */
@media (prefers-reduced-motion:reduce){
  .taca-cos,.taca-escena,.taca-boto{animation:none!important;transition:none!important;}
  .taca-companya{transition:none!important;}
}