/* Transicions del web comercial (sigpc.cat i status.sigpc.cat). Només les carrega el layout públic.
   Les que necessiten JS s'activen amb la classe .t-js de <html> (la posa motion-web.js): sense JS tot es veu igual
   que sempre. Totes respecten prefers-reduced-motion. Font: transitions.dev (transitions-dev). */

/* ---- W1 · Menú desplegable de la navegació ----
   Bootstrap mostra el menú amb .show; l'obertura és una animació CSS i el tancament el fa motion-web.js (.is-closing).
   S'anima `scale` i `opacity` (no `transform`) perquè no trepitgi el posicionament de Bootstrap. */
@media (min-width: 992px) {
  .navbar-sigpc .dropdown-menu { transform-origin: top left; }
  .navbar-sigpc .dropdown-menu.show {
    animation: t-dd-in var(--dropdown-open-dur) var(--dropdown-ease) both;
  }
  .navbar-sigpc .dropdown-menu.show.is-closing {
    animation: t-dd-out var(--dropdown-close-dur) var(--dropdown-ease) both;
    pointer-events: none;
  }
}
@keyframes t-dd-in {
  from { opacity: 0; scale: var(--dropdown-pre-scale); }
  to   { opacity: 1; scale: 1; }
}
@keyframes t-dd-out {
  from { opacity: 1; scale: 1; }
  to   { opacity: 0; scale: var(--dropdown-closing-scale); }
}

/* ---- W2 · Toast: avís de cookies ---- */
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

/* ---- W3 · Acordió: preguntes freqüents (<details class="faq-item">) ----
   El panell creix amb grid-template-rows 0fr -> 1fr. Només amb JS: sense JS, <details> funciona com sempre. */
.t-js .faq-item .t-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--acc-collapse) var(--acc-ease);
}
.t-js .faq-item[data-open="true"] .t-acc-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--acc-expand) var(--acc-ease);
}
.t-js .faq-item .t-acc-panel-inner {
  overflow: hidden;
  opacity: 0;
  filter: blur(var(--blur-small));
  transition:
    opacity var(--acc-collapse) var(--acc-ease),
    filter var(--acc-collapse) var(--acc-ease);
}
.t-js .faq-item[data-open="true"] .t-acc-panel-inner {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--acc-expand) var(--acc-ease),
    filter var(--acc-expand) var(--acc-ease);
}
/* El xevró gira amb data-open (el [open] natiu es manté fins que acaba el tancament). */
.t-js .faq-item summary::after { transition: transform var(--acc-chevron) var(--acc-ease); }
.t-js .faq-item[open]:not([data-open="true"]) summary::after { transform: none; }
.t-js .faq-item[data-open="true"] summary::after { transform: rotate(180deg); }

/* ---- W4 · Formularis: check d'èxit i tremolor d'error ---- */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity, filter;
  vertical-align: -0.2em;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path { stroke-dasharray: 21; stroke-dashoffset: 0; }
/* A l'avís (icona petita) el moviment és curt perquè no surti de la caixa. */
.t-success-check--inline { --check-y-amount: 10px; --check-blur-from: 4px; }
.t-js .t-success-check[data-state="out"] { opacity: 0; }
.t-js .t-success-check[data-state="out"] svg path { stroke-dashoffset: 21; }
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) both;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate { from { transform: rotate(var(--check-rotate-from)); } to { transform: rotate(0deg); } }
@keyframes t-check-blur { from { filter: blur(var(--check-blur-from)); } to { filter: blur(0); } }
@keyframes t-check-bob { from { translate: 0 var(--check-y-amount); } to { translate: 0 0; } }
@keyframes t-check-draw { from { stroke-dashoffset: 21; } to { stroke-dashoffset: 0; } }

/* Tremolor: s'aplica als camps invàlids i a l'avís d'error (classe .is-shaking, que treu el JS en acabar). */
.is-shaking {
  animation: t-input-shake calc(var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2) linear;
}
@keyframes t-input-shake {
  0%      { transform: translateX(0);                                 animation-timing-function: var(--shake-ease); }
  28.57%  { transform: translateX(var(--shake-distance));             animation-timing-function: var(--shake-ease); }
  57.14%  { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57%  { transform: translateX(var(--shake-overshoot));            animation-timing-function: var(--shake-ease); }
  100%    { transform: translateX(0); }
}

/* ---- W7 · Pàgina d'estat: valors que s'actualitzen al lloc ---- */
.t-text-soft {
  display: inline-grid;
  justify-items: var(--text-soft-align, start);
  transition: width var(--text-soft-resize-dur) var(--text-soft-resize-ease);
}
.t-text-soft > span {
  grid-area: 1 / 1;
  white-space: pre;
  transition:
    filter  var(--text-soft-dur) var(--text-soft-ease),
    opacity var(--text-soft-dur) var(--text-soft-ease);
}
.t-text-soft-new { opacity: 0; filter: blur(var(--text-soft-blur)); }
.t-text-soft.is-swapping .t-text-soft-old { opacity: 0; filter: blur(var(--text-soft-blur)); }
.t-text-soft.is-swapping .t-text-soft-new { opacity: 1; filter: blur(0); }
/* Barres de disponibilitat i etiquetes d'estat: el canvi de valor no salta. */
.avail-bar span { transition: width var(--duration-slow) var(--ease-smooth-out); }
.pill { transition: background-color var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out); }
.t-live-enter { animation: t-live-in var(--duration-slow) var(--ease-smooth-out) both; }
@keyframes t-live-in { from { opacity: 0; filter: blur(var(--blur-small)); } to { opacity: 1; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .navbar-sigpc .dropdown-menu.show,
  .navbar-sigpc .dropdown-menu.show.is-closing { animation: none !important; }
  .t-toast { transition: none !important; }
  .t-js .faq-item .t-acc-panel,
  .t-js .faq-item .t-acc-panel-inner,
  .t-js .faq-item summary::after { transition: none !important; }
  .t-success-check { animation: none !important; opacity: 1 !important; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
  .is-shaking { animation: none !important; }
  .t-text-soft, .t-text-soft > span, .avail-bar span, .pill { transition: none !important; }
  .t-live-enter { animation: none !important; }
}