/* ==========================================================================
   Flare Star Solutions - animation layer (works with every site theme)
   Loaded after site.css. Everything is disabled for prefers-reduced-motion.
   ========================================================================== */

/* ---------- Scroll progress bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; background: linear-gradient(90deg, #F1C832, #ffdd66); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- Page load: header & top bar slide in ---------- */
.topbar { animation: slideDown .6s ease both; }
.site-header { animation: slideDown .7s ease .1s both; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }

/* ---------- Reveal on scroll (variants + stagger set by site.js) ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.reveal[data-reveal="left"] { transform: translateX(-60px); }
.reveal[data-reveal="right"] { transform: translateX(60px); }
.reveal[data-reveal="zoom"] { transform: scale(.88); }
.reveal[data-reveal="flip"] { transform: perspective(900px) rotateX(18deg) translateY(30px); transform-origin: 50% 100%; }
.reveal.in { opacity: 1; transform: none; }

/* Heading underline draws itself */
.section-head.reveal h2::after, .reveal .section-head h2::after { width: 0 !important; transition: width .9s ease .35s; }
.section-head.reveal.in h2::after, .reveal.in .section-head h2::after { width: 60px !important; }

/* ---------- Hero ---------- */
.hero { animation: heroPan 26s ease-in-out infinite alternate; }
@keyframes heroPan { from { background-position: 50% 30%; } to { background-position: 50% 70%; } }

.hero-anim { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-anim span { position: absolute; display: block; border-radius: 50%; opacity: .55; animation: floatShape 14s ease-in-out infinite; }
.hero-anim .s1 { width: 120px; height: 120px; border: 2px solid rgba(241, 200, 50, .55); top: 12%; right: 8%; }
.hero-anim .s2 { width: 16px; height: 16px; background: #F1C832; top: 30%; right: 30%; animation-duration: 9s; animation-delay: -2s; }
.hero-anim .s3 { width: 260px; height: 260px; border: 1px solid rgba(255, 255, 255, .18); bottom: -80px; right: 18%; animation-duration: 18s; }
.hero-anim .s4 { width: 10px; height: 10px; background: #fff; top: 70%; right: 6%; animation-duration: 11s; animation-delay: -5s; }
.hero-anim .s5 { width: 60px; height: 60px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .3); top: 58%; right: 40%; animation: spinFloat 20s linear infinite; }
.hero-anim .s6 { width: 8px; height: 8px; background: #F1C832; top: 18%; left: 48%; animation-duration: 7s; }
@keyframes floatShape { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(18px, -26px); } 66% { transform: translate(-14px, 16px); } }
@keyframes spinFloat { from { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(180deg) translateY(-24px); } to { transform: rotate(360deg) translateY(0); } }

/* Rotating hero word */
.hero h1 .hl { display: inline-block; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.hero h1 .hl.swap-out { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
.hero h1 .hl.swap-in { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: none; }

/* Stats glow when counted */
.hero-stats strong, .stat-box strong { transition: text-shadow .6s; }
.counted { text-shadow: 0 0 22px rgba(241, 200, 50, .45); }

/* ---------- Inner page banner ---------- */
.page-banner { animation: heroPan 30s ease-in-out infinite alternate; }
.page-banner h1 { animation: fadeUp .8s ease .25s both; }
.page-banner p { animation: fadeUp .8s ease .4s both; }
.page-banner .crumbs { animation: fadeUp .8s ease .55s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons: shine sweep ---------- */
.btn-x { position: relative; overflow: hidden; isolation: isolate; }
.btn-x::after { content: ''; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); z-index: -1; pointer-events: none; }
.btn-x:hover::after { animation: shine .75s ease; }
@keyframes shine { to { left: 130%; } }

/* ---------- Cards: lift, shine, icon pop ---------- */
.svc-card, .pf-card, .value-card, .feature, .mini-svc, .contact-card { position: relative; overflow: hidden; }
.svc-card::after, .pf-card::after, .value-card::after, .mini-svc::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 45%; background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); pointer-events: none; z-index: 2; }
.svc-card:hover::after, .pf-card:hover::after, .value-card:hover::after, .mini-svc:hover::after { animation: shine .9s ease; }

.svc-card:hover .ic i, .feature:hover .ic i, .value-card:hover .ic i, .mini-svc:hover .ic i, .contact-card:hover .ic i { animation: iconPop .6s ease; }
@keyframes iconPop { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-10deg); } 65% { transform: scale(.92) rotate(6deg); } 100% { transform: scale(1); } }

.reveal.in .step .n { animation: numPop .7s cubic-bezier(.3, 1.6, .5, 1) .25s both; }
@keyframes numPop { from { transform: scale(0); } to { transform: scale(1); } }

/* Portfolio: animate cards back in when filtering */
.pf-item.pf-show { animation: cardIn .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(.95); } to { opacity: 1; transform: none; } }
.pf-filter { transition: all .3s, transform .2s; }
.pf-filter:active { transform: scale(.95); }

/* Client marquee chips */
.marquee-track span { transition: transform .3s, box-shadow .3s; }
.marquee-track span:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(18, 7, 52, .12); }

/* ---------- Floating buttons ---------- */
.wa-float::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; animation: pulseRing 2.2s ease-out infinite; }
@keyframes pulseRing { from { transform: scale(1); opacity: .6; } to { transform: scale(1.9); opacity: 0; } }
.wa-float { isolation: isolate; }

/* ---------- Nav underline & dropdown ---------- */
.nav-drop-menu a { transition: background .25s, padding-left .25s, color .25s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .reveal, .reveal[data-reveal] { opacity: 1 !important; transform: none !important; }
    .scroll-progress, .hero-anim { display: none; }
}
@media (max-width: 767px) {
    .hero-anim .s3, .hero-anim .s5 { display: none; }
    .reveal[data-reveal="left"], .reveal[data-reveal="right"] { transform: translateY(34px); }
}

/* Extras that only the funky theme shows (site.css overrides with higher specificity) */
.funky-only { display: none; }
.cursor-dot, .cursor-ring { display: none; }