/* ==========================================================================
   EasternLoop — animation & technical-visual system
   Reusable primitives layered on top of style.css. Nothing here overrides
   the existing palette; everything reads var(--brass) / var(--steel) etc.
   ========================================================================== */

:root{
  --grid-line: rgba(91,147,186,.10);
  --grid-line-soft: rgba(91,147,186,.05);
  --node-fill: var(--steel);
  --node-glow: rgba(200,164,92,.55);
}

/* ---------------------------------------------------------------------- */
/* Text reveal: headings split into per-line spans, staggered on enter    */
/* ---------------------------------------------------------------------- */
.reveal-lines{ overflow:visible }
.reveal-lines .rl{
  display:block; overflow:hidden;
}
.reveal-lines .rl span{
  display:block; opacity:0; transform:translateY(60%);
  transition:opacity .7s cubic-bezier(.16,.84,.32,1), transform .7s cubic-bezier(.16,.84,.32,1);
}
.reveal-lines.in .rl:nth-child(1) span{transition-delay:.02s}
.reveal-lines.in .rl:nth-child(2) span{transition-delay:.14s}
.reveal-lines.in .rl:nth-child(3) span{transition-delay:.26s}
.reveal-lines.in .rl span{ opacity:1; transform:none }

/* ---------------------------------------------------------------------- */
/* Blueprint grid — slow drifting technical backdrop                      */
/* ---------------------------------------------------------------------- */
.bp-grid{
  position:absolute; inset:-8%; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  animation:gridDrift 46s linear infinite;
  will-change:background-position;
}
.bp-grid.fine{background-size:26px 26px; opacity:.6}
@media (max-width:640px){
  .bp-grid, .bp-grid.fine{inset:0; width:100%; max-width:100%; left:0; right:0;}
  .bp-contour{inset:0; width:100%; max-width:100%; left:0; right:0;}
  .bp-contour::before, .bp-contour::after{
    width:100%; max-width:100%; left:50%; top:120%; transform:translate(-50%,-50%) scale(1);
  }
}
@keyframes gridDrift{ from{background-position:0 0} to{background-position:280px 280px} }

/* contour rings used behind CTA panels */
.bp-contour{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.bp-contour::before, .bp-contour::after{
  content:""; position:absolute; border-radius:50%; border:1px solid var(--grid-line-soft);
}
.bp-contour::before{ width:100%; aspect-ratio:1; left:50%; top:120%; transform:translate(-50%,-50%) scale(1.2); transform-origin:center; animation:contourDrift 30s ease-in-out infinite alternate }
.bp-contour::after{ width:80%; aspect-ratio:1; left:50%; top:120%; transform:translate(-50%,-50%) scale(1.05); transform-origin:center; animation:contourDrift 30s ease-in-out infinite alternate reverse }
@keyframes contourDrift{ from{ top:130%; opacity:.5 } to{ top:105%; opacity:.9 } }

/* small pulsing nodes shared by hero + CTA backdrops */
.eng-node{ position:absolute; z-index:1; pointer-events:none }
.eng-node i{
  position:absolute; inset:0; margin:auto; width:6px; height:6px; border-radius:50%;
  background:var(--brass); box-shadow:0 0 8px 1px var(--node-glow);
}
.eng-node::before{
  content:""; position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--brass-dim);
  animation:nodePing 3.2s ease-out infinite;
}
@keyframes nodePing{
  0%{ transform:scale(.4); opacity:.9 }
  75%,100%{ transform:scale(1.9); opacity:0 }
}

/* ---------------------------------------------------------------------- */
/* SVG line-draw utility — stroke-dasharray reveal on enter                */
/* ---------------------------------------------------------------------- */
.draw-path{
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  transition: stroke-dashoffset 1.4s cubic-bezier(.16,.84,.32,1);
}
.in .draw-path, .draw-path.in{ stroke-dashoffset:0 }

/* gold energy pulse traveling along a path (dash-run trick, no offset-path dependency) */
.energy-path{
  fill:none; stroke:var(--brass-hi); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray: 26 900; opacity:.9;
  animation:energyRun 7s linear infinite;
  filter:drop-shadow(0 0 3px rgba(232,202,160,.7));
}
.loop-diagram .energy-path,
.loop-diagram .direction-arrows,
.loop-diagram .dir-arrow{
  display:none !important;
}
@keyframes energyRun{ from{ stroke-dashoffset:926 } to{ stroke-dashoffset:0 } }

/* rotating element (fans, dials) */
.rotate-slow{ animation:rotateSlow 9s linear infinite; transform-origin:center }
.rotate-slow.rev{ animation-direction:reverse }
@keyframes rotateSlow{ to{ transform:rotate(360deg) } }

/* soft blink (indicator lights, status dots) */
.blink{ animation:blink 2.6s ease-in-out infinite }
.blink.d2{ animation-delay:.5s } .blink.d3{ animation-delay:1s }
@keyframes blink{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

/* scanner sweep (maintenance illustration) */
.scan-sweep{ animation:scanSweep 4.5s ease-in-out infinite }
@keyframes scanSweep{ 0%,100%{ transform:translateY(-14px); opacity:.15 } 50%{ transform:translateY(14px); opacity:.85 } }

/* sequential fade for stacked labels (material supply illustration) */
.seq-in{ opacity:0; animation:seqIn .6s ease forwards }
.seq-in.s1{ animation-delay:.2s } .seq-in.s2{ animation-delay:.5s }
.seq-in.s3{ animation-delay:.8s } .seq-in.s4{ animation-delay:1.1s }
@keyframes seqIn{ to{ opacity:1 } }

/* pause continuous animation when off-screen */
.paused, .paused *{ animation-play-state:paused !important }

/* ---------------------------------------------------------------------- */
/* Technical illustration frame — shared chrome around every service SVG  */
/* ---------------------------------------------------------------------- */
.tech-frame{
  position:relative; border:1px solid var(--line); background:rgba(238,241,244,.015);
  padding:1px; overflow:hidden; aspect-ratio:4/3.1;
}
.tech-frame .frame-grid{ position:absolute; inset:0; z-index:0;
  background-image:linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size:22px 22px; opacity:.7;
}
.tech-frame svg{ position:relative; z-index:1; width:100%; height:100%; display:block }
.tech-frame .frame-tag{
  position:absolute; top:.9rem; left:1rem; z-index:2;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.13em; color:var(--faint);
}
.tech-frame .frame-ref{
  position:absolute; bottom:.9rem; right:1rem; z-index:2; text-align:right;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; color:var(--faint); line-height:1.6;
}
.tech-frame .frame-accent{
  position:absolute; left:0; top:0; width:2px; height:100%; z-index:2;
  background:linear-gradient(180deg, transparent, var(--brass) 40%, var(--brass) 60%, transparent);
  opacity:.7;
}
.tech-frame::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 40px rgba(200,164,92,.05);
}

/* ---------------------------------------------------------------------- */
/* Sector card visuals                                                    */
/* ---------------------------------------------------------------------- */
.sector-card{
  border:1px solid var(--line); background:rgba(238,241,244,.02); overflow:hidden;
  display:flex; flex-direction:column; transition:border-color .35s, transform .35s;
}
.sector-card:hover{ border-color:var(--brass-dim); transform:translateY(-3px) }
.sector-card .sc-visual{ position:relative; aspect-ratio:16/10.5; border-bottom:1px solid var(--line); overflow:hidden }
.sector-card .sc-visual svg{ position:relative; z-index:1; width:100%; height:100%; display:block }
.sector-card .sc-body{ padding:1.5rem 1.6rem 1.7rem; display:flex; flex-direction:column; gap:.7rem; flex:1 }
.sector-card h3{ font-size:1.15rem }
.sector-card p{ color:var(--muted); font-size:.9rem; flex:1 }
.sector-card .sc-arrow{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--brass); margin-top:.4rem;
}
.sector-card .sc-arrow svg{ width:12px; height:12px; transition:transform .3s }
.sector-card:hover .sc-arrow svg{ transform:translateX(4px) }
.sector-card .sc-line{
  stroke:var(--steel); stroke-width:1; fill:none; opacity:.75; transition:stroke .35s, opacity .35s;
}
.sector-card:hover .sc-line{ stroke:var(--brass-hi); opacity:1 }
.sc-drawable{
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
  opacity:.65;
}
.sector-card.sector-visible .sc-drawable{
  animation: sectorDrawLoop 3s cubic-bezier(.16,.84,.32,1) infinite;
  animation-delay: calc((var(--draw-index, 1) - 1) * 120ms);
  animation-fill-mode: both;
}
@keyframes sectorDrawLoop{
  0%, 18%{ stroke-dashoffset: var(--len, 400); opacity:.45; }
  38%, 56%{ stroke-dashoffset: 0; opacity:1; }
  100%{ stroke-dashoffset: var(--len, 400); opacity:.45; }
}
.sector-card.sector-visible .blink,
.sector-card.sector-visible .blink.d2,
.sector-card.sector-visible .blink.d3{
  animation-play-state:running;
}
@media (prefers-reduced-motion:reduce){
  .sc-drawable{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; animation:none !important; opacity:1 !important; }
}

/* ---------------------------------------------------------------------- */
/* Process rail (Assess -> Engineer -> Execute -> Verify)                 */
/* ---------------------------------------------------------------------- */
.process-rail{ position:relative; height:2px; background:var(--line); margin-bottom:2.6rem; overflow:visible }
.process-rail .fill{
  position:absolute; left:0; top:0; height:100%; width:0%;
  background:linear-gradient(90deg, var(--brass-dim), var(--brass-hi));
  transition:width 1.1s cubic-bezier(.16,.84,.32,1);
  box-shadow:0 0 8px rgba(232,202,160,.6);
}
.process-rail .tick{
  position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--ink); border:1px solid var(--steel-dim); transition:background .4s, border-color .4s, box-shadow .4s;
}
.process-rail .tick.active{ background:var(--brass); border-color:var(--brass-hi); box-shadow:0 0 10px rgba(232,202,160,.7) }
.step{ transition:opacity .5s, transform .5s }
.step:not(.active){ opacity:.55 }
.step.active h3{ color:var(--brass-hi) }
.step.active .num{ color:var(--brass-hi) }

/* ---------------------------------------------------------------------- */
/* Loop diagram (About page)                                              */
/* ---------------------------------------------------------------------- */
.loop-diagram{ position:relative }
.loop-diagram svg{ width:100%; height:auto; display:block }
.loop-node-label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; fill:var(--faint);
  transition:fill .5s;
}
.loop-node-label.active{ fill:var(--brass-hi) }
.loop-node-dot{ transition:fill .5s, r .5s; fill:var(--panel-2); stroke:var(--steel-dim); stroke-width:1 }
.loop-node-dot.active{ fill:var(--brass); stroke:var(--brass-hi) }

/* capability strip */
.cap-strip{
  display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:2.4rem; padding-top:2rem; border-top:1px solid var(--line);
}
.cap-strip .cap-item{ display:flex; align-items:center; gap:.7rem; font-size:.86rem; color:var(--muted) }
.cap-strip .cap-item svg{ width:18px; height:18px; flex:none; color:var(--brass) }

/* ---------------------------------------------------------------------- */
/* CTA technical backdrop                                                 */
/* ---------------------------------------------------------------------- */
.cta-tech-bg{ position:relative; overflow:hidden }
.cta-tech-bg > .wrap{ position:relative; z-index:2 }

/* ---------------------------------------------------------------------- */
/* Service tabs — sticky + active state                                   */
/* ---------------------------------------------------------------------- */
.jump a.active{ color:var(--brass-hi); border-color:var(--brass-dim); background:rgba(200,164,92,.06) }

/* ---------------------------------------------------------------------- */
/* Reduced motion + mobile simplification                                 */
/* ---------------------------------------------------------------------- */
@media (max-width:760px){
  .bp-grid{ animation-duration:80s }
  .energy-path{ animation-duration:10s }
}

@media (prefers-reduced-motion:reduce){
  .bp-grid, .bp-contour::before, .bp-contour::after, .eng-node::before,
  .energy-path, .rotate-slow, .blink, .scan-sweep{ animation:none !important }
  .reveal-lines .rl span{ opacity:1; transform:none; transition:none }
  .draw-path{ stroke-dashoffset:0; transition:none }
  .process-rail .fill{ transition:none }
}