/* Isolate the decorative layer behind all content, including full-width sections. */
.portfolio-page { isolation: isolate; }
.page-atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  color: var(--orange);
  --motif-opacity: .28;
  --glow-opacity: .12;
}
.portfolio-page main > :is(.journey, .projects, .experience-section) { background: transparent; }
.ambient-glow {
  position: absolute;
  width: min(1000px, 100vw);
  aspect-ratio: 1;
  right: -25%;
  top: -15%;
  opacity: var(--glow-opacity);
  background: radial-gradient(ellipse, currentColor, transparent 65%);
}
.ambient-motif, .ambient-echo { position: absolute; width: clamp(360px, 46vw, 680px); }
.ambient-motif { right: -90px; top: 100px; opacity: var(--motif-opacity); }
.ambient-echo { left: -190px; bottom: -180px; width: 480px; opacity: .09; transform: rotate(-16deg); }
.page-atmosphere svg { display: block; width: 100%; height: auto; }
.ambient-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ambient-trace { stroke-width: 2.5; stroke-dasharray: 70 600; }
.ambient-nodes { fill: var(--bg); stroke-width: 2; }
.ambient-signal { stroke-width: 4; stroke-dasharray: 110 890; }
.ambient-orbit { transform-origin: 300px 300px; }
.ambient-orbit circle { fill: currentColor; stroke: none; }
html[data-theme="light"] .page-atmosphere { --motif-opacity: .21; --glow-opacity: .085; }
html[data-theme="light"] .ambient-echo { opacity: .07; }
@media (prefers-reduced-motion: no-preference) {
  .ambient-motif > svg { animation: ambient-drift 6s ease-in-out infinite alternate; }
  .ambient-echo > svg { animation: ambient-drift 8s -3s ease-in-out infinite alternate-reverse; }
  .ambient-glow { animation: ambient-glow-move 7s ease-in-out infinite alternate; }
  .ambient-trace { animation: ambient-flow 6s linear infinite; }
  .ambient-signal { animation: ambient-signal-travel 7s linear infinite; }
  .ambient-orbit { animation: ambient-orbit-turn 16s linear infinite; }
  .ambient-nodes circle { animation: ambient-breathe 2.4s ease-in-out infinite alternate; }
  .ambient-nodes circle:nth-child(even) { animation-delay: -1.8s; }
  .ambient-nodes circle:nth-child(3n) { animation-delay: -.8s; }
}
@keyframes ambient-drift { from { transform: translate(-12px, -22px) rotate(-5deg); } to { transform: translate(12px, 26px) rotate(5deg); } }
@keyframes ambient-flow { to { stroke-dashoffset: -670; } }
@keyframes ambient-signal-travel { to { stroke-dashoffset: -1000; } }
@keyframes ambient-orbit-turn { to { transform: rotate(360deg); } }
@keyframes ambient-glow-move { from { transform: translate(-5%, -3%) scale(.85); } to { transform: translate(5%, 8%) scale(1.15); } }
@keyframes ambient-breathe { from { opacity: .3; fill: var(--bg); } to { opacity: 1; fill: currentColor; } }
.ambient-paused *, .ambient-paused *::before { animation-play-state: paused !important; }
@media (max-width: 760px) {
  .page-atmosphere { --motif-opacity: .20; }
  .ambient-motif { width: 360px; right: -160px; top: 100px; }
  .ambient-echo { display: none; }
  html[data-theme="light"] .page-atmosphere { --motif-opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .page-atmosphere * { animation: none !important; }
  .ambient-trace { stroke-dasharray: none; opacity: .6; }
  .ambient-signal, .ambient-orbit { display: none; }
}
@media (forced-colors: active), print { .page-atmosphere { display: none; } }