/*=========================================================
 POLITECH PANEL360
 ANIMATION ENGINE
=========================================================*/


/*==========================
 ESTADO INICIAL
==========================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:
opacity .9s ease,
transform .9s cubic-bezier(.22,1,.36,1);

will-change:transform,opacity;

}


.reveal-left{

opacity:0;

transform:translateX(-80px);

transition:
opacity .9s ease,
transform .9s cubic-bezier(.22,1,.36,1);

}


.reveal-right{

opacity:0;

transform:translateX(80px);

transition:
opacity .9s ease,
transform .9s cubic-bezier(.22,1,.36,1);

}


.zoom{

opacity:0;

transform:scale(.88);

transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,1,.36,1);

}


.fade{

opacity:0;

transition:opacity 1.2s ease;

}



/*==========================
 ESTADO FINAL
==========================*/

.show{

opacity:1 !important;

transform:none !important;

}



/*==========================
 BOTONES
==========================*/

.btn-primary,
.btn-secondary,
.btn-nav{

position:relative;

overflow:hidden;

}


.btn-primary::before,
.btn-nav::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent);

transform:skewX(-25deg);

}


.btn-primary:hover::before,
.btn-nav:hover::before{

animation:shine 1.2s;

}



@keyframes shine{

0%{

left:-120%;

}

100%{

left:140%;

}

}



/*==========================
 CARDS
==========================*/

.tool{

transition:
transform .45s,
box-shadow .45s;

}


.tool:hover{

transform:
translateY(-12px)
scale(1.03);

}



/*==========================
 DASHBOARD
==========================*/

.dashboard-card{

animation:float 7s ease-in-out infinite;

}



@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-16px);

}

100%{

transform:translateY(0px);

}

}



/*==========================
 BADGE
==========================*/

.badge{

animation:pulse 3s infinite;

}



@keyframes pulse{

0%{

box-shadow:0 0 0 rgba(21,101,255,.20);

}

50%{

box-shadow:0 0 30px rgba(21,101,255,.28);

}

100%{

box-shadow:0 0 0 rgba(21,101,255,.20);

}

}



/*==========================
 HERO TITLE
==========================*/

.hero h1{

animation:titleIn 1.2s ease;

}



@keyframes titleIn{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:none;

}

}



/*==========================
 PARALLAX READY
==========================*/

.parallax{

transition:transform .15s linear;

will-change:transform;

}



/*==========================
 GLOW
==========================*/

.glow{

position:relative;

}


.glow::after{

content:"";

position:absolute;

inset:-4px;

border-radius:inherit;

background:linear-gradient(
135deg,
rgba(21,101,255,.15),
rgba(21,101,255,0));

filter:blur(20px);

z-index:-1;

}



/*==========================
 NAVBAR
 ==========================
 BUG REPARADO 03/08/2026: esta regla pintaba la barra de BLANCO al
 scrollear, pero el logo y los links del menu son blancos. Resultado:
 blanco sobre blanco, la navegacion desaparecia y solo quedaba visible
 el boton azul. Pasaba en desktop y en celular.

 Se mantiene el azul de marca (igual que la landing B2C, que tambien
 conserva su barra oscura al scrollear). Al scrollear solo achica y
 profundiza la sombra.
==========================*/

.navbar.scrolled{

height:70px;

background:linear-gradient(90deg,#1f4d82 0%, #275f9b 100%);

box-shadow:0 10px 30px rgba(0,0,0,.22);

}



/*==========================
 FADE STAGGER
==========================*/

.stagger>*{

opacity:0;

transform:translateY(30px);

}


.stagger.show>*:nth-child(1){

transition:.5s;

opacity:1;

transform:none;

}

.stagger.show>*:nth-child(2){

transition:.7s;

opacity:1;

transform:none;

}

.stagger.show>*:nth-child(3){

transition:.9s;

opacity:1;

transform:none;

}

.stagger.show>*:nth-child(4){

transition:1.1s;

opacity:1;

transform:none;

}

.stagger.show>*:nth-child(5){

transition:1.3s;

opacity:1;

transform:none;

}

.stagger.show>*:nth-child(6){

transition:1.5s;

opacity:1;

transform:none;

}

.stagger.show>*:nth-child(7){

transition:1.7s;

opacity:1;

transform:none;

}

.stagger.show>*:nth-child(8){

transition:1.9s;

opacity:1;

transform:none;

}