/* Living material, steady content. Every loop is gated by the visible-region
   controller; no animation starts merely because this stylesheet loaded. */
.ambient-fold-body { position: absolute; inset: 0; }

#top {
  --ambient-plate-x: 10px;
  --ambient-plate-y: 12px;
  --ambient-plate-angle: -.55deg;
  --ambient-plate-travel: 2px;
}
#top[data-ambient] .hero-code-line::before {
  animation: ambient-ink-near 6.8s ease-in-out infinite;
  animation-play-state: paused;
}
#top[data-ambient] .hero-code-line::after {
  animation: ambient-ink-far 8.4s ease-in-out -2.2s infinite;
  animation-play-state: paused;
}
#top[data-ambient] .ambient-fold-body {
  animation: ambient-fold-drift 8.8s ease-in-out -1.8s infinite;
  animation-play-state: paused;
  transform-origin: 50% 55%;
}
#top[data-ambient] .hero-studio-frame::before {
  animation: ambient-plate-breath 9s ease-in-out -2s infinite;
  animation-play-state: paused;
}
.hero-frame-rail { position: relative; overflow: hidden; }
.hero-frame-rail > span { position: relative; z-index: 1; }
#top[data-ambient] .hero-frame-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, #f4efe620 50%, transparent 60%);
  animation: ambient-rail-light 12s linear -4.5s infinite;
  animation-play-state: paused;
}
#top[data-ambient=running] .hero-code-line::before,
#top[data-ambient=running] .hero-code-line::after,
#top[data-ambient=running] .ambient-fold-body,
#top[data-ambient=running] .hero-studio-frame::before,
#top[data-ambient=running] .hero-frame-rail::after { animation-play-state: running; }

.ambient-card-edge {
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: inherit;
  opacity: .1;
  pointer-events: none;
  z-index: 1;
}
.film-trigger[data-ambient] > .ambient-card-edge {
  animation: ambient-edge-breath 7.8s ease-in-out var(--ambient-phase, 0s) infinite;
  animation-play-state: paused;
}
.film-item:nth-child(3n+1) { --ambient-phase: -1.6s; }
.film-item:nth-child(3n+2) { --ambient-phase: -4.2s; }
.film-item:nth-child(3n) { --ambient-phase: -6.1s; }
.film-trigger[data-ambient=running] > .ambient-card-edge { animation-play-state: running; }
#work[data-ambient] .gallery-foot::after {
  animation: ambient-terminal-breath 6.4s ease-in-out -1.7s infinite;
  animation-play-state: paused;
}
#work[data-ambient=running] .gallery-foot::after { animation-play-state: running; }

.learning-steps li { position: relative; }
#blueprint[data-ambient] .learning-steps li::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 36px;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  pointer-events: none;
  animation: ambient-rule-breath 8s ease-in-out var(--ambient-phase, -1s) infinite;
  animation-play-state: paused;
}
.learning-steps li:nth-child(2) { --ambient-phase: -3s; }
.learning-steps li:nth-child(3) { --ambient-phase: -5s; }
.learning-steps li:nth-child(4) { --ambient-phase: -7s; }
#blueprint[data-ambient=running] .learning-steps li::after { animation-play-state: running; }
#access[data-ambient] .access-details > h3::after {
  transform-origin: left;
  animation: ambient-rule-breath 7.6s ease-in-out -2.4s infinite;
  animation-play-state: paused;
}
#access[data-ambient=running] .access-details > h3::after { animation-play-state: running; }

@keyframes ambient-ink-near {
  0%, 100% { opacity: .42; }
  50% { opacity: .76; }
}
@keyframes ambient-ink-far {
  0%, 100% { opacity: .12; }
  50% { opacity: .32; }
}
@keyframes ambient-fold-drift {
  0%, 100% { transform: translate(-1px, 1px) rotate(-.65deg); }
  50% { transform: translate(1.5px, -2px) rotate(.65deg); }
}
@keyframes ambient-plate-breath {
  0%, 100% {
    transform: translate(var(--ambient-plate-x), var(--ambient-plate-y)) rotate(var(--ambient-plate-angle));
  }
  50% {
    transform: translate(calc(var(--ambient-plate-x) + 1px), calc(var(--ambient-plate-y) + var(--ambient-plate-travel))) rotate(calc(var(--ambient-plate-angle) + .12deg));
  }
}
@keyframes ambient-rail-light {
  0%, 18% { transform: translateX(-110%); opacity: 0; }
  24% { opacity: .7; }
  72% { opacity: .7; }
  80%, 100% { transform: translateX(110%); opacity: 0; }
}
@keyframes ambient-edge-breath {
  0%, 100% { opacity: .08; }
  50% { opacity: .63; }
}
@keyframes ambient-terminal-breath {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes ambient-rule-breath {
  0%, 100% { opacity: .23; transform: scaleX(.6); }
  50% { opacity: .8; transform: scaleX(1); }
}
@media (max-width: 700px) {
  #top {
    --ambient-plate-x: 4px;
    --ambient-plate-y: 7px;
    --ambient-plate-angle: -.7deg;
    --ambient-plate-travel: 1px;
  }
  @keyframes ambient-ink-near {
    0%, 100% { opacity: .38; }
    50% { opacity: .63; }
  }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  #top[data-ambient] .hero-code-line::before,
  #top[data-ambient] .hero-code-line::after,
  #top[data-ambient] .ambient-fold-body,
  #top[data-ambient] .hero-studio-frame::before,
  #top[data-ambient] .hero-frame-rail::after,
  .film-trigger[data-ambient] > .ambient-card-edge,
  #work[data-ambient] .gallery-foot::after,
  #blueprint[data-ambient] .learning-steps li::after,
  #access[data-ambient] .access-details > h3::after { animation: none; }
  .hero-frame-rail::after, .ambient-card-edge { display: none; }
}