/* Norte interactive layer. Shared by index.html and en.html.
   Everything that hides content is scoped under html.fx, which norte-fx.js
   adds only when it can reveal it again, and never under reduced motion. */

main section[id],main [id^="sector-"]{scroll-margin-top:84px}

/* ---------- scroll progress (header is already sticky in the inline CSS) ---------- */
.fx-progress{position:absolute;left:0;bottom:-1px;width:100%;height:2px;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--blue-on-black),#A9BDFF);pointer-events:none}

/* ---------- reveal on scroll ---------- */
.fx .fx-r{opacity:0;transform:translate3d(0,24px,0)}
.fx-r,.fx-card{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),clip-path .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .35s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease,background-color .3s ease}
.fx .fx-r.in{opacity:1;transform:none}
.fx .sec-head h2.fx-r,.fx .contact h2.fx-r{clip-path:inset(0 0 100% 0);transform:translate3d(0,.45em,0)}
.fx .sec-head h2.fx-r.in,.fx .contact h2.fx-r.in{clip-path:inset(-15% -4% -25% -4%);transform:none}

/* ---------- cards: cursor spotlight + lift ---------- */
.fx-card{position:relative;isolation:isolate}
.fx-card::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(47,91,255,.11),transparent 50%)}
.fx-card:hover::after{opacity:1}
.fx-card:hover{border-color:color-mix(in srgb,var(--blue) 45%,var(--line))}
.fx-lift:hover{translate:0 -4px;box-shadow:0 22px 44px -28px rgba(11,13,18,.45)}
/* keep the emphasized cards emphasized on hover */
.svc.primary.fx-lift:hover{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),0 22px 44px -28px rgba(11,13,18,.45)}
.data-col.stay.fx-card:hover{border-color:var(--blue)}
.disclose.fx-card::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(92,128,255,.2),transparent 55%)}

/* ---------- buttons: shine + magnetic ---------- */
.btn-a{position:relative;overflow:hidden;transition:background .15s ease,color .15s ease,border-color .15s ease,translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.btn-a::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);transform:translateX(-120%);transition:transform .75s ease;pointer-events:none}
.btn-a:hover::after{transform:translateX(120%)}
.btn-a:hover{box-shadow:0 10px 30px -10px rgba(47,91,255,.7)}

/* ---------- hero ---------- */
.fx-hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .6s ease;background:radial-gradient(560px circle at var(--hx,70%) var(--hy,40%),rgba(47,91,255,.18),transparent 60%)}
.hero:hover .fx-hero-glow{opacity:1}
.hero .wrap{z-index:2}
/* Not gated on html.fx: it must run from first paint, or the hero flashes
   visible, then hidden, when the deferred script lands. */
@media (prefers-reduced-motion:no-preference){
  .hero .wrap>*{animation:fxUp .95s cubic-bezier(.2,.7,.2,1) both}
  .hero .wrap>:nth-child(2){animation-delay:.08s}
  .hero .wrap>:nth-child(3){animation-delay:.2s}
}
@keyframes fxUp{from{opacity:0;transform:translate3d(0,26px,0)}to{opacity:1;transform:none}}

/* ---------- stats ---------- */
.stat{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),background-color .3s ease}
.stat:hover{background:color-mix(in srgb,var(--blue-soft) 55%,transparent)}

/* ---------- pillars: scroll-driven process line ---------- */
.pillars{counter-reset:pl}
.pillar{position:relative}
.fx .pillar:first-child{border-top-color:var(--line)}
.fx .pillar::after{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--p,1))}
.pillar::before{counter-increment:pl;content:"0" counter(pl);position:absolute;right:0;top:24px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--text-3);transition:color .4s ease}
.pillar svg{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fx .pillar svg{color:var(--text-3)}
.fx .pillar.on svg{color:var(--blue);transform:scale(1.12)}
.fx .pillar.on::before{color:var(--blue)}

/* ---------- ERP migration: chaos to order ---------- */
.fx .migrate .from span.fx-r{transform:translate3d(var(--tx,0),20px,0) rotate(var(--rot,0deg))}
.fx .migrate .from span.fx-r.in{transform:none}
.migrate .to .lm{transition:box-shadow .4s ease,translate .35s cubic-bezier(.2,.7,.2,1)}
.migrate .to .lm:hover{translate:0 -2px;box-shadow:0 10px 26px -12px rgba(47,91,255,.6)}
.erp-old .row:first-child .in.grow::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:fxBlink 1s steps(1) infinite}
@keyframes fxBlink{50%{opacity:0}}

/* ERP new: bars grow, KPIs count, agent types */
.erp-new .app-top em::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#1E8E5A;margin-right:5px;vertical-align:1px;animation:fxPulse 1.8s ease-in-out infinite}
@keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 rgba(30,142,90,.5)}50%{box-shadow:0 0 0 4px rgba(30,142,90,0)}}
.fx .erp-new .chart i{transform:scaleY(.04);transform-origin:50% 100%;transition:transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*70ms)}
.fx .erp-new.play .chart i{transform:none}
.erp-new .chart i{transition:transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*70ms),filter .2s ease}
.erp-new .chart i:hover{filter:brightness(1.25)}
.fx .erp-new .agent .msg:not(.fx-typing){opacity:0;transform:translate3d(0,8px,0);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.fx .erp-new .agent .msg.show{opacity:1;transform:none}
.fx-typing{display:flex;gap:3px;align-self:flex-start;padding:8px 9px}
.fx-typing i{width:5px;height:5px;border-radius:50%;background:#A3A8B4;animation:fxDot 1s ease-in-out infinite}
.fx-typing i:nth-child(2){animation-delay:.15s}
.fx-typing i:nth-child(3){animation-delay:.3s}
@keyframes fxDot{0%,80%,100%{transform:none;opacity:.5}40%{transform:translateY(-3px);opacity:1}}
.erp-new .agent{cursor:pointer}

/* ---------- cases ---------- */
.case dd.res b{background:linear-gradient(var(--blue-soft),var(--blue-soft)) no-repeat 0 88%/0% 42%;transition:background-size 1.1s cubic-bezier(.2,.7,.2,1) .35s}
.case.in dd.res b,html:not(.fx) .case dd.res b{background-size:100% 42%}

/* ---------- industries ---------- */
.common .chip{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),background-color .25s ease,border-color .25s ease,color .25s ease,translate .3s cubic-bezier(.2,.7,.2,1)}
.common .chip:hover{background:var(--blue-soft);border-color:var(--blue);translate:0 -2px}
.sector .si{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sector:hover .si{transform:rotate(-8deg) scale(1.12)}
.sector:target{animation:fxTarget 2.2s ease}
@keyframes fxTarget{0%,40%{box-shadow:0 0 0 3px var(--blue),0 20px 50px -24px rgba(47,91,255,.6)}100%{box-shadow:0 0 0 0 transparent}}

/* ---------- logo grid + team ---------- */
.lgb img{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lgc:hover .lgb img{transform:scale(1.08)}
.member .ph img{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.member:hover .ph img{transform:scale(1.07)}

/* ---------- data: live audit log ---------- */
.fx-log{margin-top:18px;background:var(--black);color:var(--on-black);border:1px solid var(--black-line);border-radius:8px;overflow:hidden;font-family:var(--mono)}
.fx-log-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--black-line);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-black-2)}
.fx-log-h .tag{margin-left:auto;border:1px solid rgba(92,128,255,.5);background:rgba(92,128,255,.14);color:#C9D5FF;border-radius:3px;padding:4px 9px;font-size:11px;font-weight:600}
.fx-log ol{list-style:none;margin:0;padding:6px 0;height:198px;overflow:hidden;position:relative}
.fx-log ol::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(transparent,var(--black));pointer-events:none}
.fx-log li{display:grid;grid-template-columns:72px 172px minmax(0,1fr);gap:12px;align-items:baseline;padding:6px 16px;font-size:12.5px;line-height:1.45;color:var(--on-black-2);animation:fxLogIn .5s cubic-bezier(.2,.7,.2,1) both}
.fx-log li time{color:#5E6472}
.fx-log li b{font-weight:500;justify-self:start;border-radius:3px;padding:1px 7px;font-size:11px;letter-spacing:.04em;white-space:nowrap}
.fx-log li b.r{color:#9DB4FF;background:rgba(92,128,255,.14)}
.fx-log li b.w{color:#7EE2A8;background:rgba(46,204,113,.12)}
.fx-log li b.m{color:#E0C27A;background:rgba(224,194,122,.12)}
.fx-log li b.a{color:#F0A0A0;background:rgba(240,160,160,.12)}
.fx-log li span{color:var(--on-black)}
@keyframes fxLogIn{from{opacity:0;transform:translate3d(0,-10px,0);background:rgba(92,128,255,.12)}to{opacity:1;transform:none;background:transparent}}
@media (max-width:640px){.fx-log li{grid-template-columns:62px minmax(0,1fr)}.fx-log li span{grid-column:1/-1;margin-top:-4px}.fx-log ol{height:250px}}

/* ---------- name band: parallax N ---------- */
.bigN{translate:0 var(--ny,0px)}

/* ---------- services: phases fill ---------- */
.phases div{position:relative}
.fx .phases div{border-top-color:var(--line)}
.fx .phases div::before{content:"";position:absolute;left:0;right:0;top:-4px;height:4px;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.fx .phases div:last-child::before{transition-delay:.5s;transition-duration:1.4s}
.fx .phases.in div::before{transform:none}

/* ---------- FAQ: icon follows the click, not the end of the animation ---------- */
.faq details.fx-closing summary::after{transform:none}

/* ---------- contact: horizon glow ---------- */
.contact{position:relative;overflow:hidden}
.contact .wrap{position:relative;z-index:1}
.contact::before{content:"";position:absolute;left:50%;top:86%;width:max(1600px,160vw);aspect-ratio:1;translate:-50% 0;border-radius:50%;border-top:1px solid rgba(47,91,255,.55);background:radial-gradient(closest-side,transparent 92%,rgba(47,91,255,.10));box-shadow:0 -40px 120px -40px rgba(47,91,255,.45);pointer-events:none}

/* ---------- print / save as PDF: show everything ---------- */
@media print{
  .fx .fx-r,.fx .erp-new .agent .msg{opacity:1!important;transform:none!important;clip-path:none!important}
  .fx .erp-new .chart i,.fx .phases div::before,.fx .pillar::after{transform:none!important}
  .hero .wrap>*{animation:none!important}
  .fx-log,.fx-progress,.fx-typing{display:none!important}
}

/* ---------- reduced motion: keep it still ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-r,.fx-card,.btn-a,.btn-a::after,.erp-new .chart i{transition:none!important}
  .erp-old .row:first-child .in.grow::after,.erp-new .app-top em::before,.fx-typing i,.fx-log li,.sector:target{animation:none!important}
  .fx-lift:hover,.common .chip:hover,.migrate .to .lm:hover{translate:none}
}