html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ===========================
   Movie Credits Marquee (Upward, start from bottom)
   =========================== */
/* Marquee box & variables */
.credits-marquee {
  --marquee-width: min(640px, 90vw);
  --marquee-height: 180px;

  /* Slow the cycle a bit more if needed */
  --marquee-duration: 30s;

  /* Buffer around memorial to ensure it's alone on screen when paused */
  --memorial-buffer: 24px; /* increase if you still see adjacent items */

  /* Height of the center pause band (tighter band = more precise center freeze) */
  --pause-band-height: 24px;

  width: var(--marquee-width);
  height: var(--marquee-height);
  overflow: hidden;
  background: #ffffff; /* or transparent */
  border-radius: 12px;
  padding: 12px 16px;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: .5rem;
}

/* Track & list sizing */
.credits-track,
.credits-list,
.credits-list li { width: 100%; }

.credits-track {
  display: grid;
  gap: 12px;
  align-items: start;
  transform: translateY(100%);
  animation: credits-scroll-up var(--marquee-duration) linear infinite;
  will-change: transform;
}

/* Apply actual pause when JS toggles the 'paused' class */
.credits-track.paused {
  animation-play-state: paused;
}

/* The invisible centered pause band */
.pause-zone {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--pause-band-height);
  transform: translateY(-50%);
  pointer-events: none;
  /* Debug (optional): uncomment to visualize the band
  outline: 1px dashed #94a3b8;
  background: rgba(148, 163, 184, 0.12);
  */
}

/* Normal rows: two columns */
.credits-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #1a1a1a;
  font-size: 0.95rem;
}
.credits-list li {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: baseline;
  padding: 2px 0;
}
.credit-title { justify-self: start; text-align: left; color: #6b7280; font-weight: 600; letter-spacing: .02em; }
.credit-name  { justify-self: end;   text-align: right; color: #111827; font-weight: 500; white-space: nowrap; }

/* Memorial: stacked & centered */
.credits-list li.memorial {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px 0;
}
.mem-title { font-weight: 700; font-style: italic; margin-bottom: 4px; color: #374151; text-align: center !important; }
.mem-name  { font-weight: 700; color: #111827; text-align: center !important; white-space: nowrap; }

/* Spacers: make sure memorial is isolated in view */
.credits-spacer {
  /* At least the viewport height; add a buffer so adjacent items are off-screen */
  height: calc(var(--marquee-height) + var(--memorial-buffer));
}

/* Upward scroll */
@keyframes credits-scroll-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(-100%); }
}

/* Pause-on-hover/focus (optional) */
.credits-marquee:hover .credits-track,
.credits-marquee:focus-within .credits-track { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .credits-track {
    animation: none;
    transform: translateY(0);
  }
}