/* Human × AI v5 — larger multi-axis motion, original James point portrait preserved. */
.contact-stage { min-height: max(820px, 100svh); background:#050506; isolation:isolate; --hx:0; --hy:0; }
.contact-stage .stage-space { transform:none; transition:none; }
.contact-stage .stage-floor { opacity:.16; }
.contact-stage .word { display:none; }
.hero-light { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at calc(50% + var(--hx)*22%) calc(34% + var(--hy)*14%),rgba(143,214,207,.11),transparent 48%); }
.hero-portraits { position:absolute; width:min(1120px,98vw); aspect-ratio:3/2; top:70px; left:50%; transform:translateX(-50%); perspective:1100px; mix-blend-mode:screen; }
.portrait-depth { position:absolute; top:0; width:50%; height:100%; will-change:transform; transform-style:preserve-3d; }
.human-depth { left:0; transform:translate3d(calc(var(--hx)*64px),calc(var(--hy)*38px),calc(35px + var(--hx)*65px - var(--hy)*20px)) rotateY(calc(var(--hx)*-22deg)) rotateX(calc(var(--hy)*14deg)) rotateZ(calc(var(--hx)*-3deg + var(--hy)*2deg)); transform-origin:65% 48%; }
.ai-depth { right:0; transform:translate3d(calc(var(--hx)*-76px),calc(var(--hy)*-42px),calc(45px - var(--hx)*70px + var(--hy)*24px)) rotateY(calc(var(--hx)*26deg)) rotateX(calc(var(--hy)*-16deg)) rotateZ(calc(var(--hx)*4deg - var(--hy)*2deg)); transform-origin:35% 48%; }
.portrait-float { width:100%; height:100%; transform-style:preserve-3d; animation:portraitOrbit 10s ease-in-out infinite; }
.ai-depth .portrait-float { animation-delay:-4s; animation-duration:12s; animation-direction:reverse; }
.portrait-crop { width:100%; height:100%; position:relative; overflow:hidden; mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 55%,transparent 97%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 55%,transparent 97%); }
.portrait-crop img { position:absolute; top:0; width:200%; height:100%; max-width:none; object-fit:fill; }
.human-crop img { left:0; }
.ai-crop img { right:0; }
@keyframes portraitOrbit {
  0%,100% { transform:translate3d(-8px,12px,-12px) rotateX(-2deg) rotateY(-4deg) rotateZ(-1.2deg); }
  25% { transform:translate3d(12px,-8px,10px) rotateX(3deg) rotateY(1deg) rotateZ(1deg); }
  50% { transform:translate3d(6px,-20px,18px) rotateX(1deg) rotateY(4deg) rotateZ(1.6deg); }
  75% { transform:translate3d(-12px,4px,-6px) rotateX(-3deg) rotateY(-1deg) rotateZ(-.6deg); }
}
#hero-field { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; opacity:.8; }
.hero-coordinate { position:absolute; top:140px; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; z-index:6; }
.human-coordinate { left:5%; color:var(--warm-hot); }
.ai-coordinate { right:5%; color:var(--cool); }
.contact-stage .bridge { top:38%; width:clamp(70px,10vw,140px); height:clamp(70px,10vw,140px); opacity:.65; transform:translate(calc(-50% + var(--hx)*36px),calc(-50% + var(--hy)*26px)) rotate(calc(var(--hx)*18deg)); }
.contact-stage .stage-copy { bottom:80px; transform:translateX(-50%); }
.contact-stage .stage-title { font-size:clamp(32px,4.1vw,60px); line-height:1.12; text-shadow:0 3px 24px #000,0 0 70px #000; }
.contact-stage .stage-sub { max-width:570px; margin-top:18px; }
.contact-stage .stage-links { margin-top:20px; }
.hero-pause { position:absolute; z-index:7; right:28px; bottom:22px; min-height:36px; padding:8px 12px; border:1px solid #ffffff24; border-radius:24px; background:#05050699; color:#dbdedb; font-size:10px; letter-spacing:.12em; cursor:pointer; }
.hero-pause span { margin-left:10px; color:var(--cool); }
.hero-pause:focus-visible { outline:2px solid var(--cool); outline-offset:4px; }
.contact-stage[data-paused="true"] *, .contact-stage[data-offscreen="true"] * { animation-play-state:paused !important; }
@media (min-width:1600px) { .hero-portraits { width:min(1320px,85vw); } }
@media (max-width:800px) {
  .contact-stage { min-height:max(800px,100svh); }
  .hero-portraits { top:110px; width:112vw; max-width:800px; }
  .hero-coordinate { top:95px; font-size:9px; }
  .human-coordinate { left:24px; } .ai-coordinate { right:24px; }
  .contact-stage .stage-copy { bottom:84px; }
  .contact-stage .bridge { top:35%; }
  .human-depth { transform:translate3d(calc(var(--hx)*24px),calc(var(--hy)*18px),calc(var(--hx)*20px)) rotateY(calc(var(--hx)*-14deg)) rotateX(calc(var(--hy)*9deg)) rotateZ(calc(var(--hx)*-2deg)); }
  .ai-depth { transform:translate3d(calc(var(--hx)*-28px),calc(var(--hy)*-20px),calc(var(--hx)*-24px)) rotateY(calc(var(--hx)*16deg)) rotateX(calc(var(--hy)*-10deg)) rotateZ(calc(var(--hx)*2deg)); }
}
@media (max-width:520px) {
  .hero-portraits { top:132px; width:116vw; }
  .contact-stage .bridge { top:34%; width:74px; height:74px; }
  .contact-stage .stage-title { font-size:34px; }
  .contact-stage .stage-sub { font-size:14px; max-width:350px; }
  .hero-pause { right:15px; bottom:17px; font-size:9px; }
  .contact-stage .scroll-cue { left:24px; transform:none; bottom:29px; }
}
@media (prefers-reduced-motion:reduce) {
  .portrait-depth { transform:none; } .portrait-float { animation:none; }
  #hero-field,.contact-stage .bridge { display:none; }
}