/* =====================================================================
   reveal.css — Aparició progressiva de les seccions

   ⚠️ Aquestes classes NOMÉS les posa reveal.js. No s'ha d'amagar mai res
   des del CSS a seques: si el JS no arriba a executar-se, la portada s'ha
   de veure sencera igualment.

   Per això aquí no hi ha cap regla que amagui `.passa-courses` i companyia
   directament — sempre va condicionada a `.passa-reveal-sec`.
   ===================================================================== */

/* ⚠️ LA TRANSICIÓ VA A `.is-in`, NO A L'ESTAT AMAGAT.
   Si es posa a l'estat amagat, com que la classe l'afegeix el JS just després
   de carregar, el navegador anima d'opacitat 1 a 0: la secció es veu i
   *s'esvaeix cap enfora* abans d'entrar. Es va detectar mesurant al navegador
   i trobant totes les seccions a opacity 0.249 a mig fondre's.
   Amb la transició només a `.is-in`, amagar és instantani i només s'anima
   l'entrada, que és el que volem. */
.passa-reveal-sec {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
.passa-reveal-sec.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}
/* Quan ja ha entrat, es deixa de reservar capa: si no, cada secció es queda
   amb una capa de composició per sempre i en mòbil es nota. */
.passa-reveal-sec.reveal-done { will-change: auto; }

/* ---- Escalonat de les targetes ----
   Només a les seccions marcades per reveal.js (graelles normals, mai
   carrusels). El retard el posa el JS a cada targeta. */
.passa-reveal-fills .blog-card,
.passa-reveal-fills .person,
.passa-reveal-fills .modalitat,
.passa-reveal-fills .actic-nivell,
.passa-reveal-fills .actic-pas,
.passa-reveal-fills .actic-foto {
  opacity: 0;
  transform: translateY(18px);
}
.passa-reveal-fills.is-in .blog-card,
.passa-reveal-fills.is-in .person,
.passa-reveal-fills.is-in .modalitat,
.passa-reveal-fills.is-in .actic-nivell,
.passa-reveal-fills.is-in .actic-pas,
.passa-reveal-fills.is-in .actic-foto {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}

/* Un cop dins, la targeta recupera la seva transició de hover: la del
   reveal (.55s) feia el hover lent i pastós. Mateix problema que ja va
   sortir a method.css. */
.passa-reveal-fills.reveal-done .blog-card,
.passa-reveal-fills.reveal-done .actic-nivell,
.passa-reveal-fills.reveal-done .actic-foto {
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .passa-reveal-sec,
  .passa-reveal-fills .blog-card,
  .passa-reveal-fills .person,
  .passa-reveal-fills .modalitat,
  .passa-reveal-fills .actic-nivell,
  .passa-reveal-fills .actic-pas,
  .passa-reveal-fills .actic-foto {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}