/* Backdrops: each page has its own colour and a slow, quiet motion behind the content, so the site
   isn't one flat navy everywhere. The world map and the timelapse are their own backdrop.
   Two fixed layers per page (body::before and body::after), larger than the screen and moved only by
   transform or opacity, so the browser composites them instead of repainting. With reduced motion
   they hold still. */

body.landing-page, body.yours-page, body.legends-page, body.about-page, body.atlas-page { background: transparent; }

body.landing-page::before, body.yours-page::before, body.legends-page::before, body.about-page::before, body.atlas-page::before,
body.landing-page::after, body.yours-page::after, body.legends-page::after, body.about-page::after, body.atlas-page::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none; will-change: transform;
}
body.landing-page::before, body.yours-page::before, body.legends-page::before, body.about-page::before, body.atlas-page::before { inset: 0; }
body.landing-page::after, body.yours-page::after, body.legends-page::after, body.about-page::after, body.atlas-page::after { inset: -50%; }

/* ---- home: the open sea, tide lines drifting past ---- */
body.landing-page::before { background: linear-gradient(180deg, #0b1a27 0%, #0c1622 45%, #0a1420 100%); }
body.landing-page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='140' viewBox='0 0 420 140'%3E%3Cg fill='none' stroke='%238fd0c2' stroke-opacity='0.09' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M0 30 C35 18 70 18 105 30 S175 42 210 30 S280 18 315 30 S385 42 420 30'/%3E%3Cpath d='M0 100 C35 88 70 88 105 100 S175 112 210 100 S280 88 315 100 S385 112 420 100' stroke-opacity='0.06'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 420px 140px;
  animation: bd-tide 60s linear infinite;
}
@keyframes bd-tide { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-420px, 0, 0); } }

/* ---- my agent: a hearth at dusk, embers rising ---- */
body.yours-page::before { background: linear-gradient(180deg, #171112 0%, #121218 40%, #0d1420 100%); }
body.yours-page::after {
  background-image:
    radial-gradient(2.4px 2.4px at 30px 60px, rgba(242, 169, 59, 0.75) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 120px 150px, rgba(224, 99, 74, 0.7) 50%, transparent 51%),
    radial-gradient(2px 2px at 190px 30px, rgba(242, 169, 59, 0.6) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 70px 200px, rgba(244, 238, 223, 0.5) 50%, transparent 51%),
    radial-gradient(2.2px 2.2px at 200px 180px, rgba(242, 169, 59, 0.65) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 150px 90px, rgba(224, 99, 74, 0.55) 50%, transparent 51%);
  background-size: 220px 220px;
  animation: bd-rise 40s linear infinite;
}
@keyframes bd-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -220px, 0); } }

/* ---- book of legends: the night sky, gold stars turning slowly ---- */
body.legends-page::before {
  background:
    radial-gradient(1.2px 1.2px at 40px 50px, rgba(244, 238, 223, 0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 130px 100px, rgba(244, 238, 223, 0.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 80px 160px, rgba(244, 238, 223, 0.65) 50%, transparent 51%),
    radial-gradient(1px 1px at 170px 20px, rgba(244, 238, 223, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 15px 120px, rgba(244, 238, 223, 0.45) 50%, transparent 51%),
    linear-gradient(180deg, #0d0e22 0%, #0c1020 55%, #0b1220 100%);
  background-size: 190px 190px, 190px 190px, 190px 190px, 190px 190px, 190px 190px, auto;
}
body.legends-page::after {
  background-image:
    radial-gradient(2.4px 2.4px at 60px 80px, rgba(242, 169, 59, 0.9) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 250px 170px, rgba(242, 169, 59, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 150px 270px, rgba(244, 238, 223, 0.85) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 300px 40px, rgba(242, 169, 59, 0.7) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 20px 300px, rgba(244, 238, 223, 0.7) 50%, transparent 51%);
  background-size: 330px 330px;
  animation: bd-sky 160s ease-in-out infinite alternate, bd-twinkle 7s ease-in-out infinite;
}
@keyframes bd-sky { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(0, 0, 0) rotate(8deg); } }
@keyframes bd-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---- about: the islands as a contour map, drifting ---- */
body.about-page::before { background: linear-gradient(180deg, #0b1a1e 0%, #0c1820 50%, #0d1420 100%); }
body.about-page::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'%3E%3Cg fill='none' stroke='%233fb6a8' stroke-width='1.2'%3E%3Cpath stroke-opacity='0.12' d='M150 120 C210 80 300 95 330 150 S320 260 250 275 S120 250 110 195 S115 140 150 120Z'/%3E%3Cpath stroke-opacity='0.09' d='M120 95 C200 40 330 60 370 140 S360 300 255 315 S80 285 70 200 S80 120 120 95Z'/%3E%3Cpath stroke-opacity='0.06' d='M90 70 C190 0 360 25 410 130 S400 340 260 355 S40 320 30 205 S45 100 90 70Z'/%3E%3Cpath stroke-opacity='0.1' d='M390 380 C420 360 460 370 470 400 S455 455 420 458 S375 440 372 415 S375 390 390 380Z'/%3E%3Cpath stroke-opacity='0.06' d='M375 360 C415 330 480 345 495 395 S475 480 420 484 S350 455 348 418 S352 375 375 360Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 520px 520px;
  animation: bd-drift 120s linear infinite;
}
@keyframes bd-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-520px, -520px, 0); } }

/* ---- past worlds: an old sea chart, its grid panning by ---- */
body.atlas-page::before { background: linear-gradient(180deg, #17140f 0%, #12131a 45%, #0d1420 100%); }
body.atlas-page::after {
  background-image:
    repeating-linear-gradient(0deg, rgba(224, 187, 98, 0.06) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, rgba(224, 187, 98, 0.06) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(224, 187, 98, 0.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(224, 187, 98, 0.025) 0 1px, transparent 1px 24px);
  animation: bd-chart 90s linear infinite;
}
@keyframes bd-chart { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-96px, -96px, 0); } }

@media (prefers-reduced-motion: reduce) {
  body.landing-page::after, body.yours-page::after, body.legends-page::after, body.about-page::after, body.atlas-page::after { animation: none; }
}