/* fcc-loader: ambient loading widget shared across fcc.cc.
   Drifting gradient blobs behind a cross-fading quote.
   Fades in after a 150ms grace so fast loads never flash.

   Usage:
     <div data-fcc-loader></div>
   JS (optional, for re-show): FccLoader.show(el) / FccLoader.hide(el)
*/

.fcc-loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 620px;
  min-height: 220px;
  margin: 0 auto;
  padding: 32px 24px;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  /* Light-on-dark by default; overridden below for light themes. Site
     pages may not reliably set a text color on the host, so fix it here. */
  color: rgba(238, 242, 247, 0.92);
  opacity: 0;
  animation: fcc-loader-in 420ms ease-out 150ms forwards;
}

/* Light-theme text color. Matches existing dark ink used elsewhere on the
   newsprint/paper themes. */
html[data-mode="light"] .fcc-loader,
html[data-paper="newsprint"] .fcc-loader,
html[data-paper="paper"] .fcc-loader,
html[data-paper="sepia"] .fcc-loader {
  color: rgba(23, 26, 33, 0.88);
}

.fcc-loader.is-hiding {
  animation: fcc-loader-out 240ms ease-in forwards;
  animation-delay: 0s;
}

.fcc-loader__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.fcc-loader__blob {
  position: absolute;
  display: block;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.55;
  will-change: transform;
  mix-blend-mode: screen;
}

.fcc-loader__blob:nth-child(1) {
  left: -80px;
  top: -60px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.9) 0%, rgba(167, 139, 250, 0) 65%);
  animation: fcc-loader-drift-a 34s ease-in-out infinite;
}

.fcc-loader__blob:nth-child(2) {
  right: -70px;
  top: 20px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(199, 210, 254, 0.95) 0%, rgba(199, 210, 254, 0) 65%);
  animation: fcc-loader-drift-b 46s ease-in-out infinite;
}

.fcc-loader__blob:nth-child(3) {
  left: 40%;
  bottom: -80px;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(244, 114, 182, 0.7) 0%, rgba(244, 114, 182, 0) 65%);
  animation: fcc-loader-drift-c 52s ease-in-out infinite;
}

.fcc-loader__msg {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  padding: 10px 8px;
}

.fcc-loader__text {
  margin: 0;
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.5;
  font-style: italic;
  color: inherit;
  opacity: 0.92;
  min-height: 2.8em;
  transition: opacity 380ms ease;
}

.fcc-loader__text.is-swapping {
  opacity: 0;
}

.fcc-loader__author {
  margin: 10px 0 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: inherit;
  opacity: 0.55;
  transition: opacity 380ms ease;
}

.fcc-loader__author.is-swapping {
  opacity: 0;
}

/* Light-theme adjustments: blobs are strong on dark backgrounds but overpower
   light backgrounds. Dim them and switch off screen blend so colors stay true. */
html[data-mode="light"] .fcc-loader__blob,
html[data-paper="newsprint"] .fcc-loader__blob,
html[data-paper="paper"] .fcc-loader__blob,
html[data-paper="sepia"] .fcc-loader__blob {
  opacity: 0.35;
  mix-blend-mode: multiply;
  filter: blur(64px);
}

/* Accessibility: honor reduced-motion. Blobs freeze, cross-fade becomes an
   instant swap, fade-in is instant (but still respects the 150ms grace). */
@media (prefers-reduced-motion: reduce) {
  .fcc-loader {
    animation: fcc-loader-in-reduced 1ms linear 150ms forwards;
  }
  .fcc-loader.is-hiding {
    animation: fcc-loader-out-reduced 1ms linear forwards;
  }
  .fcc-loader__blob {
    animation: none !important;
  }
  .fcc-loader__text,
  .fcc-loader__author {
    transition: none;
  }
}

@keyframes fcc-loader-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fcc-loader-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fcc-loader-in-reduced {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fcc-loader-out-reduced {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fcc-loader-drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(60px, 40px, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes fcc-loader-drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-50px, 55px, 0) scale(1.1); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes fcc-loader-drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-40px, -50px, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}