/* Motion layer */
.thread-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; z-index: 18; pointer-events: none; overflow: hidden; contain: strict; transition: opacity 0.4s ease; }
.thread-path { fill: none; stroke: var(--signal); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.thread-head { fill: var(--signal); stroke: rgba(255, 59, 18, 0.28); stroke-width: 8; transition: opacity 0.4s ease; }
.has-global-thread .svg-thread, .has-global-thread .project-world__thread, .has-global-thread .hero__thread { display: none; }

.js .capability-list { perspective: 1000px; }
.js .capability-item { transform-origin: 50% 100%; transform: perspective(1000px) rotateX(var(--cap-rx, 0deg)) translateY(var(--cap-y, 0px)); opacity: var(--cap-o, 1); will-change: transform, opacity; }

.project-shot::after { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 22%; background: linear-gradient(180deg, transparent, rgba(255, 59, 18, 0.16), transparent); transform: translateY(-120%); animation: scanSweep 5.5s ease-in-out infinite paused; pointer-events: none; will-change: transform; }
@keyframes scanSweep { 0% { transform: translateY(-120%); } 55%, 100% { transform: translateY(520%); } }
.live-badge { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; color: var(--signal); font: 600 8px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.live-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
.project-artifact { backdrop-filter: none !important; animation: worldDrift 7s ease-in-out infinite alternate paused; }
.project-artifact--b { animation-duration: 8.5s; }
.project-artifact--c { animation-duration: 9.5s; }
@keyframes worldDrift { from { translate: 0 -5px; } to { translate: 3px 7px; } }

.untangle { position: absolute; right: var(--gutter); top: 38%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--paper); cursor: grab; touch-action: none; z-index: 19; }
.untangle:active { cursor: grabbing; }
.untangle__knob { width: 54px; height: 54px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 calc(6px + 14px * var(--pull, 0)) rgba(255, 59, 18, 0.18); transform: translateY(calc(var(--pull, 0) * 120px)); }
.untangle__label { color: var(--night-muted); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; transform: translateY(calc(var(--pull, 0) * 120px)); }
.untangle.is-done .untangle__label { color: var(--paper); }
.untangle:focus-visible { outline: 2px solid var(--paper); outline-offset: 8px; }
@media (max-width: 700px) { .untangle { top: 30%; } .untangle__knob { width: 44px; height: 44px; } }

@media (prefers-reduced-motion: reduce) {
  .project-shot::after, .project-artifact, .live-badge::before { animation: none; }
  .js .capability-item { transform: none; opacity: 1; }
  .thread-layer { display: none; }
}

/* Centered portraits: single column, image centered under/over the copy */
.about-preview__layout, .about-story { grid-template-columns: 1fr; justify-items: center; }
.about-preview__layout > div:first-child, .about-story > :not(.about-portrait) { width: 100%; }
.about-preview__portrait, .about-portrait { position: relative; top: auto; justify-self: center; margin-inline: auto; width: min(100%, 460px); max-width: 460px; }
.about-portrait { order: -1; }
.about-preview__copy { max-width: 560px; }

.project-world.is-live .project-shot::after, .project-world.is-live .project-artifact { animation-play-state: running; }

/* Performance: drop finished filter layers and blur on the sticky header */
.js .is-visible .reveal-line > span, .js .reveal-line.is-visible > span { filter: none; }
.site-header.is-scrolled { backdrop-filter: none; background: color-mix(in srgb, var(--ink) 97%, transparent); }
.js [data-reveal].is-visible { will-change: auto; }

/* Performance: composite moving layers */
.project-shot, .project-artifact, [data-parallax] { will-change: transform; backface-visibility: hidden; }

.project-shot__link { display: block; cursor: pointer; }
.project-shot__link:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }


/* Phones, tablets and touch screens: keep the motion that matters, drop the expensive layers */
@media (max-width: 820px), (pointer: coarse) {
  .project-shot::after { display: none; }
  .project-artifact { animation: none; }
  .project-shot, .project-artifact, [data-parallax],
  .hero__title, .page-hero__title, .project-world__title, .manifesto__heading, .capabilities__heading,
  .about-preview__heading, .credentials-preview__heading, .contact-finale__heading, .contact-big, .display, .display--medium {
    will-change: auto;
    transform: none;
  }
  .js .capability-item { transform: none; opacity: 1; will-change: auto; }
  .site-header.is-scrolled { background: var(--ink); }
}