@font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#e8edf5; --muted:#a9b4c6; --blue:#8cc0ff; --amber:#ffb45c;
  --vh:100vh; --ar:1.77778; /* image aspect (w/h) */
  --bx:.42;  /* horizontal crop bias: share of overflow cut from the left */
}
@supports (height:100dvh){:root{--vh:100dvh}}
@media (orientation:portrait){:root{--ar:.5625;--bx:.5}}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#04060b;overscroll-behavior:none}
body{position:fixed;inset:0;color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.stage{position:absolute;inset:0;overflow:hidden;isolation:isolate}

/* Image box locked to the image's aspect ratio and sized to cover the viewport,
   so overlay lights (in % of the image) stay on their spots at any size. */
.scene{
  --w:max(100vw, calc(var(--vh) * var(--ar)));
  --h:max(var(--vh), calc(100vw / var(--ar)));
  position:absolute;width:var(--w);height:var(--h);container-type:size;
  left:calc((100vw - var(--w)) * var(--bx));
  top:calc((var(--vh) - var(--h)) * .5);
}
.zoom{position:absolute;inset:0;transform-origin:60% 45%;animation:kb 46s ease-in-out infinite alternate;will-change:transform}
@media (orientation:portrait){.zoom{transform-origin:50% 45%}}
.hero{display:block;width:100%;height:100%;object-fit:cover}
@keyframes kb{from{transform:scale(1.015)}to{transform:scale(1.075) translate3d(-.6%,.3%,0)}}

.par{position:absolute;inset:0;transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -9px),0) scale(1.025);will-change:transform}

.fx{position:absolute;inset:0;pointer-events:none}
.fx-tall{display:none;--u:.72}
@media (orientation:portrait){.fx-wide{display:none}.fx-tall{display:block}}
.fx i{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);display:block;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;pointer-events:none;
  animation-duration:var(--t,4s);animation-delay:var(--d,0s);animation-iteration-count:infinite}

/* work lights on real bright features */
.lt{--z:calc(12px*var(--s,1)*var(--u,1));width:var(--z)!important;height:var(--z)!important;margin:calc(var(--z)/-2) 0 0 calc(var(--z)/-2)!important;
  opacity:var(--lo);animation-name:breathe;animation-timing-function:ease-in-out}
.lt.cool{background:radial-gradient(circle,#fff 0,rgba(205,228,255,.95) 14%,rgba(130,185,255,.38) 38%,transparent 70%)}
.lt.warm{background:radial-gradient(circle,#fff6e0 0,rgba(255,206,130,.95) 14%,rgba(255,160,70,.35) 40%,transparent 70%)}
.lt.tw{animation-name:twinkle;animation-timing-function:linear}
@keyframes breathe{0%,100%{opacity:var(--lo)}50%{opacity:1}}
@keyframes twinkle{0%,100%{opacity:var(--lo)}6%{opacity:1}12%{opacity:var(--lo)}18%{opacity:.9}24%{opacity:var(--lo)}}

/* navigation lights */
.nav{width:6px!important;height:6px!important;margin:-3px 0 0 -3px!important;animation-name:blink;animation-timing-function:steps(1,end)}
.nav::after{content:"";position:absolute;left:50%;top:50%;width:calc(26px*var(--u,1));height:calc(26px*var(--u,1));margin:calc(-13px*var(--u,1)) 0 0 calc(-13px*var(--u,1));border-radius:50%;background:radial-gradient(circle,var(--halo) 0,transparent 65%)}
.nav.red{background:#ff5040;--halo:rgba(255,70,50,.55)}
.nav.green{background:#62ffaa;--halo:rgba(80,255,160,.5)}
.nav.strobe{background:#fff;--halo:rgba(230,240,255,.75);animation-name:strobe}
@keyframes blink{0%{opacity:1}14%{opacity:.06}100%{opacity:.06}}
@keyframes strobe{0%,3%{opacity:1}4%,9%{opacity:0}10%,13%{opacity:1}14%,100%{opacity:0}}

/* lit hull windows */
.glow{width:calc(46px*var(--u,1))!important;height:calc(22px*var(--u,1))!important;margin:calc(-11px*var(--u,1)) 0 0 calc(-23px*var(--u,1))!important;border-radius:50%!important;
  background:radial-gradient(ellipse,rgba(255,200,120,.55) 0,rgba(255,170,80,.18) 45%,transparent 72%);opacity:.35;animation-name:breathe2;animation-timing-function:ease-in-out}
@keyframes breathe2{0%,100%{opacity:.3}50%{opacity:.85}}

/* welding flash + particle burst */
.weld{width:calc(46px*var(--u,1))!important;height:calc(46px*var(--u,1))!important;margin:calc(-23px*var(--u,1)) 0 0 calc(-23px*var(--u,1))!important;opacity:0;
  background:radial-gradient(circle,#fff 0,#fff 7%,rgba(225,240,255,.95) 13%,rgba(255,200,120,.6) 24%,rgba(120,175,255,.3) 44%,transparent 70%);animation-name:weld;animation-timing-function:linear}
@keyframes weld{0%,74%,100%{opacity:0;transform:scale(.6)}
  75%{opacity:1;transform:scale(1.1)}77%{opacity:.2}79%{opacity:.95;transform:scale(.9)}
  81%{opacity:.15}83%{opacity:.9;transform:scale(1.2)}85%{opacity:.3}87%{opacity:.8}90%{opacity:0}}
.spk{width:2.5px!important;height:2.5px!important;margin:-1.25px 0 0 -1.25px!important;background:#fff1c4;box-shadow:0 0 4px 1.5px rgba(255,185,80,.9);opacity:0;
  animation-name:spark;animation-timing-function:cubic-bezier(.2,.6,.4,1)}
@keyframes spark{0%,75%{opacity:0;transform:translate3d(0,0,0)}76%{opacity:1}
  88%{opacity:.7}96%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(.5)}100%{opacity:0;transform:translate3d(var(--dx),var(--dy),0)}}

/* anamorphic flare */
.flare{width:1px!important;height:1px!important;margin:0!important;opacity:0;animation-name:flare;animation-timing-function:ease-in-out}
.flare::before{content:"";position:absolute;left:calc(-160px*var(--u,1));top:-1px;width:calc(320px*var(--u,1));height:2px;background:linear-gradient(90deg,transparent,rgba(140,190,255,.55) 40%,rgba(235,245,255,.95) 50%,rgba(140,190,255,.55) 60%,transparent)}
.flare::after{content:"";position:absolute;left:-28px;top:-28px;width:56px;height:56px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75) 0,rgba(160,205,255,.28) 30%,transparent 66%)}
@keyframes flare{0%,80%,100%{opacity:0;transform:scaleX(.6)}86%{opacity:.85;transform:scaleX(1)}92%{opacity:0;transform:scaleX(1.15)}}

/* sweeping searchlight */
.beam{width:calc(var(--len)*1cqw)!important;height:calc(var(--len)*.11cqw)!important;margin:calc(var(--len)*-.055cqw) 0 0 0!important;border-radius:0!important;
  transform-origin:0 50%;opacity:.6;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(215,232,255,.55),rgba(160,200,255,.18) 40%,transparent 95%);
  clip-path:polygon(0 47%,100% 0,100% 100%,0 53%);
  animation-name:sweep;animation-timing-function:ease-in-out;animation-direction:alternate}
@keyframes sweep{from{transform:rotate(var(--a0))}to{transform:rotate(var(--a1))}}

/* tiny work pods drifting along the scaffold */
.pod{width:4px!important;height:3px!important;margin:-1.5px 0 0 -2px!important;border-radius:1px!important;background:#c9d3e2;box-shadow:0 0 4px 1px rgba(180,210,255,.45);
  animation-name:pod;animation-timing-function:ease-in-out;animation-direction:alternate}
.pod::after{content:"";position:absolute;left:4px;top:-1px;width:3px;height:3px;border-radius:50%;background:#ffb060;box-shadow:0 0 5px 2px rgba(255,170,80,.7);animation:blink 1.6s steps(1,end) infinite}
@keyframes pod{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(var(--dx)*1cqw),calc(var(--dy)*1cqh),0)}}

/* star drift: two depths, also used for parallax */
.stars{position:absolute;inset:-12%;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(100deg,#000 0,#000 27%,transparent 50%);mask-image:linear-gradient(100deg,#000 0,#000 27%,transparent 50%)}
.stars.far{opacity:.6;transform:translate3d(calc(var(--px,0) * -6px),calc(var(--py,0) * -4px),0)}
.stars.near{opacity:.85;transform:translate3d(calc(var(--px,0) * -26px),calc(var(--py,0) * -16px),0)}
.stars::before{content:"";position:absolute;inset:0;animation:drift 120s linear infinite;will-change:transform}
.stars.far::before{background-image:
    radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 140px 90px,#cfe2ff,transparent),
    radial-gradient(1px 1px at 260px 200px,#fff,transparent),radial-gradient(1px 1px at 80px 260px,#ffe9c9,transparent),
    radial-gradient(1px 1px at 330px 40px,#fff,transparent),radial-gradient(1px 1px at 200px 330px,#dbe8ff,transparent),
    radial-gradient(1px 1px at 300px 300px,#fff,transparent),radial-gradient(1px 1px at 40px 170px,#e8f0ff,transparent);
  background-size:380px 380px}
.stars.near::before{animation-duration:70s;background-image:
    radial-gradient(1.6px 1.6px at 60px 120px,#fff,transparent),radial-gradient(1.4px 1.4px at 390px 40px,#d6e6ff,transparent),
    radial-gradient(2px 2px at 250px 380px,#fff,transparent),radial-gradient(1.4px 1.4px at 470px 260px,#ffeccc,transparent);
  background-size:540px 540px}
@media (orientation:portrait){.stars{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 20%,transparent 36%);mask-image:linear-gradient(180deg,#000 0,#000 20%,transparent 36%)}}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-380px,95px,0)}}

/* faint scan line */
.scan{position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;opacity:.5;
  background:linear-gradient(180deg,transparent,rgba(140,192,255,.035) 70%,rgba(170,210,255,.09) 99%,transparent);
  animation:scan 11s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
@keyframes scan{0%{transform:translateY(-130px)}70%,100%{transform:translateY(calc(var(--vh) + 10px))}}

/* readability shading */
.shade{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 70% at 6% 40%,rgba(2,4,9,.62),transparent 70%),
    linear-gradient(180deg,rgba(2,4,9,.25),transparent 22%,transparent 72%,rgba(2,4,9,.55)),
    radial-gradient(ellipse 120% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.45))}

/* copy */
.copy{position:absolute;z-index:2;
  left:max(env(safe-area-inset-left),clamp(24px,6.5vw,104px));
  top:clamp(28px,24vh,260px);
  max-width:min(30rem,40vw)}
.label{display:flex;align-items:center;gap:.6em;font-family:"Space Grotesk",sans-serif;font-weight:500;font-size:clamp(11px,.3vw + 8px,15px);letter-spacing:.32em;color:var(--blue);margin-bottom:clamp(14px,2.4vh,22px)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px 1px rgba(255,170,80,.7);animation:soft 2.4s ease-in-out infinite}
@keyframes soft{0%,100%{opacity:1}50%{opacity:.3}}
h1{font-family:"Space Grotesk",sans-serif;font-weight:400;font-size:clamp(26px,1.4vw + 16px,48px);line-height:1.1;letter-spacing:-.01em;color:#f3f6fb;text-shadow:0 1px 18px rgba(0,0,0,.55)}
.sub{margin-top:.75em;font-size:clamp(14px,.4vw + 11.5px,20px);line-height:1.55;font-weight:350;color:var(--muted);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.progress{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:clamp(20px,3.4vh,34px)}
.track{position:relative;display:block;width:clamp(120px,12vw,180px);height:2px;background:rgba(140,192,255,.18);overflow:hidden;border-radius:2px}
.run{position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(90deg,transparent,var(--blue),#fff);animation:run 3.8s cubic-bezier(.6,0,.4,1) infinite}
@keyframes run{from{transform:translateX(-110%)}to{transform:translateX(280%)}}
.ptext{font-family:"Space Grotesk",sans-serif;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(169,180,198,.85);text-shadow:0 1px 8px rgba(0,0,0,.8)}

/* portrait phones / tablets: text sits in the dark sky above the yard */
@media (orientation:portrait){
  .copy{top:auto;bottom:auto;top:max(calc(env(safe-area-inset-top) + 28px),6.5vh);left:max(env(safe-area-inset-left),7vw);right:7vw;max-width:none}
  .shade{background:
    linear-gradient(180deg,rgba(2,4,9,.7) 0,rgba(2,4,9,.35) 22%,transparent 34%,transparent 78%,rgba(2,4,9,.5)),
    radial-gradient(ellipse 120% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.4))}
}
/* short landscape (phones on their side) */
@media (orientation:landscape) and (max-height:520px){
  .copy{top:max(calc(env(safe-area-inset-top) + 18px),9vh);left:max(calc(env(safe-area-inset-left) + 8px),5vw);max-width:40vw}
  .track{width:96px}
  h1{font-size:24px}.sub{font-size:13.5px;margin-top:.5em}.label{margin-bottom:10px}.progress{margin-top:14px}
  .shade{background:radial-gradient(ellipse 60% 80% at 0% 25%,rgba(2,4,9,.7),transparent 70%),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.45))}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .zoom{transform:scale(1.02)}.par{transform:scale(1.02)}
  .nav,.dot{opacity:1}.lt{opacity:.75}.glow{opacity:.6}
  .weld,.spk,.flare,.scan{display:none}
  .beam{transform:rotate(var(--a0));opacity:.35}
  .run{transform:translateX(60%)}
}
.stars.near::before{animation-name:drift2}
@keyframes drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(-540px,135px,0)}}