/* ===================================================================
   Cinematic motion layer (self-hosted, no CDN).
   The .reveal hiding class is added by js/motion.js at runtime, so if
   the script ever fails to load nothing is hidden — content stays visible.
   All motion is disabled under prefers-reduced-motion.
   =================================================================== */

@media (prefers-reduced-motion: no-preference) {

    .reveal {
        opacity: 0;
        transform: translate3d(0, 34px, 0);
        transition:
            opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
        will-change: opacity, transform;
    }

    .reveal.reveal--scale {
        transform: translate3d(0, 40px, 0) scale(0.965);
    }

    .reveal.reveal--left  { transform: translate3d(-44px, 0, 0); }
    .reveal.reveal--right { transform: translate3d(44px, 0, 0); }

    .reveal.in {
        opacity: 1;
        transform: none;
    }

    /* Parallax targets get GPU promotion + smoothing */
    .hero-logo,
    .hero-headline,
    .hero .hero-content,
    .workflow-preview {
        will-change: transform;
    }
}

/* ---- Hero depth: slow-floating accent orbs (pure CSS, cheap) ---- */
.hero {
    position: relative;
}
.hero .hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(38px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}
.hero .hero-orb--cyan {
    width: 340px; height: 340px;
    left: -90px; top: 12%;
    background: radial-gradient(circle, rgba(0, 192, 250, 0.55), transparent 68%);
    animation: orbFloatA 16s ease-in-out infinite;
}
.hero .hero-orb--blue {
    width: 420px; height: 420px;
    right: -120px; bottom: 4%;
    background: radial-gradient(circle, rgba(1, 94, 234, 0.5), transparent 68%);
    animation: orbFloatB 20s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .hero .hero-orb { animation: none !important; }
}
@keyframes orbFloatA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(40px, 30px, 0) scale(1.08); }
}
@keyframes orbFloatB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-50px, -34px, 0) scale(1.1); }
}

/* Keep hero text/logo above the orbs */
.hero-container { position: relative; z-index: 2; }

/* ---- Card hover lift + glow (composes with the dark theme) ---- */
.trust-card,
.capability-card,
.portfolio-preview-card,
.preview-build-item {
    transition:
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease !important;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .trust-card:hover,
    .capability-card:hover,
    .portfolio-preview-card:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(0, 192, 250, 0.25) !important;
        border-color: rgba(0, 192, 250, 0.42) !important;
    }
}

/* Workflow preview gets a soft lift as a single cinematic object */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .workflow-preview {
        transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.5s ease;
    }
    .workflow-preview:hover {
        transform: translateY(-6px) scale(1.006);
    }
}

/* Hero depth orbs sit behind the hero content (network/flow live in flow.css) */
.hero .hero-orb { z-index: 0; }