/* ═══════════════════════════════════════════════════════════════
   CINEMATIC.CSS — Initial States for GSAP Animations
   Sets elements to their "before animation" state.
   GSAP (cinematic.js) then animates them to their final state.
   
   These styles ONLY affect elements when cinematic.js is loaded.
   If JS fails, the prefers-reduced-motion fallback makes everything visible.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero Panel: Initial Hidden States ── */
#pan-hero .hero-title,
#pan-hero .hero-subtitle,
#pan-hero .hero-cta,
#pan-hero .trust-badges {
    opacity: 0;
    transform: translateY(32px);
    will-change: transform, opacity;
}

#pan-hero .hero-visual {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
    will-change: transform, opacity;
}

#pan-hero .hero-badge-bottom {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

#pan-hero .logo-scroll {
    opacity: 0;
    will-change: opacity;
}

/* ── Feature Panels: Section Headers ── 
   NOTE: Exclude panels whose PARENT is already opacity:0 to avoid double-opacity trap.
   #pan-pricing → parent .fp-pricing-intro is opacity:0
   Section headers inside #pan-pricing are animated by animatePricingIntro() via parent.
── */
.fp-page:not(#pan-pricing) .section-header {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
}

/* ── Feature Cards (override fps.css defaults for GSAP control) ── */
.fp-page .feature-card {
    will-change: transform, opacity;
}

/* ── How It Works Steps ── */
#pan-how .step-card {
    will-change: transform, opacity;
}

/* ── Pricing ── 
   Parent wrapper hides entire pricing-intro block.
   Children (section-header, stats, shield) inherit parent opacity — no separate rules needed.
── */
#pan-pricing .fp-pricing-intro {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
}

/* ── Reviews ── */
#pan-reviews .section-header {
    opacity: 0;
    transform: translateY(28px);
}

/* ── FAQ ── */
#pan-faq .section-header {
    opacity: 0;
    transform: translateY(28px);
}

#pan-faq .faq-grid {
    opacity: 0;
    transform: translateY(20px);
    will-change: transform, opacity;
}

/* ── CTA Panels ── */
#pan-cta .fp-panel-content,
#pan-affiliate .fp-panel-content {
    opacity: 0;
    transform: translateY(24px);
    will-change: transform, opacity;
}

/* ── Partners (Broker/VPS) ── */
#pan-partners .section-header {
    opacity: 0;
    transform: translateY(28px);
}

/* ═══════════════════════════════════════════════════════════════
   CONTINUOUS EFFECTS — Always-running subtle motion
   ═══════════════════════════════════════════════════════════════ */

/* Gentle floating for hero mockup (GSAP will apply via JS, this is fallback) */
.hero-mockup {
    will-change: transform;
    transform: translateZ(0);
    /* GPU layer promotion */
}

/* Hero orbs: enhanced parallax-ready */
.hero-orb {
    will-change: transform;
    transform: translateZ(0);
    transition: transform 0.3s ease-out;
}

/* ── GPU Layer Promotion — force compositing for smooth animations ── */
.feature-card,
.step-card,
.pricing-card,
.testimonial-card {
    transform: translateZ(0);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM HERO GLOW — Animated gradient aura behind hero visual
   Inspired by Stripe/Linear/Vercel fintech aesthetics.
   ═══════════════════════════════════════════════════════════════ */

#pan-hero .hero-visual {
    position: relative;
}

#pan-hero .hero-visual::before {
    content: '';
    position: absolute;
    inset: -40% -30%;
    background:
        radial-gradient(ellipse 60% 50% at 35% 45%,
            rgba(0, 212, 255, 0.14) 0%,
            rgba(8, 145, 178, 0.07) 35%,
            transparent 65%),
        radial-gradient(ellipse 50% 40% at 65% 55%,
            rgba(0, 180, 220, 0.10) 0%,
            rgba(6, 120, 160, 0.04) 40%,
            transparent 70%);
    filter: blur(50px);
    z-index: -1;
    animation: heroGlowDrift 8s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes heroGlowDrift {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }

    33% {
        transform: translate(2%, -1.5%) scale(1.04);
        opacity: 0.85;
    }

    66% {
        transform: translate(-1%, 2%) scale(0.97);
        opacity: 0.75;
    }

    100% {
        transform: translate(1.5%, -1%) scale(1.02);
        opacity: 1;
    }
}

/* Disable glow on mobile — save GPU budget */
@media (max-width: 768px) {
    #pan-hero .hero-visual::before {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS — Enhanced hover effects
   ═══════════════════════════════════════════════════════════════ */

/* Button spring-hover effect */
.btn {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0px) scale(0.98);
    transition-duration: 0.1s;
}

/* Card lift — enhanced glass effect on hover */
.feature-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease !important;
}

.feature-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 212, 255, 0.15) !important;
}

/* Testimonial card hover lift */
.testimonial-card {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease !important;
}

.testimonial-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25) !important;
}

/* Pricing card hover */
.pricing-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease !important;
}

/* FAQ item hover */
.faq-item {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

.faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 212, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Trust badge hover */
.trust-badge {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease !important;
}

.trust-badge:hover {
    transform: translateY(-2px);
}

/* Nav link underline animation */
.nav-links a::after {
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SECONDARY PAGES — Scroll reveal base states
   Applied to guide, affiliate, terms, privacy via cinematic-pages.js
   ═══════════════════════════════════════════════════════════════ */

/* Scroll-reveal elements on non-FPS pages */
.cin-reveal {
    opacity: 0;
    transform: translateY(28px);
    will-change: transform, opacity;
    transition: none;
    /* GSAP controls the transition */
}

.cin-reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    will-change: transform, opacity;
}

.cin-reveal-right {
    opacity: 0;
    transform: translateX(40px);
    will-change: transform, opacity;
}

.cin-reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    will-change: transform, opacity;
}


/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    /* Make everything visible immediately — no animations */
    #pan-hero .hero-title,
    #pan-hero .hero-subtitle,
    #pan-hero .hero-cta,
    #pan-hero .trust-badges,
    #pan-hero .hero-visual,
    #pan-hero .hero-badge-bottom,
    #pan-hero .logo-scroll,
    .fp-page .section-header,
    #pan-pricing .fp-pricing-intro,
    #pan-faq .faq-grid,
    #pan-cta .fp-panel-content,
    #pan-affiliate .fp-panel-content,
    .cin-reveal,
    .cin-reveal-left,
    .cin-reveal-right,
    .cin-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    /* Disable hero glow animation */
    #pan-hero .hero-visual::before {
        animation: none !important;
        opacity: 0.5 !important;
    }

    /* Disable hover motion */
    .btn:hover,
    .btn:active,
    .feature-card:hover,
    .testimonial-card:hover,
    .faq-item:hover,
    .trust-badge:hover {
        transform: none !important;
    }

    /* Kill all transitions */
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}