/*
 * intersection_observer.css
 * Animazioni d'ingresso al scroll per le sezioni della welcome page
 */

/* ===== Slide da sinistra ===== */
.animate-left {
  transform: translateX(-60px);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.animate-left.show {
  transform: translateX(0);
  opacity: 1;
}

/* ===== Slide dal basso ===== */
.animate-up {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.animate-up.show {
  transform: translateY(0);
  opacity: 1;
}

/* ===== Solo fade ===== */
.animate-fade {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.animate-fade.show {
  opacity: 1;
}

/* ===== Delay utility ===== */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }

/* ===== Cards stagger all'interno delle sezioni animate ===== */
/* Le cards partono invisibili e scendono dal basso una alla volta */
.card-grid > * {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.45s ease-out, opacity 0.45s ease-out;
}

/* Quando la sezione padre riceve .show, le cards si animano in sequenza */
.show .card-grid > *:nth-child(1) { transition-delay: 0.15s; }
.show .card-grid > *:nth-child(2) { transition-delay: 0.28s; }
.show .card-grid > *:nth-child(3) { transition-delay: 0.41s; }
.show .card-grid > *:nth-child(4) { transition-delay: 0.54s; }

.show .card-grid > * {
  transform: translateY(0);
  opacity: 1;
}

/* ===== #frameworks: punta alla .ccy-card dentro i col, non al col wrapper ===== */
#frameworks .row .ccy-card {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.45s ease-out, opacity 0.45s ease-out;
}

#frameworks.show .row .col-md-3:nth-child(1) .ccy-card { transition-delay: 0.15s; }
#frameworks.show .row .col-md-3:nth-child(2) .ccy-card { transition-delay: 0.28s; }
#frameworks.show .row .col-md-3:nth-child(3) .ccy-card { transition-delay: 0.41s; }
#frameworks.show .row .col-md-3:nth-child(4) .ccy-card { transition-delay: 0.54s; }

#frameworks.show .row .ccy-card {
  transform: translateY(0);
  opacity: 1;
}

/* ===== how-it-works: #model ===== */
#model .model-grid .ccy-card {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.45s ease-out, opacity 0.45s ease-out;
}

#model.show .model-grid .ccy-card:nth-child(1) { transition-delay: 0.15s; }
#model.show .model-grid .ccy-card:nth-child(2) { transition-delay: 0.28s; }
#model.show .model-grid .ccy-card:nth-child(3) { transition-delay: 0.41s; }

#model.show .model-grid .ccy-card {
  transform: translateY(0);
  opacity: 1;
}

/* ===== how-it-works: #evidence ===== */
#evidence .evidence-grid .ccy-card {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.45s ease-out, opacity 0.45s ease-out;
}

#evidence.show .evidence-grid .ccy-card:nth-child(1) { transition-delay: 0.10s; }
#evidence.show .evidence-grid .ccy-card:nth-child(2) { transition-delay: 0.20s; }
#evidence.show .evidence-grid .ccy-card:nth-child(3) { transition-delay: 0.30s; }
#evidence.show .evidence-grid .ccy-card:nth-child(4) { transition-delay: 0.40s; }
#evidence.show .evidence-grid .ccy-card:nth-child(5) { transition-delay: 0.50s; }
#evidence.show .evidence-grid .ccy-card:nth-child(6) { transition-delay: 0.60s; }

#evidence.show .evidence-grid .ccy-card {
  transform: translateY(0);
  opacity: 1;
}

/* ===== how-it-works: #visualization ===== */
#visualization .viz2-grid .ccy-graphic-card {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.45s ease-out, opacity 0.45s ease-out;
}

#visualization.show .viz2-grid .ccy-graphic-card:nth-child(1) { transition-delay: 0.15s; }
#visualization.show .viz2-grid .ccy-graphic-card:nth-child(2) { transition-delay: 0.30s; }

#visualization.show .viz2-grid .ccy-graphic-card {
  transform: translateY(0);
  opacity: 1;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .animate-left,
  .animate-up,
  .animate-fade {
    transform: none;
    opacity: 1;
    transition: none;
  }

  .card-grid > * {
    transform: none;
    opacity: 1;
    transition: none;
  }
}