@charset "UTF-8";

/* This layer is opt-in: the owner page and pages without the scene stay unchanged. */
body.workstation:has(> .ambient-background) {
  isolation: isolate;
  background: #0b1730;
}

.workstation > .ambient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  isolation: isolate;
  pointer-events: none;
  user-select: none;
  background:
    radial-gradient(ellipse at 73% 28%, #2a285731, transparent 66%),
    linear-gradient(145deg, #091a32 0%, #101a36 48%, #0b2340 100%);
}

.workstation > .ambient-background .ambient-aurora {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.workstation > .ambient-background .ambient-aurora-cyan {
  width: 110vw;
  height: 105vh;
  left: -38vw;
  top: -29vh;
  opacity: .8;
  background:
    radial-gradient(ellipse 65% 18% at 54% 56%, #31c7ec28 0%, #1792c914 47%, transparent 78%),
    radial-gradient(ellipse at 50% 50%, #0da5d659 0%, #176fa83b 29%, #14487516 55%, transparent 73%);
  transform: translate3d(0, 0, 0) rotate(-24deg) scale(1.03);
  animation-name: ambient-cyan-drift;
  animation-duration: 29s;
  animation-delay: -9s;
}

.workstation > .ambient-background .ambient-aurora-violet {
  width: 108vw;
  height: 112vh;
  right: -43vw;
  top: -15vh;
  opacity: .82;
  background:
    radial-gradient(ellipse 62% 14% at 49% 48%, #a074f52d 0%, #744dda1a 43%, transparent 77%),
    radial-gradient(ellipse at 50% 50%, #8053dc66 0%, #553b9440 29%, #3427621b 55%, transparent 75%);
  transform: translate3d(0, 0, 0) rotate(24deg) scale(1.05);
  animation-name: ambient-violet-drift;
  animation-duration: 33s;
  animation-delay: -17s;
}

.workstation > .ambient-background .ambient-aurora-blue {
  width: 120vw;
  height: 87vh;
  left: -14vw;
  bottom: -38vh;
  opacity: .86;
  background:
    radial-gradient(ellipse 65% 22% at 51% 44%, #48a9ed22 0%, transparent 74%),
    radial-gradient(ellipse at 50% 50%, #287fe94a 0%, #19539634 36%, #123c6c16 58%, transparent 78%);
  transform: translate3d(0, 0, 0) rotate(-9deg);
  animation-name: ambient-blue-drift;
  animation-duration: 26s;
  animation-delay: -12s;
}

.workstation > .ambient-background .ambient-horizon {
  position: absolute;
  z-index: 2;
  left: -20%;
  right: -20%;
  bottom: 11%;
  height: 31%;
  opacity: .65;
  background: radial-gradient(ellipse 60% 40% at 50% 78%, #2f9acf22 0%, #6d65c313 40%, transparent 76%);
  transform: translate3d(0, 0, 0) rotate(-5deg);
  animation: ambient-horizon-drift 31s ease-in-out -11s infinite alternate;
  pointer-events: none;
}

.workstation > .ambient-background .ambient-horizon::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 74%;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, #5c9df30d 23%, #7dc9ed38 48%, #a892e224 68%, transparent 94%);
  box-shadow: 0 0 20px #5696e222;
}

.workstation > .ambient-background #ambient-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  opacity: .92;
  pointer-events: none;
}

.workstation > .ambient-background .ambient-vignette {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, #040b1714 0%, transparent 42%, transparent 77%, #07101f12 100%),
    radial-gradient(ellipse at 52% 43%, transparent 32%, #06102412 70%, #050e202e 100%);
}

/* Main content is above the fixed scene. Existing header/nav layers stay at 10/12. */
body.workstation:has(> .ambient-background) > main,
body.workstation:has(> .ambient-background) > .site-footer {
  position: relative;
  z-index: 1;
}

body.workstation:has(> .ambient-background) > main {
  background: transparent;
}

body.workstation:has(> .ambient-background) > .site-header {
  background: linear-gradient(115deg, #0c1c32d6, #0b1629bd);
  border-color: #8bb9ee38;
}

body.workstation:has(> .ambient-background) .hero {
  background: transparent;
}

body.workstation:has(> .ambient-background) .hero-copy {
  text-shadow: 0 2px 18px #050f2552;
}

body.workstation:has(> .ambient-background) .hero-bottom {
  border-top-color: #7ca8d32b;
}

body.workstation:has(> .ambient-background) .tech-strip {
  background: #0a193653;
  border-block-color: #789ac82b;
}

body.workstation:has(> .ambient-background) :is(.projects-section, .about-section) {
  background: linear-gradient(180deg, #0b19351c, #07152b28 52%, #09192e12);
}

body.workstation:has(> .ambient-background) .notes-section {
  background: linear-gradient(110deg, #0a173660, #20234d45 50%, #0a20435c);
  border-block-color: #839dce2d;
}

body.workstation:has(> .ambient-background) .contact-section {
  background: transparent;
}

body.workstation:has(> .ambient-background) .contact-panel {
  background:
    radial-gradient(ellipse at 100% 100%, #4051ad27, transparent 60%),
    linear-gradient(125deg, #132a47dc, #0d1934d9);
  border-color: #82b5e94d;
}

body.workstation:has(> .ambient-background) > .site-footer {
  background: transparent;
  border-top-color: #7f9ec633;
  padding-bottom: 96px;
}

/* One global motion control remains reachable while browsing the whole page. */
body.workstation:has(> .ambient-background) > .ambient-controls {
  position: fixed;
  z-index: 8;
  right: 22px;
  bottom: max(18px, env(safe-area-inset-bottom));
  max-width: calc(100% - 36px);
}

.workstation .ambient-controls .motion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  min-width: 116px;
  max-width: 100%;
  padding: 10px 15px;
  border: 1px solid #73bae0a3;
  border-radius: 24px;
  background: linear-gradient(130deg, #122d46f0, #11243ce8);
  box-shadow: 0 8px 30px #020a1d59, inset 0 1px #bceaff17;
  backdrop-filter: blur(14px);
  color: #c5ebff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2px;
  white-space: nowrap;
}

.workstation .ambient-controls .motion-toggle:hover {
  border-color: #a9eaff;
  background: #1a3c58f5;
  color: #e6f7ff;
}

.workstation .ambient-controls .motion-toggle:focus-visible {
  outline: 2px solid #9ae8ff;
  outline-offset: 4px;
}

.workstation .ambient-controls .motion-icon {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #83dfff;
  font-size: 13px;
  line-height: 1;
}

@keyframes ambient-cyan-drift {
  0% { transform: translate3d(-2%, -3%, 0) rotate(-24deg) scale(1.03); opacity: .72; }
  52% { transform: translate3d(11%, 9%, 0) rotate(-15deg) scale(1.11); opacity: .9; }
  100% { transform: translate3d(18%, 5%, 0) rotate(-7deg) scale(1.05); opacity: .8; }
}

@keyframes ambient-violet-drift {
  0% { transform: translate3d(3%, -3%, 0) rotate(24deg) scale(1.05); opacity: .78; }
  48% { transform: translate3d(-9%, 8%, 0) rotate(14deg) scale(1.12); opacity: .93; }
  100% { transform: translate3d(-16%, 15%, 0) rotate(7deg) scale(1.03); opacity: .76; }
}

@keyframes ambient-blue-drift {
  0% { transform: translate3d(-4%, 3%, 0) rotate(-9deg) scale(1); opacity: .76; }
  50% { transform: translate3d(6%, -10%, 0) rotate(-2deg) scale(1.1); opacity: .94; }
  100% { transform: translate3d(11%, -5%, 0) rotate(6deg) scale(1.04); opacity: .83; }
}

@keyframes ambient-horizon-drift {
  from { transform: translate3d(-3%, 4%, 0) rotate(-5deg); opacity: .55; }
  to { transform: translate3d(4%, -8%, 0) rotate(2deg); opacity: .8; }
}

@media (max-width: 800px) {
  .workstation > .ambient-background .ambient-aurora-cyan {
    width: 145vw;
    height: 105vh;
    left: -62vw;
    top: -23vh;
  }

  .workstation > .ambient-background .ambient-aurora-violet {
    width: 145vw;
    right: -68vw;
  }

  .workstation > .ambient-background .ambient-aurora-blue {
    width: 145vw;
    left: -24vw;
  }
}

@media (max-width: 600px) {
  .workstation > .ambient-background {
    background: linear-gradient(155deg, #0b1e39 0%, #141c3b 51%, #102947 100%);
  }

  .workstation > .ambient-background .ambient-aurora-cyan {
    width: 170vw;
    height: 94vh;
    left: -76vw;
    top: -25vh;
  }

  .workstation > .ambient-background .ambient-aurora-violet {
    width: 165vw;
    height: 103vh;
    right: -82vw;
    top: -2vh;
  }

  .workstation > .ambient-background .ambient-aurora-blue {
    width: 150vw;
    height: 80vh;
    left: -25vw;
    bottom: -30vh;
  }

  .workstation > .ambient-background .ambient-horizon {
    bottom: 10%;
    height: 28%;
  }

  .workstation > .ambient-background #ambient-canvas {
    opacity: .78;
  }

  body.workstation:has(> .ambient-background) .notes-section {
    background: linear-gradient(130deg, #0b1a3c64, #1c254d42 55%, #10254360);
  }

  body.workstation:has(> .ambient-background) > .ambient-controls {
    right: 14px;
    max-width: calc(100% - 28px);
  }

  .workstation .ambient-controls .motion-toggle {
    min-width: 108px;
    min-height: 44px;
    padding-inline: 12px;
    font-size: 11px;
    gap: 7px;
  }

  body.workstation:has(> .ambient-background) > .site-footer {
    padding-bottom: 94px;
  }
}

/* As the city enters, keep its facades and traffic light visible through the page. */
.workstation > .ambient-background[data-city-visible="true"] {
  background:
    radial-gradient(ellipse at 73% 62%, #3422521c, transparent 64%),
    linear-gradient(145deg, #09182e 0%, #121a31 52%, #0b223a 100%);
}

.workstation > .ambient-background[data-city-visible="true"] .ambient-aurora {
  /* Override only brightness; existing transform motion and pause rules remain. */
  opacity: .48 !important;
}

.workstation > .ambient-background[data-city-visible="true"] .ambient-horizon {
  opacity: .32 !important;
}

.workstation > .ambient-background[data-city-visible="true"] #ambient-canvas {
  opacity: 1;
}

.workstation > .ambient-background[data-city-visible="true"] .ambient-vignette {
  background:
    linear-gradient(90deg, transparent, #0713260c 18%, #0713261d 39%, #0713261d 62%, #0713260c 82%, transparent),
    linear-gradient(180deg, #070f2014, transparent 28%, transparent 78%, #07122612);
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .notes-section {
  background: linear-gradient(90deg, #09182b08, #111c3424 32%, #0c1a3326 68%, #09182b08);
  border-block-color: #86a8da2d;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-list {
  border-top-color: #809fce38;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-row {
  background: linear-gradient(90deg, #09162c20, #09162d85 7%, #0b19318c 42%, #0a193378 84%, #0c1b321c);
  border-bottom-color: #799dce38;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-row:hover {
  background: linear-gradient(90deg, #0c203b2b, #10233d96 7%, #14244299 48%, #10243c85 84%, #11254024);
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-title-button {
  color: #e4efff;
  text-shadow: 0 2px 12px #040e24b3;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-content p {
  color: #a9bdd8;
  text-shadow: 0 1px 8px #040e24a6;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-meta > span {
  background: #0b1a32b8;
  color: #aec7e1;
  border-color: #5b7ba65c;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) :is(.notes-section .section-heading h2, .about-intro h2) {
  text-shadow: 0 3px 18px #050e25b3;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) :is(.notes-section .section-intro, .notes-disclaimer) {
  color: #9eb4d2;
  text-shadow: 0 1px 9px #07102599;
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) .about-section {
  background: linear-gradient(90deg, #08162b0f, #0a193424 50%, #0c17300d);
}

body.workstation:has(> .ambient-background[data-city-visible="true"]) :is(.about-intro > p:not(.eyebrow), .timeline-item > p:last-child) {
  color: #a5b9d4;
  text-shadow: 0 1px 10px #050f2599;
}

@media (max-width: 600px) {
  .workstation > .ambient-background[data-city-visible="true"] #ambient-canvas {
    opacity: .94;
  }

  body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-row {
    background: linear-gradient(90deg, #09162d63, #0a193197 12%, #0b1a3294 80%, #0c1b3252);
  }

  body.workstation:has(> .ambient-background[data-city-visible="true"]) .note-content p {
    color: #b0c2dc;
  }
}

/* Clear chapter boundaries over the continuous city scene. */
.workstation #notes {
  position: relative;
  border-top: 1px solid #77cce265;
  border-bottom: 0;
  background: linear-gradient(180deg, #0a233961, #101e3318 170px, #09182b08 76%, #08182e42);
}

.workstation #about {
  position: relative;
  margin-top: 32px;
  padding-top: 108px;
  border-top: 1px solid #a697ed80;
  background: linear-gradient(180deg, #101b3aaa, #0c173044 185px, #0c17300d 380px);
}

.workstation #notes::before,
.workstation #about::before {
  content: "";
  position: absolute;
  pointer-events: none;
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, #8fe9ff, #70d6f3b3 30%, #a996ed99 65%, #7fa3d32b);
  box-shadow: 0 0 18px #6bcff554;
}

.workstation #notes::before {
  left: max(40px, calc((100% - 1300px) / 2));
  right: max(40px, calc((100% - 1300px) / 2));
}

.workstation #about::before { left: 0; right: 0; }
.workstation #about::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  width: 66px;
  height: 5px;
  background: #a994ff;
  box-shadow: 0 0 16px #9e83f978;
  pointer-events: none;
}

.workstation :is(#notes, #about) .eyebrow > .section-number {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid #76d8f66b;
  border-radius: 4px;
  background: #102a45bd;
  color: #a1edff;
}

.workstation #about .eyebrow > .section-number {
  color: #d6c8ff;
  border-color: #ad97e791;
  background: #292443bd;
}

@media (max-width: 600px) {
  .workstation #notes::before { left: 18px; right: 18px; }
  .workstation #about { margin-top: 24px; padding-top: 72px; }
  .workstation #about::after { width: 44px; height: 4px; top: -2px; }
}

/* Both user pause and the JS page-visibility pause freeze the same CSS layers. */
body.workstation.motion-paused > .ambient-background :is(.ambient-aurora, .ambient-horizon),
.workstation > .ambient-background[data-paused="true"] :is(.ambient-aurora, .ambient-horizon) {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .workstation > .ambient-background :is(.ambient-aurora, .ambient-horizon) {
    animation-play-state: paused !important;
    will-change: auto;
  }
}

@media (forced-colors: active), print {
  .workstation > .ambient-background,
  .workstation > .ambient-controls {
    display: none !important;
  }
}

@media print {
  .workstation :is(#notes, #about) { background: #fff; border-color: #999; }
  .workstation :is(#notes, #about)::before, .workstation #about::after { display: none; }
  .workstation :is(#notes, #about) .eyebrow > .section-number { color: #111; background: transparent; border-color: #999; }
  body.workstation:has(> .ambient-background) { background: #fff; }
  body.workstation:has(> .ambient-background) :is(.projects-section, .about-section, .notes-section, .contact-panel) { background: #fff; }
  body.workstation:has(> .ambient-background) > .site-footer { padding-bottom: 30px; }
  body.workstation:has(> .ambient-background[data-city-visible="true"]) :is(.notes-section, .about-section, .note-row) { background: #fff; }
  body.workstation:has(> .ambient-background[data-city-visible="true"]) :is(.note-title-button, .note-content p, .notes-section .section-heading h2, .notes-section .section-intro, .notes-disclaimer, .about-intro h2, .about-intro > p:not(.eyebrow), .timeline-item > p:last-child) { color: #111; text-shadow: none; }
}