/* ============================================================
   CodiumX — 3D Overrides
   Canvas layering, perspective, preserve-3d for GSAP animations
   ============================================================ */

/* ---------- Lenis smooth scroll ---------- */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* ---------- Three.js Background Canvas ---------- */
#threeBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* ---------- Ensure content sits above canvas ---------- */
body > * {
    position: relative;
    z-index: 1;
}

/* ---------- 3D Perspective Containers ---------- */
.services__grid,
.pricing__grid,
.about__values,
.tech__architecture,
.problems__column--problems,
.problems__column--solutions {
    perspective: 1000px;
}

/* ---------- Preserve-3D on tilt cards ---------- */
.services__card,
.pricing__card,
.about__value,
.tech__card,
.problems__card,
.problems__card--solution {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ---------- Hero device perspective ---------- */
.hero__device-scene {
    perspective: 1000px;
    perspective-origin: 50% 40%;
}

.hero__device {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ---------- FAQ items 3D ---------- */
.faq__list {
    perspective: 800px;
}

.faq__item {
    transform-style: preserve-3d;
}

/* ---------- Contact 3D ---------- */
.contact__form-wrapper {
    transform-style: preserve-3d;
}

/* ---------- CTA 3D ---------- */
.cta__content {
    transform-style: preserve-3d;
}

/* ---------- Scroll progress bar above everything ---------- */
.scroll-progress {
    z-index: 10000;
}

/* ---------- Section titles ---------- */
.section-tag,
.section-title,
.section-subtitle {
    will-change: transform, opacity;
}

/* ---------- Portfolio 3D ---------- */
.portfolio__card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ---------- Testimonials 3D ---------- */
.testimonials__slider {
    perspective: 1200px;
}

.testimonials__track {
    transform-style: preserve-3d;
}

.testimonials__card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* ---------- CTA clip-path reveal ---------- */
.cta__content {
    will-change: clip-path;
}

/* ---------- Word animation base ---------- */
.word-anim {
    will-change: transform, opacity;
}

/* ---------- Immersive section reveals ---------- */
#problems,
#about,
#pricing {
    will-change: clip-path;
}

/* ---------- Prevent CSS transitions from fighting GSAP ---------- */
.services__card,
.pricing__card,
.about__value,
.tech__card,
.problems__card,
.problems__card--solution,
.portfolio__card,
.testimonials__card,
.faq__item,
.contact__form-wrapper,
.cta__content,
.hero__content,
.hero__visual,
.hero__badge {
    transition-property: background, background-color, border-color, box-shadow, color, border !important;
}

/* ============================================================
   GSAP FALLBACK — Content stays visible if GSAP fails to load
   JS adds .has-gsap to body on init; without it, nothing hides
   ============================================================ */

/* No GSAP = no clip-path reveals (sections fully visible) */
body:not(.has-gsap) #problems,
body:not(.has-gsap) #about,
body:not(.has-gsap) #pricing {
    clip-path: none !important;
}

body:not(.has-gsap) .cta__content {
    clip-path: none !important;
}

/* No GSAP = all text/cards stay fully visible */
body:not(.has-gsap) .section-tag,
body:not(.has-gsap) .section-title,
body:not(.has-gsap) .section-subtitle,
body:not(.has-gsap) .section-desc,
body:not(.has-gsap) .services__card,
body:not(.has-gsap) .pricing__card,
body:not(.has-gsap) .tech__card,
body:not(.has-gsap) .tech__flow-node,
body:not(.has-gsap) .problems__card,
body:not(.has-gsap) .problems__card--solution,
body:not(.has-gsap) .portfolio__card,
body:not(.has-gsap) .testimonials__card,
body:not(.has-gsap) .about__value,
body:not(.has-gsap) .about__text,
body:not(.has-gsap) .about__stat,
body:not(.has-gsap) .faq__item,
body:not(.has-gsap) .contact__info,
body:not(.has-gsap) .contact__form-wrapper,
body:not(.has-gsap) .hero__content,
body:not(.has-gsap) .hero__visual,
body:not(.has-gsap) .hero__badge {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Safety class — applied by JS timeout to force-reveal stuck elements */
.gsap-force-visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
}

/* ---------- Mobile: hide Three.js canvas ---------- */
@media (max-width: 768px) {
    #threeBg {
        display: none;
    }
}

/* ---------- Reduced motion: hide canvas ---------- */
@media (prefers-reduced-motion: reduce) {
    #threeBg {
        display: none !important;
    }
}