/* ============================================================
   Fastlane Automations — Advanced Motion System
   Additive layer on top of style.css. Nothing here overrides
   brand colors/type — it only adds animated visual systems.
   All heavy motion respects prefers-reduced-motion (see bottom).
   ============================================================ */

/* ---------- Shared node / packet language ---------- */
:root{
  --motion-fast: 1.6s;
  --motion-med: 2.4s;
  --motion-slow: 3.6s;
}

/* ================================================================
   1. HERO — animated automation network
   ================================================================ */
.hero-network{
  position:relative;
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  border:1px solid var(--border);
  border-radius:14px;
  padding:clamp(14px,2vw,26px);
  overflow:hidden;
}
.hero-network::before{
  content:'';
  position:absolute; inset:-20%;
  background:radial-gradient(420px 320px at 30% 20%, rgba(255,151,54,0.16), transparent 65%),
             radial-gradient(360px 280px at 80% 80%, rgba(255,61,31,0.10), transparent 65%);
  animation:hn-bg-drift 16s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes hn-bg-drift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(4%,-3%) scale(1.06); }
}
.hn-svg{ width:100%; height:auto; display:block; position:relative; z-index:1; }

.hn-path{
  fill:none;
  stroke:url(#hnGrad);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:5 7;
  opacity:0.55;
  animation:diag-dash 1.7s linear infinite;
}
.hn-path.out{ animation-duration:1.4s; opacity:0.5; }
.hn-path.in3{ animation-delay:.3s; }

.hn-node{ fill:var(--muted-2); }
.hn-node-in{ animation:hn-node-blink 3.2s ease-in-out infinite; }
.hn-node-in:nth-of-type(2){ animation-delay:.5s; }
.hn-node-in:nth-of-type(3){ animation-delay:1s; }
.hn-node-out{ fill:var(--orange-1); animation:hn-node-blink 2.6s ease-in-out infinite; }
.hn-node-out:nth-of-type(2){ animation-delay:.4s; }
.hn-node-out:nth-of-type(3){ animation-delay:.8s; }
.hn-node-out:nth-of-type(4){ animation-delay:1.2s; }
@keyframes hn-node-blink{
  0%,100%{ opacity:0.55; }
  50%{ opacity:1; }
}

.hn-label{
  font-family:var(--font-head);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:0.09em;
  fill:var(--muted-2);
}
.hn-label.out{ fill:var(--orange-1); }

.hn-ring{
  fill:none;
  stroke:var(--orange-1);
  stroke-width:1.4;
  opacity:0.55;
  transform-origin:250px 180px;
  animation:diag-pulse-ring 2.8s ease-out infinite;
}
.hn-ring-2{ animation-delay:1.4s; }
.hn-core{
  fill:rgba(255,90,31,0.12);
  stroke:url(#hnGrad);
  stroke-width:2;
}
.hn-core-label{
  font-family:var(--font-head);
  font-size:13px;
  font-weight:700;
  fill:var(--orange-1);
  letter-spacing:0.04em;
}

.hn-packet{
  fill:var(--orange-1);
  filter:drop-shadow(0 0 4px rgba(255,151,54,0.85));
}

@media (max-width:960px){
  .hn-only-desktop{ display:none; }
}

.hero-status{
  display:flex; align-items:center; gap:9px;
  margin-top:14px;
  font-family:var(--font-head);
  font-size:0.82rem;
  color:var(--muted);
}
.hs-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--orange-1);
  box-shadow:0 0 0 0 rgba(255,151,54,0.6);
  animation:hs-dot-pulse 1.8s ease-out infinite;
  flex-shrink:0;
}
@keyframes hs-dot-pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,151,54,0.55); }
  70%{ box-shadow:0 0 0 8px rgba(255,151,54,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,151,54,0); }
}
.hs-cycle{ color:var(--off-white); transition:opacity .25s ease; }
.hs-cycle.swap{ opacity:0; }

/* Word-reveal hero headline */
.hero-copy h1 .word{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  filter:blur(3px);
  animation:word-reveal .7s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes word-reveal{
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

/* ================================================================
   2. AUTOMATION FLOW VISUALIZATION (sequential, scroll-triggered)
   ================================================================ */
.flow-viz{ display:flex; align-items:flex-start; gap:0; flex-wrap:nowrap; }
.fv-step{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; width:150px; flex-shrink:0;
  opacity:0.4;
  transition:opacity .4s ease;
}
.fv-step.active{ opacity:1; }
.fv-dot{
  position:relative;
  width:16px; height:16px; border-radius:50%;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.fv-step.active .fv-dot{
  background:var(--gradient-orange);
  border-color:transparent;
  box-shadow:0 0 0 5px rgba(255,151,54,0.14);
}
.fv-step.active .fv-dot::after{
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  border:1px solid var(--orange-1);
  opacity:0.6;
  animation:diag-pulse-ring 1.8s ease-out infinite;
}
.fv-text{ font-family:var(--font-head); font-size:0.82rem; color:var(--muted); transition:color .35s ease; }
.fv-step.active .fv-text{ color:var(--off-white); }
.fv-step.result .fv-dot{ }
.fv-step.result.active .fv-text{ color:var(--orange-1); }

.fv-connector{
  position:relative;
  flex:1;
  min-width:24px;
  height:2px;
  background:var(--border);
  margin-top:7px;
  overflow:visible;
}
.fv-connector::before{
  content:''; position:absolute; inset:0 auto 0 0; width:0%;
  background:var(--gradient-orange);
}
.fv-connector.run::before{ animation:fv-fill 0.9s ease forwards; }
.fv-connector::after{
  content:''; position:absolute; top:50%; left:0;
  width:8px; height:8px; margin-top:-4px; border-radius:50%;
  background:var(--gradient-orange); opacity:0;
  box-shadow:0 0 8px rgba(255,151,54,0.85);
}
.fv-connector.run::after{ animation:fv-travel 0.9s ease forwards; }
@keyframes fv-fill{ to{ width:100%; } }
@keyframes fv-travel{
  0%{ left:0%; opacity:1; }
  85%{ opacity:1; }
  100%{ left:100%; opacity:0; }
}

@media (max-width:860px){
  .flow-viz{ flex-direction:column; align-items:flex-start; gap:0; }
  .fv-step{ flex-direction:row; width:auto; text-align:left; gap:12px; padding:10px 0; }
  .fv-connector{ width:2px; height:26px; margin:0 0 0 7px; flex:none; }
  .fv-connector::before{ inset:auto 0 0 0; height:0%; width:100%; }
  .fv-connector.run::before{ animation:fv-fill-v 0.7s ease forwards; }
  .fv-connector::after{ top:0; left:50%; margin-left:-4px; margin-top:0; }
  .fv-connector.run::after{ animation:fv-travel-v 0.7s ease forwards; }
  @keyframes fv-fill-v{ to{ height:100%; } }
  @keyframes fv-travel-v{
    0%{ top:0%; opacity:1; }
    85%{ opacity:1; }
    100%{ top:100%; opacity:0; }
  }
}

/* ================================================================
   3. INTERACTIVE SYSTEM NETWORK
   ================================================================ */
.sysnet-wrap{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  padding:clamp(16px,3vw,36px);
  position:relative;
  overflow:hidden;
}
.sysnet-wrap::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(480px 320px at 50% 50%, rgba(255,90,31,0.08), transparent 70%);
  pointer-events:none;
}
.sysnet-svg{ width:100%; max-width:560px; height:auto; display:block; margin:0 auto; position:relative; z-index:1; }

.sn-spoke{
  fill:none; stroke:var(--border); stroke-width:1.4;
  opacity:0; transition:opacity .5s ease;
}
.sysnet-in .sn-spoke{ opacity:0.5; }
.sysnet-in .sn-spoke.flow{
  stroke:url(#snGrad);
  stroke-dasharray:5 7;
  animation:diag-dash 1.8s linear infinite;
  opacity:0.8;
}
.sn-spoke:nth-of-type(1){ transition-delay:.05s; }
.sn-spoke:nth-of-type(2){ transition-delay:.15s; }
.sn-spoke:nth-of-type(3){ transition-delay:.25s; }
.sn-spoke:nth-of-type(4){ transition-delay:.35s; }
.sn-spoke:nth-of-type(5){ transition-delay:.45s; }
.sn-spoke:nth-of-type(6){ transition-delay:.55s; }
.sn-spoke:nth-of-type(7){ transition-delay:.65s; }

.sn-node{
  opacity:0; transform:scale(0.6); transform-box:fill-box; transform-origin:center;
  transition:opacity .45s ease, transform .45s ease;
}
.sysnet-in .sn-node{ opacity:1; transform:scale(1); }
.sn-node:nth-of-type(1){ transition-delay:.15s; }
.sn-node:nth-of-type(2){ transition-delay:.25s; }
.sn-node:nth-of-type(3){ transition-delay:.35s; }
.sn-node:nth-of-type(4){ transition-delay:.45s; }
.sn-node:nth-of-type(5){ transition-delay:.55s; }
.sn-node:nth-of-type(6){ transition-delay:.65s; }
.sn-node:nth-of-type(7){ transition-delay:.75s; }

.sn-node-circle{ fill:var(--panel); stroke:var(--border); stroke-width:1.4; }
.sn-node.is-active .sn-node-circle{ stroke:url(#snGrad); stroke-width:2; }
.sn-node-label{
  font-family:var(--font-head); font-size:10.5px; font-weight:600;
  letter-spacing:0.05em; fill:var(--muted); text-anchor:middle;
  transition:fill .35s ease;
}
.sn-node.is-active .sn-node-label{ fill:var(--orange-1); }

.sn-hub-ring{
  fill:none; stroke:var(--orange-1); stroke-width:1.4; opacity:0;
  transform-origin:center; transform-box:fill-box;
}
.sysnet-in .sn-hub-ring{ opacity:0.55; animation:diag-pulse-ring 2.6s ease-out infinite; }
.sysnet-in .sn-hub-ring.r2{ animation-delay:1.3s; }
.sn-hub-core{ fill:rgba(255,90,31,0.1); stroke:url(#snGrad); stroke-width:2; }
.sn-hub-label{ font-family:var(--font-head); font-size:12px; font-weight:700; fill:var(--orange-1); text-anchor:middle; letter-spacing:0.04em; }

/* ================================================================
   4. BEFORE / AFTER — mini transformation diagrams
   ================================================================ */
.compare-visual{ margin-bottom:22px; height:56px; position:relative; z-index:1; }
.compare-visual svg{ width:100%; height:100%; display:block; }

.bv-node{ fill:var(--muted-2); }
.bv-line{ stroke:var(--border); stroke-width:1.4; fill:none; stroke-dasharray:3 4; }
.bv-glitch{ animation:bv-glitch 2.6s steps(1) infinite; }
@keyframes bv-glitch{
  0%,80%,100%{ transform:translate(0,0); }
  82%{ transform:translate(-1.5px,1px); }
  84%{ transform:translate(1px,-1px); }
  86%{ transform:translate(0,0); }
}
.bv-stall{ fill:#FF6B57; animation:bv-stall-blink 1.6s ease-in-out infinite; }
@keyframes bv-stall-blink{ 0%,100%{ opacity:0.9; } 50%{ opacity:0.25; } }

.av-node{ fill:var(--orange-1); }
.av-line{
  stroke:url(#avGrad); stroke-width:1.8; fill:none;
  stroke-dasharray:5 6; animation:diag-dash 1.3s linear infinite;
}
.av-packet{ fill:var(--orange-1); filter:drop-shadow(0 0 3px rgba(255,151,54,0.9)); }

/* ================================================================
   5. AI PROCESSING NODE (reusable)
   ================================================================ */
.ai-node{ width:110px; height:110px; }
.ai-node svg{ width:100%; height:100%; display:block; }
.an-ring{ fill:none; stroke:var(--orange-1); stroke-width:1.4; opacity:0.55; transform-origin:60px 60px; animation:diag-pulse-ring 2.8s ease-out infinite; }
.an-ring-2{ animation-delay:1.4s; }
.an-core{ fill:rgba(255,90,31,0.1); stroke:url(#anGrad); stroke-width:2; }
.an-label{ font-family:var(--font-head); font-size:13px; font-weight:700; fill:var(--orange-1); text-anchor:middle; letter-spacing:0.04em; }

/* ================================================================
   6. HIGH-END INTERACTIVE CARDS (cursor glow)
   ================================================================ */
.panel{ position:relative; isolation:isolate; }
.panel.glow-ready::before{
  content:'';
  position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,151,54,0.14), transparent 62%);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none; z-index:0;
}
.panel.glow-ready:hover::before{ opacity:1; }
.panel > *{ position:relative; z-index:1; }

/* ================================================================
   7. BUTTON MICRO-MOTION
   ================================================================ */
.btn-primary{
  background-size:180% 100%;
  background-position:0% 0%;
  transition:background-position .5s ease, transform .18s ease, box-shadow .18s ease;
}
.btn-primary:hover{ background-position:100% 0%; }
.btn-secondary{ transition:transform .18s ease, border-color .18s ease, color .18s ease; }

/* ================================================================
   8. TYPOGRAPHY MOTION — section heading accent line
   ================================================================ */
.section-head h2::after{
  content:'';
  display:block;
  width:0; height:2px;
  margin-top:14px;
  background:var(--gradient-orange);
  transition:width .9s cubic-bezier(.2,.7,.2,1) .15s;
}
.reveal.in .section-head h2::after{ width:64px; }

/* ================================================================
   9. SERVICES — mini flow diagrams
   ================================================================ */
.mini-flow{ margin-top:26px; display:flex; flex-direction:column; }
.mf-step{
  display:flex; align-items:center; gap:10px;
  opacity:0.4; transition:opacity .4s ease;
}
.mf-step.active{ opacity:1; }
.mf-dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:var(--surface-2); border:1.5px solid var(--border);
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mf-step.active .mf-dot{ background:var(--gradient-orange); border-color:transparent; box-shadow:0 0 0 4px rgba(255,151,54,0.14); }
.mf-label{ font-family:var(--font-head); font-size:0.78rem; color:var(--muted); transition:color .3s ease; }
.mf-step.active .mf-label{ color:var(--off-white); }
.mf-step:last-child .mf-label{ transition-delay:.1s; }
.mf-step.active:last-child .mf-label{ color:var(--orange-1); }
.mf-connector{ width:2px; height:20px; margin-left:3.25px; background:var(--border); position:relative; overflow:visible; }
.mf-connector::before{ content:''; position:absolute; inset:auto 0 0 0; height:0%; width:100%; background:var(--gradient-orange); }
.mf-connector.run::before{ animation:fv-fill-v 0.6s ease forwards; }

/* ================================================================
   10. SOLUTIONS — animated usecase flow arrows
   ================================================================ */
.reveal.in .usecase-flow .arrow{
  display:inline-block;
  animation:arrow-pulse 1.7s ease-in-out infinite;
}
@keyframes arrow-pulse{
  0%,100%{ transform:translateX(0); opacity:0.55; }
  50%{ transform:translateX(4px); opacity:1; }
}
.reveal.in .usecase-flow .stage.result{ animation:result-glow 2.4s ease-in-out infinite; }
@keyframes result-glow{
  0%,100%{ text-shadow:0 0 0 rgba(255,151,54,0); }
  50%{ text-shadow:0 0 10px rgba(255,151,54,0.45); }
}

/* ================================================================
   11. HOW WE WORK — scroll-progressing timeline
   ================================================================ */
.work-steps.wt-enhanced{ position:relative; }
.work-steps.wt-enhanced::before{
  content:''; position:absolute; left:45px; top:6px; bottom:6px; width:2px;
  background:var(--border);
}
.wt-progress{
  position:absolute; left:45px; top:6px; width:2px; height:0%;
  background:var(--gradient-orange);
  box-shadow:0 0 8px rgba(255,151,54,0.5);
  transition:height .15s linear;
}
.work-step .step-num{
  position:relative; z-index:1; background:var(--black);
  transition:border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.work-step.active .step-num{
  border-color:var(--orange-1); color:var(--orange-1);
  box-shadow:0 0 0 5px rgba(255,151,54,0.12);
}
@media (max-width:640px){
  .work-steps.wt-enhanced::before, .wt-progress{ display:none; }
}

/* ================================================================
   12. AMBIENT BACKGROUND MOTION (contact + reused radial glows)
   ================================================================ */
.ambient-bg{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.ambient-bg::before, .ambient-bg::after{
  content:'';
  position:absolute;
  width:60%; height:60%;
  border-radius:50%;
  filter:blur(60px);
  opacity:0.14;
}
.ambient-bg::before{
  top:-10%; left:-10%;
  background:radial-gradient(circle, var(--orange-1), transparent 70%);
  animation:amb-drift-1 22s ease-in-out infinite alternate;
}
.ambient-bg::after{
  bottom:-15%; right:-10%;
  background:radial-gradient(circle, var(--orange-3), transparent 70%);
  animation:amb-drift-2 26s ease-in-out infinite alternate;
}
@keyframes amb-drift-1{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(6%,8%); }
}
@keyframes amb-drift-2{
  0%{ transform:translate(0,0); }
  100%{ transform:translate(-7%,-6%); }
}
.ambient-bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,151,54,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,151,54,0.05) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(60% 60% at 50% 40%, #000 40%, transparent 90%);
  -webkit-mask-image:radial-gradient(60% 60% at 50% 40%, #000 40%, transparent 90%);
  animation:grid-drift 30s linear infinite;
}
@keyframes grid-drift{
  0%{ background-position:0 0, 0 0; }
  100%{ background-position:48px 48px, 48px 48px; }
}

/* Slow ambient movement on existing radial-gradient glows already
   defined in style.css — additive animation only, no color changes */
.cta-banner::before{ animation:amb-pulse 9s ease-in-out infinite; }
.diagram-wrap::before{ animation:amb-pulse 10s ease-in-out infinite; }
.compare-col.after::before{ animation:amb-pulse 8s ease-in-out infinite; }
@keyframes amb-pulse{
  0%,100%{ opacity:0.85; }
  50%{ opacity:1.15; }
}

/* ================================================================
   13. GLOBAL CURSOR MOTION — ambient spotlight + magnetic buttons
       + panel tilt (desktop / fine-pointer only, added via JS)
   ================================================================ */
.cursor-spotlight{
  position:fixed; top:0; left:0;
  width:560px; height:560px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,151,54,0.16), rgba(255,90,31,0.05) 42%, transparent 70%);
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  z-index:5;
  opacity:0;
  transition:opacity .5s ease;
  mix-blend-mode:screen;
  will-change:transform;
}
.cursor-spotlight.active{ opacity:1; }

.cursor-ring{
  position:fixed; top:0; left:0;
  width:34px; height:34px;
  margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1.4px solid rgba(255,151,54,0.65);
  pointer-events:none;
  z-index:60;
  opacity:0;
  transform:translate3d(0,0,0) scale(1);
  transition:opacity .3s ease, transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s ease, background .25s ease;
  will-change:transform;
}
.cursor-ring.active{ opacity:1; }
.cursor-ring.hovering{
  transform:translate3d(0,0,0) scale(1.7);
  background:rgba(255,151,54,0.08);
  border-color:rgba(255,151,54,0.9);
}

/* Magnetic pull — JS sets --btx/--bty; a no-JS/touch state is a harmless 0px no-op */
.btn{
  transform:translate(var(--btx,0px), var(--bty,0px));
}
.btn-primary:hover{
  transform:translateY(-2px) translate(var(--btx,0px), var(--bty,0px));
}
.btn:active{
  transform:translate(var(--btx,0px), var(--bty,0px)) scale(0.96);
}

/* Panel tilt — combined with the existing translateY lift from style.css */
.panel.glow-ready{ transition:transform .35s cubic-bezier(.2,.8,.2,1), border-left-color .25s ease, box-shadow .35s ease; }
.panel.glow-ready:hover{
  transform:translateY(-3px) perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}

@media (max-width:960px){
  .cursor-spotlight, .cursor-ring{ display:none; }
}

/* ================================================================
   14. SERVICES / SOLUTIONS — ambient automation-network header
   ================================================================ */
.page-hero-network{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0.55;
  z-index:0;
}
.page-hero-network svg{ width:100%; height:100%; }
.phn-path{
  fill:none; stroke:url(#phnGrad); stroke-width:1.3;
  stroke-dasharray:4 7; opacity:0.45;
  animation:diag-dash 2.2s linear infinite;
}
.phn-node{ fill:var(--orange-1); opacity:0.7; animation:hn-node-blink 3.4s ease-in-out infinite; }
.phn-node:nth-of-type(2n){ animation-delay:.6s; }
.phn-node:nth-of-type(3n){ animation-delay:1.2s; }
.phn-packet{ fill:var(--orange-1); filter:drop-shadow(0 0 3px rgba(255,151,54,0.8)); }

/* Re-triggerable mini-flow hover state on services blocks */
.service-block-head{ cursor:default; }
.mini-flow.replaying .mf-step{ transition:opacity .25s ease; }

@media (prefers-reduced-motion: reduce){
  .cursor-spotlight, .cursor-ring{ display:none; }
  .btn{ transform:none !important; }
  .panel.glow-ready:hover{ transform:translateY(-3px); }
  .phn-path, .phn-node{ animation:none !important; }

  .hero-network::before,
  .hn-path, .hn-node-in, .hn-node-out, .hn-ring,
  .hs-dot, .fv-connector.run::before, .fv-connector.run::after,
  .sn-spoke.flow, .sn-hub-ring, .bv-glitch, .bv-stall,
  .av-line, .an-ring, .ambient-bg::before, .ambient-bg::after,
  .ambient-bg-grid, .cta-banner::before, .diagram-wrap::before,
  .compare-col.after::before, .reveal.in .usecase-flow .arrow,
  .reveal.in .usecase-flow .stage.result{
    animation:none !important;
  }
  .hero-copy h1 .word{ opacity:1; transform:none; filter:none; animation:none; }
  .fv-step, .mf-step{ opacity:1; }
  .sn-spoke, .sn-node{ opacity:1; transform:none; }
}