/* Logo colors sampled from the supplied 700ECDI PNG: #038a42 and #efe613. */
body.learning-workspace,
body.cinematic-home {
  --brand-green: #038a42;
  --brand-yellow: #efe613;
  --circuit-green: #3fd47a;
  --circuit-gold: #e6dd55;
  --circuit-trace-opacity: .18;
  --circuit-signal-opacity: .7;
  --circuit-node-opacity: .65;
  --circuit-glow: #38c66b70;
  --tt-bg: #143329;
  --tt-paper: #234a3be8;
  --tt-glass: #214637d4;
  --tt-deep: #173b2eee;
  --tt-border: #94c89840;
  --tt-ink: #f0f8e9;
  --tt-muted: #c0d9c3;
  --tt-accent: #c8e277;
  --room-green: #90dba3;
  --room-yellow: #e6e078;
  background: radial-gradient(ellipse at 8% 0, #20825321, transparent 57%),
    radial-gradient(ellipse at 94% 92%, #d4ce4a20, transparent 55%), var(--tt-bg) !important;
}

/* A pale mint canvas and deeper traces make the animation visible in light mode. */
html[data-theme="light"] body.learning-workspace {
  --tt-bg: #eaf3e8;
  --tt-paper: #fbfff3e8;
  --tt-glass: #f7fff0d6;
  --tt-deep: #e5f1e2ed;
  --tt-soft: #c8e5bd4f;
  --tt-border: #79a98466;
  --tt-ink: #173c27;
  --tt-muted: #496b50;
  --tt-accent: #16723d;
  --room-green: #087440;
  --room-yellow: #786517;
  --circuit-green: #147b43;
  --circuit-gold: #8d7918;
  --circuit-trace-opacity: .25;
  --circuit-signal-opacity: .8;
  --circuit-node-opacity: .8;
  --circuit-glow: #3b9d392b;
  background: radial-gradient(ellipse at 8% 4%, #fdfff7bf, transparent 53%),
    radial-gradient(ellipse at 93% 88%, #f3e96c2b, transparent 52%),
    linear-gradient(135deg, #edf7e9, #e1eee0) !important;
}
html[data-theme="light"] .learning-workspace:before {
  background: linear-gradient(100deg, #edf7e91a, #e6f3df08) !important;
}
html[data-theme="light"] .learning-workspace :is(.roadmap-intro, .stage-card, .price-card, .membership-dialog) {
  background: var(--tt-glass) !important;
  color: var(--tt-ink) !important;
  border-color: var(--tt-border) !important;
  box-shadow: 0 10px 27px #356c3512, inset 0 1px #ffffffe6 !important;
}
html[data-theme="light"] .learning-workspace :is(.roadmap-intro p, .roadmap-description, .ctf-mission-copy p, .membership-dialog p) { color: var(--tt-muted) !important; }
html[data-theme="light"] .learning-workspace :is(.roadmap-intro h2, .roadmap-label, .ctf-mission-title strong, .membership-dialog h2) { color: var(--tt-ink) !important; }
html[data-theme="light"] .learning-workspace .room-reference-active .ctf-mission-list .stage-mission {
  background: linear-gradient(115deg, #fafff1dc, #edf8e7d9) !important;
  box-shadow: 0 6px 19px #38673614, inset 0 1px #fff !important;
}
.learning-workspace #ctf-next,
.learning-workspace .header-premium,
.cinematic-home .home-start {
  background: linear-gradient(110deg, #9bd573, #e3e561) !important;
  color: #14371d !important;
  border-color: #d3e67e80 !important;
}

/* Same SVG scene on both pages. All landing-page paths terminate at the logo. */
.technology-backdrop.brand-technology {
  opacity: 1 !important;
  mask-image: none;
  -webkit-mask-image: none;
  z-index: -1;
  contain: strict;
}
.brand-technology svg { display: block; width: 100%; height: 100%; }
.brand-technology .tech-route { color: var(--circuit-green); }
.brand-technology .tech-route-gold { color: var(--circuit-gold); }
.brand-technology .tech-trace {
  stroke: currentColor;
  stroke-opacity: var(--circuit-trace-opacity);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.brand-technology .tech-signal {
  stroke: currentColor;
  stroke-width: 2;
  stroke-opacity: var(--circuit-signal-opacity);
  stroke-dasharray: 24 1024;
  stroke-dashoffset: 24;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px var(--circuit-glow));
  animation: brand-signal-in var(--signal-duration, 14s) linear var(--signal-delay, 0s) infinite;
}
.brand-technology .tech-node {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 5;
  stroke-opacity: .1;
  opacity: var(--circuit-node-opacity);
  animation: none;
}
.brand-technology .tech-route-bottom .tech-trace { stroke-width: 1.2; }
.brand-technology .tech-route-bottom .tech-signal { stroke-width: 2.4; }
.brand-technology .tech-arrival {
  fill: currentColor;
  fill-opacity: .1;
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: brand-logo-arrival var(--signal-duration, 14s) linear var(--signal-delay, 0s) infinite;
}
.brand-technology::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 90px;
  background: radial-gradient(ellipse at 22% 100%, #038a4217, transparent 50%),
    radial-gradient(ellipse at 82% 100%, #efe6130c, transparent 55%);
  pointer-events: none;
}
.cinematic-home .technology-backdrop { opacity: .82 !important; }
.cinematic-home .home-globe { opacity: .9; }
.cinematic-home .home-shade {
  background: linear-gradient(90deg, #143329eb, #14332980 49%, #14332914 75%) !important;
}
.cinematic-home .home-brand img { object-fit: contain; filter: drop-shadow(0 0 7px #61cf6530); }
.cinematic-home .home-copy h1 em { color: #dfe66f !important; }
.cinematic-home .home-footer {
  position: relative;
  border-top: 1px solid #9dc38c24;
  background: linear-gradient(90deg, #173b2e55, #173b2e18);
  backdrop-filter: blur(5px);
}

/* Light travels along the lower navigation edge without adding another footer. */
#missions-page.room-reference-active .ctf-pagination {
  position: relative;
  isolation: isolate;
  border-color: var(--tt-border);
  background: var(--tt-glass);
}
#missions-page.room-reference-active .ctf-pagination::before {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0 35%, var(--circuit-green) 45%, var(--circuit-gold) 53%, transparent 63% 100%);
  background-size: 280% 100%;
  opacity: .75;
  animation: brand-navigation-light 8s linear infinite;
  pointer-events: none;
}
@keyframes brand-signal-in { from { stroke-dashoffset: 24; } to { stroke-dashoffset: -1000; } }
@keyframes brand-logo-arrival {
  0%, 91% { opacity: 0; transform: scale(.45); }
  97% { opacity: .45; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}
@keyframes brand-navigation-light { from { background-position: 140% 0; } to { background-position: -140% 0; } }
[data-motion="paused"] .brand-technology *,
[data-motion="paused"] #missions-page.room-reference-active .ctf-pagination::before,
.brand-technology[data-scene-visibility="hidden"] * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .brand-technology .tech-signal, .brand-technology .tech-arrival { display: none; }
  #missions-page.room-reference-active .ctf-pagination::before { animation: none; opacity: .35; }
}