/* ==========================================================================
   HOME (index.html)
   ========================================================================== */

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--cdl-dark);
  color: var(--cdl-white);
  display: flex;
  flex-direction: column;
  letter-spacing: -0.02em;
  text-rendering: optimizeLegibility;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

/* Su desktop la home sta tutta in una schermata, senza scorrimento */
@media (min-width: 1024px) {
  body {
    overflow-y: hidden;
  }
}

.content-wrapper {
  max-width: 1000px;
  margin: auto;
}

h1,
h2,
h3 {
  font-weight: 900;
  text-transform: uppercase;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Griglia bento principale
   -------------------------------------------------------------------------- */
.main-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-items: stretch; /* le due card in basso restano sempre alla stessa altezza */
}

@media (max-width: 768px) {
  .main-grid {
    grid-template-columns: 1fr;
  }
}

/* Sulla home il bordo bento si solleva al passaggio del mouse */
.bento-border {
  transition:
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out),
    transform 0.3s var(--ease-out);
}

.bento-border:hover {
  transform: translateY(-3px);
}

/* Frecce e chevron dentro le card: transizione coerente */
.bento-border [data-lucide],
.bento-border svg.lucide {
  transition: transform 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Pallino rosso lampeggiante del badge "tesseramento aperto"
   -------------------------------------------------------------------------- */
.rec-dot {
  width: 6px;
  height: 6px;
  background-color: var(--cdl-red);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* --------------------------------------------------------------------------
   Nuvoletta del pensiero: compare a caso quando si clicca sull'icona CDL.
   La posizione viene sovrascritta da JS a ogni apparizione.
   -------------------------------------------------------------------------- */
#domanda-image {
  position: absolute;
  top: 25%;
  left: 75%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 100;
  max-width: 160px;
  width: 40%;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.6s ease-in-out,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  backface-visibility: hidden;
}

#domanda-image.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: floatThought 2s ease-in-out infinite;
}

@keyframes floatThought {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -53%) scale(1.03);
  }
}

/* --------------------------------------------------------------------------
   Oscillazione lenta dell'icona principale
   -------------------------------------------------------------------------- */
@keyframes iconFloatGentle {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.5deg);
  }
}

.animate-icon-float {
  animation: iconFloatGentle 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rec-dot {
    animation: none;
    opacity: 1;
  }
  .animate-icon-float {
    animation: none;
  }
  .bento-border:hover {
    transform: none;
  }
}

/* Barra di scorrimento su fondo scuro */
::-webkit-scrollbar-track { background: var(--cdl-dark); }
::-webkit-scrollbar-thumb { background: var(--cdl-lavender); }