/* ==========================================================================
   Ironhawk Group — Motion Concept layer
   Loaded after styles.css. Every effect is disabled under
   prefers-reduced-motion by the global kill rule in styles.css; the JS
   layer checks the same media query before running canvas/JS effects.
   ========================================================================== */

/* ----- Scroll progress bar ----- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--blue-deep), var(--blue-hi));
  z-index:300; pointer-events:none;
  box-shadow:0 0 12px rgba(42,140,255,.8);
}

/* ----- Header shrink on scroll ----- */
.brand img{ transition:height .3s ease; }
.site-header.scrolled .brand img.brand-horizontal{ height:46px; }
.site-header.scrolled .brand img.brand-icon{ height:42px; }

/* ----- Hero: animated grid pan + network canvas + scanline shimmer ----- */
@keyframes gridPan{
  from{ background-position:0 0, 0 0; }
  to{ background-position:56px 56px, 56px 56px; }
}
.hero .grid-lines{ animation:gridPan 24s linear infinite; }

.hero-net{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none;
}

@keyframes scanShimmer{
  0%{ background-position:-60% 0; }
  100%{ background-position:160% 0; }
}
.hero::after{
  background-size:200% 100%;
  animation:scanShimmer 7s ease-in-out infinite;
}

/* Hero watermark: slow breathing drift (parallax handled in JS via --wy) */
.hero .watermark{
  transform:translateY(var(--wy, 0px));
  transition:transform .1s linear;
  will-change:transform;
}

/* ----- Hero entrance choreography ----- */
.m-word{
  display:inline-block;
  opacity:0; transform:translateY(.55em);
  transition:opacity .6s cubic-bezier(.2,.65,.25,1), transform .6s cubic-bezier(.2,.65,.25,1);
  transition-delay:var(--wd, 0ms);
}
.m-ready .m-word{ opacity:1; transform:none; }

.hero .lead, .hero .hero-ctas{
  opacity:0; transform:translateY(16px);
  transition:opacity .7s ease, transform .7s ease;
}
.hero .lead{ transition-delay:.45s; }
.hero .hero-ctas{ transition-delay:.6s; }
.m-ready .lead, .m-ready .hero-ctas{ opacity:1; transform:none; }

.hero .hero-kicker::before{
  transform-origin:left center; transform:scaleX(0);
  transition:transform .7s cubic-bezier(.2,.65,.25,1) .1s;
}
.m-ready .hero-kicker::before{ transform:scaleX(1); }

/* Decode caret on the kicker while scrambling */
.hero-kicker.decoding::after{
  content:"_"; color:var(--blue-hi); margin-left:2px;
  animation:caretBlink .5s steps(1) infinite;
}
@keyframes caretBlink{ 50%{ opacity:0; } }

/* ----- Eyebrow line draws in when its section reveals ----- */
.eyebrow::before{
  transform-origin:left center; transform:scaleX(0);
  transition:transform .7s cubic-bezier(.2,.65,.25,1) .15s;
}
.reveal.in .eyebrow::before,
.in .eyebrow::before{ transform:scaleX(1); }

/* ----- Buttons: sheen sweep ----- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; top:0; bottom:0; left:-80%;
  width:50%; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition:left .55s ease;
  pointer-events:none;
}
.btn:hover::before{ left:130%; }

/* ----- Cards: top accent sweep + lift (lift exists; add glow sweep) ----- */
.svc-card::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  pointer-events:none; opacity:0;
  background:
    radial-gradient(420px 140px at var(--mx, 50%) -20%, rgba(0,108,255,.12), transparent 70%);
  transition:opacity .25s ease;
}
.svc-card:hover::after{ opacity:1; }

.ind-tile{ overflow:hidden; }
.ind-tile::before{
  content:""; position:absolute; top:0; left:-100%; width:100%; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue-hi), transparent);
  transition:left .6s ease;
}
.ind-tile:hover::before{ left:100%; }

/* ----- Dropdown: columns cascade in ----- */
@keyframes ddIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
.has-dropdown[data-open="true"] .dd-col{ animation:ddIn .38s cubic-bezier(.2,.65,.25,1) both; }
.has-dropdown[data-open="true"] .dd-col:nth-child(2){ animation-delay:.07s; }
.has-dropdown[data-open="true"] .dd-col:nth-child(3){ animation-delay:.14s; }
.has-dropdown[data-open="true"] .dd-all{ animation:ddIn .38s ease .2s both; }

/* ----- CTA band: radar pulse rings ----- */
.radar-rings{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:0; height:0; pointer-events:none;
}
.radar-rings span{
  position:absolute; left:50%; top:50%;
  width:160px; height:160px; margin:-80px 0 0 -80px;
  border:1px solid rgba(42,140,255,.5); border-radius:50%;
  animation:radar 6s cubic-bezier(.2,.6,.4,1) infinite;
  opacity:0;
}
.radar-rings span:nth-child(2){ animation-delay:2s; }
.radar-rings span:nth-child(3){ animation-delay:4s; }
@keyframes radar{
  0%{ transform:scale(.4); opacity:0; }
  12%{ opacity:.55; }
  100%{ transform:scale(5.2); opacity:0; }
}

/* ----- Engagement steps: connecting pulse ----- */
.engage-step .e-num{ position:relative; }
.engage-step{ transition:background .25s ease; }
.engage-step:hover{ background:var(--panel-2); }
.engage-step:hover::after{ opacity:1; }

/* ----- Shield panels: grid pan + emblem float ----- */
.shield-panel .grid-lines{ animation:gridPan 30s linear infinite; }
@keyframes emblemFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.shield-panel img{ animation:emblemFloat 7s ease-in-out infinite; }

/* ----- Trust strip items get reveal treatment via JS ----- */
.trust-item.m-reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
  transition-delay:var(--rd, 0ms);
}
.trust-item.m-reveal.in{ opacity:1; transform:none; }

/* Grid/stagger children honor a JS-set delay */
.reveal{ transition-delay:var(--rd, 0ms); }