/* creditos.css — el rollo de créditos que se va revelando al bajar. */

.modern dialog.creditos-dialog{
  width: min(620px, calc(100% - 32px));
  max-height: min(84dvh, 760px);
}
.modern .creditos-pista{
  margin: -16px 0 0;
  color: var(--naranja);
  font-size: .78em;
  letter-spacing: .04em;
}
.modern .creditos-rollo{
  /* El hueco de abajo es lo que deja que el último bloque llegue a subir
     hasta el centro antes de que se acabe el desplazamiento. */
  padding: 40vh 0 46vh;
  display: grid;
  gap: 72px;
  text-align: center;
}
.modern .credito-bloque{
  margin: 0;
  opacity: 0;
  translate: 0 26px;
  transition: opacity .7s var(--ease), translate .7s var(--ease);
}
.modern .credito-visible{ opacity: 1; translate: 0 0; }

.modern .credito-grande{
  font: 400 clamp(2.2rem, 8vw, 3.4rem)/1.1 'Patrick Hand', cursive;
  color: var(--lavender);
}
.modern h3.credito-titulo{
  font: 400 1.7rem/1.2 'Patrick Hand', cursive;
  color: var(--naranja);
}
.modern .credito-cita{
  padding: 18px 20px;
  border-left: 3px solid var(--violeta);
  border-radius: 0 14px 14px 0;
  background: #a878ff12;
  color: #e6dcc4;
  font-size: .9em;
  text-align: left;
}
.modern .credito-separador{
  color: var(--violeta);
  font-size: 1.4rem;
  opacity: .55;
}
@media (prefers-reduced-motion: reduce){
  .modern .credito-bloque{ opacity: 1; translate: none; transition: none; }
  .modern .creditos-rollo{ padding: 8px 0 24px; gap: 34px; }
}