/* ============================================================
   EsperantAI · Landing Enhancements · 2026-08-13 v2
   Aditive layer — does NOT override landing.css or hot-sale.css.
   Load AFTER both. All selectors are new or extend with :hover.
   ============================================================ */

/* ============================================================
   0. JS-LOADED FLAG — visible proof enhancements are active
   ============================================================ */

body.enhancements-active {
    /* Subtle tint shift only visible when JS runs */
    --enh-glow: rgba(88, 166, 255, 0.06);
}

/* ============================================================
   0.1. WIDTH OVERRIDE — 98% viewport on desktop, full on mobile
   Overrides --max-w from landing.css without touching it.
   ============================================================ */

:root {
    --max-w: 98vw;
}

/* Cap at 1600px so ultra-wide monitors don't stretch too much */
@media (min-width: 1601px) {
    :root {
        --max-w: 1600px;
    }
}

/* Container padding stays responsive */
.container {
    max-width: var(--max-w);
    padding-left: 2vw;
    padding-right: 2vw;
}

/* Showcase and trust bar also widen */
body.enhancements-active .showcase {
    max-width: 98vw;
}

body.enhancements-active .trust-logos {
    max-width: 98vw;
}

/* Topbar inner also widens */
body.enhancements-active .topbar-inner {
    max-width: var(--max-w);
}

/* Section sub-text max widths stay readable */
body.enhancements-active .section-h2,
body.enhancements-active .section-sub {
    max-width: 780px;
}

body.enhancements-active::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #58a6ff, #bc8cff, #ff7b72, transparent);
    z-index: 9998;
    pointer-events: none;
    opacity: 0.6;
    animation: enhTopGlow 3s ease-in-out infinite;
}

@keyframes enhTopGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

/* ============================================================
   1. SCROLL REVEAL ANIMATIONS — MORE DRAMATIC
   ============================================================ */

[data-reveal] {
    opacity: 0;
    transform: translateY(48px) scale(0.98);
    transition:
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered children inside reveal groups */
[data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 400ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 500ms; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 600ms; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 700ms; }

/* ============================================================
   2. SCROLL PROGRESS BAR — THICKER, MORE VISIBLE
   ============================================================ */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: linear-gradient(90deg, #58a6ff 0%, #bc8cff 50%, #ff7b72 100%);
    z-index: 9999;
    pointer-events: none;
    transition: width 0.1s linear;
    box-shadow:
        0 0 12px rgba(88, 166, 255, 0.6),
        0 0 24px rgba(188, 140, 255, 0.3);
}

/* ============================================================
   3. CARD HOVER GLOW ENHANCEMENT — STRONGER
   ============================================================ */

.intent-card:hover,
.vcam-card:hover,
.compat-col:hover {
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(88, 166, 255, 0.3),
        0 0 32px rgba(88, 166, 255, 0.15) !important;
    border-color: rgba(88, 166, 255, 0.4) !important;
}

.feature-card:hover,
.plan:hover {
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(188, 140, 255, 0.25),
        0 0 28px rgba(188, 140, 255, 0.12) !important;
}

/* ============================================================
   4. PRICING CARD HIGHLIGHT PULSE — MORE NOTICEABLE
   ============================================================ */

@keyframes planPulse {
    0%, 100% {
        box-shadow:
            0 16px 50px rgba(0, 0, 0, 0.3),
            0 0 0 1px rgba(188, 140, 255, 0.25),
            0 0 24px rgba(188, 140, 255, 0.08);
    }
    50% {
        box-shadow:
            0 16px 50px rgba(0, 0, 0, 0.3),
            0 0 0 2px rgba(188, 140, 255, 0.5),
            0 0 48px rgba(188, 140, 255, 0.2);
    }
}

.plan-popular,
.plan:has(.plan-ribbon),
.plan-pro-plus {
    animation: planPulse 3s ease-in-out infinite;
}

/* ============================================================
   5. MAGNETIC BUTTONS
   ============================================================ */

[data-magnetic] {
    transition:
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.25s ease,
        background 0.25s ease;
    will-change: transform;
}

[data-magnetic].magnetic-reset {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   6. HERO ENTRY ENHANCEMENT — glow pulse on showcase frame
   ============================================================ */

body.enhancements-active .showcase-frame {
    animation: showcaseGlow 4s ease-in-out infinite;
}

@keyframes showcaseGlow {
    0%, 100% {
        box-shadow:
            0 32px 80px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 60px rgba(88, 166, 255, 0.18);
    }
    50% {
        box-shadow:
            0 32px 80px rgba(0, 0, 0, 0.6),
            0 0 0 1px rgba(255, 255, 255, 0.06),
            0 0 80px rgba(88, 166, 255, 0.3),
            0 0 120px rgba(188, 140, 255, 0.1);
    }
}

/* ============================================================
   7. BADGE FLOAT ENHANCEMENT — more travel
   ============================================================ */

body.enhancements-active .showcase-badge {
    animation-duration: 4s;
}

@keyframes badgeFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ============================================================
   REDUCED MOTION — disable all enhancements
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .scroll-progress { display: none; }
    body.enhancements-active::before { display: none; }
    .plan-popular,
    .plan:has(.plan-ribbon),
    .plan-pro-plus {
        animation: none !important;
    }
    [data-magnetic] {
        transform: none !important;
        transition: none !important;
    }
    body.enhancements-active .showcase-frame {
        animation: none !important;
    }
}

/* ============================================================
   MOBILE — disable magnetic on touch devices
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
    [data-magnetic] {
        transform: none !important;
    }
}