/* Shared living sky for the mother app and every separately installed practice. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

body > main,
body > footer {
  position: relative;
  z-index: 1;
}

body > main > .hero {
  background: none !important;
}

html[data-page="home"] body > main > .hero {
  grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
}

html[data-page="memory"] body > .topbar {
  position: relative;
  z-index: 2;
}

html[data-page="semantic-field"] body > :is(.database-frame, .field-story, .site-map, .nyarindo-thread-footer) {
  position: relative;
  z-index: 1;
}

html[data-page="memory"] :is(.journaling-type-card, .grounding, .story-card, .journal-mode, .memory-card, .comparison-panel, .spiral-stage, .examination-gate) {
  background-color: var(--surface);
}

.hero-copy,
.theory-intro > div,
.theory-copy,
.fidelity-copy,
.section-copy,
.attention-copy,
.agreement-copy,
.play-invitation-copy,
.playem-copy,
.guide-content,
.chapter-intro,
.approach-copy,
.closing-copy,
.site-map-intro {
  position: relative;
  z-index: 5;
}

main :is(h1, h2, h3, h4, h5, h6, p, li, a, button, dt, dd, blockquote, figcaption) {
  position: relative;
  z-index: 5;
}

/* Daylight: unmistakably blue, with wide staggered cloud traffic and layered birds. */
html[data-theme="light"] body::before {
  background-image:
    radial-gradient(ellipse at center, rgba(255, 255, 255, .96) 0 28%, rgba(255, 255, 255, .68) 48%, transparent 73%),
    radial-gradient(ellipse at center, rgba(255, 255, 255, .9) 0 31%, rgba(245, 252, 255, .56) 55%, transparent 76%),
    radial-gradient(ellipse at center, rgba(255, 255, 255, .82) 0 30%, rgba(236, 249, 255, .45) 56%, transparent 76%),
    radial-gradient(ellipse at center, rgba(255, 255, 255, .72) 0 32%, rgba(227, 246, 255, .34) 58%, transparent 78%),
    url("assets/atmosphere/day-sky.svg"),
    linear-gradient(180deg, #0787d7 0%, #31a9e6 30%, #8bd2f1 61%, #dcf3f8 83%, #f4f2df 100%);
  background-position:
    -16% 18%,
    106% 31%,
    18% 44%,
    76% 8%,
    center top,
    center;
  background-size:
    310px 96px,
    245px 74px,
    190px 58px,
    130px 40px,
    cover,
    cover;
  background-repeat: no-repeat;
  opacity: .96;
  animation: lens-day-clouds 180s ease-in-out infinite alternate;
  will-change: background-position;
}

html[data-theme="light"] body::after {
  inset: 0 -520px 0 0;
  background-image:
    url("assets/atmosphere/coastal-birds.svg"),
    url("assets/atmosphere/coastal-birds.svg");
  background-position:
    0 24%,
    70px 54%;
  background-repeat: repeat-x;
  background-size:
    520px 180px,
    360px 126px;
  opacity: .46;
  animation: lens-birds-cross 96s linear infinite;
  will-change: transform;
}

/* Night: northern-lights ribbons, living clouds, drifting stars, and occasional meteors. */
html[data-theme="dark"] body::before {
  background-image:
    url("assets/atmosphere/night-sky.svg"),
    linear-gradient(116deg, transparent 8%, rgba(64, 255, 180, .22) 28%, rgba(75, 193, 255, .14) 46%, transparent 66%),
    linear-gradient(70deg, transparent 18%, rgba(167, 86, 255, .14) 39%, rgba(49, 235, 208, .2) 55%, transparent 76%),
    radial-gradient(ellipse at center, rgba(146, 195, 219, .2) 0 28%, rgba(83, 132, 167, .11) 52%, transparent 74%),
    radial-gradient(ellipse at center, rgba(170, 211, 234, .16) 0 30%, rgba(76, 121, 163, .08) 56%, transparent 76%),
    linear-gradient(180deg, #031a35 0%, #072c4b 31%, #071c2d 64%, #0a1316 100%);
  background-position:
    center top,
    -35% 16%,
    114% 37%,
    -10% 23%,
    92% 54%,
    center;
  background-size:
    cover,
    cover,
    cover,
    360px 94px,
    280px 74px,
    cover;
  background-repeat: no-repeat;
  opacity: .98;
  animation: lens-northern-lights 72s ease-in-out infinite alternate;
  will-change: background-position;
}

html[data-theme="dark"] body::after {
  inset: -20px;
  background-image:
    radial-gradient(circle, rgba(255, 248, 214, 1) 0 1.8px, transparent 2.9px),
    radial-gradient(circle, rgba(189, 226, 255, .98) 0 1.5px, transparent 2.7px),
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 1.2px, transparent 2.3px),
    radial-gradient(circle, rgba(133, 205, 226, .82) 0 1px, transparent 2px),
    linear-gradient(118deg, transparent 45%, rgba(255, 249, 218, .95) 47% 48%, transparent 50%),
    linear-gradient(118deg, transparent 45%, rgba(210, 236, 255, .8) 47% 48%, transparent 50%);
  background-position:
    17px 29px,
    71px 43px,
    29px 89px,
    113px 61px,
    -16% 14%,
    84% 28%;
  background-size:
    173px 157px,
    241px 197px,
    109px 127px,
    307px 263px,
    150px 2px,
    120px 2px;
  background-repeat:
    repeat,
    repeat,
    repeat,
    repeat,
    no-repeat,
    no-repeat;
  opacity: .9;
  animation:
    lens-stars-twinkle 14s ease-in-out infinite alternate,
    lens-stars-pass 220s linear infinite;
  will-change: opacity, background-position;
}

/* Home content floats directly in the same uninterrupted living sky. */
html[data-page="home"] body > main > :is(
  .work,
  .app-launchpad,
  .approach,
  .closing,
  .books-section,
  .science-religion,
  .coherence-theory
) {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none !important;
}

html[data-page="home"] body > :is(
  .social-footer,
  .ucp-signoff,
  .nyarindo-thread-footer
) {
  background: transparent !important;
  box-shadow: none !important;
}

@keyframes lens-day-clouds {
  0% {
    background-position:
      -16% 18%,
      106% 31%,
      18% 44%,
      76% 8%,
      center top,
      center;
  }
  45% {
    background-position:
      28% 21%,
      65% 27%,
      39% 48%,
      87% 12%,
      center 1.5%,
      center;
  }
  100% {
    background-position:
      118% 19%,
      -14% 36%,
      63% 41%,
      94% 5%,
      center 3%,
      center;
  }
}

@keyframes lens-northern-lights {
  0% {
    background-position:
      center top,
      -35% 16%,
      114% 37%,
      -10% 23%,
      92% 54%,
      center;
  }
  50% {
    background-position:
      center 2%,
      38% 22%,
      64% 30%,
      25% 27%,
      70% 48%,
      center;
  }
  100% {
    background-position:
      center 4%,
      118% 17%,
      -20% 40%,
      68% 20%,
      44% 58%,
      center;
  }
}

@keyframes lens-birds-cross {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-520px, 0, 0);
  }
}

@keyframes lens-stars-twinkle {
  from {
    opacity: .64;
  }
  to {
    opacity: .96;
  }
}

@keyframes lens-stars-pass {
  0% {
    background-position:
      17px 29px,
      71px 43px,
      29px 89px,
      113px 61px,
      -16% 14%,
      84% 28%;
  }
  52% {
    background-position:
      91px 143px,
      128px 205px,
      67px 174px,
      172px 249px,
      54% 32%,
      21% 11%;
  }
  54% {
    background-position:
      101px 151px,
      138px 213px,
      77px 182px,
      182px 257px,
      61% 34%,
      27% 12%;
  }
  100% {
    background-position:
      173px 315px,
      223px 384px,
      116px 293px,
      241px 419px,
      118% 48%,
      -20% 24%;
  }
}

@media (max-width: 700px) {
  html[data-theme="light"] body::before {
    background-image:
      radial-gradient(ellipse at center, rgba(255, 255, 255, .94) 0 29%, rgba(255, 255, 255, .58) 52%, transparent 74%),
      radial-gradient(ellipse at center, rgba(255, 255, 255, .84) 0 31%, rgba(235, 249, 255, .42) 56%, transparent 76%),
      url("assets/atmosphere/day-sky-mobile.svg"),
      linear-gradient(180deg, #088bd8 0%, #35ace6 34%, #9cd8f1 68%, #eef6ed 100%);
    background-position:
      -24% 22%,
      110% 39%,
      center,
      center;
    background-size:
      220px 68px,
      170px 54px,
      cover,
      cover;
    opacity: .97;
  }

  html[data-theme="dark"] body::before {
    background-image:
      url("assets/atmosphere/night-sky-mobile.svg"),
      linear-gradient(116deg, transparent 8%, rgba(64, 255, 180, .2) 30%, rgba(75, 193, 255, .13) 48%, transparent 68%),
      radial-gradient(ellipse at center, rgba(146, 195, 219, .18) 0 30%, rgba(83, 132, 167, .09) 54%, transparent 76%),
      linear-gradient(180deg, #031a35 0%, #072c4b 36%, #071c2d 69%, #0a1316 100%);
    background-position:
      center,
      -28% 18%,
      96% 48%,
      center;
    background-size:
      cover,
      cover,
      260px 70px,
      cover;
    opacity: .98;
  }

  html[data-theme="light"] body::after {
    inset: 0 -360px 0 0;
    background-position:
      0 20%,
      40px 57%;
    background-size:
      360px 124px,
      250px 86px;
    opacity: .45;
    animation-name: lens-birds-cross-mobile;
    animation-duration: 108s;
  }

  html[data-theme="dark"] main :is(h1, h2) {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .34);
  }

  html[data-theme="dark"] body::after {
    inset: 0;
    background-position:
      9px 17px,
      42px 29px,
      17px 52px,
      61px 39px,
      -20% 17%,
      90% 31%;
    opacity: .9;
  }
}

@keyframes lens-birds-cross-mobile {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-360px, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
    transform: none !important;
  }
}

/* Long-interval stylized air traffic keeps the living sky from feeling like a loop. */
.nyarindo-sky-traffic {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.nyarindo-sky-traffic > span {
  position: absolute;
  top: var(--flight-top, 24%);
  left: -24vw;
  width: 150px;
  height: 42px;
  opacity: 0;
  animation:
    nyarindo-aircraft-cross var(--flight-duration, 170s) linear var(--flight-delay, -40s) infinite;
  filter: drop-shadow(0 4px 6px rgba(14, 58, 86, .16));
  will-change: transform, opacity;
}

.nyarindo-sky-traffic .aircraft-contrail {
  position: absolute;
  top: 19px;
  right: 105px;
  width: 235px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72));
  filter: blur(.4px);
  opacity: .56;
}

.nyarindo-sky-traffic .aircraft-body {
  position: absolute;
  top: 15px;
  left: 48px;
  display: block;
  width: 78px;
  height: 10px;
  border: 1px solid rgba(14, 58, 86, .22);
  border-radius: 70% 36% 36% 70%;
  background: linear-gradient(180deg, #f8fbfa, #90aeb9);
}

.nyarindo-sky-traffic .aircraft-body::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 28px;
  width: 44px;
  height: 9px;
  background: linear-gradient(180deg, #dce8e9, #7294a2);
  clip-path: polygon(0 45%, 30% 0, 72% 16%, 100% 50%, 72% 84%, 30% 100%);
  transform: translateY(0);
}

.nyarindo-sky-traffic .aircraft-body::after {
  content: "";
  position: absolute;
  top: -9px;
  right: 11px;
  width: 30px;
  height: 14px;
  background: linear-gradient(150deg, #f8fcfb, #7697a4);
  clip-path: polygon(0 50%, 20% 0, 100% 38%, 78% 100%);
}

.nyarindo-sky-traffic .aircraft-rotor {
  display: none;
}

.nyarindo-sky-traffic .aircraft-light {
  position: absolute;
  top: 18px;
  left: 122px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff675b;
  box-shadow: 0 0 10px #ff675b;
  animation: aircraft-light-blink 2.1s steps(1) infinite;
}

.nyarindo-sky-traffic .plane-a {
  --flight-top: 18%;
  --flight-duration: 158s;
  --flight-delay: -43s;
  --craft-scale: 1.25;
  transform: rotate(-2deg) scale(1.25);
}

.nyarindo-sky-traffic .plane-b {
  --flight-top: 41%;
  --flight-duration: 236s;
  --flight-delay: -171s;
  --craft-scale: .68;
  width: 92px;
  height: 28px;
  opacity: 0;
  transform: rotate(3deg) scale(.68);
}

.nyarindo-sky-traffic .plane-b .aircraft-contrail {
  right: 64px;
  width: 290px;
  opacity: .3;
}

.nyarindo-sky-traffic .sky-helicopter {
  --flight-top: 31%;
  --flight-duration: 204s;
  --flight-delay: -109s;
  --craft-scale: .82;
  width: 104px;
  transform: rotate(1deg) scale(.82);
}

.nyarindo-sky-traffic .helicopter-b {
  --flight-top: 58%;
  --flight-duration: 281s;
  --flight-delay: -235s;
  --craft-scale: .54;
  width: 76px;
  opacity: 0;
  transform: scale(.54);
}

.nyarindo-sky-traffic .sky-helicopter .aircraft-contrail {
  display: none;
}

.nyarindo-sky-traffic .sky-helicopter .aircraft-body {
  top: 17px;
  left: 30px;
  width: 45px;
  height: 20px;
  border-radius: 50% 58% 44% 55%;
  background: linear-gradient(180deg, #d5a34f 0 35%, #6d8b77 36% 100%);
  transform: scaleX(-1);
}

.nyarindo-sky-traffic .sky-helicopter .aircraft-body::before {
  top: 3px;
  left: 42px;
  width: 48px;
  height: 4px;
  border-radius: 99px;
  background: #527266;
  clip-path: none;
  transform: rotate(-5deg);
  transform-origin: left center;
}

.nyarindo-sky-traffic .sky-helicopter .aircraft-body::after {
  top: 10px;
  right: -12px;
  width: 13px;
  height: 12px;
  border-radius: 50% 0 0 50%;
  background: #6d8b77;
  clip-path: none;
}

.nyarindo-sky-traffic .sky-helicopter .aircraft-rotor {
  position: absolute;
  top: 11px;
  left: 12px;
  display: block;
  width: 82px;
  height: 2px;
  border-radius: 99px;
  background: rgba(24, 63, 64, .72);
  transform-origin: center;
  animation: helicopter-rotor .34s linear infinite;
}

.nyarindo-sky-traffic .sky-helicopter .aircraft-light {
  top: 26px;
  left: 69px;
  background: #7bd8b0;
  box-shadow: 0 0 10px #7bd8b0;
}

/* Night satellites move slowly and signal with a small, readable artificial blink. */
.nyarindo-sky-traffic .sky-satellite {
  --satellite-top: 19%;
  --satellite-duration: 260s;
  --satellite-delay: -74s;
  --satellite-rise: -7vh;
  top: var(--satellite-top);
  left: -14vw;
  display: none;
  width: 34px;
  height: 12px;
}

html[data-theme="dark"] .nyarindo-sky-traffic .sky-satellite {
  display: block;
  animation:
    nyarindo-satellite-cross var(--satellite-duration) linear var(--satellite-delay) infinite;
}

.nyarindo-sky-traffic .sky-satellite::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 34px;
  height: 7px;
  border-radius: 2px;
  background:
    linear-gradient(90deg, #376c9c 0 31%, transparent 31% 69%, #376c9c 69% 100%);
  box-shadow: inset 0 0 0 1px rgba(156, 219, 255, .24);
}

.nyarindo-sky-traffic .sky-satellite::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 13px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(145deg, #faf3c6, #8bc2dd);
  box-shadow: 0 0 4px rgba(255, 248, 198, .78);
  animation: satellite-signal 3.8s steps(1) infinite;
}

.nyarindo-sky-traffic .satellite-a {
  --satellite-top: 15%;
  --satellite-duration: 238s;
  --satellite-delay: -46s;
}

.nyarindo-sky-traffic .satellite-b {
  --satellite-top: 39%;
  --satellite-duration: 317s;
  --satellite-delay: -201s;
  --satellite-rise: -12vh;
  --satellite-scale: .72;
}

.nyarindo-sky-traffic .satellite-c {
  --satellite-top: 63%;
  --satellite-duration: 286s;
  --satellite-delay: -123s;
  --satellite-rise: -4vh;
  --satellite-scale: .58;
}

/* Daylight balloons borrow the black, white, red, and green of the Kenyan flag. */
.nyarindo-sky-traffic .sky-balloon {
  --balloon-top: 23%;
  --balloon-duration: 254s;
  --balloon-delay: -86s;
  --balloon-rise: -8vh;
  top: var(--balloon-top);
  left: -16vw;
  display: none;
  width: 58px;
  height: 82px;
  filter: drop-shadow(0 8px 10px rgba(15, 62, 79, .2));
}

html[data-theme="light"] .nyarindo-sky-traffic .sky-balloon {
  display: block;
  animation:
    nyarindo-balloon-cross var(--balloon-duration) ease-in-out var(--balloon-delay) infinite;
}

.nyarindo-sky-traffic .sky-balloon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 52px;
  height: 60px;
  border: 1px solid rgba(19, 43, 38, .24);
  border-radius: 50% 50% 44% 44%;
  background:
    radial-gradient(circle at 35% 27%, rgba(255, 255, 255, .66), transparent 23%),
    linear-gradient(180deg, #111 0 25%, #fff 25% 31%, #ce3737 31% 58%, #fff 58% 64%, #27874d 64% 100%);
  box-shadow:
    inset 8px 0 18px rgba(255, 255, 255, .15),
    inset -9px -4px 18px rgba(0, 0, 0, .18);
}

.nyarindo-sky-traffic .sky-balloon::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 1px;
  width: 24px;
  height: 11px;
  border: 2px solid #62442c;
  border-radius: 3px 3px 7px 7px;
  background: #b77a42;
}

.nyarindo-sky-traffic .balloon-rigging {
  position: absolute;
  top: 54px;
  left: 14px;
  width: 30px;
  height: 20px;
  background:
    linear-gradient(78deg, transparent 48%, rgba(67, 48, 30, .72) 49% 52%, transparent 53%),
    linear-gradient(102deg, transparent 48%, rgba(67, 48, 30, .72) 49% 52%, transparent 53%);
}

.nyarindo-sky-traffic .balloon-a {
  --balloon-top: 22%;
  --balloon-duration: 248s;
  --balloon-delay: -78s;
}

.nyarindo-sky-traffic .balloon-b {
  --balloon-top: 46%;
  --balloon-duration: 331s;
  --balloon-delay: -229s;
  --balloon-rise: -13vh;
  --balloon-scale: .72;
}

.nyarindo-sky-traffic .balloon-c {
  --balloon-top: 68%;
  --balloon-duration: 287s;
  --balloon-delay: -151s;
  --balloon-rise: -5vh;
  --balloon-scale: .54;
}

html[data-theme="dark"] .nyarindo-sky-traffic > span {
  opacity: 0;
  filter: drop-shadow(0 0 7px rgba(119, 201, 235, .28));
}

html[data-theme="dark"] .nyarindo-sky-traffic .aircraft-body {
  border-color: rgba(150, 207, 229, .3);
  background: linear-gradient(180deg, #7897a4, #263b43);
}

html[data-theme="dark"] .nyarindo-sky-traffic .aircraft-contrail {
  background: linear-gradient(90deg, transparent, rgba(134, 204, 231, .34));
}

@keyframes nyarindo-aircraft-cross {
  0%,
  77% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(var(--craft-scale, .92));
  }
  79% {
    opacity: .58;
  }
  82% {
    opacity: .58;
  }
  97%,
  100% {
    opacity: 0;
    transform: translate3d(145vw, -3vh, 0) rotate(2deg) scale(var(--craft-scale, .92));
  }
}

@keyframes helicopter-rotor {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nyarindo-satellite-cross {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(var(--satellite-scale, 1));
  }
  11%,
  91% {
    opacity: .84;
  }
  100% {
    opacity: 0;
    transform: translate3d(138vw, var(--satellite-rise), 0) rotate(5deg) scale(var(--satellite-scale, 1));
  }
}

@keyframes satellite-signal {
  0%,
  7%,
  15%,
  100% {
    box-shadow: 0 0 4px rgba(255, 248, 198, .72);
    opacity: .72;
  }
  8%,
  14% {
    box-shadow: 0 0 13px 4px rgba(255, 250, 204, 1);
    opacity: 1;
  }
}

@keyframes nyarindo-balloon-cross {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-2deg) scale(var(--balloon-scale, 1));
  }
  5%,
  95% {
    opacity: .82;
  }
  50% {
    transform: translate3d(74vw, var(--balloon-rise), 0) rotate(1deg) scale(var(--balloon-scale, 1));
  }
  100% {
    opacity: 0;
    transform: translate3d(146vw, -2vh, 0) rotate(3deg) scale(var(--balloon-scale, 1));
  }
}

@keyframes aircraft-light-blink {
  0%,
  52% {
    opacity: 1;
  }
  53%,
  100% {
    opacity: .18;
  }
}

@media (max-width: 700px) {
  .nyarindo-sky-traffic > span {
    width: 110px;
    height: 32px;
  }

  .nyarindo-sky-traffic .aircraft-contrail {
    right: 76px;
    width: 150px;
  }

  .nyarindo-sky-traffic .aircraft-body {
    left: 35px;
    width: 58px;
    height: 8px;
  }

  .nyarindo-sky-traffic .aircraft-body::before {
    top: 10px;
    left: 21px;
    width: 33px;
    height: 7px;
  }

  .nyarindo-sky-traffic .aircraft-light {
    left: 90px;
  }

  .nyarindo-sky-traffic .helicopter-b,
  .nyarindo-sky-traffic .plane-b,
  .nyarindo-sky-traffic .satellite-c,
  .nyarindo-sky-traffic .balloon-c {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nyarindo-sky-traffic,
  .nyarindo-sky-traffic > span,
  .nyarindo-sky-traffic .aircraft-rotor,
  .nyarindo-sky-traffic .aircraft-light,
  .nyarindo-sky-traffic .sky-satellite::after {
    animation: none !important;
  }
}