/* =========================================================
   HOME PAGE — PREMIUM HOVER & BACKGROUND ANIMATION LAYER
   Load this AFTER style.css. Uses existing theme variables
   (--sky, --orange, --card, --border, --shadow, --transition)
   so it auto-matches light/dark mode. No PHP logic touched.
   ========================================================= */

/* ---------- 1. CURSOR-TRACKED SPOTLIGHT ON SECTION BACKGROUNDS ---------- */
/* Add class="spotlight-bg" to any <section> wrapper (about, projects,
   why-choose-us, testimonials, blog). JS sets --mx/--my on mousemove. */
.spotlight-bg {
    position: relative;
    isolation: isolate;
}
.spotlight-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%),
                var(--sky-glow, rgba(14,165,233,.18)) 0%,
                transparent 68%);
    transition: opacity .5s ease;
}
.spotlight-bg:hover::before {
    opacity: 1;
}

/* ---------- 2. HERO — FLOATING AMBIENT GLOW ORBS + PARALLAX TILT ---------- */
.hero-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
    opacity: .55;
    animation: heroOrbFloat 9s ease-in-out infinite;
}
.hero-glow-orb.orb-sky {
    width: 340px; height: 340px;
    background: radial-gradient(circle, var(--sky) 0%, transparent 70%);
    top: 8%; left: 6%;
}
.hero-glow-orb.orb-orange {
    width: 280px; height: 280px;
    background: radial-gradient(circle, var(--orange) 0%, transparent 70%);
    bottom: 10%; right: 8%;
    animation-delay: 3s;
}
@keyframes heroOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(24px, -30px) scale(1.12); }
}

/* subtle 3D tilt for hero text block, driven by JS mousemove */
.hero-content {
    transform: perspective(1000px) rotateX(var(--tiltx, 0deg)) rotateY(var(--tilty, 0deg));
    transition: transform .25s ease-out;
    will-change: transform;
}

/* magnetic buttons inside hero (and anywhere .btn-magnetic is added) */
.btn-magnetic {
    transition: transform .18s ease, box-shadow .3s ease;
}
.btn-magnetic:hover {
    box-shadow: 0 10px 30px var(--sky-glow, rgba(14,165,233,.35));
}

/* ---------- 3. STAT CARDS — GLOW RING + ICON POP ---------- */
.stat-card {
    position: relative;
    overflow: hidden;
}
.stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent, var(--sky-glow, rgba(14,165,233,.10)));
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.stat-card:hover::after {
    opacity: 1;
}
.stat-card:hover .stat-icon {
    transform: scale(1.18) rotate(-6deg);
    opacity: 1;
    filter: drop-shadow(0 0 14px var(--sky-glow, rgba(14,165,233,.5)));
}
.stat-icon {
    transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease, filter .4s ease;
}
.stat-card:hover .stat-num {
    color: var(--orange, #f97316);
    transition: color .3s ease;
}

/* ---------- 4. ABOUT IMAGE — 3D TILT + GLOW BORDER ---------- */
.about-img-main {
    transition: transform .35s ease, box-shadow .35s ease;
    transform: perspective(1000px) rotateX(var(--imgtiltx, 0deg)) rotateY(var(--imgtilty, 0deg));
    will-change: transform;
}
.about-images:hover .about-img-main {
    box-shadow: 0 30px 60px -10px var(--sky-glow, rgba(14,165,233,.35)), var(--shadow-xl);
}
.about-img-accent {
    transition: transform .4s ease, box-shadow .4s ease;
}
.about-images:hover .about-img-accent {
    transform: translateY(-6px) scale(1.04);
}

/* ---------- 5. PROJECT CARDS — SHINE SWEEP ON HOVER ---------- */
.project-card {
    position: relative;
}
.project-card::before {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 60%; height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.35) 50%, transparent 100%);
    z-index: 3;
    pointer-events: none;
    transition: left .75s ease;
}
.project-card:hover::before {
    left: 150%;
}

/* ---------- 6. BLOG / TESTIMONIAL CARDS — LIFT + BORDER GLOW ---------- */
.blog-card, .testimonial-card {
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.blog-card:hover, .testimonial-card:hover {
    transform: translateY(-8px);
    border-color: var(--sky, #0ea5e9);
    box-shadow: var(--shadow-xl);
}

/* ---------- 7. CTA SECTION — ANIMATED GRADIENT SHIFT ---------- */
.cta-animated-bg {
    background: linear-gradient(120deg, var(--sky-deep), var(--sky), var(--orange-dark), var(--sky-deep));
    background-size: 300% 300%;
    animation: ctaGradientShift 12s ease infinite;
}
@keyframes ctaGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-glow-orb, .cta-animated-bg { animation: none; }
    .hero-content, .about-img-main { transform: none !important; }
}