/* ATLAS WORLDS — BACKDROP */
/* ============================================================
   ATMOSPHERIC BACKDROP — rich multi-layer
   ============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Backdrop layers — JS applies parallax transforms */
.backdrop > * { will-change: transform; }

/* Nebula fog blobs */
.bd-nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.45;
  will-change: transform;
}
.bd-nebula-1 {
  top: -15%; left: -10%;
  width: 900px; height: 900px;
  background: radial-gradient(circle, rgba(45,79,163,0.55) 0%, rgba(45,79,163,0.18) 40%, transparent 70%);
  animation: neb-float-1 60s ease-in-out infinite;
}
.bd-nebula-2 {
  bottom: -20%; right: -15%;
  width: 1100px; height: 1100px;
  background: radial-gradient(circle, rgba(201,161,74,0.28) 0%, rgba(138,106,44,0.12) 45%, transparent 72%);
  animation: neb-float-2 75s ease-in-out infinite;
}
.bd-nebula-3 {
  top: 40%; left: 30%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(168,50,38,0.15) 0%, rgba(168,50,38,0.05) 50%, transparent 75%);
  animation: neb-float-3 90s ease-in-out infinite;
}
@keyframes neb-float-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(80px, 60px) scale(1.1); }
}
@keyframes neb-float-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-100px, -70px) scale(1.08); }
}
@keyframes neb-float-3 {
  0%,100% { transform: translate(0,0) scale(1); opacity: 0.4; }
  50% { transform: translate(60px, -40px) scale(1.12); opacity: 0.55; }
}

/* Cartographic grid — fixed full-viewport */
.bd-grid {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: grid-breathe 20s ease-in-out infinite;
}
@keyframes grid-breathe {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.02); }
}

/* Constellation */
.bd-constellation {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: const-twinkle 8s ease-in-out infinite;
}
@keyframes const-twinkle {
  0%,100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.bd-constellation circle {
  animation: star-pulse 4s ease-in-out infinite;
}
.bd-constellation circle:nth-child(odd)  { animation-delay: -2s; }
.bd-constellation circle:nth-child(3n)   { animation-delay: -1s; }
.bd-constellation circle:nth-child(5n)   { animation-delay: -3s; }
@keyframes star-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Compass cartouche — top-right corner */
.bd-compass {
  position: absolute;
  top: 90px; right: 32px;
  width: 200px; height: 200px;
  opacity: 0.8;
  animation: compass-rotate 240s linear infinite;
}
@keyframes compass-rotate { to { transform: rotate(360deg); } }

/* Fleur-de-lys watermark */
.bd-fleur {
  position: absolute;
  bottom: 60px; left: 60px;
  font-size: 280px;
  line-height: 1;
  color: var(--brass);
  opacity: 0.035;
  font-family: var(--display);
  user-select: none;
  transform-origin: center;
  animation: fleur-breathe 14s ease-in-out infinite;
}
@keyframes fleur-breathe {
  0%,100% { transform: scale(1) rotate(0deg); opacity: 0.035; }
  50% { transform: scale(1.05) rotate(2deg); opacity: 0.06; }
}

/* Floating coordinates */
.bd-coord {
  position: absolute;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--brass);
  opacity: 0.35;
  text-transform: uppercase;
  white-space: nowrap;
}
.bd-coord-tl { top: 130px; left: 32px; }
.bd-coord-tr { top: 310px; right: 56px; text-align: right; }
.bd-coord-bl { bottom: 44px; left: 200px; }
.bd-coord-br { bottom: 44px; right: 44px; text-align: right; }

/* Corner ornaments */
.bd-corner {
  position: absolute;
  width: 120px; height: 120px;
}
.bd-corner-tl { top: 84px;  left: 16px;  }
.bd-corner-tr { top: 84px;  right: 16px; }
.bd-corner-bl { bottom: 16px; left: 16px;  }
.bd-corner-br { bottom: 16px; right: 16px; }

/* Drifting dust motes */
.bd-motes {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.2px 1.2px at 20% 30%, rgba(201,161,74,0.45), transparent 50%),
    radial-gradient(1px 1px at 70% 70%, rgba(201,161,74,0.35), transparent 50%),
    radial-gradient(1.2px 1.2px at 45% 50%, rgba(232,227,213,0.3), transparent 50%),
    radial-gradient(1px 1px at 85% 20%, rgba(201,161,74,0.4), transparent 50%),
    radial-gradient(1.3px 1.3px at 15% 80%, rgba(232,227,213,0.25), transparent 50%),
    radial-gradient(1px 1px at 55% 15%, rgba(201,161,74,0.3), transparent 50%),
    radial-gradient(1px 1px at 30% 90%, rgba(232,227,213,0.2), transparent 50%);
  background-size: 900px 900px;
  animation: dust-drift 160s linear infinite;
  opacity: 0.7;
}
@keyframes dust-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 900px 500px, -900px -500px, 450px 900px, -450px 450px, 700px -700px, -500px 300px, 600px -400px; }
}

/* Vignette — subtle edges darkening */
.bd-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5,7,13,0.55) 100%);
}

/* Ensure content sits above backdrop */
.top, section, footer { position: relative; z-index: 10; }

/* Legacy keyframe kept */
@keyframes dust-drift-old {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 800px 400px, -800px -400px, 400px 800px, -400px 400px, 600px -600px; }
}

/* Tricolor bar — gentle pulse */
.tricolor span { transition: filter .5s ease; }
.hero-seal-alt .tricolor:hover span,
.france-seal:hover .tricolor span {
  filter: brightness(1.3);
}

/* Section editorial — soft fade-in bg */
section.editorial {
  position: relative;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-title .ch { opacity: 1; transform: none; }
  body::before { display: none; }
}