/* Section-local Notae atmosphere. Foreground composition and controls stay intact. */
.notae-field {
  --notae-line: #78f1dc;
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none; user-select: none;
  contain: layout paint; color: var(--notae-line);
}
.notae-field-plate {
  position: absolute; width: clamp(220px, 36%, 520px); height: auto;
  top: 9%; right: -5%; opacity: .13;
  animation: notae-background-drift 41s ease-in-out infinite alternate;
  animation-delay: var(--notae-delay); transform-origin: 50% 40%;
}
.notae-field-plate:nth-child(2) {
  top: auto; bottom: -22%; right: auto; left: -7%; width: 29%;
  opacity: .08; animation-duration: 48s; animation-direction: alternate-reverse;
}
.notae-field-diagram {
  position: absolute; top: 21%; right: -140px;
  width: clamp(320px, 42%, 620px); aspect-ratio: 1; opacity: .23;
}
.notae-field-diagram svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: .7; }
.notae-field-orbit, .notae-field-inner {
  transform-origin: 250px 250px;
  animation: notae-background-orbit 95s linear infinite;
  animation-delay: var(--notae-delay);
}
.notae-field-inner { animation-duration: 63s; animation-direction: reverse; opacity: .7; }
.notae-field-signal {
  stroke: #c7fff3; stroke-width: 2.5; stroke-dasharray: 4 96;
  animation: notae-background-signal 20s linear infinite;
}
.notae-field-axis { opacity: .55; }
.notae-field-left .notae-field-diagram { right: auto; left: -160px; top: 38%; }
.notae-field-left .notae-field-plate:first-child { right: auto; left: -4%; }
.approach > .notae-field, .contact > .notae-field, .yami-archive > .notae-field {
  --notae-line: #327b79;
}
.approach > .notae-field .notae-field-plate,
.contact > .notae-field .notae-field-plate { filter: brightness(.45) saturate(.6); opacity: .1; }
body.revealed .notae-field-diagram { opacity: .35; }
.notae-field *, .notae-field[data-running='false'] * { animation-play-state: paused; }
.notae-field[data-running='true'] * { animation-play-state: running; }
body.paused .notae-field * { animation-play-state: paused !important; }
@keyframes notae-background-drift {
  from { transform: translate3d(-10px, -14px, 0) rotate(-5deg); }
  to { transform: translate3d(12px, 14px, 0) rotate(-1deg); }
}
@keyframes notae-background-orbit { to { transform: rotate(360deg); } }
@keyframes notae-background-signal { to { stroke-dashoffset: -100; } }
@media (max-width: 760px) {
  .notae-field-plate { width: 60%; right: -16%; top: 18%; opacity: .1; }
  .notae-field-plate:nth-child(2) { display: none; }
  .notae-field-diagram { width: 240px; right: -120px; top: 40%; opacity: .17; }
  .notae-field-left .notae-field-diagram { left: -130px; }
  .notae-field-left .notae-field-plate:first-child { left: -16%; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-opt-in) .notae-field * { animation: none !important; }
}