/* ===== ANIMATIONS CSS ===== */

/* --- FADE IN UP --- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp .8s ease forwards;opacity:0}

/* --- REVEAL ON SCROLL --- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* --- HERO BG SLIDESHOW --- */
.hero-bg-slideshow{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 2s ease}
.hero-slide.active{opacity:1}
.hero{position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(215,168,63,.1) 0%,transparent 50%),radial-gradient(circle at 80% 30%,rgba(15,76,129,.15) 0%,transparent 50%);z-index:1;animation:pulseBg 8s ease-in-out infinite}
@keyframes pulseBg{0%,100%{opacity:1}50%{opacity:.6}}

/* --- PARTICLES --- */
.hero-particles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.particle{position:absolute;width:4px;height:4px;background:var(--gold);border-radius:50%;opacity:0;animation:floatUp linear infinite}
@keyframes floatUp{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.6}90%{opacity:.4}100%{opacity:0;transform:translateY(-100px) scale(1)}}

/* --- PULSE BTN --- */
.pulse-btn{animation:pulseBtn 2s ease-in-out infinite}
@keyframes pulseBtn{0%,100%{box-shadow:0 4px 20px rgba(215,168,63,.3)}50%{box-shadow:0 4px 40px rgba(215,168,63,.6)}}

/* --- GLOW --- */
.glow{box-shadow:0 0 20px rgba(215,168,63,.4);animation:glow 2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(215,168,63,.4)}50%{box-shadow:0 0 35px rgba(215,168,63,.7)}}

/* --- SCROLL INDICATOR --- */
.hero-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3}
.scroll-indicator{display:flex;flex-direction:column;align-items:center;gap:4px}
.scroll-indicator span{display:block;width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);animation:scrollDown 1.5s ease-in-out infinite;opacity:0}
.scroll-indicator span:nth-child(1){animation-delay:0s}
.scroll-indicator span:nth-child(2){animation-delay:.2s}
.scroll-indicator span:nth-child(3){animation-delay:.4s}
@keyframes scrollDown{0%{opacity:0;transform:rotate(45deg) translate(-4px,-4px)}50%{opacity:1}100%{opacity:0;transform:rotate(45deg) translate(4px,4px)}}

/* --- TICKER --- */
.ticker{background:var(--navy);overflow:hidden;padding:12px 0;border-top:1px solid rgba(215,168,63,.15);border-bottom:1px solid rgba(215,168,63,.15)}
.ticker-track{display:flex;gap:48px;white-space:nowrap;animation:tickerScroll 30s linear infinite}
.ticker-item{color:var(--gold);font-size:.9rem;font-weight:600;display:inline-flex;align-items:center;gap:8px}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* --- CARD SHINE EFFECT --- */
.comp-card .img-wrap::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .6s ease}
.comp-card:hover .img-wrap::after{left:100%}

/* --- 3D CARD HOVER --- */
.comp-card{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.comp-card:hover{transform:translateY(-8px) scale(1.02)}

/* --- STEP NUMBER ROTATE --- */
.step-num{transition:transform .3s ease}
.step:hover .step-num{transform:rotate(360deg) scale(1.1)}

/* --- BADGE BOUNCE --- */
.badge-hot{animation:badgeBounce 2s ease-in-out infinite}
@keyframes badgeBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* --- FLOATING ICONS --- */
.test-card div[style*="font-size:2.5rem"]{animation:floatIcon 3s ease-in-out infinite}
.test-card:nth-child(2) div[style*="font-size:2.5rem"]{animation-delay:.5s}
.test-card:nth-child(3) div[style*="font-size:2.5rem"]{animation-delay:1s}
@keyframes floatIcon{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* --- HERO GRADIENT TEXT SHINE --- */
.hero h1{background-size:200% auto;animation:textShine 4s linear infinite}
@keyframes textShine{0%{background-position:0% center}100%{background-position:200% center}}

/* --- PROMO BANNER ZOOM --- */
.promo-banner{overflow:hidden}
.promo-banner .promo-img{transition:transform 8s ease}
.promo-banner:hover .promo-img{transform:scale(1.1)}

/* --- MOBILE --- */
@media(max-width:640px){
.hero h1{font-size:1.6rem}
.ticker-track{animation-duration:15s}
.scroll-indicator{display:none}
}