/**
 * JAIK Solutions — GSAP Animation Styles
 *
 * Base states, split-text containers, scroll progress, and
 * GSAP-specific visual enhancements.
 *
 * @package JaikSolutions
 */

/* ============================================================
   OVERRIDE: Disable CSS scroll-behavior when GSAP is active
   (prevents jank from double-smoothing)
   ============================================================ */
html.gsap-active {
    scroll-behavior: auto;
}

/* ============================================================
   SCROLL PROGRESS BAR — fixed top indicator
   ============================================================ */
.gsap-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-primary);
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 10000;
    pointer-events: none;
    will-change: transform;
}

/* ============================================================
   SPLIT TEXT — Word & character containers
   ============================================================ */
.gsap-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: 0.05em; /* prevent descender clipping */
}

.gsap-word-inner {
    display: inline-block;
    will-change: transform, opacity;
}

.gsap-char {
    display: inline-block;
    will-change: transform, opacity;
}

.gsap-line {
    display: block;
    overflow: hidden;
}

.gsap-line-inner {
    display: block;
    will-change: transform;
}

/* ============================================================
   PERFORMANCE HINTS — will-change on animated elements
   ============================================================ */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale,
.glass-card,
.cta-box,
.section-kicker,
.hero-content,
.hero-badge,
.hero-description,
.hero-actions .btn,
.scroll-indicator,
.particle-canvas {
    will-change: transform, opacity;
}

/* ============================================================
   GSAP INITIAL STATES — Prevent FOUC
   (Elements start invisible; GSAP animates them in)
   ============================================================ */
.gsap-active .reveal,
.gsap-active .reveal-left,
.gsap-active .reveal-right,
.gsap-active .reveal-scale {
    opacity: 0;
    transition: none !important;
}

/* Hero elements — hidden until GSAP fires */
.gsap-active .hero-badge,
.gsap-active .hero h1,
.gsap-active .hero-description,
.gsap-active .hero-actions .btn,
.gsap-active .scroll-indicator {
    opacity: 0;
}

/* ============================================================
   CLIP-PATH REVEAL — Used by GSAP for mask animations
   ============================================================ */
.gsap-clip-reveal {
    clip-path: inset(100% 0 0 0);
}

/* ============================================================
   3D PERSPECTIVE CONTAINER — For rotateX/Y card reveals
   ============================================================ */
.services-grid,
.pricing-grid,
.info-grid,
.team-grid {
    perspective: 1200px;
}

/* ============================================================
   ENHANCED GRADIENT TEXT — GSAP-driven shimmer
   ============================================================ */
.gradient-text {
    background-size: 400% 100%;
    will-change: background-position;
}

/* ============================================================
   GRADIENT TEXT — GSAP-driven shimmer
   ============================================================ */
.glass-card {
    transition: transform 0.4s var(--ease-out-expo),
                box-shadow 0.4s var(--ease-out-expo),
                background 0.3s var(--ease-out-expo),
                border-color 0.4s ease !important;
}

/* ============================================================
   STAGGER CHILDREN — Disable CSS stagger (GSAP handles it)
   ============================================================ */
.gsap-active .stagger-children .reveal {
    transition-delay: 0s !important;
}

/* ============================================================
   SCROLL INDICATOR — Subtle bounce while hero is visible
   ============================================================ */
@keyframes gsap-scroll-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

.scroll-indicator.gsap-visible {
    animation: gsap-scroll-bounce 2s ease-in-out infinite;
}

/* ============================================================
   TECH BADGE — Enhanced pop-in starting state
   ============================================================ */
.tech-badge {
    will-change: transform, opacity;
}

/* ============================================================
   PRICING FEATURED — GSAP glow animation target
   ============================================================ */
.pricing-card.featured {
    will-change: box-shadow;
}

/* ============================================================
   CTA BOX — Subtle background animation when pinned
   ============================================================ */
.cta-box {
    will-change: transform, opacity;
}

/* ============================================================
   PAGE HEADER — Perspective for 3D word reveal
   ============================================================ */
.page-header-content {
    perspective: 800px;
}

.page-header-content h1 .gsap-word {
    perspective: 600px;
}

/* ============================================================
   RESPONSIVE — Reduce complexity on mobile
   ============================================================ */
@media (max-width: 768px) {
    .gsap-scroll-progress {
        height: 2px;
    }

    .services-grid,
    .pricing-grid,
    .info-grid,
    .team-grid {
        perspective: none;
    }

    .page-header-content {
        perspective: none;
    }

    .page-header-content h1 .gsap-word {
        perspective: none;
    }
}

/* ============================================================
   PREFERS REDUCED MOTION — Disable all GSAP visual states
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .gsap-scroll-progress {
        display: none;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .gsap-word-inner,
    .gsap-char,
    .gsap-line-inner {
        opacity: 1 !important;
        transform: none !important;
    }
}