/**
 * ZYNQOR — Real-3D Ambient Scene
 * Layering for the #zynqor-3d canvas (created by zynqor-3d.js).
 * All page panels are transparent over body, so the fixed canvas
 * shows through site-wide.
 */

#zynqor-3d {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

/* Hero panel paints an opaque background that would hide the canvas —
   let the 3D scene show through; .hero-bg keeps its radial glow. */
body.z3d-active .hero {
    background: transparent;
}

/* The old floating CSS shapes fight the real 3D layer visually —
   fade them back so depth reads from the particle network instead. */
body.z3d-active .geo-float {
    opacity: 0.35;
}

/* These sections painted opaque backgrounds that completely hid the
   3D scene (features/FAQ/CTA were already transparent — this makes
   the whole site consistent). Cards keep their own surfaces, so
   readability is unchanged. */
body.z3d-active .how-it-works,
body.z3d-active .recommended,
body.z3d-active .testimonials {
    background: transparent;
}

/* Advanced features: keep a whisper of its blue-violet tint but let
   the particle network show through. */
body.z3d-active .advanced-features {
    background: linear-gradient(180deg,
            rgba(5, 5, 7, 0) 0%,
            rgba(10, 10, 22, 0.45) 50%,
            rgba(5, 5, 7, 0) 100%);
}

/* Hero mockup: JS tilt takes over transform on hover; keep transitions
   off so the lerp in zynqor-3d.js stays buttery. */
body.z3d-active .hero-mockup {
    will-change: transform;
}

/* ── Testimonial avatars: initials instead of stock photos ──
   Same footprint as the old .author-avatar-img (56px circle). */
.author-avatar-initials {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Space Grotesk', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
    color: #0a0f1c;
    background: linear-gradient(135deg, #00d4ff 0%, #0aa7c9 100%);
    border: 2px solid rgba(0, 212, 255, 0.55);
}

.author-avatar-initials.avatar-tint-2 {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d3fd1 100%);
    border-color: rgba(139, 92, 246, 0.55);
    color: #f2ecff;
}

.author-avatar-initials.avatar-tint-3 {
    background: linear-gradient(135deg, #22d3a5 0%, #129c78 100%);
    border-color: rgba(34, 211, 165, 0.55);
}

/* ── Overflow safety valve (set by fps.js) ──────────────────────
   When a panel's content is taller than the viewport, it becomes
   scrollable instead of silently truncating. Wheel/keys/touch
   scroll within the panel first; page-flip happens at the edges. */
.fp-scrollable {
    overflow-y: auto !important;
    max-height: 100vh;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 212, 255, 0.35) transparent;
}

.fp-scrollable::-webkit-scrollbar {
    width: 5px;
}

.fp-scrollable::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.35);
    border-radius: 3px;
}

/* ── Mobile: kill horizontal displacement ───────────────────────
   Decorative elements (hero glow, tickers) are wider than small
   screens. overflow-x: hidden still allows PROGRAMMATIC horizontal
   scrolling (anchor jumps from the mobile menu shift the whole page
   sideways and truncate content on the left). `clip` forbids all
   horizontal scrolling; the hidden fallback covers old browsers.  */
@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        overflow-x: clip;
        max-width: 100vw;
    }

    .hero-glow {
        width: 100vw;
        max-width: 100%;
    }

    /* Sideways reveal states widen the page on small screens (off-screen
       sections sit translated ±70px until revealed, and anchor jumps then
       scroll the body horizontally). Reveal from below instead. */
    section:not(.hero).reveal-from-left,
    section:not(.hero).reveal-from-right {
        transform: translateY(48px);
    }
}

/* ── Short-viewport typography: shrink hero/section chrome so
   panels fit without scrolling on 13" laptops (≤ 700px tall) ── */
@media (min-width: 769px) and (max-height: 700px) {
    .section-title {
        font-size: clamp(24px, 4.2vh, 38px) !important;
    }

    .section-subtitle {
        font-size: clamp(13px, 2vh, 16px) !important;
    }

    .section-header {
        margin-bottom: clamp(14px, 3vh, 28px) !important;
    }

    .hero-title {
        font-size: clamp(30px, 6.5vh, 52px) !important;
    }

    .fp-panel-inner {
        padding-top: clamp(8px, 1.5vh, 16px);
        padding-bottom: clamp(8px, 1.5vh, 16px);
    }
}