html{
    scroll-behavior: smooth;
}


.peri-fade{
opacity:0;
transform:translateY(30px);
transition:all .8s ease;
}

.peri-show{
opacity:1;
transform:translateY(0);
}

/* delay bertahap */

.peri-delay-1{transition-delay:.2s;}
.peri-delay-2{transition-delay:.4s;}
.peri-delay-3{transition-delay:.6s;}
.peri-delay-4{transition-delay:.8s;}
.peri-delay-5{transition-delay:1s;}


/* gambar dari kanan */

.peri-img-slide{
opacity:0;
transform:translateX(100px);
transition:all 1s ease;
}

.peri-img-slide.peri-show{
opacity:1;
transform:translateX(0);
}



/* typing cursor */

.peri-cursor{
border-right:0px solid;
animation:periBlink .8s infinite;
}



@keyframes periBlink{
0%{border-color:transparent;}
50%{border-color:currentColor;}
100%{border-color:transparent;}
}





/*PENGALAMANNN*?

/* initial state */

.peri-exp-card{
opacity:0;
transform:perspective(800px) rotateX(30deg) translateY(60px) scale(.9);
transition:all .21s cubic-bezier(.16,1,.3,1);
}

/* when visible */

.peri-exp-card.peri-exp-show{
opacity:1;
transform:perspective(800px) rotateX(0deg) translateY(0) scale(1);
}

.peri-exp-card:hover{
transform:perspective(800px) rotateX(-0deg) translateY(-7px) scale(1.01);
}


/* stagger delay */

.peri-exp-card:nth-child(1){
transition-delay:.1s;
}

.peri-exp-card:nth-child(2){
transition-delay:.1s;
}

.peri-exp-card:nth-child(3){
transition-delay:.1s;
}


/*SKILSS*/
.peri-skill-card{
opacity:0;
transform:translateY(40px) scale(.95);
transition:all .7s cubic-bezier(.16,1,.3,1);
}

.peri-skill-card.peri-skill-show{
opacity:1;
transform:translateY(0) scale(1);
}


/* hover effect */

.peri-skill-card:hover{
transform:translateY(-6px) rotateX(4deg) rotateY(-4deg);
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}


/* icon animation */

.peri-skill-icon{
transition:all .4s ease;
position:relative;
overflow:hidden;
}

.peri-skill-card:hover .peri-skill-icon{
transform:rotate(-8deg) scale(1.1);
background:rgba(99,102,241,.15);
}


/* pulse glow */

.peri-skill-icon::after{
content:"";
position:absolute;
inset:0;
border-radius:12px;
background:radial-gradient(circle, rgba(99,102,241,.25), transparent 70%);
opacity:0;
transition:opacity .8s ease;
}

.peri-skill-card:hover .peri-skill-icon::after{
opacity:1;
}