/* SteelPromise Surge lockup (v5) — header, footer, 404. Surge motion always runs. */

.nav .brand,
.foot .brand,
.err-head .brand{
  display:inline-flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  min-height:44px;
  min-width:0;
  flex:0 1 auto;
  max-width:min(252px, calc(100% - 64px));
  color:inherit!important;
  line-height:0;
  --v:0;
  overflow:visible;
}
.foot .brand{max-width:280px;margin-bottom:16px}
.err-head .brand{max-width:252px}

.brand svg{
  display:block;
  width:100%;
  height:auto;
  max-height:46px;
  overflow:visible;
}
.foot .brand svg{max-height:44px}

@media (max-width:1100px){
  .nav .brand{max-width:min(230px, calc(100vw - 96px))}
  .nav .brand svg{max-height:40px}
}
@media (max-width:760px){
  .nav .brand{max-width:min(210px, calc(100vw - 88px))}
  .nav .brand svg{max-height:34px}
}
@media (max-width:360px){
  .nav .brand{max-width:min(186px, calc(100vw - 80px))}
  .nav .brand svg{max-height:30px}
}

/* 404: simple static header, logo links home */
.err-head{
  position:relative;z-index:4;
  display:flex;align-items:center;
  padding:18px 28px;
}
@media (max-width:760px){
  .err-head{padding:14px 16px}
}

/* ---------- reactive Surge animation ---------- */
.brand .sp-van{transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.brand .sp-streaks path{stroke-dasharray:40;stroke-dashoffset:0;transform-box:fill-box;transform-origin:100% 50%;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s}
.brand .sp-streaks{transform:scaleX(calc(1 + var(--v) * .5));transform-box:fill-box;transform-origin:100% 50%}
.brand .sp-bolt{transform-box:fill-box;transform-origin:50% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .45s}
.brand .sp-spark path{stroke-dasharray:8;stroke-dashoffset:8;opacity:0}
.brand .sp-head{transition:fill .3s}
.brand .sp-rule{transform-box:fill-box;transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand .sp-word{transition:transform .55s cubic-bezier(.2,.8,.2,1)}

/* load: draw-in */
.brand.is-intro .sp-van{animation:sp-in .9s cubic-bezier(.2,.8,.2,1) both}
.brand.is-intro .sp-streaks path{animation:sp-draw .8s cubic-bezier(.2,.8,.2,1) both}
.brand.is-intro .sp-s2{animation-delay:.08s!important}
.brand.is-intro .sp-s3{animation-delay:.16s!important}
.brand.is-intro .sp-bolt{animation:sp-zap .7s .55s cubic-bezier(.2,.8,.2,1) both}
.brand.is-intro .sp-rule{animation:sp-rule .8s .5s cubic-bezier(.2,.8,.2,1) both}
.brand.is-intro .sp-word{animation:sp-word .8s .25s cubic-bezier(.2,.8,.2,1) both}
@keyframes sp-in{from{transform:translateX(-22px);opacity:0}to{transform:none;opacity:1}}
@keyframes sp-draw{from{stroke-dashoffset:40;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes sp-zap{0%{transform:scale(.6) rotate(-8deg);opacity:0}55%{transform:scale(1.12);opacity:1}100%{transform:none}}
@keyframes sp-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sp-word{from{transform:translateX(-8px);opacity:0}to{transform:none;opacity:1}}

/* hover / focus / tap: surge forward, streaks stretch, bolt sparks */
@media (hover:hover){
  .brand:hover .sp-van,.brand:focus-visible .sp-van,.brand.is-surge .sp-van{transform:translateX(5px) skewX(-3deg)}
  .brand:hover .sp-s1,.brand:focus-visible .sp-s1,.brand.is-surge .sp-s1{transform:scaleX(1.35)}
  .brand:hover .sp-s2,.brand:focus-visible .sp-s2,.brand.is-surge .sp-s2{transform:scaleX(1.55)}
  .brand:hover .sp-s3,.brand:focus-visible .sp-s3,.brand.is-surge .sp-s3{transform:scaleX(1.25)}
  .brand:hover .sp-streaks path,.brand:focus-visible .sp-streaks path{animation:sp-flicker .5s steps(2) infinite}
  .brand:hover .sp-bolt,.brand:focus-visible .sp-bolt,.brand.is-surge .sp-bolt{transform:scale(1.1) rotate(-3deg);filter:drop-shadow(0 0 3px rgba(192,38,43,.55))}
  .brand:hover .sp-spark path,.brand:focus-visible .sp-spark path{animation:sp-spark .6s cubic-bezier(.2,.8,.2,1) infinite}
  .brand:hover .sp-spark path:nth-child(2),.brand:focus-visible .sp-spark path:nth-child(2){animation-delay:.12s}
  .brand:hover .sp-spark path:nth-child(3),.brand:focus-visible .sp-spark path:nth-child(3){animation-delay:.24s}
  .brand:hover .sp-head,.brand:focus-visible .sp-head,.brand.is-surge .sp-head{fill:#fff}
  .brand:hover .sp-word,.brand:focus-visible .sp-word,.brand.is-surge .sp-word{transform:translateX(2px)}
}
/* touch / always-on surge class (brief tap) */
.brand.is-surge .sp-van{transform:translateX(5px) skewX(-3deg)}
.brand.is-surge .sp-s1{transform:scaleX(1.35)}
.brand.is-surge .sp-s2{transform:scaleX(1.55)}
.brand.is-surge .sp-s3{transform:scaleX(1.25)}
.brand.is-surge .sp-bolt{transform:scale(1.1) rotate(-3deg);filter:drop-shadow(0 0 3px rgba(192,38,43,.55))}
.brand.is-surge .sp-spark path{opacity:1;stroke-dashoffset:0}
.brand.is-surge .sp-head{fill:#fff}
.brand.is-surge .sp-word{transform:translateX(2px)}

@keyframes sp-flicker{50%{opacity:.72}}
@keyframes sp-spark{0%{stroke-dashoffset:8;opacity:0}30%{opacity:1}100%{stroke-dashoffset:-8;opacity:0}}


/* 404 hero: no full-viewport scene, just a quiet page with the lockup above */
.err-hero{min-height:auto;padding:80px 0 120px}
@media (max-width:760px){.err-hero{padding:48px 0 96px}}