/**
 * Transizione tema (View Transitions) + feedback click sul toggle tema.
 * Incluso dalle pagine marketing e da app.html.
 */

/* ——— View Transition: crossfade morbido tra temi ——— */
@supports (view-transition-name: root) {
  html {
    view-transition-name: root;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.42s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  ::view-transition-old(root) {
    animation-name: spisa-theme-vt-out;
  }

  ::view-transition-new(root) {
    animation-name: spisa-theme-vt-in;
  }
}

@keyframes spisa-theme-vt-out {
  from {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
  to {
    opacity: 0.72;
    filter: brightness(0.88) saturate(0.85);
  }
}

@keyframes spisa-theme-vt-in {
  from {
    opacity: 0.65;
    filter: brightness(1.12) saturate(1.08);
  }
  to {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
}

/* ——— Impulso ciano sul click (icona torna grigia a fine animazione) ——— */
.spisa-theme-btn--pulse {
  animation: spisa-theme-btn-pulse 0.58s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes spisa-theme-btn-pulse {
  0% {
    color: #94a3b8;
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
  }
  40% {
    color: #00d2ff;
    background-color: rgba(0, 210, 255, 0.18);
    box-shadow:
      0 0 0 1px rgba(0, 210, 255, 0.35),
      0 0 22px rgba(0, 210, 255, 0.42);
  }
  100% {
    color: #94a3b8;
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
  }
}

html.light .spisa-theme-btn--pulse,
[data-theme='light'] .spisa-theme-btn--pulse {
  animation-name: spisa-theme-btn-pulse-light;
}

@keyframes spisa-theme-btn-pulse-light {
  0% {
    color: #94a3b8;
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
  }
  40% {
    color: #0284c7;
    background-color: rgba(0, 210, 255, 0.16);
    box-shadow:
      0 0 0 1px rgba(14, 165, 233, 0.4),
      0 0 20px rgba(0, 210, 255, 0.35);
  }
  100% {
    color: #94a3b8;
    background-color: transparent;
    box-shadow: 0 0 0 0 rgba(0, 210, 255, 0);
  }
}