/* ===== Motion layer (loaded last) ===== */

/* Hero: staggered entrance + gentle float */
.hero-left>*{opacity:0;animation:fadeUp .8s ease forwards}
.hero-left>:nth-child(1){animation-delay:.1s}
.hero-left>:nth-child(2){animation-delay:.25s}
.hero-left>:nth-child(3){animation-delay:.4s}
.hero-left>:nth-child(4){animation-delay:.55s}
.hero-left>:nth-child(5){animation-delay:.7s}
.hero-left>:nth-child(6){animation-delay:.85s}
.image-box{animation:floatImage 6s ease-in-out infinite}
.image-ring{border-style:dashed;animation:spin 40s linear infinite}
@keyframes floatImage{50%{transform:translateY(-14px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* Scroll reveal (staggered via --i, direction via --dx / --dy) */
.reveal{opacity:0}
.reveal.show{opacity:1;animation:revealIn .75s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--i,0) * 90ms)}
.reveal-left{--dx:-40px;--dy:0px}
.reveal-right{--dx:40px;--dy:0px}
@keyframes revealIn{from{opacity:0;transform:translate(var(--dx,0px),var(--dy,28px))}to{opacity:1;transform:none}}

/* Timeline: line draws itself, dots pop in */
.timeline::before{transform-origin:top;transform:scaleY(0);transition:transform 1.6s ease}
.timeline.show::before{transform:scaleY(1)}
.timeline-dot{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.timeline-item.show .timeline-dot{transform:scale(1);transition-delay:.35s}

/* Header: scroll progress bar + compact bar after scrolling */
header::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left}
.navbar{transition:height .3s ease}
header.scrolled .navbar{height:60px}
@media(max-width:900px){header.scrolled .nav-links{top:60px;height:calc(100vh - 60px)}}

/* Hover feedback */
.skill-card,.project-card,.certificate-card,.timeline-content,.info-box{transition:transform .35s ease,border-color .3s ease}
.skill-card:hover,.project-card:hover,.certificate-card:hover{transform:translateY(-6px)}
.timeline-content:hover,.info-box:hover{transform:translateX(6px)}
.skill-icon{transition:transform .35s ease,background .35s ease}
.skill-card:hover .skill-icon{transform:scale(1.1) rotate(-6deg);background:rgba(217,185,138,.18)}
.project-image img,.certificate-image img{transition:transform .7s ease}
.project-card:hover .project-image img,.certificate-card:hover .certificate-image img{transform:scale(1.05)}
.tech-card{transition:transform .3s ease,border-color .3s ease}
.tech-card:hover{transform:translateY(-4px);border-color:var(--accent)}

.btn,.contact-btn,.certificate-btn,.project-buttons a,.resume-btn{transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover,.contact-btn:hover,.certificate-btn:hover,.project-buttons a:hover,.resume-btn:hover{transform:translateY(-3px)}
.hero .social-links a,.contact .social-links a{transition:background .25s,color .25s,border-color .25s,transform .25s}
.hero .social-links a:hover,.contact .social-links a:hover{transform:translateY(-4px)}
.contact-btn i{transition:transform .3s ease}
.contact-btn:hover i{transform:translateX(4px) rotate(-12deg)}

@media(prefers-reduced-motion:reduce){
    .hero-left>*{opacity:1!important}
    .timeline::before,.timeline-dot{transform:none!important}
}