/* =========================================================================
   TEMA PROFESSIONALE - SAN CALOGERO REALMONTE
   Ispirato al restyling "Glassmorphism & Dark Elegance"
   ========================================================================= */

/* 1. VARIABILI GLOBALI DEI COLORI */

:root {
  --sc-deep-navy: #0d1c2f;
  --sc-deep-navy-alpha: rgba(13, 28, 47, 0.7);
  --sc-terracotta: #b45309;
  --sc-terracotta-dark: #903f00;
  --sc-terracotta-light: #ffb68e;
  --sc-background: #f8f9ff;
  --sc-surface: #ffffff;
  --sc-text-main: #0d1c2f;
  --sc-text-muted: #554339;
  --sc-border: rgba(220, 193, 180, 0.3);
}

/* 2. TIPOGRAFIA DI BASE */

body {
  font-family: 'Inter', sans-serif;
  color: var(--sc-text-main);
  background-color: var(--sc-background);
}

h1, h2, h3, h4, h5, h6, .font-playfair {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700;
}

/* Colori Testo Custom */

.text-navy {
  color: var(--sc-deep-navy) !important;
}

.text-terracotta {
  color: var(--sc-terracotta) !important;
}

.text-terracotta-light {
  color: var(--sc-terracotta-light) !important;
}

/* 3. COMPONENTI UI PREMIUM (GLASSMORPHISM) */

/* Pannello Vetro Chiaro (Per sfondi chiari/immagine) */

.glass-panel-light {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 1rem !important;
  box-shadow: 0px 10px 30px rgba(51, 65, 85, 0.08) !important;
}

/* Pannello Vetro Scuro (Per sfondi scuri o mappe) */

.glass-panel-dark {
  background: var(--sc-deep-navy-alpha) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3) !important;
  color: var(--sc-terracotta-light) !important;
}

/* Ombre Morbide Eleganti */

.shadow-soft-premium {
  box-shadow: 0px 15px 40px rgba(13, 28, 47, 0.08) !important;
}

/* 4. BOTTONI ED EFFETTI HOVER */

.btn-terracotta {
  background-color: var(--sc-terracotta) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50rem !important;
  padding: 0.75rem 1.5rem !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.btn-terracotta:hover {
  background-color: var(--sc-terracotta-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0px 5px 15px rgba(180, 83, 9, 0.3) !important;
}

/* Effetto sollevamento card */

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hover-lift:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0px 15px 40px rgba(13, 28, 47, 0.12) !important;
}

/* 5. ANIMAZIONI */

@keyframes pulse-live {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}

.badge-live-pulse {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: rgba(220, 53, 69, 0.1) !important;
  color: #dc3545 !important;
  border: 1px solid rgba(220, 53, 69, 0.2) !important;
  padding: 0.4rem 0.8rem !important;
  border-radius: 50rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
}

.badge-live-pulse::before {
  content: '' !important;
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  background-color: #dc3545 !important;
  border-radius: 50% !important;
  animation: pulse-live 2s infinite !important;
}

/* =========================================================================
   4. PREMIUM WOW FACTOR (3D, GLOW, ANIMATIONS)
   ========================================================================= */

/* Dynamic Glow Background (Blob) */

.bg-dynamic-glow {
  position: relative;
  overflow: hidden;
}

.bg-dynamic-glow::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(180, 83, 9, 0.15) 0%, rgba(255,255,255,0) 60%);
  animation: rotateGlow 20s linear infinite;
  z-index: 0;
  pointer-events: none;
}

.bg-dynamic-glow > * {
  position: relative;
  z-index: 1;
}

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg) translate(-20px, -20px);
  }
  50% {
    transform: rotate(180deg) translate(20px, 20px);
  }
  100% {
    transform: rotate(360deg) translate(-20px, -20px);
  }
}

/* Hover Lift Effect */

.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
}

.hover-lift:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(13, 28, 47, 0.12) !important;
  z-index: 10;
}

/* Magnetic Button Ripple/Pulse */

.btn-terracotta {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-terracotta::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s ease-out;
}

.btn-terracotta:hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* 3D Tilt Glare Fix */

.js-tilt-glare {
  border-radius: inherit;
}