/* BitNautic home page: one night-sea scene from top to bottom, with a chain of blocks drifting behind it */

/* ---------- the scene behind everything ---------- */
body.home{background:var(--navy)}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.home .hero{background:radial-gradient(70% 60% at 72% 46%,rgba(24,48,128,.55) 0%,rgba(11,20,54,.25) 46%,transparent 74%)}
.home .hero::after{display:none}
.home .sec,.home .sec.dark{background:none;color:#fff}
.home .sec::before{content:"";position:absolute;inset:0;pointer-events:none}
.home #about::before{background:radial-gradient(60% 50% at 88% 30%,rgba(47,125,246,.16),transparent 70%)}
.home #reviews::before{background:linear-gradient(transparent,rgba(6,11,31,.55) 18%,rgba(6,11,31,.55) 82%,transparent),radial-gradient(50% 60% at 10% 50%,rgba(255,122,26,.07),transparent 70%)}
.home #contact::before{background:radial-gradient(70% 70% at 16% 20%,rgba(24,48,128,.6),transparent 72%)}
.home footer{position:relative;z-index:4}
.home #route .base{stroke:rgba(156,192,255,.26)}
.home #route .wp{fill:var(--navy)}
.home #route .wp.on{fill:var(--buoy)}

/* the ship that sails the route */
.home #boat{fill:none}
#boat .hull{fill:#16286a;stroke:var(--buoy);stroke-width:1.4}
#boat .wake{fill:none;stroke:rgba(156,192,255,.45);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:3 5;animation:wake 1.1s linear infinite}
@keyframes wake{to{stroke-dashoffset:16}}
/* each port of call stamps its block as the ship passes */
.stamp{opacity:0;transform-box:fill-box;transform-origin:left center}
.stamp.in{animation:stamp .7s var(--ease) forwards}
.stamp rect{fill:rgba(255,122,26,.08);stroke:var(--buoy);stroke-width:1}
.stamp text{font:500 8.5px var(--mono);letter-spacing:.16em;fill:var(--buoy)}
.stamp path{fill:none;stroke:var(--buoy);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@keyframes stamp{0%{opacity:0;transform:scale(1.7) rotate(-9deg)}55%{opacity:1;transform:scale(.94) rotate(1deg)}100%{opacity:.9;transform:scale(1) rotate(0)}}

/* ---------- text on the dark scene ---------- */
.home .sol-text p,.home .about-grid p{color:#b9c6e8}
.home .about-grid h2{color:#fff}
.home .hero h1 .sw{display:inline-block;white-space:nowrap}
.home .hero h1 .sw b{font-weight:inherit;font-family:var(--mono);color:var(--sky);font-size:.72em;letter-spacing:-.05em;opacity:.85}
body.home:not(.no-js) .hero h1:not(.go){visibility:hidden}

/* ---------- ticker ---------- */
.ticker{position:relative;z-index:1;margin-top:-64px;padding:18px 0 22px;border-top:1px solid rgba(156,192,255,.12);border-bottom:1px solid rgba(156,192,255,.12);background:linear-gradient(90deg,rgba(6,11,31,.85),rgba(11,20,54,.55) 50%,rgba(6,11,31,.85));overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.trow{display:flex;gap:0;white-space:nowrap;will-change:transform;font-family:var(--mono);font-size:12px;color:#8fa0cc;line-height:1}
.trow + .trow{margin-top:14px;opacity:.6}
.trow span{display:inline-flex;align-items:center;gap:14px;padding:0 26px;border-right:1px solid rgba(156,192,255,.12)}
.trow b{font-weight:500;color:#dbe5ff}
.trow i{font-style:normal;color:#6f7da6}
.trow em{font-style:normal;color:var(--sky)}
.trow u{text-decoration:none;display:inline-flex;align-items:center;gap:7px;color:#7fe0a9;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.trow u::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px rgba(127,224,169,.16)}
.trow u.t{color:var(--buoy)}.trow u.t::before{box-shadow:0 0 0 3px rgba(255,122,26,.16);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.25}}
.tnote{position:absolute;right:9%;bottom:3px;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#56648f}

/* ---------- solutions: one pinned scene, three boards that swap as you scroll ---------- */
.solrail{display:none}
.pin-on .solutions{height:360vh;padding:0}
.pin-on .solpin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.pin-on .solpin .wrap{width:100%}
.pin-on .solstage{position:relative;height:min(60vh,540px);margin-top:26px}
.pin-on .sol{position:absolute;inset:0;padding:0;pointer-events:none;align-items:center}
.pin-on .sol.act{pointer-events:auto}
.pin-on .sol .sol-text{order:0;will-change:transform,opacity}
.pin-on .scene{will-change:transform,opacity;transform-origin:50% 60%}
.pin-on .board{width:min(100%,calc(min(60vh,540px)*1.44));margin-left:auto}
.pin-on .solrail{display:flex;gap:14px;margin-top:34px}
.solrail button{flex:1;text-align:left;background:none;border:0;cursor:pointer;padding:12px 0 0;position:relative;color:#7f8fbd;font:500 14px 'Jost',sans-serif;display:flex;gap:12px;align-items:baseline;transition:color .3s}
.solrail button small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:#56648f;transition:color .3s}
.solrail button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:rgba(156,192,255,.16)}
.solrail button::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--buoy);transform:scaleX(var(--p,0));transform-origin:left}
.solrail button.on,.solrail button:hover{color:#fff}.solrail button.on small{color:var(--buoy)}

/* ---------- reviews: cards that lean to the cursor ---------- */
.home .rev-grid{perspective:1400px}
.home .rev{background:linear-gradient(155deg,#132257,#0b1436 58%,#080e29);border:1px solid rgba(156,192,255,.16);box-shadow:0 34px 80px rgba(2,5,18,.55);overflow:hidden;transform-style:preserve-3d;transition:transform .6s var(--ease),border-color .4s;will-change:transform}
.home .rev.live{transition:transform .12s linear,border-color .4s}
.home .rev:hover{border-color:rgba(156,192,255,.38)}
.home .rev::before{color:rgba(156,192,255,.1)}
.home .rev::after{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx,50%) var(--my,-30%),rgba(120,165,255,.2),transparent 68%);opacity:0;transition:opacity .4s;pointer-events:none}
.home .rev:hover::after{opacity:1}
.home .rev p{color:#dbe5ff;position:relative}
.home .who{position:relative}
.home .who b{color:#fff}
.home .who span{color:var(--buoy)}
.home .who img{box-shadow:0 0 0 3px #0b1436,0 0 0 5px rgba(156,192,255,.5)}

/* ---------- buttons lean to the cursor ---------- */
.home .btn{transition:transform .35s var(--ease),background .25s,color .25s,translate .5s var(--ease)}
.home .btn.mag{transition:transform .35s var(--ease),background .25s,color .25s,translate .12s linear}

@media (max-width:1000px){
  .ticker{margin-top:-30px}
  .tnote{right:16px}
  #boat .ship{transform:scale(.62)}
}
@media (prefers-reduced-motion:reduce){
  #boat .wake,.trow u.t::before{animation:none}
  .stamp{opacity:.9}
}