:root{ --offing-green:#4fb172; }

/* HERO */
.hero{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: transparent;
  cursor: pointer;
  color: var(--offing-green);
}

.heroCenter{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
}

.heroBadge{
  font: 600 14px system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--offing-green);
  background: transparent;
  border: 1px solid rgba(79,177,114,.35);
  padding: 10px 14px;
  border-radius: 999px;
}

/* SVG */
.heroBot{
  width: 280px;
  max-width: 70vw;
  height: auto;
  display: block;
  overflow: visible;
}

/* OUTLINE */
.stroke{
  fill:none;
  stroke: currentColor;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Escalat intern */
.botScale{
  transform: translate(60px, 40px) scale(0.5);
  transform-origin: 0 0;
}

/* Transicions suaus (entrada/sortida hover) */
.head, .eyes, .antenna, .bubble, .dots, .hoverMessage{
  transition: transform 220ms cubic-bezier(.2,.8,.2,1),
              opacity 220ms cubic-bezier(.2,.8,.2,1);
}

/* === IDLE === */
.head{ transform-origin: 110px 98px; animation: headLook 4s infinite; }
.eyes{ transform-origin: 110px 94px; animation: eyesMove 4s infinite; }
.eye{ transform-origin: center; animation: blink 4s infinite; }

.antenna{
  transform-origin: 129px 48px;
  animation: antenna 4s infinite;
}

/*  Idle: NO bombolla */
.bubble{
  transform-origin: 190px 40px;
  opacity: 0;
  transform: scale(.9) translateY(3px);
}

/*  Idle: amaguem dots i text */
.dots{ opacity: 0; }
.hoverMessage{ opacity: 0; transform: none; pointer-events: none }

/* text de la bombolla */
.bubbleText{
  fill: currentColor;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .2px;
}
.hoverMessage{
  opacity: 0;
  transform: none;
  pointer-events: none;
}

/* === HOVER (controlat pel JS amb .is-hovering) === */
.hero.is-hovering .bubble{
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* en hover: text ON, dots OFF */
.hero.is-hovering .dots{ opacity: 0; }
.hero.is-hovering .hoverMessage{
  opacity: 1;
  /* transform: translateY(0) scale(1); */
}

/* "settle" cap/ulls per a que sigui fluid */
.hero.is-hovering .head{
  animation: none !important;
  transform: translateX(0) rotate(0deg);
}
.hero.is-hovering .eyes{
  animation: none !important;
  transform: translateX(0);
}
.hero.is-hovering .antenna{
  animation: none !important;
  transform: rotate(10deg) scale(1.03);
}

/* === FORÇA estat hover (guanya sempre) === */
.hero.is-hovering svg .bubble{
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}

.hero.is-hovering svg .hoverMessage{
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.hero.is-hovering svg .hoverMessage text{
  opacity: 1 !important;
}


/* === Parpelleig instant (quan JS posa .blink-now) === */
@keyframes blinkInstant {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.08); }
}
.hero.blink-now .eye{
  animation: blinkInstant 240ms ease-in-out 1 !important;
}

/* === Keyframes loop === */
@keyframes headLook{
  0%, 18% { transform: translateX(-2px) rotate(-1deg); }
  35%, 55% { transform: translateX(3px) rotate(1deg); }
  70%, 100% { transform: translateX(-2px) rotate(-1deg); }
}
@keyframes eyesMove{
  0%, 20% { transform: translateX(-3px); }
  35%, 55% { transform: translateX(3px); }
  70%, 100% { transform: translateX(0px); }
}
@keyframes blink{
  0%, 58%, 100% { transform: scaleY(1); }
  60% { transform: scaleY(.12); }
  62% { transform: scaleY(1); }
}
@keyframes antenna{
  0%, 45% { transform: rotate(-2deg); }
  55% { transform: rotate(14deg) scale(1.05); }
  60% { transform: rotate(8deg) scale(1.02); }
  70%, 100% { transform: rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce){
  .head,.eyes,.eye,.antenna,.bubble{ animation:none !important; }
}

/* ==========================
   HEADER BOT 
========================== */
.headerBot{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 90px;
  display: grid;
  place-items: center;
  overflow: visible;
  color: var(--offing-green);
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}

.headerBot svg.headerBotSvg{
  width: 240px;
  height: 90px;
  display: block;
  overflow: visible;
  pointer-events: auto;
}

.headerBot .hbScale{
  transform: translate(8px, 8px) scale(0.70);
  transform-origin: 0 0;
}

.headerBot .stroke{
  stroke-width: 5.4;
}

.headerBot .botCore,
.headerBot .hbBubble,
.headerBot .head,
.headerBot .eyes,
.headerBot .antenna,
.headerBot .acc{
  transition:
    transform 240ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

/* bombolla hover */
.headerBot .hbBubble{
  opacity: 0;
  transform: translateX(10px) scale(.96);
  transform-origin: 190px 46px;
  pointer-events: none;
}

.headerBot .hbBubbleText{
  fill: currentColor;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

.headerBot .botCore{
  transform: translateX(0);
}

/* hover */
.headerBot.is-hovering .botCore{
  transform: translateX(-24px);
}

.headerBot.is-hovering .hbBubble{
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* idle */
.headerBot .head{ transform-origin: 105px 68px; animation: hbIdleHead 4.8s infinite; }
.headerBot .eyes{ transform-origin: 105px 66px; animation: hbIdleEyes 4.8s infinite; }
.headerBot .eye{ transform-origin: center; animation: hbBlink 4.8s infinite; }
.headerBot .antenna{ transform-origin: 108px 30px; animation: hbIdleAntenna 4.8s infinite; }

@keyframes hbIdleHead{
  0%, 18% { transform: translateX(-1px) rotate(-1deg); }
  35%, 55% { transform: translateX(1px) rotate(1deg); }
  70%, 100% { transform: translateX(-1px) rotate(-1deg); }
}
@keyframes hbIdleEyes{
  0%, 20% { transform: translateX(-1px); }
  35%, 55% { transform: translateX(1px); }
  70%, 100% { transform: translateX(0px); }
}
@keyframes hbBlink{
  0%, 58%, 100% { transform: scaleY(1); }
  60% { transform: scaleY(.12); }
  62% { transform: scaleY(1); }
}
@keyframes hbIdleAntenna{
  0%, 22% { transform: rotate(-2deg); }
  35%, 55% { transform: rotate(4deg); }
  70%, 100% { transform: rotate(-2deg); }
}


/* ==========================
   ESTAT: ASK-NAME
========================== */
.headerBot.bot-ask-name .head{
  animation: hbAskNameHead 3.6s ease-in-out infinite !important;
}

.headerBot.bot-ask-name .eyes{
  animation: hbAskNameEyes 3.6s ease-in-out infinite !important;
}

.headerBot.bot-ask-name .eye{
  animation: hbAskNameBlink 3.6s ease-in-out infinite !important;
}

.headerBot.bot-ask-name .antenna{
  animation: hbAskNameAntenna 3.6s ease-in-out infinite !important;
}

/* ordre:
1. antena s’estira
2. s’apropa
3. tanca/obre ulls al centre
4. mira amunt i avall lent
5. torna al centre
6. espera
7. torna enrere
*/
/* antena recta i estirada */
@keyframes hbAskNameAntenna{
  0%, 12% {
    transform: rotate(0deg) scaleY(1);
  }
  18%, 30% {
    transform: rotate(0deg) scaleY(1.36);
  }
  31%, 74% {
    transform: rotate(0deg) scaleY(1.22);
  }
  82%, 100% {
    transform: rotate(0deg) scaleY(1);
  }
}

/* s’apropa, espera, torna enrere */
@keyframes hbAskNameHead{
  0%, 14% {
    transform: translateY(0) scale(1);
  }
  24%, 72% {
    transform: translateY(6px) scale(1.09);
  }
  82%, 100% {
    transform: translateY(0) scale(1);
  }
}

/* mira amunt, centre, avall, centre */
@keyframes hbAskNameEyes{
  0%, 34% {
    transform: translateY(0);
  }
  42% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  58% {
    transform: translateY(3px);
  }
  66% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

/* parpelleig al centre, i un altre abans de tornar enrere */
@keyframes hbAskNameBlink{
  0%, 35%, 100% {
    transform: scaleY(1);
  }
  38% {
    transform: scaleY(.08);
  }
  41% {
    transform: scaleY(1);
  }
  68% {
    transform: scaleY(1);
  }
  71% {
    transform: scaleY(.08);
  }
  74% {
    transform: scaleY(1);
  }
}

/* ==========================
   HOVER del header bot
========================== */
.headerBot .hbBubble{
  opacity: 0;
  transform: translateX(8px) scale(.96);
  transform-origin: 180px 40px;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}

.headerBot.is-hovering .botCore{
  transform: translateX(-24px);
}

.headerBot.is-hovering .hbBubble{
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* ==========================
  ESTAT: ASK-PROJECT
========================== */

.headerBot.bot-ask-project .acc-projects{
  opacity: 1;
  transform: translateX(34px);
}

.headerBot.bot-ask-project .head{
  animation: hbAskProjectHead 3.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-project .eyes{
  animation: hbAskProjectEyes 3.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-project .eye{
  animation: hbAskProjectBlink 3.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-project .antenna{
  animation: hbAskProjectAntenna 3.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-project .antennaTip{
  animation: hbAskProjectTip 3.8s ease-in-out infinite !important;
  transform-origin: center;
}

.headerBot .acc-projects{
  transition:
    transform 240ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

/* icones flotants */
.headerBot.bot-ask-project .pi-mobile{
  animation: hbProjectMobile 2.8s ease-in-out infinite;
  transform-origin: center;
}

.headerBot.bot-ask-project .pi-cart{
  animation: hbProjectCart 2.4s ease-in-out infinite;
  transform-origin: center;
}

.headerBot.bot-ask-project .pi-doc{
  animation: hbProjectDoc 3s ease-in-out infinite;
  transform-origin: center;
}

/* si fem hover, prioritzem la bombolla */
.headerBot.is-hovering .acc-projects{
  opacity: 0;
}

/* bot una mica girat cap a la dreta */
@keyframes hbAskProjectHead{
  0%, 100% {
    transform: translateX(1px) translateY(0) rotate(2deg) scale(1);
  }
  20% {
    transform: translateX(3px) translateY(0) rotate(5deg) scale(1.02);
  }
  50% {
    transform: translateX(3px) translateY(1px) rotate(5deg) scale(1.02);
  }
  80% {
    transform: translateX(3px) translateY(0) rotate(5deg) scale(1.02);
  }
}

/* ulls mirant de dalt a baix */
@keyframes hbAskProjectEyes{
  0%, 18%, 100% {
    transform: translateX(6px) translateY(0);
  }
  30% {
    transform: translateX(6px) translateY(-3px);
  }
  48% {
    transform: translateX(6px) translateY(0);
  }
  66% {
    transform: translateX(6px) translateY(3px);
  }
  82% {
    transform: translateX(6px) translateY(0);
  }
}

/* parpelleig molt suau */
@keyframes hbAskProjectBlink{
  0%, 32%, 68%, 100% {
    transform: scaleY(1);
  }
  35% {
    transform: scaleY(.10);
  }
  38% {
    transform: scaleY(1);
  }
  71% {
    transform: scaleY(.10);
  }
  74% {
    transform: scaleY(1);
  }
}

/* base de l'antena */
@keyframes hbAskProjectAntenna{
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(2deg);
  }
  50% {
    transform: rotate(-2deg);
  }
  75% {
    transform: rotate(1deg);
  }
}

/* punta arquejant-se dreta/esquerra */
@keyframes hbAskProjectTip{
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(4px) translateY(-1px);
  }
  50% {
    transform: translateX(-4px) translateY(-1px);
  }
  75% {
    transform: translateX(2px) translateY(0);
  }
}

/* oscil·lació de les icones */
@keyframes hbProjectMobile{
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-3px) rotate(3deg);
  }
}

@keyframes hbProjectCart{
  0%, 100% {
    transform: translateY(0) rotate(3deg);
  }
  50% {
    transform: translateY(2px) rotate(-4deg);
  }
}

@keyframes hbProjectDoc{
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-2px) rotate(4deg);
  }
}

/* ==========================
   ESTAT: ASK-GOAL
========================== */

.headerBot .goalDot{
  fill: currentColor;
  stroke: none;
}

.headerBot .acc-goal{
  transition:
    transform 240ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
  transform-origin: -24px 72px;
}

.headerBot.bot-ask-goal .acc-goal{
  opacity: 1;
  transform: translateX(-46px) translateY(2px);
  animation: hbAskGoalTargetDrift 3.8s ease-in-out infinite;
}

.headerBot.bot-ask-goal .goalPulse{
  animation: hbAskGoalPulse 2.6s ease-in-out infinite;
  transform-origin: -24px 72px;
}

.headerBot.bot-ask-goal .goalPulse{
  animation: hbAskGoalPulse 2.4s ease-in-out infinite;
  transform-origin: -6px 72px;
}

/* bot inclinat lleugerament cap a l'esquerra */
.headerBot.bot-ask-goal .head{
  animation: hbAskGoalHead 3.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-goal .eyes{
  animation: hbAskGoalEyes 3.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-goal .eye{
  animation: hbAskGoalBlink 3.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-goal .antenna{
  animation: hbAskGoalAntenna 3.8s ease-in-out infinite !important;
}

/* si fas hover, prioritzem la bombolla */
.headerBot.bot-ask-goal.is-hovering .acc-goal{
  opacity: 0;
}

@keyframes hbAskGoalPulse{
  0%, 100% {
    transform: scale(1);
    opacity: .92;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* moviment subtil de "blanc difícil" */
@keyframes hbAskGoalTargetDrift{
  0%, 100% {
    transform: translateX(-46px) translateY(2px);
  }
  18% {
    transform: translateX(-54px) translateY(-3px);
  }
  36% {
    transform: translateX(-42px) translateY(-7px);
  }
  54% {
    transform: translateX(-58px) translateY(1px);
  }
  72% {
    transform: translateX(-44px) translateY(7px);
  }
  86% {
    transform: translateX(-52px) translateY(0px);
  }
}

@keyframes hbAskGoalHead{
  0%, 100% {
    transform: translateX(0) rotate(0deg) scale(1);
  }
  22%, 72% {
    transform: translateX(-4px) rotate(-5deg) scale(1.02);
  }
  84% {
    transform: translateX(-1px) rotate(-1deg) scale(1);
  }
}

@keyframes hbAskGoalEyes{
  0%, 18%, 100% {
    transform: translateX(0) translateY(0);
  }
  28% {
    transform: translateX(-6px) translateY(-2px);
  }
  44% {
    transform: translateX(-6px) translateY(0);
  }
  60% {
    transform: translateX(-6px) translateY(2px);
  }
  76% {
    transform: translateX(-6px) translateY(0);
  }
}

@keyframes hbAskGoalBlink{
  0%, 32%, 68%, 100% {
    transform: scaleY(1);
  }
  36% {
    transform: scaleY(.10);
  }
  40% {
    transform: scaleY(1);
  }
  72% {
    transform: scaleY(.10);
  }
  76% {
    transform: scaleY(1);
  }
}

@keyframes hbAskGoalAntenna{
  0%, 100% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-4deg);
  }
  54% {
    transform: rotate(2deg);
  }
  76% {
    transform: rotate(-2deg);
  }
}

/* ==========================
   ESTAT: ASK-FEATURES
========================== */

.headerBot .facePanel,
.headerBot .acc-features,
.headerBot .featureThoughtBubble,
.headerBot .featureThoughtTrail,
.headerBot .featureIcon{
  transition:
    transform 220ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

/* bombolla de pensament */
.headerBot .acc-features{
  opacity: 0;
  transform: translateX(6px) translateY(0);
}

.headerBot .featureThoughtBubble{
  transform-origin: 255px 38px;
}

.headerBot .featureBubbleRect{
  rx: 24;
  ry: 24;
}

.headerBot .featureIcon{
  opacity: 0;
  transform: scale(.82);
  transform-origin: 24px 24px;
}

.headerBot .featureIcon.is-active{
  opacity: 1;
  transform: scale(1);
}

.headerBot .featureIcon.is-pop{
  animation: hbFeaturePop 260ms ease-out;
}

@keyframes hbFeaturePop{
  0%   { transform: scale(.76); }
  65%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.headerBot.bot-ask-features .acc-features{
  opacity: 1;
  transform: translateX(0) translateY(0);
}

.headerBot.bot-ask-features .head{
  animation: hbAskFeaturesHead 5.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-features .facePanel{
  animation: hbAskFeaturesFace 5.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-features .eyes{
  animation: hbAskFeaturesEyes 5.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-features .eye{
  animation: hbAskFeaturesBlink 5.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-features .antenna{
  animation: hbAskFeaturesAntenna 2.1s ease-in-out infinite !important;
}

/* si hi ha hover, prioritza la bombolla "Sóc Offing" */
.headerBot.bot-ask-features.is-hovering .acc-features{
  opacity: 0;
}

/* cos gairebé frontal, molt estable */
@keyframes hbAskFeaturesHead{
  0%, 100% {
    transform: translateY(1px) scale(1);
  }
  30%, 70% {
    transform: translateY(3px) scale(1.01);
  }
}

/* rostre avall: menys espai sota que damunt */
@keyframes hbAskFeaturesFace{
  0%, 100% {
    transform: translateY(0);
  }
  25%, 75% {
    transform: translateY(5px);
  }
}

/* ulls: esquerra → centre → dreta → centre */
@keyframes hbAskFeaturesEyes{
  0%, 14% {
    transform: translateX(0) translateY(0);
  }
  20%, 30% {
    transform: translateX(-5px) translateY(0);
  }
  36%, 48% {
    transform: translateX(0) translateY(0);
  }
  56%, 68% {
    transform: translateX(5px) translateY(0);
  }
  76%, 100% {
    transform: translateX(0) translateY(0);
  }
}

/* parpelleig entre canvis de mirada */
@keyframes hbAskFeaturesBlink{
  0%, 18%, 38%, 58%, 78%, 100% {
    transform: scaleY(1);
  }
  22% {
    transform: scaleY(.08);
  }
  26% {
    transform: scaleY(1);
  }
  42% {
    transform: scaleY(.08);
  }
  46% {
    transform: scaleY(1);
  }
  62% {
    transform: scaleY(.08);
  }
  66% {
    transform: scaleY(1);
  }
}

/* antena: pols curt i regular */
@keyframes hbAskFeaturesAntenna{
  0%, 100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(0deg) scaleY(1.14);
  }
}

/* ==========================
   ESTAT: ASK-BUDGET
========================== */

.headerBot .acc-budget{
  transition:
    transform 240ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

.headerBot .budgetPack{
  transform-origin: 196px 52px;
}

.headerBot .budgetBar{
  transform-origin: left center;
}

/* mostrem els mòduls suaument */
.headerBot.bot-ask-budget .acc-budget{
  opacity: 1;
  transform: translateX(30px) translateY(0);
}

/* si fem hover, prioritzem la bombolla */
.headerBot.bot-ask-budget.is-hovering .acc-budget{
  opacity: 0;
}

/* bot gairebé frontal, molt estable */
.headerBot.bot-ask-budget .head{
  animation: hbAskBudgetHead 4.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-budget .eyes{
  animation: hbAskBudgetEyes 4.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-budget .eye{
  animation: hbAskBudgetBlink 4.8s ease-in-out infinite !important;
}

.headerBot.bot-ask-budget .antenna{
  animation: hbAskBudgetAntenna 1.55s ease-in-out infinite !important;
}

/* pols de cada mòdul, suau i seqüencial */
.headerBot .budgetBar{
  transform-origin: left center;
  transition:
    transform 420ms cubic-bezier(.2,.8,.2,1),
    opacity 220ms ease;
}

/* escala base controlada per JS */
.headerBot .barS{
  transform: scaleX(var(--budget-s, 1));
  opacity: var(--budget-o-s, .86);
}

.headerBot .barM{
  transform: scaleX(var(--budget-m, 1));
  opacity: var(--budget-o-m, .86);
}

.headerBot .barL{
  transform: scaleX(var(--budget-l, 1));
  opacity: var(--budget-o-l, .86);
}

.headerBot .barX{
  transform: scaleX(var(--budget-x, 1));
  opacity: var(--budget-o-x, .86);
}

/* cap lleugerament endavant, sense pressió */
@keyframes hbAskBudgetHead{
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  18%, 74% {
    transform: translateX(1px) translateY(4px) rotate(1.2deg) scale(1.02);
  }
  86% {
    transform: translateX(0) translateY(1px) rotate(.2deg) scale(1.005);
  }
}

/* mirada petit -> mitjà -> gran -> torna */
@keyframes hbAskBudgetEyes{
  0%, 12% {
    transform: translateX(2px) translateY(-2px);
  }
  22%, 34% {
    transform: translateX(5px) translateY(0);
  }
  46%, 60% {
    transform: translateX(8px) translateY(2px);
  }
  72%, 84% {
    transform: translateX(5px) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}

/* parpelleig discret entre canvis */
@keyframes hbAskBudgetBlink{
  0%, 18%, 100% {
    transform: scaleY(1);
  }
  20% {
    transform: scaleY(.10);
  }
  23% {
    transform: scaleY(1);
  }

  42% {
    transform: scaleY(1);
  }
  44% {
    transform: scaleY(.10);
  }
  47% {
    transform: scaleY(1);
  }

  68% {
    transform: scaleY(1);
  }
  70% {
    transform: scaleY(.10);
  }
  73% {
    transform: scaleY(1);
  }
}

/* antena com calibrant mides */
@keyframes hbAskBudgetAntenna{
  0%, 100% {
    transform: rotate(0deg) scaleY(1);
  }
  18% {
    transform: rotate(0deg) scaleY(1.10);
  }
  32% {
    transform: rotate(0deg) scaleY(1);
  }
  58% {
    transform: rotate(0deg) scaleY(1.08);
  }
  72% {
    transform: rotate(0deg) scaleY(1);
  }
}

/* pulsos dels mòduls */
@keyframes hbBudgetBarS{
  0%, 100% {
    transform: scaleX(1);
    opacity: .82;
  }
  10%, 18% {
    transform: scaleX(1.06);
    opacity: 1;
  }
  24% {
    transform: scaleX(1);
    opacity: .82;
  }
}

@keyframes hbBudgetBarM{
  0%, 100% {
    transform: scaleX(1);
    opacity: .82;
  }
  30%, 38% {
    transform: scaleX(1.05);
    opacity: 1;
  }
  44% {
    transform: scaleX(1);
    opacity: .82;
  }
}

@keyframes hbBudgetBarL{
  0%, 100% {
    transform: scaleX(1);
    opacity: .82;
  }
  52%, 60% {
    transform: scaleX(1.04);
    opacity: 1;
  }
  66% {
    transform: scaleX(1);
    opacity: .82;
  }
}

@keyframes hbBudgetBarX{
  0%, 100% {
    transform: scaleX(1);
    opacity: .82;
  }
  74%, 82% {
    transform: scaleX(1.05);
    opacity: 1;
  }
  88% {
    transform: scaleX(1);
    opacity: .82;
  }
}

/* ==========================
   ESTAT: ASK-DEADLINE
========================== */

.headerBot .acc-deadline{
  opacity: 0;
  transform: none;
  transition: opacity 180ms ease;
}

.headerBot.bot-ask-deadline .acc-deadline{
  opacity: 1;
}

.headerBot .deadlineCalendar{
  transform-origin: 43px 36px;
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

.headerBot.bot-ask-deadline .deadlineCalendar{
  animation: hbAskDeadlineCalendar 6.2s ease-in-out infinite;
}

.headerBot .deadlineCell{
  fill: currentColor;
  opacity: .18;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1);
  transform-box: fill-box;
  transform-origin: center;
}

.headerBot .deadlineCell.is-active{
  opacity: .42;
  transform: scale(1.05);
}

.headerBot .deadlineMark{
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  transition:
    opacity 180ms ease,
    x 260ms cubic-bezier(.2,.8,.2,1),
    y 260ms cubic-bezier(.2,.8,.2,1);
}

.headerBot.bot-ask-deadline .acc-deadline{
  opacity: 1;
  transform: none;
}

.headerBot.bot-ask-deadline .head{
  animation: hbAskDeadlineHead 6.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-deadline .facePanel{
  animation: hbAskDeadlineFace 6.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-deadline .eyes{
  animation: hbAskDeadlineEyes 6.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-deadline .eye{
  animation: hbAskDeadlineBlink 6.2s ease-in-out infinite !important;
}

.headerBot.bot-ask-deadline .antenna{
  animation: hbAskDeadlineAntenna 2.2s ease-in-out infinite !important;
}

/* hover: prioritat a la bombolla */
.headerBot.bot-ask-deadline.is-hovering .acc-deadline{
  opacity: 0;
}

@keyframes hbAskDeadlineCalendar{
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

/* cap: front -> mira el calendari -> torna */
@keyframes hbAskDeadlineHead{
  0%, 14% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  22%, 64% {
    transform: translateX(2px) translateY(2px) rotate(2deg) scale(1.015);
  }
  76%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

/* fa l’efecte de mirar més avall dins del cap */
@keyframes hbAskDeadlineFace{
  0%, 14%, 100% {
    transform: translateY(0);
  }
  26%, 64% {
    transform: translateY(2px);
  }
  76% {
    transform: translateY(0);
  }
}

/* ulls:
   front -> calendari -> mig tancats -> baix/dalt/baix -> front
*/
@keyframes hbAskDeadlineEyes{
  0%, 14% {
    transform: translateX(0) translateY(0);
  }

  /* mira cap al calendari */
  22%, 30% {
    transform: translateX(6px) translateY(0);
  }

  /* comença a llegir, un poc més cap avall */
  36% {
    transform: translateX(6px) translateY(2px);
  }

  /* repàs lent baix -> dalt -> baix */
  46% {
    transform: translateX(6px) translateY(4px);
  }
  56% {
    transform: translateX(6px) translateY(-3px);
  }
  66% {
    transform: translateX(6px) translateY(3px);
  }

  /* torna al front */
  78%, 100% {
    transform: translateX(0) translateY(0);
  }
}

/* ulls:
   oberts -> mig tancats mentre llig -> obri -> dos parpelleigs
*/
@keyframes hbAskDeadlineBlink{
  0%, 18% {
    transform: scaleY(1);
  }

  /* mig tancats, mirant de prop */
  30%, 66% {
    transform: scaleY(.46);
  }

  /* obri en tornar al front */
  74% {
    transform: scaleY(1);
  }

  /* doble parpelleig */
  82% {
    transform: scaleY(.10);
  }
  85% {
    transform: scaleY(1);
  }
  89% {
    transform: scaleY(.10);
  }
  92%, 100% {
    transform: scaleY(1);
  }
}

@keyframes hbAskDeadlineAntenna{
  0%, 100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(0deg) scaleY(1.10);
  }
}

@media (prefers-reduced-motion: reduce){
  .headerBot .deadlineCalendar,
  .headerBot .deadlineCell,
  .headerBot .deadlineMark{
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================
   ESTAT: ASK-BOOKING
========================== */

.headerBot .acc-booking{
  opacity: 0;
  transform: none;
  transition: opacity 180ms ease;
}


.headerBot .bookingCard{
  transform-origin: 42px 32px;
  transition:
    transform 240ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

.headerBot .bookingSlot{
  fill: currentColor;
  opacity: .12;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1);
  transform-box: fill-box;
  transform-origin: center;
}

.headerBot .bookingSlot.is-active{
  opacity: .24;
  transform: scale(1.04);
}

.headerBot .bookingSlotText{
  fill: currentColor;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .2px;
  pointer-events: none;
}

.headerBot .bookingActive{
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  transition:
    x 260ms cubic-bezier(.2,.8,.2,1),
    y 260ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

.headerBot .bookingCheck{
  opacity: 0;
  transform: scale(.84);
  transform-origin: 8px 8px;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(.2,.8,.2,1);
}

.headerBot .bookingCheck.is-visible{
  opacity: 1;
  transform: scale(1);
}

.headerBot.bot-ask-booking .acc-booking{
  opacity: 1;
}

.headerBot.bot-ask-booking .bookingCard{
  animation: hbAskBookingCard 5.6s ease-in-out infinite;
}

.headerBot.bot-ask-booking .head{
  animation: hbAskBookingHead 5.6s ease-in-out infinite !important;
}

.headerBot.bot-ask-booking .facePanel{
  animation: hbAskBookingFace 5.6s ease-in-out infinite !important;
}

.headerBot.bot-ask-booking .eyes{
  animation: hbAskBookingEyes 5.6s ease-in-out infinite !important;
}

.headerBot.bot-ask-booking .eye{
  animation: hbAskBookingBlink 5.6s ease-in-out infinite !important;
}

.headerBot.bot-ask-booking .antenna{
  animation: hbAskBookingAntenna 2s ease-in-out infinite !important;
}

/* hover: prioritat a la bombolla */
.headerBot.bot-ask-booking.is-hovering .acc-booking{
  opacity: 0;
}

@keyframes hbAskBookingCard{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* bot amable, lleu inclinació */
@keyframes hbAskBookingHead{
  0%, 16% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  24%, 64% {
    transform: translateX(2px) translateY(3px) rotate(1.6deg) scale(1.015);
  }
  78%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
}

/* una mica més “atent” */
@keyframes hbAskBookingFace{
  0%, 16%, 100% {
    transform: translateY(0);
  }
  28%, 64% {
    transform: translateY(2px);
  }
  78% {
    transform: translateY(0);
  }
}

/* mira la targeta, repassa una mica i torna */
@keyframes hbAskBookingEyes{
  0%, 16% {
    transform: translateX(0) translateY(0);
  }

  24%, 34% {
    transform: translateX(6px) translateY(0);
  }

  42% {
    transform: translateX(6px) translateY(2px);
  }

  52% {
    transform: translateX(6px) translateY(-1px);
  }

  62% {
    transform: translateX(6px) translateY(2px);
  }

  76%, 100% {
    transform: translateX(0) translateY(0);
  }
}

/* parpelleig relaxat */
@keyframes hbAskBookingBlink{
  0%, 18%, 100% {
    transform: scaleY(1);
  }
  22% {
    transform: scaleY(.10);
  }
  25% {
    transform: scaleY(1);
  }

  68% {
    transform: scaleY(.10);
  }
  72% {
    transform: scaleY(1);
  }

  84% {
    transform: scaleY(.10);
  }
  88% {
    transform: scaleY(1);
  }
}

/* antena detectant disponibilitat */
@keyframes hbAskBookingAntenna{
  0%, 100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(0deg) scaleY(1.10);
  }
}

/* ==========================
   ESTAT: ASK-CONTACT
========================== */

.headerBot .acc-contact{
  opacity: 0;
  transform: none;
  transition: opacity 180ms ease;
}

.headerBot .contactAnchor,
.headerBot .contactScale,
.headerBot .ci-phoneWrap,
.headerBot .ci-mailWrap{
  transform-box: view-box;
}

.headerBot .contactItem,
.headerBot .contactIcon{
  transition:
    transform 240ms cubic-bezier(.2,.8,.2,1),
    opacity 180ms ease;
}

.headerBot .contactIcon{
  opacity: .34;
  transform: scale(1);
  transform-box: fill-box;
  transform-origin: center;
}

.headerBot .contactIcon.is-active{
  opacity: 1;
}

.headerBot .contactIcon.is-pop{
  animation: hbContactPop 320ms ease-out;
}

.headerBot.bot-ask-contact .acc-contact{
  opacity: 1;
}

.headerBot.bot-ask-contact .contactItemPhone{
  animation: hbContactPhoneFloat 4.8s ease-in-out infinite;
}

.headerBot.bot-ask-contact .contactItemMail{
  animation: hbContactMailFloat 5.2s ease-in-out infinite;
}

.headerBot.bot-ask-contact .head{
  animation: hbAskContactHead 6.4s ease-in-out infinite !important;
}

.headerBot.bot-ask-contact .facePanel{
  animation: hbAskContactFace 6.4s ease-in-out infinite !important;
}

.headerBot.bot-ask-contact .eyes{
  animation: hbAskContactEyes 6.4s ease-in-out infinite !important;
}

.headerBot.bot-ask-contact .eyeL{
  animation: hbAskContactEyeL 6.4s ease-in-out infinite !important;
}

.headerBot.bot-ask-contact .eyeR{
  animation: hbAskContactEyeR 6.4s ease-in-out infinite !important;
}

.headerBot.bot-ask-contact .antenna{
  animation: hbAskContactAntenna 2.4s ease-in-out infinite !important;
}

/* hover: prioritat a la bombolla */
.headerBot.bot-ask-contact.is-hovering .acc-contact{
  opacity: 0;
}

@keyframes hbContactPop{
  0%   { transform: scale(.86); }
  60%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes hbContactPhoneFloat{
  0%, 100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-2px) rotate(2deg);
  }
}

@keyframes hbContactMailFloat{
  0%, 100% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(2px) rotate(-2deg);
  }
}

/* bot molt frontal i suau */
@keyframes hbAskContactHead{
  0%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
  }
  30%, 70% {
    transform: translateX(0) translateY(2px) rotate(.2deg) scale(1.01);
  }
}

@keyframes hbAskContactFace{
  0%, 100% {
    transform: translateY(0);
  }
  30%, 70% {
    transform: translateY(1px);
  }
}

@keyframes hbAskContactEyes{
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
}

@keyframes hbAskContactEyeL{
  0%, 63%, 100% {
    transform: scaleY(1);
  }

  /* 1r parpelleig normal */
  66% {
    transform: scaleY(.10);
  }
  70% {
    transform: scaleY(1);
  }

  /* 2n parpelleig més separat */
  90% {
    transform: scaleY(.10);
  }
  94% {
    transform: scaleY(1);
  }
}

@keyframes hbAskContactEyeR{
  0%, 16%, 100% {
    transform: scaleY(1);
  }

  /* picada d’ullet */
  20% {
    transform: scaleY(.10);
  }
  28% {
    transform: scaleY(1);
  }

  /* ull ben obert fins al parpelleig compartit */
  28%, 63% {
    transform: scaleY(1);
  }

  /* 1r parpelleig normal */
  66% {
    transform: scaleY(.10);
  }
  70% {
    transform: scaleY(1);
  }

  /* espai clar entre parpelleigs */
  70%, 90% {
    transform: scaleY(1);
  }

  /* 2n parpelleig normal */
  90% {
    transform: scaleY(.10);
  }
  94% {
    transform: scaleY(1);
  }
}

@keyframes hbAskContactAntenna{
  0%, 100% {
    transform: rotate(0deg) scaleY(1);
  }
  50% {
    transform: rotate(0deg) scaleY(1.08);
  }
}

/* ==========================
   ESTAT: THINKING
========================== */
.headerBot.bot-thinking .acc-gears{ opacity: 1; }
.headerBot.bot-thinking .gearBig{ transform-origin: 0 0; animation: gearSpin 1.2s linear infinite; }
.headerBot.bot-thinking .gearSmall{ transform-origin: 0 0; animation: gearSpinReverse 0.9s linear infinite; }

@keyframes gearSpin{
  from { transform: translate(182px,34px) rotate(0deg); }
  to   { transform: translate(182px,34px) rotate(360deg); }
}
@keyframes gearSpinReverse{
  from { transform: translate(210px,54px) rotate(0deg); }
  to   { transform: translate(210px,54px) rotate(-360deg); }
}

/* ==========================
   ESTAT: TYPING
========================== */
.headerBot.bot-typing .acc-typing{ opacity: 1; }
.headerBot.bot-typing .dots{ animation: typingDots 1s ease-in-out infinite; }

@keyframes typingDots{
  0%,100%{ opacity: .35; }
  50%{ opacity: 1; }
}

/* ==========================
   ESTAT: SUCCESS
========================== */
.headerBot.bot-success .acc-check{ opacity: 1; }

@media (prefers-reduced-motion: reduce){
  .headerBot .head,
  .headerBot .eyes,
  .headerBot .eye,
  .headerBot .antenna,
  .headerBot .botCore,
  .headerBot .hbBubble{
    animation: none !important;
    transition: none !important;
  }
}