/* Creative Circuit's live instruments. Every animation is decorative, starts
 * paused, and is enabled only by the shared visibility/motion controller.
 * Content, source artwork, portraits and layout geometry never animate here.
 */
.circuit-depth-host {
  --depth-ink: #83d5e9;
  --depth-period: 8s;
  --depth-offset: -2s;
  position: relative;
  isolation: isolate;
}
.circuit-depth-layer,
.circuit-depth-layer *,
.circuit-depth-bridge,
.circuit-depth-bridge::before,
.circuit-depth-bridge::after,
.ambient-widget,
.ambient-widget *,
.active-media-overlay,
.active-media-overlay * {
  pointer-events: none;
  user-select: none;
}
.circuit-depth-layer { position: absolute; margin: 0; }
.circuit-depth-rear {
  z-index: -1;
  top: 8px;
  right: max(12px, calc(var(--page-pad) - 10px));
  width: min(46vw, 560px);
  max-width: calc(100% - 24px);
  height: clamp(96px, 11vw, 156px);
  color: var(--depth-ink);
  overflow: hidden;
  opacity: .46;
}
.ambient-route { display: block; width: 100%; height: 100%; overflow: hidden; }
.ambient-wire,
.ambient-runner {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.ambient-wire { opacity: .38; }
.ambient-runner {
  stroke-width: 2.5;
  stroke-linecap: square;
  stroke-dasharray: 11 89;
  stroke-dashoffset: 0;
  opacity: .9;
  animation: circuit-active-flow var(--depth-period) linear var(--depth-offset) infinite;
  animation-play-state: paused;
}
.ambient-runner:nth-of-type(3) { stroke-width: 1.5; stroke-dasharray: 4 96; animation-delay: calc(var(--depth-offset) - 4s); }
.ambient-node {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .5;
  transform-box: fill-box;
  transform-origin: center;
  animation: circuit-active-node 3.8s ease-in-out var(--depth-offset) infinite;
  animation-play-state: paused;
}
.ambient-node:nth-of-type(2n) { animation-duration: 4.6s; animation-delay: -2.7s; }
.circuit-depth-foreground {
  z-index: 3;
  top: 24px;
  right: max(12px, calc(var(--page-pad) - 8px));
  width: 86px;
  height: 38px;
  color: var(--depth-ink);
  opacity: .72;
}
.depth-rail {
  position: absolute;
  top: 0;
  right: 8px;
  width: 62px;
  height: 19px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: perspective(500px) rotateY(-14deg) translateZ(3px);
  transform-origin: right top;
  animation: circuit-active-rail 7.2s ease-in-out var(--depth-offset) infinite;
  animation-play-state: paused;
}
.depth-junction {
  position: absolute;
  top: 18px;
  right: 2px;
  width: 10px;
  height: 10px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
  animation: circuit-active-node 4.3s ease-in-out -1.9s infinite;
  animation-play-state: paused;
}

/* The header-margin instruments have different mechanics: connections,
 * rotating quote brackets, a project calibration sweep, a field orbit,
 * team constellation and a final outgoing transmission.
 */
.ambient-widget {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: var(--page-pad);
  width: 126px;
  height: 76px;
  color: var(--depth-ink);
  opacity: .72;
  overflow: hidden;
}
.ambient-widget .widget-wire,
.ambient-widget .widget-flow,
.ambient-widget .widget-ring,
.ambient-widget .widget-scan {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.widget-wire { opacity: .35; }
.widget-flow {
  stroke-width: 2.5 !important;
  stroke-dasharray: 16 84;
  animation: circuit-active-flow 6.7s linear -2.1s infinite;
  animation-play-state: paused;
}
.widget-ring {
  stroke-dasharray: 22 7 4 7;
  transform-box: fill-box;
  transform-origin: center;
  animation: circuit-active-orbit 14s linear -4s infinite;
  animation-play-state: paused;
}
.widget-dot {
  fill: currentColor;
  opacity: .6;
  animation: circuit-active-node 3.4s ease-in-out -1.4s infinite;
  animation-play-state: paused;
}
.widget-dot:nth-of-type(2n) { animation-delay: -2.9s; animation-duration: 4.1s; }
.widget-satellite {
  fill: currentColor;
  transform-box: view-box;
  transform-origin: center;
  animation: circuit-active-orbit 14s linear -4s infinite;
  animation-play-state: paused;
}
.widget-scan {
  opacity: .8;
  animation: circuit-active-scan 5.5s ease-in-out -1.7s infinite;
  animation-play-state: paused;
}
[data-depth-kind=network] { --depth-ink: #124b60; --depth-period: 6.8s; --depth-offset: -1.8s; }
[data-depth-kind=network] .circuit-depth-rear { right: calc(var(--page-pad) + 10px); opacity: .54; }
[data-depth-kind=network] .circuit-depth-foreground { top: auto; bottom: 24px; }
[data-depth-kind=reviews] { --depth-ink: #6d452d; --depth-period: 8.6s; --depth-offset: -4.1s; }
[data-depth-kind=reviews] .circuit-depth-rear { opacity: .4; }
[data-depth-kind=reviews] .circuit-depth-foreground { top: auto; bottom: 22px; opacity: .6; }
[data-depth-kind=reviews] .widget-ring { animation-direction: reverse; animation-duration: 16s; }
[data-depth-kind=works] { --depth-ink: #83c7d9; --depth-period: 7.7s; --depth-offset: -3.8s; }
[data-depth-kind=works] .circuit-depth-rear { opacity: .38; }
[data-depth-kind=works] .circuit-depth-foreground { top: auto; bottom: 25px; }
[data-depth-kind=works] .widget-scan { animation-duration: 6.3s; }
[data-depth-kind=explore] { --depth-ink: #8fcbdf; --depth-period: 9s; --depth-offset: -5.2s; }
[data-depth-kind=explore] .circuit-depth-rear { opacity: .4; }
[data-depth-kind=explore] .circuit-depth-foreground { right: calc(var(--page-pad) + 4px); }
[data-depth-kind=team] { --depth-ink: #86bdcf; --depth-period: 8.2s; --depth-offset: -2.5s; }
[data-depth-kind=team] .circuit-depth-rear { opacity: .4; }
[data-depth-kind=team] .circuit-depth-foreground { top: auto; bottom: 25px; opacity: .62; }
[data-depth-kind=team] .widget-flow { animation-duration: 9.4s; animation-delay: -5.7s; }
[data-depth-kind=cta] { --depth-ink: #18536a; --depth-period: 6.2s; --depth-offset: -3.4s; }
[data-depth-kind=cta] .circuit-depth-rear { opacity: .5; }
[data-depth-kind=cta] .circuit-depth-foreground { top: auto; bottom: 18px; opacity: .62; }
[data-depth-kind=cta] .widget-flow { animation-duration: 5.7s; }

/* Activity belongs to the service instrument, rather than floating over its
 * copy. These three small lane lights and transfers continue at rest.
 */
.circuit-areas .area-item::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 44px;
  height: 2px;
  background: #63d5ef;
  opacity: .6;
  transform: translateX(0);
  animation: circuit-active-lane 6.4s linear -1.7s infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.circuit-areas .area-item::after {
  content: '';
  position: absolute;
  right: 0;
  left: auto;
  top: 32px;
  bottom: auto;
  width: 6px;
  height: 6px;
  border: 1px solid #68d6ef;
  background: #18bce5;
  border-radius: 50%;
  transform: none;
  transition: none;
  animation: circuit-active-node 3.6s ease-in-out -1.2s infinite;
  animation-play-state: paused;
  pointer-events: none;
}
.circuit-areas .area-item:last-child::after { display: block; }
.circuit-areas .area-item:nth-child(2)::before { animation-duration: 7.8s; animation-delay: -4.3s; }
.circuit-areas .area-item:nth-child(2)::after { animation-duration: 4.3s; animation-delay: -2.9s; }
.circuit-areas .area-item:nth-child(3)::before { animation-duration: 9s; animation-delay: -6.4s; }
.circuit-areas .area-item:nth-child(3)::after { animation-duration: 4.8s; animation-delay: -2.1s; }

/* Only decorative edges react to the pointer. The native content and hit
 * targets are stationary, and SVG activity is local-viewport gated.
 */
.circuit-depth-host .work-visual[data-depth-surface],
.circuit-depth-host .discovery-media-link[data-depth-surface],
.circuit-depth-host .review-carousel[data-depth-surface] { position: relative; isolation: isolate; }
.active-media-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  color: #65bfd8;
  overflow: hidden;
}
.active-frame-track,
.active-frame-runner,
.active-field-line,
.active-field-flow {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}
.active-frame-track { stroke-width: 1; opacity: .24; }
.active-frame-runner {
  stroke-width: 2.2;
  stroke-dasharray: 12 88;
  stroke-linecap: square;
  opacity: .85;
  animation: circuit-active-flow 8.4s linear -2.2s infinite;
  animation-play-state: paused;
}
.work-item:nth-child(2) .active-frame-runner { animation-duration: 9.7s; animation-delay: -6.1s; animation-direction: reverse; }
.work-item:nth-child(3) .active-frame-runner { animation-duration: 11s; animation-delay: -7.3s; }
[data-client=edinburgh] .active-media-overlay,
[data-client=yiu] .active-media-overlay { color: #2a6f88; }
.work-visual[data-depth-surface]::after {
  content: '';
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 8px;
  width: 18px;
  height: 18px;
  border-right: 1px solid #6095a7;
  border-bottom: 1px solid #6095a7;
  opacity: .7;
  pointer-events: none;
  transform: perspective(500px) translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 5px) rotateX(var(--depth-rx, 0deg)) rotateY(var(--depth-ry, 0deg));
  transition: transform 180ms ease-out;
}
.discovery-media-link .active-media-overlay { color: #102f42; }
[data-discovery=news] .active-media-overlay { color: #b2e8ff; }
.active-field-line { stroke-width: 1; opacity: .38; }
.active-field-flow {
  stroke-width: 2;
  stroke-dasharray: 16 84;
  opacity: .8;
  animation: circuit-active-flow 6.8s linear -2.4s infinite;
  animation-play-state: paused;
}
.active-field-dot {
  fill: currentColor;
  opacity: .6;
  transform-box: fill-box;
  transform-origin: center;
  animation: circuit-active-node 3.5s ease-in-out -1.1s infinite;
  animation-play-state: paused;
}
.active-media-overlay .active-widget-body {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: .6;
  transform-box: fill-box;
  transform-origin: center;
  animation: circuit-active-news 6.2s ease-in-out -2.1s infinite;
  animation-play-state: paused;
}
[data-discovery=news] .active-field-line { stroke-dasharray: 3 5; }
[data-discovery=news] .active-field-dot { animation-name: circuit-active-news-dot; animation-duration: 5s; }
[data-discovery=game] .active-field-flow { animation-duration: 8.1s; animation-direction: reverse; }
[data-discovery=game] .active-widget-body { animation-name: circuit-active-game; animation-duration: 7.4s; }
[data-discovery=game] .active-field-dot:nth-last-child(3) { transform-box: view-box; transform-origin: 23px 26px; animation-name: circuit-active-orbit; animation-duration: 16s; }
[data-discovery=code] .active-field-line { stroke-dasharray: 2 6; }
[data-discovery=code] .active-widget-body { animation-name: circuit-active-code; animation-duration: 4.4s; }
[data-discovery=code] .active-field-flow { animation-duration: 5.5s; animation-delay: -3.1s; }
.discovery-media-link[data-depth-surface]::before {
  content: '';
  position: absolute;
  z-index: 3;
  left: 12px;
  top: 12px;
  width: 24px;
  height: 14px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  color: #123b4e;
  opacity: .45;
  pointer-events: none;
  transform: perspective(500px) translate3d(var(--depth-x, 0px), var(--depth-y, 0px), 4px) rotateY(var(--depth-ry, 0deg));
  transition: transform 180ms ease-out;
}
.review-carousel[data-depth-surface]::after {
  content: '';
  position: absolute;
  z-index: 2;
  right: 28px;
  top: -3px;
  width: 94px;
  height: 3px;
  background: #7ce1f5;
  opacity: .7;
  pointer-events: none;
  animation: circuit-active-review 5.8s ease-in-out -1.7s infinite;
  animation-play-state: paused;
}
.circuit-profiles .team-member::before {
  width: 100%;
  background: repeating-linear-gradient(90deg, transparent 0 72px, var(--profile-accent) 72px 104px, transparent 104px 160px);
  background-size: 160px 100%;
  opacity: .8;
  animation: circuit-active-profile 8.6s linear -2.1s infinite;
  animation-play-state: paused;
}
.circuit-profiles .team-member:nth-child(2n)::before { animation-duration: 10.2s; animation-delay: -5.4s; animation-direction: reverse; }
.circuit-profiles .team-member:nth-child(3n)::before { animation-duration: 11.4s; animation-delay: -7.2s; }

/* A small outgoing handoff crosses just two boundaries; the footer continues
 * the transmission rather than waiting half a minute for a nearly hidden blink.
 */
.circuit-depth-host[data-depth-kind=works],
.circuit-depth-host[data-depth-kind=team] { z-index: 1; }
.circuit-depth-bridge {
  position: absolute;
  z-index: 4;
  right: calc(var(--page-pad) + 18px);
  bottom: -12px;
  width: 88px;
  height: 24px;
  color: #7ab2c6;
}
.circuit-depth-bridge::before { content: ''; position: absolute; inset: 0; border-top: 1px solid currentColor; border-right: 1px solid currentColor; opacity: .65; }
.circuit-depth-bridge::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: .7;
  animation: circuit-active-node 3.7s ease-in-out -1.8s infinite;
  animation-play-state: paused;
}
.circuit-depth-bridge[data-depth-bridge=team-cta] { width: 65px; color: #23728a; }
.circuit-depth-bridge[data-depth-bridge=team-cta]::after { animation-duration: 4.7s; animation-delay: -2.6s; }
.site-footer::after {
  content: '';
  position: absolute;
  top: 12px;
  right: var(--page-pad);
  width: 112px;
  height: 2px;
  background: #80c4d6;
  opacity: .65;
  transform-origin: right;
  pointer-events: none;
  animation: circuit-active-footer 6.6s ease-in-out -2.7s infinite;
  animation-play-state: paused;
}

/* No independent timers. A visible section enables only its own instruments;
 * media loops use the media's local visibility, not its larger parent section.
 */
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .ambient-runner,
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .ambient-node,
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .depth-rail,
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .depth-junction,
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .ambient-widget *,
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .circuit-areas .area-item::before,
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .circuit-areas .area-item::after,
html[data-circuit-motion=running] .circuit-depth-host[data-motion-active=true] .circuit-depth-bridge::after,
html[data-circuit-motion=running] .work-visual[data-depth-surface][data-motion-active=true] .active-media-overlay *,
html[data-circuit-motion=running] .discovery-media[data-motion-active=true] .active-media-overlay *,
html[data-circuit-motion=running] .review-carousel[data-depth-surface][data-motion-active=true]::after,
html[data-circuit-motion=running] .circuit-profiles .team-member[data-motion-active=true]::before,
html[data-circuit-motion=running] .site-footer[data-motion-active=true]::after { animation-play-state: running; }

@keyframes circuit-active-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes circuit-active-node { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes circuit-active-orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes circuit-active-scan { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(10px); } }
@keyframes circuit-active-rail { 0%, 100% { transform: perspective(500px) rotateY(-14deg) translateZ(3px); } 50% { transform: perspective(500px) rotateY(-8deg) translateZ(5px) translateY(-3px); } }
@keyframes circuit-active-lane { from { transform: translateX(0); opacity: .45; } 50% { opacity: .85; } to { transform: translateX(180px); opacity: .45; } }
@keyframes circuit-active-news { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
@keyframes circuit-active-news-dot { 0%, 100% { transform: translateX(0); opacity: .5; } 50% { transform: translateX(18px); opacity: 1; } }
@keyframes circuit-active-game { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(3deg); } }
@keyframes circuit-active-code { 0%, 100% { opacity: .4; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }
@keyframes circuit-active-review { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-70px); } }
@keyframes circuit-active-footer { 0%, 100% { transform: translateX(0) scaleX(.55); } 50% { transform: translateX(-65px) scaleX(1); } }
@keyframes circuit-active-profile { from { background-position: 0 0; } to { background-position: 160px 0; } }

@media (max-width: 800px), (pointer: coarse) {
  .circuit-depth-host .circuit-depth-rear { width: min(52vw, 300px); height: 90px; opacity: .32; }
  .circuit-depth-host .ambient-widget { width: 88px; height: 53px; top: 1px; opacity: .54; }
  .circuit-depth-host .circuit-depth-foreground { width: 55px; height: 28px; right: max(12px, calc(var(--page-pad) - 4px)); opacity: .5; }
  .depth-rail { width: 38px; height: 15px; animation-name: circuit-active-node; }
  .depth-junction { width: 7px; height: 7px; top: 14px; }
  .ambient-runner { stroke-width: 2; animation-duration: calc(var(--depth-period) + 2s); }
  .ambient-widget .widget-satellite { display: none; }
  .work-visual[data-depth-surface]::after,
  .discovery-media-link[data-depth-surface]::before { transform: none !important; transition: none; }
  .review-carousel[data-depth-surface]::after { width: 58px; animation-duration: 7s; }
  .active-frame-runner { stroke-width: 1.8; animation-duration: 10s; }
  .circuit-depth-bridge { width: 58px; right: calc(var(--page-pad) + 10px); }
  .circuit-depth-bridge[data-depth-bridge=team-cta] { width: 46px; }
  .site-footer::after { width: 80px; animation-duration: 8.5s; }
  .circuit-areas .area-item::before { width: 30px; animation-duration: 8s; }
  .circuit-profiles .team-member::before { animation-duration: 11s; opacity: .65; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-depth-layer *,
  .ambient-widget *,
  .active-media-overlay *,
  .circuit-depth-bridge::after,
  .circuit-areas .area-item::before,
  .circuit-areas .area-item::after,
  .circuit-profiles .team-member::before,
  .work-visual[data-depth-surface]::after,
  .discovery-media-link[data-depth-surface]::before,
  .review-carousel[data-depth-surface]::after,
  .site-footer::after { animation: none !important; transition: none !important; }
  .ambient-runner, .active-frame-runner, .active-field-flow { display: none; }
  .depth-rail,
  .work-visual[data-depth-surface]::after,
  .discovery-media-link[data-depth-surface]::before,
  .review-carousel[data-depth-surface]::after,
  .site-footer::after { transform: none !important; }
}