/* =========================================================
   NIPPOFLEX – MOTION LAYER
   Loaded after style.css. Everything hidden-by-default is gated
   behind html.anim (added by JS), so the site stays fully visible
   if JavaScript is unavailable.
   ========================================================= */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* ---------- Scroll progress bar ---------- */
.np-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:3000;pointer-events:none;
  background:linear-gradient(90deg,var(--blue-2),var(--red));transform-origin:0 50%;transform:scaleX(var(--p,0));
  box-shadow:0 0 12px rgba(227,28,36,.45)}

/* ---------- Page loader (first visit per session) ---------- */
.np-loader{position:fixed;inset:0;z-index:5000;background:#fff;display:grid;place-items:center;
  transition:transform .9s var(--ease) .1s,opacity .4s ease .7s}
.np-loader__box{width:min(230px,60vw);text-align:center}
.np-loader__box img{width:100%;height:auto;animation:loaderPulse 1.4s ease-in-out infinite}
.np-loader__bar{height:4px;border-radius:99px;background:#e4edf6;overflow:hidden;margin-top:18px;position:relative}
.np-loader__bar::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--blue-2),var(--red));transform:translateX(-100%);animation:loaderFill .9s var(--ease) forwards}
.np-loader.is-done{transform:translateY(-100%);opacity:0;pointer-events:none}
@keyframes loaderFill{to{transform:none}}
@keyframes loaderPulse{50%{transform:scale(1.04)}}

/* ---------- Header ---------- */
.anim .site-header{transition:transform .5s var(--ease),box-shadow .25s,background .25s}
.anim .site-header.is-hidden{transform:translateY(-100%)}
.anim .brand img{transition:transform .4s var(--ease)}
.anim .brand:hover img{transform:scale(1.05)}
.anim .site-nav>a:not(.button)::after{transition:right .45s var(--ease)}

/* ---------- Hero / page-hero staged entrance ---------- */
.anim .hx{opacity:0}
.np-ready .hx{opacity:1;animation:heroUp 1s var(--ease) calc(var(--i,0)*.11s + .1s) backwards}
@keyframes heroUp{from{opacity:0;transform:translateY(34px)}}

.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.sw__in{display:inline-block;will-change:transform}
.anim:not(.np-ready) .sw__in{transform:translateY(115%)}
.np-ready .sw__in{animation:wordUp 1.05s var(--ease) calc(.15s + var(--w,0)*.075s) backwards}
@keyframes wordUp{from{transform:translateY(115%) rotate(5deg)}}

/* hero visual: content-level reveal is bypassed, replaced with a custom entrance */
.anim .hero__content.reveal,.anim .hero__visual.reveal{opacity:1;transform:none;transition:none}
.anim:not(.np-ready) .hero-card,.anim:not(.np-ready) .floating-chip{opacity:0}
.np-ready .hero-card{animation:cardIn 1.3s var(--ease) .3s backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(70px) rotate(6deg) scale(.9)}}
.np-ready .floating-chip{animation:chipIn .9s var(--ease) backwards}
.np-ready .floating-chip--top{animation-delay:1s}
.np-ready .floating-chip--bottom{animation-delay:1.2s}
@keyframes chipIn{from{opacity:0;transform:scale(.6) translateY(20px)}}

.anim .hero-card{transform:perspective(1100px) rotate(1.2deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s var(--ease-soft),box-shadow .35s}
.anim .hero-card img{transform:scale(1.08) translate(var(--px,0),var(--py,0));transition:transform .5s var(--ease-soft)}
.anim .hero-card__badge{animation:badgeIn .9s var(--ease) 1.4s backwards}
@keyframes badgeIn{from{opacity:0;transform:translateY(24px)}}
.anim .floating-chip{will-change:transform}
.anim .floating-chip--top{translate:calc(var(--mx,0)*-14px) calc(var(--my,0)*-10px);animation-name:chipIn,bobA}
.anim .floating-chip--bottom{translate:calc(var(--mx,0)*16px) calc(var(--my,0)*12px);animation-name:chipIn,bobB}
.anim .floating-chip--top,.anim .floating-chip--bottom{animation-duration:.9s,5s;animation-iteration-count:1,infinite;
  animation-timing-function:var(--ease),ease-in-out;animation-fill-mode:backwards,none}
@keyframes bobA{50%{transform:translateY(-12px)}}
@keyframes bobB{50%{transform:translateY(12px)}}

/* floating glows */
.anim .hero__glow--one{animation:driftA 14s ease-in-out infinite}
.anim .hero__glow--two{animation:driftB 17s ease-in-out infinite}
@keyframes driftA{50%{transform:translate(-50px,40px) scale(1.12)}}
@keyframes driftB{50%{transform:translate(60px,-40px) scale(1.15)}}

/* ---------- Waves ---------- */
.np-waves{position:absolute;left:0;right:0;bottom:-1px;height:clamp(50px,7vw,100px);overflow:hidden;pointer-events:none;z-index:1}
.np-waves svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block}
.np-waves svg:nth-child(1){animation:waveMove 22s linear infinite;opacity:.35}
.np-waves svg:nth-child(2){animation:waveMove 15s linear infinite reverse;opacity:.6}
.np-waves svg:nth-child(3){animation:waveMove 10s linear infinite}
@keyframes waveMove{to{transform:translateX(-50%)}}
.hero .np-waves svg:nth-child(1) path{fill:#9fd0f7}
.hero .np-waves svg:nth-child(2) path{fill:#cfe7fb}
.np-waves svg:nth-child(3) path{fill:#fff}
.page-hero .np-waves svg:nth-child(1) path,.page-hero .np-waves svg:nth-child(2) path{fill:rgba(255,255,255,.55)}
.hero__grid{z-index:2}

/* ---------- Bubbles ---------- */
.np-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.np-bubble{position:absolute;bottom:-40px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.9),rgba(255,255,255,.15) 60%,rgba(255,255,255,0));
  border:1px solid rgba(255,255,255,.55);opacity:0;animation:bubbleUp var(--t,12s) linear var(--dl,0s) infinite}
.hero .np-bubble{border-color:rgba(12,94,178,.28);background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(120,190,245,.25) 65%,rgba(120,190,245,0))}
@keyframes bubbleUp{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.9}
  50%{transform:translate(var(--dx,20px),calc(var(--rise,600px)*-.5)) scale(1)}100%{transform:translate(calc(var(--dx,20px)*-1),calc(var(--rise,600px)*-1.05)) scale(1.1);opacity:0}}
.cta-section,.section--dark,.page-hero{position:relative}
.cta-section>.container,.section--dark>.container,.page-hero>.container{position:relative;z-index:2}
.cta-section{overflow:hidden}

/* ---------- Eyebrow accent line ---------- */
.anim .eyebrow::before{content:"";display:inline-block;width:30px;height:2px;background:currentColor;vertical-align:middle;
  margin:-2px 10px 0 0;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .25s}
.anim .is-visible .eyebrow::before,.anim .reveal.is-visible.eyebrow::before{transform:scaleX(1)}
.np-ready .hero .eyebrow::before,.np-ready .page-hero .eyebrow::before{transform:scaleX(1);transition-delay:.7s}

/* ---------- Scroll reveal (upgrade of existing .reveal) ---------- */
.anim .reveal{opacity:0;transform:translateY(42px) scale(.98);
  transition-property:opacity,transform,translate,box-shadow;
  transition-duration:.95s,.95s,.35s,.35s;
  transition-timing-function:var(--ease),var(--ease),var(--ease),ease;
  transition-delay:var(--d,0s),var(--d,0s),0s,0s}
.anim .reveal[data-fx="left"]{transform:translateX(-56px)}
.anim .reveal[data-fx="right"]{transform:translateX(56px)}
.anim .reveal[data-fx="zoom"]{transform:scale(.9)}
.anim .reveal.is-visible{opacity:1;transform:none}
.anim .hero__content.reveal,.anim .hero__visual.reveal{opacity:1;transform:none}

/* Image mask reveal on product detail sections */
.anim .product-detail__image{clip-path:inset(0 0 100% 0 round 28px);transition:clip-path 1.3s var(--ease) .15s}
.anim .product-detail.is-visible .product-detail__image{clip-path:inset(0 0 0 0 round 28px)}
.anim .product-detail__image img{transform:scale(1.25);transition:transform 1.8s var(--ease) .1s}
.anim .product-detail.is-visible .product-detail__image img{transform:scale(1)}
.anim .product-detail .tag,.anim .product-detail h2,.anim .product-detail .lead,.anim .product-detail .check-grid,
.anim .product-detail h3,.anim .product-detail .feature-list,.anim .product-detail .button{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .22s;transition-delay:calc(.35s + var(--k,0)*.08s),calc(.35s + var(--k,0)*.08s),0s}
.anim .product-detail.is-visible .tag,.anim .product-detail.is-visible h2,.anim .product-detail.is-visible .lead,
.anim .product-detail.is-visible .check-grid,.anim .product-detail.is-visible h3,.anim .product-detail.is-visible .feature-list,
.anim .product-detail.is-visible .button{opacity:1;transform:none}
.anim .check-grid span{opacity:0;transform:translateX(-14px) scale(.96);transition:opacity .6s var(--ease),transform .6s var(--ease),background .25s,color .25s;
  transition-delay:calc(.7s + var(--n,0)*.06s),calc(.7s + var(--n,0)*.06s),0s,0s}
.anim .product-detail.is-visible .check-grid span{opacity:1;transform:none}
.check-grid span:hover{background:var(--blue);color:#fff}.check-grid span:hover::before{color:#fff}
.anim .feature-list li{opacity:0;transform:translateX(-16px);transition:opacity .6s var(--ease),transform .6s var(--ease);
  transition-delay:calc(.8s + var(--n,0)*.09s)}
.anim .product-detail.is-visible .feature-list li{opacity:1;transform:none}

/* ---------- Cards: hover lift + cursor spotlight ---------- */
.solution-card,.product-card,.value-card,.benefit-card,.compact-product,.contact-notes article,.trust-strip__grid>div{position:relative}
.np-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(420px circle at var(--sx,50%) var(--sy,50%),rgba(255,255,255,.22),transparent 60%)}
.product-card.np-spot::after,.compact-product.np-spot::after,.contact-notes .np-spot::after,.value-card.np-spot::after{
  background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),rgba(12,94,178,.10),transparent 60%)}
.np-spot:hover::after{opacity:1}
.product-card.np-spot::after{z-index:2}
.anim .product-card:hover,.anim .product-card.reveal.is-visible:hover{transform:none;translate:0 -9px}
.anim .solution-card:hover,.anim .value-card:hover,.anim .compact-product:hover,.anim .contact-notes article:hover,.anim .benefit-card:hover{translate:0 -8px}
.solution-card:hover{box-shadow:0 34px 80px rgba(8,39,77,.28)}
.compact-product:hover,.contact-notes article:hover{box-shadow:var(--shadow)}
.benefit-card{transition:background .3s,border-color .3s}
.benefit-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.solution-card::before{transition:transform .9s var(--ease)}
.solution-card:hover::before{transform:scale(1.6) translate(-10px,10px)}
.solution-card a{display:inline-block;transition:transform .3s var(--ease)}
.solution-card a::after,.product-card__body a::after,.text-link::after{content:" →";display:inline-block;transition:transform .3s var(--ease)}
.solution-card:hover a::after,.product-card:hover .product-card__body a::after,.text-link:hover::after{transform:translateX(6px)}
.text-link::after{content:""}
.compact-product__icon{transition:transform .5s var(--ease),border-radius .5s var(--ease),background .3s}
.compact-product:hover .compact-product__icon{transform:rotate(-8deg) scale(1.1);border-radius:50%;background:var(--red)}
.value-card{transition:border-color .3s}.value-card:hover{border-color:var(--red)}
.trust-icon{transition:transform .5s var(--ease),background .3s,color .3s}
.trust-strip__grid>div:hover .trust-icon{transform:rotate(-10deg) scale(1.12);background:var(--blue);color:#fff}

/* benefit check icons pop */
.anim .benefit-card>span{transform:scale(0) rotate(-90deg);transition:transform .8s var(--ease) calc(var(--d,0s) + .35s)}
.anim .benefit-card.is-visible>span{transform:none}

/* ---------- Buttons: shine sweep + magnetic ---------- */
.button{position:relative;overflow:hidden;isolation:isolate}
.button::after{content:"";position:absolute;top:0;bottom:0;left:-80%;width:55%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.button:hover::after{left:130%}
.button--ghost::after,.button--outline-white::after{background:linear-gradient(100deg,transparent,rgba(12,94,178,.14),transparent)}
.button--outline-white::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent)}
.anim .button{transition:transform .25s var(--ease),translate .3s var(--ease),box-shadow .25s,background .25s,color .25s}
.anim .button[data-magnetic]{translate:var(--bx,0px) var(--by,0px)}
.button:active{transform:scale(.97)}

/* ---------- Application building diagram ---------- */
.anim .building>div{opacity:0;transform:translateY(-60px) scale(.94);
  transition:opacity .7s var(--ease),transform 1s cubic-bezier(.34,1.56,.64,1),filter .3s,background .3s;
  transition-delay:calc(var(--f,0)*.16s + .3s)}
.anim .applications__diagram.is-visible .building>div{opacity:1;transform:none}
.anim .building__base{transform:translateY(60px) scale(.94)!important}
.anim .applications__diagram.is-visible .building__base{transform:none!important}
.building>div:hover{filter:brightness(1.08)}
.building__floor:hover{background:#eaf5ff!important;border-color:var(--blue-2)!important}
.applications__diagram .np-drop{position:absolute;width:12px;height:12px;border-radius:50% 50% 50% 0;background:var(--blue-2);
  transform:rotate(-45deg);opacity:0;animation:dropFall 3.6s ease-in infinite;z-index:3}
.applications__diagram .np-drop:nth-of-type(2){animation-delay:1.2s}
.applications__diagram .np-drop:nth-of-type(3){animation-delay:2.4s}
@keyframes dropFall{0%{transform:translateY(-30px) rotate(-45deg);opacity:0}15%{opacity:.6}
  70%{transform:translateY(300px) rotate(-45deg);opacity:.6}100%{transform:translateY(340px) rotate(-45deg) scale(.4);opacity:0}}
.anim .applications__diagram::before{animation:driftA 11s ease-in-out infinite}
.application-list span{transition:background .25s,color .25s,transform .3s var(--ease),border-color .25s}
.application-list span:hover{background:var(--blue);color:#fff;border-color:var(--blue);transform:translateY(-3px)}
.anim .application-list span{opacity:0;transform:scale(.8);transition:opacity .5s var(--ease),transform .6s var(--ease),background .25s,color .25s,border-color .25s;
  transition-delay:calc(.4s + var(--n,0)*.06s),calc(.4s + var(--n,0)*.06s),0s,0s,0s}
.anim .applications__content.is-visible .application-list span{opacity:1;transform:none}
.anim .application-list span:hover{transform:translateY(-3px)}

/* ---------- Story panel / timeline / metrics ---------- */
.anim .story-visual::before{animation:driftA 12s ease-in-out infinite}
.anim .story-visual::after{animation:driftB 15s ease-in-out infinite}
.anim .story-visual__panel{transform:translateY(40px);opacity:0;transition:transform 1s var(--ease) .5s,opacity .8s ease .5s}
.anim .story-visual.is-visible .story-visual__panel{transform:none;opacity:1}
.story-visual__year{font-variant-numeric:tabular-nums}
.timeline__item{position:relative}
.timeline__item::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--blue-2),var(--red));
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .3s}
.timeline__item.is-visible::after{transform:scaleX(1)}
.timeline__item>span{transition:color .3s,transform .4s var(--ease)}
.timeline__item:hover>span{color:var(--red);transform:translateX(8px)}
.metric-grid>div{transition:transform .35s var(--ease),background .3s}
.metric-grid>div:hover{transform:translateY(-6px);background:rgba(255,255,255,.12)}
.metric-grid strong{font-variant-numeric:tabular-nums}

/* ---------- Contact ---------- */
.contact-card{position:relative}
.contact-card::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.contact-card:hover::after{transform:scaleX(1)}
.contact-card a{transition:color .25s,transform .3s var(--ease)}.contact-card a:hover{color:var(--red);transform:translateX(6px)}
.quote-form input,.quote-form select,.quote-form textarea{transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(12,94,178,.12),0 10px 22px rgba(8,39,77,.08)}
.quote-form label{transition:color .25s}.quote-form label:focus-within{color:var(--blue)}

/* ---------- FAQ ---------- */
.accordion__item{transition:background .3s,padding .3s}
.accordion__item button{transition:color .25s}.accordion__item button:hover{color:var(--blue-2)}
.accordion__item button span{transition:transform .4s var(--ease)}
.accordion__panel>p{opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .4s var(--ease),padding .28s}
.accordion__item.is-open .accordion__panel>p{opacity:1;transform:none}

/* ---------- CTA + footer + WhatsApp ---------- */
.anim .cta-section{background-size:200% 200%;animation:ctaShift 10s ease-in-out infinite alternate}
@keyframes ctaShift{from{background-position:0 50%}to{background-position:100% 50%}}
.floating-whatsapp{transition:transform .3s var(--ease),box-shadow .3s}
.floating-whatsapp::before{content:"";position:absolute;inset:0;border-radius:50%;background:#16a365;z-index:-1;animation:waPulse 2.4s ease-out infinite}
.floating-whatsapp:hover{transform:scale(1.12) rotate(-6deg)}
@keyframes waPulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.9);opacity:0}}
.anim .floating-whatsapp{animation:waIn .8s var(--ease) 2s backwards}
@keyframes waIn{from{transform:scale(0) rotate(-90deg)}}
.social-links a{transition:transform .3s var(--ease),background .25s,border-color .25s}
.social-links a:hover{transform:translateY(-5px);background:var(--red);border-color:var(--red)}
.footer-grid a:not(.brand):not(.social-links a){transition:color .25s,transform .3s var(--ease)}
.footer-grid a:not(.brand):not(.social-links a):hover{transform:translateX(6px)}

/* ---------- Page transition ---------- */
.np-curtain{position:fixed;inset:0;z-index:4500;background:linear-gradient(135deg,var(--blue),var(--blue-2));transform:translateY(100%);pointer-events:none;
  transition:transform .55s var(--ease)}
.np-curtain.is-in{transform:none;pointer-events:all}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .np-loader,.np-progress,.np-bubbles,.np-curtain,.np-drop{display:none!important}
  .anim .hx,.anim .reveal,.anim .sw__in,.anim .product-detail__image,.anim .product-detail__image img,.anim .product-detail .tag,
  .anim .product-detail h2,.anim .product-detail .lead,.anim .product-detail .check-grid,.anim .product-detail h3,
  .anim .product-detail .feature-list,.anim .product-detail .button,.anim .check-grid span,.anim .feature-list li,
  .anim .building>div,.anim .application-list span,.anim .benefit-card>span,.anim .story-visual__panel,.anim .hero-card,.anim .floating-chip,
  .anim .accordion__panel>p{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important;transition:none!important}
  .np-waves svg,.hero__glow,.floating-whatsapp::before,.cta-section{animation:none!important}
}
@media (max-width:1000px){
  .anim .reveal[data-fx="left"],.anim .reveal[data-fx="right"]{transform:translateY(36px)}
  .anim .hero-card{transform:rotate(1.2deg)}
}

.np-count{font-variant-numeric:tabular-nums}
html.np-loading::after{content:"";position:fixed;inset:0;background:#fff;z-index:4999}
/* after the reveal finishes, drop stagger delays so hover feels instant */
.anim .product-detail.np-done .tag,.anim .product-detail.np-done h2,.anim .product-detail.np-done .lead,
.anim .product-detail.np-done .check-grid,.anim .product-detail.np-done h3,.anim .product-detail.np-done .feature-list,
.anim .product-detail.np-done .button,.anim .product-detail.np-done .check-grid span{transition-delay:0s!important}
.anim .product-detail.np-done .button{transition:transform .25s var(--ease),box-shadow .25s,background .25s}
/* failsafe if animations.js never runs */
html.anim-failsafe .reveal,html.anim-failsafe .hx,html.anim-failsafe .sw__in,html.anim-failsafe .hero-card,html.anim-failsafe .floating-chip{opacity:1!important;transform:none!important}