/* --- css/magistralis_spin_button.css --- */

.mag-button-container {
  position: relative;
  /* Margine automatico a sinistra per spingerlo via dagli altri pulsanti */
  margin-left: 40px !important; 
  margin-right: 0;
  width: 124px; /* Leggermente più largo del bottone per il bordo */
  height: 49px; /* Altezza container (45px bottone + bordi) */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; 
}

/* Bordo esterno che contiene l'animazione */
.mag-button-border {
  padding: 2px; /* Bordo più sottile per matchare lo stile 45px */
  position: absolute;
  inset: 0;
  background: rgba(197, 160, 89, 0.2); /* Sfondo traccia più leggero */
  border-radius: inherit;
  /* Path ricalcolato per altezza 49px (container) */
  clip-path: path("M 85 0 C 115 0 124 4 124 24.5 C 124 45 115 49 85 49 L 35 49 C 5 49 0 45 0 24.5 C 0 4 5 0 35 0 Z");
}

/* Il corpo del bottone */
.mag-button {
  justify-content: center;
  align-items: center;
  border: none;
  /* Path ricalcolato per altezza 45px (interno) */
  clip-path: path("M 85 0 C 112 0 120 4 120 22.5 C 120 41 112 45 85 45 L 35 45 C 8 45 0 41 0 22.5 C 0 4 8 0 35 0 Z");
  width: 120px;
  height: 45px; /* ALTEZZA TARGET CORRETTA */
  background: #0d141e; /* Dark Blue */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  /* Stile Testo allineato agli altri bottoni */
  font-family: 'Cinzel', serif;
  font-weight: 700;
  color: #c5a059; /* Oro */
  text-transform: uppercase;
  font-size: 0.8rem; /* Font adattato all'altezza 45px */
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  transition: all 0.3s ease;
  line-height: 1;
}

/* L'elemento cliccabile invisibile */
.mag-real-button {
  position: absolute;
  width: 124px;
  height: 49px;
  z-index: 10;
  outline: none;
  border: none;
  cursor: pointer;
  opacity: 0;
}

/* Effetto al click */
.mag-real-button:active ~ div .mag-button {
    color: #0d141e; 
    background: #c5a059; /* Diventa Oro pieno al click */
}

/* Effetto Hover */
.mag-real-button:hover ~ div .mag-button {
    color: #ffd277;
    text-shadow: 0 0 8px rgba(197, 160, 89, 0.6);
}

/* Sfondo animato (Spin) */
.mag-spin {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: 0.5;
  overflow: hidden;
  transition: opacity 0.3s;
}

.mag-real-button:hover ~ div .mag-spin {
  opacity: 1; /* Illumina bordo all'hover */
}

/* Gradiente rotante Oro/Bronzo */
.mag-spin::before {
  content: "";
  position: absolute;
  inset: -150%;
  animation: mag-speen 3s linear infinite; /* Rotazione un po' più veloce */
  background: conic-gradient(
    from 0deg,
    transparent 0%, 
    #77530a 10%,   
    transparent 20%, 
    transparent 50%, 
    #c5a059 60%,   
    #ffd277 70%,   
    #c5a059 80%, 
    transparent 90%
  );
}

.mag-spin-blur::before { filter: blur(1em); }
.mag-spin-intense::before { filter: blur(0.3em); }
.mag-spin-inside::before { filter: blur(1px); opacity: 0.8; }

@keyframes mag-speen {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}