/* Scroll worlds + command line + chapter rail. Load after deep-space.css */

.home-wild .space-journey,
.home-wild .space-journey-shade,
.home-wild .deep-space-canvas{
  transition: background .7s ease, opacity .7s ease, filter .7s ease;
}

/* Sharp work screenshots — the sites are the product. */
.home-wild .work-window img{
  filter:none !important;
}

/* —— Arrival: stars first, then the page docks in —— */
html.oc-arrive:not(.has-docked) .site-header,
html.oc-arrive:not(.has-docked) .hero-copy,
html.oc-arrive:not(.has-docked) .device-stage,
html.oc-arrive:not(.has-docked) .trust-strip,
html.oc-arrive:not(.has-docked) .ocai-root,
html.oc-arrive:not(.has-docked) .chapter-rail,
html.oc-arrive:not(.has-docked) .hero-glow,
html.oc-arrive:not(.has-docked) .fx-console,
html.oc-arrive:not(.has-docked) .hero-actions,
html.oc-arrive:not(.has-docked) .hero-proof{
  opacity:0 !important;
  visibility:hidden;
  pointer-events:none;
}
html.oc-arrive:not(.has-docked){overflow:hidden}
html.oc-arrive:not(.has-docked) .hero-copy{transform:translateY(24px)}
html.oc-arrive:not(.has-docked) .device-stage{transform:translateY(36px) scale(.96)}
html.has-docked .site-header,
html.has-docked .hero-copy,
html.has-docked .device-stage,
html.has-docked .trust-strip{
  animation:oc-dock .8s cubic-bezier(.2,.8,.2,1) both;
}
html.has-docked .device-stage{animation-delay:.12s}
@keyframes oc-dock{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* —— Daylight work floor + slight interactive light —— */
.machine-world{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .7s ease;
}
body[data-chapter="work"] .machine-world{opacity:1}
.machine-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(16,80,110,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,80,110,.07) 1px, transparent 1px);
  background-size:48px 48px;
  animation:grid-drift 28s linear infinite;
}
.machine-spot{
  position:absolute;width:420px;height:420px;border-radius:50%;
  left:var(--spot-x, 60%);top:var(--spot-y, 30%);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.72), rgba(180,220,235,.2) 42%, transparent 70%);
  transition:left .2s ease, top .2s ease;
}
.machine-scan{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(18,136,196,.45), transparent);
  animation:scan-drop 7s ease-in-out infinite;
  opacity:.55;
}
@keyframes grid-drift{to{background-position:48px 48px}}
@keyframes scan-drop{
  0%{top:8%;opacity:0}
  12%{opacity:.55}
  88%{opacity:.2}
  100%{top:88%;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .machine-grid,.machine-scan{animation:none}
}

.space-journey,
.deep-space-canvas,
.space-journey-shade{
  transition:opacity .7s ease, background .7s ease, filter .7s ease;
}
body[data-chapter="work"] .space-scene{opacity:0 !important}
body[data-chapter="work"] .deep-space-canvas{opacity:0 !important}
body[data-chapter="work"] .space-journey{
  background:linear-gradient(180deg,#8ec6dc 0%,#d5e8f0 36%,#eef4f7 70%,#f7fafb 100%) !important;
}
body[data-chapter="work"] .space-journey-shade{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(236,244,247,.55)) !important;
}
body[data-chapter="work"] .site-header{
  background:rgba(244,248,250,.92) !important;
  border-bottom-color:rgba(16,34,44,.08) !important;
}
body[data-chapter="work"] .site-header a,
body[data-chapter="work"] .site-header nav a,
body[data-chapter="work"] .brand-copy b,
body[data-chapter="work"] .brand-copy small{
  color:#16303b !important;
}
body[data-chapter="work"] .menu-button span{background:#16303b !important}
body[data-chapter="work"] .work,
body[data-chapter="work"] .testimonials{
  color:#16303b !important;
  background:linear-gradient(180deg,#e7f2f7 0%,#f4f8fa 55%,#eef4f7 100%) !important;
}
body[data-chapter="work"] .work:before,
body[data-chapter="work"] .testimonials:before{opacity:.08 !important}
body[data-chapter="work"] .work h2,
body[data-chapter="work"] .work h3,
body[data-chapter="work"] .testimonials h2{
  color:#10222c !important;
}
body[data-chapter="work"] .work .section-heading>p,
body[data-chapter="work"] .work .work-blurb,
body[data-chapter="work"] .testimonials p{
  color:#3e5864 !important;
}
body[data-chapter="work"] .work-card{
  background:#fff !important;
  border-color:rgba(16,34,44,.1) !important;
  color:#16303b !important;
}
body[data-chapter="work"] .chapter-rail{
  background:rgba(20,16,10,.7);
  border-color:rgba(232,180,35,.28);
}
body[data-chapter="work"] .chapter-rail a{background:rgba(232,180,35,.25)}
body[data-chapter="work"] .chapter-rail a.is-active{background:#e8b423}

body[data-chapter="lab"] .space-scene{opacity:.05 !important}
body[data-chapter="lab"] .deep-space-canvas{opacity:.4; filter:hue-rotate(18deg) saturate(1.2)}
body[data-chapter="lab"] .space-journey{background:#021018}
body[data-chapter="lab"] .space-journey-shade{
  background:
    radial-gradient(ellipse at 80% 20%, rgba(54,217,238,.16), transparent 42%),
    radial-gradient(ellipse at 12% 78%, rgba(20,150,255,.12), transparent 40%),
    linear-gradient(180deg, rgba(1,16,24,.35), rgba(2,10,18,.7));
}

body[data-chapter="price"] .space-scene{opacity:0 !important}
body[data-chapter="price"] .deep-space-canvas{opacity:.12; filter:saturate(.2) brightness(1.15)}
body[data-chapter="price"] .space-journey{background:#0a2430}
body[data-chapter="price"] .space-journey-shade{
  background:
    linear-gradient(180deg, rgba(18,56,72,.28), rgba(214,232,236,.14) 58%, rgba(8,28,38,.55));
}

body[data-chapter="talk"] .space-scene{opacity:0 !important}
body[data-chapter="talk"] .deep-space-canvas{opacity:0 !important}
body[data-chapter="talk"] .space-journey{background:linear-gradient(135deg,#0688b2,#10abc7 50%,#05789f) !important}
body[data-chapter="talk"] .space-journey-shade{background:transparent !important}

.home-wild .final-cta,
.home-wild .final-cta .reveal,
.home-wild .final-content,
.home-wild .footer,
.home-wild .footer .reveal{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  filter:none !important;
}
.home-wild .final-cta,
.home-wild .footer{
  position:relative;
  z-index:6;
}
.home-wild .final-cta{
  background:linear-gradient(135deg,#0688b2,#10abc7 50%,#05789f) !important;
  color:#fff !important;
}
.home-wild .footer{
  background:#041521 !important;
  color:#aec1cb !important;
}

/* —— Chapter rail —— */
.chapter-rail{
  position:fixed;
  z-index:80;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:12px 10px;
  border:1px solid rgba(160,210,235,.16);
  border-radius:999px;
  background:rgba(3,12,20,.55);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.chapter-rail a{
  position:relative;
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  overflow:hidden;
  text-indent:120%;
  white-space:nowrap;
}
.chapter-rail a:hover,
.chapter-rail a.is-active{
  background:#67e7f7;
  box-shadow:0 0 14px rgba(103,231,247,.55);
}
.chapter-rail a.is-active{
  height:22px;
  border-radius:8px;
}
.chapter-rail a span{
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  padding:4px 8px;
  border-radius:6px;
  background:rgba(4,14,22,.9);
  color:#d7eef6;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-indent:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.chapter-rail a:hover span,
.chapter-rail a:focus-visible span{
  opacity:1;
}

/* —— Hero command line —— */
.hero-command{
  margin:18px 0 6px;
  max-width:640px;
}
.hero-command-label{
  display:block;
  margin-bottom:8px;
  color:#8fe4ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.hero-command-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px 8px 8px 14px;
  border:1px solid rgba(173,224,246,.22);
  border-radius:999px;
  background:rgba(2,16,28,.55);
  box-shadow:inset 0 1px rgba(255,255,255,.08), 0 12px 32px rgba(0,0,0,.22);
}
.hero-command-prefix{
  color:#9db3c2;
  font-size:14px;
  font-weight:600;
}
.hero-command input{
  width:118px;
  border:0;
  background:transparent;
  color:#f3fbff;
  font:inherit;
  font-size:15px;
  font-weight:650;
  outline:none;
  border-bottom:1px dashed rgba(143,228,255,.35);
  padding:4px 2px;
}
.hero-command input::placeholder{color:#6f8594}
.hero-command button{
  margin-left:auto;
  border:0;
  border-radius:999px;
  padding:10px 16px;
  background:linear-gradient(180deg,#3ad7ee,#1288c4);
  color:#04202c;
  font-size:12px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}

/* AI control — same job, more instrument than chat widget */
.ocai-launcher{
  animation:none !important;
  box-shadow:0 14px 36px rgba(0,0,0,.38), 0 0 0 1px rgba(103,231,247,.16) !important;
}
.ocai-launcher:before{
  animation:none !important;
  background:linear-gradient(180deg, rgba(103,231,247,.55), rgba(20,150,255,.35)) !important;
}
body[data-chapter="work"] .ocai-launcher:after{background:radial-gradient(circle at 35% 30%,#123044 0,#07141c 70%) !important}
body[data-chapter="lab"] .ocai-launcher:after{background:radial-gradient(circle at 35% 30%,#0c3d4d 0,#04161e 70%) !important}
body[data-chapter="price"] .ocai-launcher:after{background:radial-gradient(circle at 35% 30%,#1a4450 0,#082028 70%) !important}

@media (max-width:980px){
  .chapter-rail{display:none}
  .hero-command-row{border-radius:22px}
  .hero-command input{width:46%}
  .hero-command button{width:100%; margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .home-wild .space-journey,
  .home-wild .space-journey-shade,
  .home-wild .deep-space-canvas,
  .chapter-rail a{transition:none}
}