/* ===========================================
   ANIMAZIONI TRANSIZIONI SLIDE
   Tutte le animazioni delle transizioni in un unico file
   facile da modificare e personalizzare
   =========================================== */

/* Durata e timing function di default */
:root {
  --transition-duration: 0.6s;
  --transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===========================================
   ESCLUSIONE CONTROLLI DALLE ANIMAZIONI
   I controlli di navigazione non devono animarsi
   =========================================== */
.public-mode .slide-controls,
.public-mode .slide-controls *,
.public-mode .live-indicator-center,
.public-mode .live-indicator-center * {
  animation: none !important;
  transition: none !important;
}

  .public-mode .slide-controls .mud-button-label .mud-button-icon-start {
    margin-left: 0;
    margin-right: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

/* Ripristina solo le transizioni di hover per i pulsanti */
.public-mode .nav-btn {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* ===========================================
   1. SLIDE IN (Scorrimento orizzontale)
   =========================================== */
@keyframes slide-in-anim {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.transition-slide-in {
  animation: slide-in-anim var(--transition-duration) var(--transition-timing) forwards;
}

/* ===========================================
   2. FADE (Dissolvenza semplice)
   =========================================== */
@keyframes fade-anim {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.transition-fade {
  animation: fade-anim 0.5s ease-in-out forwards;
}

/* ===========================================
   3. ZOOM (Ingrandimento)
   =========================================== */
@keyframes zoom-anim {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.transition-zoom {
  animation: zoom-anim 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ===========================================
   4. FLIP (Rotazione 3D)
   =========================================== */
@keyframes flip-anim {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateY(-90deg);
  }

  to {
    opacity: 1;
    transform: perspective(1200px) rotateY(0deg);
  }
}

.transition-flip {
  animation: flip-anim 0.7s var(--transition-timing) forwards;
}

/* ===========================================
   5. SLIDE DOWN (Scorrimento dall'alto)
   =========================================== */
@keyframes slide-down-anim {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transition-slide-down {
  animation: slide-down-anim 0.5s var(--transition-timing) forwards;
}

/* ===========================================
   6. SLIDE UP (Scorrimento dal basso)
   =========================================== */
@keyframes slide-up-anim {
  from {
    opacity: 0;
    transform: translateY(80px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.transition-slide-up {
  animation: slide-up-anim 0.5s var(--transition-timing) forwards;
}

/* ===========================================
   7. ROTATE (Rotazione)
   =========================================== */
@keyframes rotate-anim {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(0.9);
  }

  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

.transition-rotate {
  animation: rotate-anim var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ===========================================
   8. BLUR IN (Effetto sfocatura)
   =========================================== */
@keyframes blur-in-anim {
  from {
    opacity: 0;
    filter: blur(25px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

.transition-blur-in {
  animation: blur-in-anim 0.7s ease-out forwards;
}

/* ===========================================
   9. DISSOLVE (Dissolvenza fluida - DEFAULT)
   =========================================== */
@keyframes dissolve-anim {
  0% {
    opacity: 0;
    filter: blur(10px) saturate(0.3);
    transform: scale(1.03);
  }

  40% {
    opacity: 0.6;
    filter: blur(4px) saturate(0.7);
    transform: scale(1.01);
  }

  100% {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
  }
}

.transition-dissolve {
  animation: dissolve-anim 0.8s ease-out forwards;
}

/* ===========================================
   10. PIXELS (Effetto pixellato)
   =========================================== */
@keyframes pixels-anim {
  0% {
    opacity: 0;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }

  25% {
    opacity: 0.4;
    clip-path: polygon(0% 0%, 30% 0%, 30% 100%, 0% 100%);
  }

  50% {
    opacity: 0.7;
    clip-path: polygon(0% 0%, 60% 0%, 60% 100%, 0% 100%);
  }

  75% {
    opacity: 0.9;
    clip-path: polygon(0% 0%, 85% 0%, 85% 100%, 0% 100%);
  }

  100% {
    opacity: 1;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
}

.transition-pixels {
  animation: pixels-anim 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===========================================
   11. WIPE (Scansione da sinistra)
   =========================================== */
@keyframes wipe-anim {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.6;
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.transition-wipe {
  animation: wipe-anim var(--transition-duration) ease-out forwards;
}

/* ===========================================
   12. SCALE FADE (Scala con dissolvenza)
   =========================================== */
@keyframes scale-fade-anim {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.transition-scale-fade {
  animation: scale-fade-anim 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ===========================================
   13. GRID REVEAL (Rivelazione circolare)
   =========================================== */
@keyframes grid-reveal-anim {
  0% {
    opacity: 0;
    clip-path: circle(0% at 50% 50%);
  }

  50% {
    opacity: 0.7;
    clip-path: circle(40% at 50% 50%);
  }

  100% {
    opacity: 1;
    clip-path: circle(100% at 50% 50%);
  }
}

.transition-grid-reveal {
  animation: grid-reveal-anim 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===========================================
   ANIMAZIONI HELPER
   =========================================== */

/* Pulse per bullet points */
@keyframes pulse-bullet {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

/* Pulse per live indicator */
@keyframes pulse-live {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  50% {
    box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.2);
  }
}

/* Blink per icone live */
@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

/* Pulse generale per effetti */
@keyframes pulse {
  0%, 100% {
    opacity: 0.15;
  }

  50% {
    opacity: 0.25;
  }
}

/* Spin per loader */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}