/* ===========================
   Soul Healing AI Animations
=========================== */

.reveal{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.reveal.active{
opacity:1;
transform:translateY(0);
}

.fade-in{
animation:fadeIn 1s ease forwards;
}

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

.slide-left{
animation:slideLeft .9s ease both;
}
@keyframes slideLeft{
from{opacity:0;transform:translateX(-80px)}
to{opacity:1;transform:translateX(0)}
}

.slide-right{
animation:slideRight .9s ease both;
}
@keyframes slideRight{
from{opacity:0;transform:translateX(80px)}
to{opacity:1;transform:translateX(0)}
}

.zoom-in{
animation:zoomIn .8s ease both;
}
@keyframes zoomIn{
from{opacity:0;transform:scale(.8)}
to{opacity:1;transform:scale(1)}
}

.float{
animation:floatY 4s ease-in-out infinite;
}
@keyframes floatY{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-16px)}
}

.rotate-slow{
animation:rotateSlow 20s linear infinite;
}
@keyframes rotateSlow{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}

.glow{
animation:glow 2.5s ease-in-out infinite alternate;
}
@keyframes glow{
from{
box-shadow:0 0 10px rgba(20,184,166,.2),
0 0 20px rgba(20,184,166,.15);
}
to{
box-shadow:0 0 25px rgba(94,234,212,.55),
0 0 55px rgba(94,234,212,.35);
}
}

.gradient-text{
background:linear-gradient(90deg,#14B8A6,#5EEAD4,#ffffff,#14B8A6);
background-size:300% auto;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:gradientMove 6s linear infinite;
}

@keyframes gradientMove{
to{background-position:300% center}
}

.card{
transition:transform .35s ease,box-shadow .35s ease;
}

.card:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 20px 45px rgba(20,184,166,.25);
}

.primary-btn,
.btn{
position:relative;
overflow:hidden;
}

.primary-btn::after,
.btn::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
transform:skewX(-25deg);
}

.primary-btn:hover::after,
.btn:hover::after{
left:170%;
transition:1s;
}

.pulse{
animation:pulse 2s infinite;
}

@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.04)}
100%{transform:scale(1)}
}

.breath{
animation:breath 5s ease-in-out infinite;
}

@keyframes breath{
0%,100%{transform:scale(1)}
50%{transform:scale(1.03)}
}

.typing::after{
content:"|";
animation:blink .8s infinite;
}

@keyframes blink{
50%{opacity:0}
}

.parallax{
will-change:transform;
transition:transform .2s linear;
}

.hero-right lottie-player{
animation:robotFloat 5s ease-in-out infinite;
}

@keyframes robotFloat{
0%,100%{
transform:translateY(0) rotate(0deg);
}
50%{
transform:translateY(-18px) rotate(2deg);
}
}

.navbar{
animation:navDrop .8s ease;
}

@keyframes navDrop{
from{
opacity:0;
transform:translateY(-60px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.section{
animation:sectionFade .8s ease both;
animation-timeline:view();
animation-range:entry 10% cover 30%;
}

@keyframes sectionFade{
from{
opacity:0;
transform:translateY(60px);
}
to{
opacity:1;
transform:translateY(0);
}
}

.cursor-glow{
position:fixed;
width:220px;
height:220px;
border-radius:50%;
pointer-events:none;
background:radial-gradient(circle,
rgba(94,234,212,.20),
transparent 70%);
filter:blur(12px);
mix-blend-mode:screen;
z-index:9999;
transform:translate(-50%,-50%);
}

@media(max-width:768px){
.cursor-glow{
display:none;
}
}