/* ============================================================
   mc-cartographer.css
   Shared atmospheric layer for any "cartographer's table" page —
   filigree side-borders, off-screen candle, drifting embers, and
   the `.is-flaring` flare-up that fires during chart transitions.
   Pair with /assets/mc-cartographer.js to drive flares.
   ============================================================ */


/* --- thin golden filigree lining the left and right page edges --- */
.filigree {
  position: fixed; top: var(--mc-nav-h); bottom: 0;
  width: 56px; pointer-events: none; z-index: 4; opacity: 0.85;
  background-repeat: repeat-y;
  background-position: center;
  background-size: 100% auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 320' fill='none' stroke='%23d4af72' stroke-width='1.1'><path d='M28 0 L28 320' opacity='0.35'/><path d='M28 18 q 18 14 0 32 q -18 18 0 36 q 18 14 0 32 q -18 18 0 36 q 18 14 0 32 q -18 18 0 36 q 18 14 0 32 q -18 18 0 32'/><circle cx='28' cy='34' r='3.2' fill='%23d4af72' opacity='0.7'/><circle cx='28' cy='102' r='3.2' fill='%23d4af72' opacity='0.7'/><circle cx='28' cy='170' r='3.2' fill='%23d4af72' opacity='0.7'/><circle cx='28' cy='238' r='3.2' fill='%23d4af72' opacity='0.7'/><circle cx='28' cy='306' r='3.2' fill='%23d4af72' opacity='0.7'/><g opacity='0.55' font-family='Cinzel, serif' font-size='9' fill='%23d4af72'><text x='10' y='62' transform='rotate(-90,10,62)'>&#xa7;</text><text x='10' y='198' transform='rotate(-90,10,198)'>&#xa7;</text></g></svg>");
}
.filigree.left  { left: 0; }
.filigree.right { right: 0; transform: scaleX(-1); }
@media (max-width: 760px) { .filigree { width: 40px; } }


/* --- candle off-screen, upper-left: warm light vignette --- */
.candle-light {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(
      ellipse 1400px 1100px at -10% -8%,
      rgba(255, 184, 92, 0.16) 0%,
      rgba(255, 158, 70, 0.10) 22%,
      rgba(212, 130, 50, 0.05) 42%,
      rgba(0, 0, 0, 0)         70%
    ),
    radial-gradient(
      ellipse 1800px 1300px at 110% 115%,
      rgba(0, 0, 0, 0.32) 0%,
      rgba(0, 0, 0, 0.18) 40%,
      rgba(0, 0, 0, 0)    72%
    );
  mix-blend-mode: screen;
  animation: mcCandleFlicker 7s ease-in-out infinite;
}
@keyframes mcCandleFlicker {
  0%, 100% { opacity: 0.92; filter: brightness(1); }
  33%      { opacity: 1.00; filter: brightness(1.06); }
  55%      { opacity: 0.88; filter: brightness(0.97); }
  78%      { opacity: 0.96; filter: brightness(1.03); }
}
/* Brief intensification — fired by mc-cartographer.js during transitions */
.candle-light.is-flaring { animation: mcCandleFlare 0.65s ease-out forwards; }
@keyframes mcCandleFlare {
  0%   { opacity: 0.95; filter: brightness(1)    saturate(1); }
  35%  { opacity: 1.25; filter: brightness(1.45) saturate(1.25); }
  70%  { opacity: 1.10; filter: brightness(1.20) saturate(1.12); }
  100% { opacity: 0.95; filter: brightness(1)    saturate(1); }
}


/* --- amber spark drift: tiny embers floating diagonally --- */
.sparks {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.sparks .spark {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 220, 150, 1)   0%,
    rgba(255, 180, 90, 0.85) 35%,
    rgba(220, 130, 50, 0.4)  65%,
    rgba(220, 130, 50, 0)    100%);
  box-shadow: 0 0 8px rgba(255, 180, 90, 0.7), 0 0 14px rgba(255, 140, 60, 0.35);
  opacity: 0;
  top: -2vh; left: -2vw;
  will-change: transform, opacity;
  animation:
    mcSparkDrift 18s linear infinite,
    mcSparkBreath 3.4s ease-in-out infinite;
}
.sparks .spark::after {
  content: '';
  position: absolute; left: -2px; top: -1px;
  width: 7px; height: 5px;
  background: radial-gradient(ellipse 6px 2px at 100% 50%,
    rgba(255, 180, 90, 0.45) 0%, rgba(255, 180, 90, 0) 80%);
  transform: translateX(-100%);
  filter: blur(1px);
  pointer-events: none;
}
@keyframes mcSparkDrift {
  0%   { transform: translate(0, 0)          scale(0.6); opacity: 0; }
  8%   { opacity: 0.95; }
  45%  { transform: translate(50vw, 42vh)    scale(1);    opacity: 0.85; }
  72%  { transform: translate(85vw, 78vh)    scale(0.85); opacity: 0.55; }
  100% { transform: translate(108vw, 110vh)  scale(0.5);  opacity: 0; }
}
@keyframes mcSparkBreath {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: 1.8vw; }
}

/* Per-spark size, start offset, and timing offsets so they never sync */
.sparks .spark:nth-child(1) {
  width: 3px; height: 3px;
  top: 0; left: 0;
  animation-duration: 16s, 3.2s;
  animation-delay: -2s, -0.8s;
}
.sparks .spark:nth-child(2) {
  width: 2px; height: 2px;
  top: -6vh; left: -8vw;
  animation-duration: 22s, 4s;
  animation-delay: -9s, -2.4s;
}
.sparks .spark:nth-child(3) {
  width: 4px; height: 4px;
  top: -10vh; left: 6vw;
  animation-duration: 19s, 3.6s;
  animation-delay: -14s, -1.2s;
}
.sparks .spark:nth-child(4) {
  width: 2px; height: 2px;
  top: 3vh; left: -10vw;
  animation-duration: 25s, 4.4s;
  animation-delay: -6s, -3s;
}

/* Spark reaction during a chart-flip flare —
   embers briefly scatter ~4x faster and brighter. */
.sparks.is-flaring .spark {
  filter: brightness(1.55) saturate(1.3);
}
.sparks.is-flaring .spark:nth-child(1) { animation-duration: 4s, 1s; }
.sparks.is-flaring .spark:nth-child(2) { animation-duration: 5.5s, 1.2s; }
.sparks.is-flaring .spark:nth-child(3) { animation-duration: 4.8s, 1.1s; }
.sparks.is-flaring .spark:nth-child(4) { animation-duration: 6s, 1.3s; }


/* --- Accessibility: silence the whole atmosphere --- */
@media (prefers-reduced-motion: reduce) {
  .candle-light            { animation: none; }
  .candle-light.is-flaring { animation: none; opacity: 0.95; filter: none; }
  .sparks                  { display: none; }
}