/* assets/especial/benvinguda.css — «Benvinguda especial» · 01/11/2026
 * Escena de pantalla completa amb en Casanova (bufanda corall) + reaccions a l'aula (P2).
 * Pell «Nit sencera»: mitjanit #0C2A36…#296277, corall #FF8A6B, cian #5FD2CD, crema #E9E1D3.
 * Només transforms/opacity (cap layout): ≥60 fps. Interruptor: assets/especial/config.json.
 * Cap vermell enlloc. Res d'aquest fitxer toca classes de l'aula: tot va amb prefix esp-. */

/* ===== OVERLAY ===== */
.esp-overlay{
  position:fixed;inset:0;z-index:2147483000;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 110%,#296277 0%,#17424F 45%,#0C2A36 100%);
  color:#E9E1D3;font-family:var(--font-body,'Inter',system-ui,sans-serif);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateZ(0);will-change:opacity;
  animation:espApareix .45s ease-out forwards;
}
.esp-overlay:focus{outline:none;}
.esp-overlay.esp-surt{animation:espDesapareix .32s ease-in forwards;pointer-events:none;}
@keyframes espApareix{to{opacity:1;}}
@keyframes espDesapareix{from{opacity:1;}to{opacity:0;}}

/* cel: estels petits (cap imatge) i una llum càlida que respira */
.esp-cel{position:absolute;inset:0;pointer-events:none;}
.esp-estel{
  position:absolute;width:4px;height:4px;border-radius:50%;background:#E9E1D3;opacity:.55;
  animation:espEstel 3.2s ease-in-out infinite;transform:translateZ(0);
}
@keyframes espEstel{0%,100%{opacity:.25;transform:scale(.8);}50%{opacity:.9;transform:scale(1.25);}}
.esp-llum{
  position:absolute;left:50%;bottom:-20vh;width:120vmin;height:70vmin;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,138,107,.26),rgba(255,138,107,0));
  transform:translate(-50%,0);animation:espLlum 4.8s ease-in-out infinite;
}
@keyframes espLlum{0%,100%{transform:translate(-50%,0) scale(1);}50%{transform:translate(-50%,0) scale(1.12);}}

/* terra: una línia suau on el gat recolza els peus */
.esp-terra{
  position:absolute;left:0;right:0;bottom:var(--esp-terra,22vh);height:2px;
  background:linear-gradient(90deg,rgba(233,225,211,0),rgba(233,225,211,.28) 30%,rgba(233,225,211,.28) 70%,rgba(233,225,211,0));
}

.esp-confeti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}

/* ===== ESCENARI ===== */
.esp-escenari{
  position:absolute;inset:0;--esp-terra:22vh;--esp-h:min(48vh,420px);
}

/* ===== EL GAT ===== */
.esp-gat{
  position:absolute;left:50%;bottom:var(--esp-terra);width:var(--esp-h);height:var(--esp-h);
  margin-left:calc(var(--esp-h) * -.5);transform:translate3d(0,0,0);will-change:transform;
  pointer-events:none;
}
.esp-gat-cos{
  position:absolute;inset:0;transform-origin:50% 100%;will-change:transform;
}
.esp-pose{
  position:absolute;bottom:0;left:50%;height:100%;width:auto;transform:translateX(-50%);
  opacity:0;pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.esp-gat[data-pose="camina"] .esp-pose-camina,
.esp-gat[data-pose="espantat"] .esp-pose-espantat,
.esp-gat[data-pose="celebra"] .esp-pose-celebra,
.esp-gat[data-pose="assegut"] .esp-pose-assegut{opacity:1;}

/* bufanda: superposició ancorada al coll de cada pose (a ull, verificat amb captura) */
.esp-bufanda{
  position:absolute;left:50%;bottom:0;width:calc(var(--esp-h) * .32);height:auto;
  transform:translate(calc(-50% + var(--bx,0px)),var(--by,0px));transform-origin:50% 25%;
  opacity:0;will-change:transform;pointer-events:none;
}
.esp-gat[data-pose="assegut"] .esp-bufanda{opacity:1;--bx:calc(var(--esp-h) * .005);--by:calc(var(--esp-h) * -.325);}
.esp-gat[data-pose="celebra"] .esp-bufanda{opacity:1;--bx:calc(var(--esp-h) * -.045);--by:calc(var(--esp-h) * -.355);}
.esp-gat[data-pose="espantat"] .esp-bufanda{opacity:1;--bx:calc(var(--esp-h) * -.11);--by:calc(var(--esp-h) * -.395);width:calc(var(--esp-h) * .28);}
.esp-gat[data-pose="camina"] .esp-bufanda{opacity:1;--bx:calc(var(--esp-h) * .26);--by:calc(var(--esp-h) * -.32);width:calc(var(--esp-h) * .22);}
.esp-gat.esp-idle .esp-bufanda{animation:espBufandaBalla 2.6s ease-in-out infinite;}
@keyframes espBufandaBalla{
  0%,100%{transform:translate(calc(-50% + var(--bx,0px)),var(--by,0px)) rotate(0deg);}
  50%{transform:translate(calc(-50% + var(--bx,0px)),var(--by,0px)) rotate(-5deg);}
}

.esp-ombra{
  position:absolute;left:50%;bottom:-6px;width:60%;height:14px;border-radius:50%;
  background:rgba(3,16,22,.55);transform:translateX(-50%) scaleX(1);filter:blur(3px);will-change:transform;
}

/* «!» de sorpresa i polseguera de la caiguda */
.esp-ai{
  position:absolute;left:68%;top:4%;font:900 clamp(34px,8vh,64px)/1 var(--font-head,'Gabarito',sans-serif);
  color:#FF8A6B;opacity:0;transform:scale(.4) rotate(12deg);will-change:transform,opacity;
}
.esp-pols{position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;}
.esp-pols span{
  position:absolute;bottom:0;width:18px;height:18px;border-radius:50%;background:rgba(233,225,211,.55);
  opacity:0;will-change:transform,opacity;
}

/* ---- FASES (JS posa data-fase; cada fase és una animació curta només de transform) ---- */
/* 1 · entra caminant des de l'esquerra amb botets */
.esp-gat[data-fase="entra"]{animation:espEntra 1.05s cubic-bezier(.3,.7,.3,1) forwards;}
.esp-gat[data-fase="entra"] .esp-gat-cos{animation:espBotet .26s ease-in-out 4;}
@keyframes espEntra{from{transform:translate3d(-70vw,0,0);}to{transform:translate3d(0,0,0);}}
@keyframes espBotet{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(-7%) rotate(2deg);}}

/* 2 · ensopega: fre en sec, pèl eriçat, «!» */
.esp-gat[data-fase="ensopega"] .esp-gat-cos{animation:espEnsopega .22s ease-out forwards;}
.esp-gat[data-fase="ensopega"] .esp-ai{animation:espAi .22s cubic-bezier(.2,1.6,.4,1) forwards;}
@keyframes espEnsopega{0%{transform:scale(1,1);}40%{transform:scale(1.12,.88) translateY(2%);}100%{transform:scale(.96,1.06) translateY(-3%);}}
@keyframes espAi{to{opacity:1;transform:scale(1) rotate(12deg);}}

/* 3 · cau d'esquena (panxa enlaire, cap a la dreta) amb pes i un rebot; el conjunt llisca una mica per quedar centrat */
.esp-gat[data-fase="cau"],.esp-gat[data-fase="aixeca"]{transform:translate3d(calc(var(--esp-h) * -.42),0,0);transition:transform .55s cubic-bezier(.5,0,.7,.4);}
.esp-gat[data-fase="seu"]{transition:transform .42s cubic-bezier(.3,1.3,.5,1);}
.esp-gat[data-fase="cau"] .esp-gat-cos{transform-origin:85% 100%;animation:espCau .55s cubic-bezier(.5,0,.7,.4) forwards;}
.esp-gat[data-fase="cau"] .esp-ai{opacity:1;transform:scale(1) rotate(12deg);animation:espAiFora .3s ease-in .2s forwards;}
.esp-gat[data-fase="cau"] .esp-ombra{animation:espOmbraCau .55s ease-out forwards;}
.esp-gat[data-fase="cau"] .esp-pols span{animation:espPols .6s ease-out .3s forwards;}
@keyframes espCau{
  0%{transform:rotate(0) translateY(0);}
  55%{transform:rotate(86deg) translateY(0);}
  72%{transform:rotate(80deg) translateY(-6%);}
  100%{transform:rotate(88deg) translateY(0);}
}
@keyframes espAiFora{to{opacity:0;transform:scale(.6) translateY(-30px);}}
@keyframes espOmbraCau{to{transform:translateX(-50%) scaleX(1.5);}}
@keyframes espPols{0%{opacity:0;transform:translate(0,0) scale(.4);}30%{opacity:.8;}100%{opacity:0;transform:translate(var(--dx,0),-40px) scale(1.6);}}

/* 4 · s'aixeca d'un salt, celebrant (confeti des de JS) */
.esp-gat[data-fase="aixeca"] .esp-gat-cos{transform-origin:85% 100%;animation:espAixeca .72s cubic-bezier(.2,.9,.3,1.2) forwards;}
.esp-gat[data-fase="aixeca"] .esp-ombra{animation:espOmbraSalt .72s ease-out forwards;}
@keyframes espAixeca{
  0%{transform:rotate(88deg) translateY(0);}
  25%{transform:rotate(20deg) translateY(-4%);}
  55%{transform:rotate(4deg) translateY(-26%) scale(1.04,1.08);}
  80%{transform:rotate(0) translateY(0) scale(1.08,.92);}
  100%{transform:rotate(0) translateY(0) scale(1,1);}
}
@keyframes espOmbraSalt{0%{transform:translateX(-50%) scaleX(1.5);}55%{transform:translateX(-50%) scaleX(.55);opacity:.5;}100%{transform:translateX(-50%) scaleX(1);opacity:1;}}

/* 5 · s'asseu, bufanda que balla, respiració */
.esp-gat[data-fase="seu"] .esp-gat-cos{animation:espSeu .42s cubic-bezier(.3,1.5,.5,1) forwards;}
@keyframes espSeu{0%{transform:scale(1.06,.94);}60%{transform:scale(.98,1.03);}100%{transform:scale(1,1);}}
.esp-gat.esp-idle .esp-gat-cos{animation:espRespira 3.4s ease-in-out infinite;}
@keyframes espRespira{0%,100%{transform:scaleY(1);}50%{transform:scaleY(1.02);}}

/* toc al gat: saltet alegre + cors corall */
.esp-gat.esp-idle{pointer-events:auto;cursor:pointer;}
.esp-gat.esp-saltet .esp-gat-cos{animation:espSaltet .6s cubic-bezier(.2,.9,.3,1.1) 1!important;}
@keyframes espSaltet{0%,100%{transform:translateY(0) rotate(0);}35%{transform:translateY(-16%) rotate(-4deg);}65%{transform:translateY(-14%) rotate(3deg);}85%{transform:translateY(0) scale(1.05,.95);}}

/* ===== BAFARADA I BOTONS ===== */
.esp-bafarada{
  position:absolute;left:50%;bottom:calc(var(--esp-terra) + var(--esp-h) + 3vh);
  transform:translate(-50%,10px) scale(.6);opacity:0;will-change:transform,opacity;
  background:#FAF7F1;color:#0C2A36;border-radius:22px;padding:16px 26px;max-width:min(88vw,620px);
  font:800 clamp(22px,4.2vw,40px)/1.15 var(--font-head,'Gabarito',sans-serif);letter-spacing:-.01em;text-align:center;
  box-shadow:0 14px 40px rgba(3,16,22,.45);
}
.esp-bafarada::after{
  content:"";position:absolute;left:50%;bottom:-14px;width:28px;height:28px;background:#FAF7F1;
  transform:translateX(-50%) rotate(45deg);border-radius:4px;
}
.esp-bafarada.mostra{animation:espPop .5s cubic-bezier(.2,1.5,.4,1) forwards;}
@keyframes espPop{to{opacity:1;transform:translate(-50%,0) scale(1);}}

.esp-somhi{
  position:absolute;left:50%;bottom:calc(var(--esp-terra) * .5 - 28px);transform:translate(-50%,16px);opacity:0;
  min-width:220px;padding:16px 40px;border:0;border-radius:999px;cursor:pointer;
  background:#FF8A6B;color:#241009;font:800 clamp(20px,3vw,28px)/1 var(--font-head,'Gabarito',sans-serif);
  box-shadow:0 10px 30px rgba(255,138,107,.4),inset 0 1px 0 rgba(255,255,255,.4);
  will-change:transform,opacity;transition:transform .15s ease,box-shadow .15s ease;
}
.esp-somhi.mostra{animation:espPuja .45s ease-out forwards;}
@keyframes espPuja{to{opacity:1;transform:translate(-50%,0);}}
.esp-somhi.mostra:hover{transform:translate(-50%,-3px) scale(1.03);box-shadow:0 14px 36px rgba(255,138,107,.5);}
.esp-somhi.mostra:active{transform:translate(-50%,1px) scale(.98);}
.esp-somhi:focus-visible,.esp-mini:focus-visible{outline:3px solid #3DD9D6;outline-offset:4px;}

.esp-controls{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:8px;}
.esp-mini{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:rgba(233,225,211,.1);color:#E9E1D3;border:1px solid rgba(233,225,211,.22);
  font:600 14px/1 var(--font-body,'Inter',sans-serif);backdrop-filter:blur(4px);
}
.esp-mini:hover{background:rgba(233,225,211,.18);}
.esp-mini svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.esp-mini[hidden]{display:none;}

/* ===== MÒBIL ===== */
@media (max-width:600px){
  .esp-escenari{--esp-terra:26vh;--esp-h:min(40vh,300px);}
  .esp-bafarada{padding:12px 18px;border-radius:18px;}
  .esp-somhi{bottom:calc(var(--esp-terra) * .5 - 24px);min-width:200px;}
}
@media (max-height:520px){
  .esp-escenari{--esp-terra:18vh;--esp-h:48vh;}
}

/* ===== REDUCED MOTION: fotograma final, mateix text, cap animació ===== */
.esp-overlay.esp-static,
.esp-overlay.esp-static *{animation:none!important;transition:none!important;}
.esp-overlay.esp-static{opacity:1;}
.esp-overlay.esp-static .esp-bafarada{opacity:1;transform:translate(-50%,0) scale(1);}
.esp-overlay.esp-static .esp-somhi{opacity:1;transform:translate(-50%,0);}
.esp-overlay.esp-static .esp-confeti{display:none;}
@media (prefers-reduced-motion:reduce){
  .esp-overlay,.esp-overlay *{animation:none!important;transition:none!important;}
  .esp-overlay{opacity:1;}
}

/* ===== P2 · REACCIONS A L'AULA (sobre .casanova-avatar-wrap de casanova.js, sense tocar-lo) ===== */
.casanova-avatar-wrap.esp-r-salt .casanova-pose{animation:espRSalt .7s cubic-bezier(.2,.9,.3,1.1) 1!important;transform-origin:bottom center;}
@keyframes espRSalt{0%,100%{transform:translateY(0) rotate(0);}30%{transform:translateY(-22%) rotate(-5deg);}55%{transform:translateY(-18%) rotate(4deg);}80%{transform:translateY(0) scale(1.06,.94);}}
.casanova-avatar-wrap.esp-r-cua .casanova-pose{animation:espRCua .5s ease-in-out 2!important;transform-origin:bottom center;}
@keyframes espRCua{0%,100%{transform:rotate(0);}25%{transform:rotate(-3deg);}75%{transform:rotate(3deg);}}
.esp-cor{
  position:absolute;left:50%;bottom:70%;width:22px;height:22px;pointer-events:none;
  animation:espCor 1.1s ease-out forwards;will-change:transform,opacity;
}
.esp-cor svg{width:100%;height:100%;fill:#FF8A6B;display:block;filter:drop-shadow(0 2px 4px rgba(3,16,22,.35));}
@keyframes espCor{0%{opacity:0;transform:translate(-50%,0) scale(.4);}20%{opacity:1;}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-90px) scale(1.2) rotate(var(--rot,0deg));}}
.esp-anims{
  position:absolute;right:0;bottom:100%;margin-bottom:8px;z-index:3;
  background:#FAF7F1;color:#0C2A36;border-radius:14px;padding:9px 13px;max-width:min(260px,calc(100vw - 24px));
  font:700 14px/1.3 var(--font-head,'Gabarito',sans-serif);box-shadow:0 8px 24px rgba(3,16,22,.35);
  opacity:0;transform:translateY(8px) scale(.85);transform-origin:bottom right;animation:espAnims 4s ease-out forwards;pointer-events:none;
}
@keyframes espAnims{0%{opacity:0;transform:translateY(8px) scale(.85);}10%,85%{opacity:1;transform:translateY(0) scale(1);}100%{opacity:0;transform:translateY(-6px) scale(.95);}}
.esp-confeti-aula{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2147482000;}
@media (prefers-reduced-motion:reduce){
  .esp-cor,.esp-anims{animation-duration:.001ms!important;}
  .esp-anims{opacity:1;transform:none;}
  .esp-confeti-aula{display:none;}
}