/* ============================================================
   FinVillaHub — P20.12 Unified Cinematic Motion Core
   Step 20
   Visual-only layer.
   No backend / formula / payment / entitlement changes.
   ============================================================ */

:root {
    --fv-motion-perspective: 1400px;
    --fv-motion-depth: 28px;
    --fv-motion-lift: -8px;
    --fv-motion-duration: 700ms;
    --fv-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------
   GLOBAL MOTION SURFACE
   ------------------------------------------------------------ */

.fv-motion-scene {
    position: relative;
    isolation: isolate;
    perspective: var(--fv-motion-perspective);
    transform-style: preserve-3d;
    overflow: clip;
}

.fv-motion-scene::before,
.fv-motion-scene::after {
    content: "";
    position: absolute;
    inset: -15%;
    pointer-events: none;
    z-index: -1;
}

.fv-motion-scene::before {
    background:
        radial-gradient(
            circle at 22% 30%,
            rgba(218, 183, 112, .13),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 42%,
            rgba(32, 201, 151, .10),
            transparent 30%
        );
    filter: blur(18px);
    animation: fvAmbientDrift 14s ease-in-out infinite alternate;
}

.fv-motion-scene::after {
    background:
        linear-gradient(
            115deg,
            transparent 35%,
            rgba(218, 183, 112, .07) 48%,
            transparent 58%
        );
    transform: translateX(-35%);
    animation: fvLightSweep 12s linear infinite;
}

/* ------------------------------------------------------------
   CINEMATIC HERO
   ------------------------------------------------------------ */

.fv-v12-hero,
.fv-hero {
    transform-style: preserve-3d;
    perspective: var(--fv-motion-perspective);
}

.fv-hero-visual {
    position: relative;
    transform-style: preserve-3d;
    will-change: transform;
    animation: fvHeroFloat 8s ease-in-out infinite;
}

.fv-hero-visual::before {
    content: "";
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(218,183,112,.18),
        rgba(32,201,151,.08) 38%,
        transparent 70%
    );
    filter: blur(28px);
    transform: translateZ(-30px);
    z-index: -1;
}

/* ------------------------------------------------------------
   FLOATING CARD SYSTEM
   ------------------------------------------------------------ */

.fv-motion-card,
.fv-command-panel,
.fv-market-card,
.fv-op-card,
.fv-image-card,
.fv-learning-card {
    transform-style: preserve-3d;
    will-change: transform;
    transition:
        transform var(--fv-motion-duration) var(--fv-motion-ease),
        box-shadow var(--fv-motion-duration) var(--fv-motion-ease),
        border-color var(--fv-motion-duration) var(--fv-motion-ease);
}

.fv-motion-card:hover,
.fv-command-panel:hover,
.fv-market-card:hover,
.fv-op-card:hover,
.fv-image-card:hover,
.fv-learning-card:hover {
    transform:
        translateY(var(--fv-motion-lift))
        translateZ(var(--fv-motion-depth));
}

/* staggered depth creates the floating-stack appearance */

.fv-command-panel:nth-child(2n) {
    transform: translateZ(10px);
}

.fv-command-panel:nth-child(3n) {
    transform: translateZ(18px);
}

.fv-market-card:nth-child(2n) {
    transform: translateZ(8px);
}

.fv-market-card:nth-child(3n) {
    transform: translateZ(14px);
}

/* ------------------------------------------------------------
   CARD LIGHT EDGE
   ------------------------------------------------------------ */

.fv-command-panel,
.fv-market-card,
.fv-op-card,
.fv-image-card {
    position: relative;
    overflow: hidden;
}

.fv-command-panel::after,
.fv-market-card::after,
.fv-op-card::after,
.fv-image-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.08) 42%,
            transparent 58%
        );
    transform: translateX(-120%);
    transition: transform 900ms var(--fv-motion-ease);
}

.fv-command-panel:hover::after,
.fv-market-card:hover::after,
.fv-op-card:hover::after,
.fv-image-card:hover::after {
    transform: translateX(120%);
}

/* ------------------------------------------------------------
   LEARNING JOURNEY
   ------------------------------------------------------------ */

.fv-guidance-strip,
.fv-guidance-mission,
.fv-guidance-item {
    transform-style: preserve-3d;
}

.fv-guidance-item {
    transition:
        transform 600ms var(--fv-motion-ease),
        opacity 600ms ease;
}

.fv-guidance-item:hover {
    transform:
        translateY(-6px)
        translateZ(18px)
        scale(1.025);
}

.fv-guidance-item::before {
    transition:
        opacity 500ms ease,
        transform 700ms var(--fv-motion-ease);
}

/* ------------------------------------------------------------
   IMAGE DEPTH
   ------------------------------------------------------------ */

.fv-image-visual img,
.fv-hero-visual img {
    transform: translateZ(0) scale(1.01);
    transition:
        transform 1200ms var(--fv-motion-ease),
        filter 1200ms ease;
    will-change: transform;
}

.fv-image-card:hover img,
.fv-hero-visual:hover img {
    transform: translateZ(18px) scale(1.035);
    filter: saturate(1.05) contrast(1.03);
}

/* ------------------------------------------------------------
   AMBIENT PARTICLE FIELD
   ------------------------------------------------------------ */

.fv-intelligence-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    pointer-events: none;
    animation: fvParticleFloat 7s ease-in-out infinite;
}

.fv-intelligence-particle:nth-child(2n) {
    animation-delay: -2s;
}

.fv-intelligence-particle:nth-child(3n) {
    animation-delay: -4s;
}

/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */

.fv-motion-reveal {
    opacity: 0;
    transform:
        translateY(28px)
        translateZ(-12px);
    transition:
        opacity 850ms ease,
        transform 900ms var(--fv-motion-ease);
}

.fv-motion-reveal.is-visible {
    opacity: 1;
    transform:
        translateY(0)
        translateZ(0);
}

/* ------------------------------------------------------------
   ANIMATIONS
   ------------------------------------------------------------ */

@keyframes fvHeroFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -7px, 10px);
    }
}

@keyframes fvAmbientDrift {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    100% {
        transform: translate3d(2%, 2%, 0) scale(1.04);
    }
}

@keyframes fvLightSweep {
    0% {
        transform: translateX(-45%);
    }

    100% {
        transform: translateX(45%);
    }
}

@keyframes fvParticleFloat {
    0%, 100% {
        transform: translate3d(0, 8px, 0);
        opacity: .25;
    }

    50% {
        transform: translate3d(4px, -18px, 12px);
        opacity: .65;
    }
}

/* ------------------------------------------------------------
   MOBILE SAFETY
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    .fv-motion-scene {
        perspective: 900px;
    }

    .fv-hero-visual {
        animation-duration: 10s;
    }

    .fv-command-panel:hover,
    .fv-market-card:hover,
    .fv-op-card:hover,
    .fv-image-card:hover,
    .fv-learning-card:hover {
        transform: translateY(-4px);
    }

    .fv-motion-scene::after {
        animation-duration: 18s;
    }
}

/* ------------------------------------------------------------
   ACCESSIBILITY / REDUCED MOTION
   ------------------------------------------------------------ */

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

    .fv-motion-scene *,
    .fv-motion-scene,
    .fv-hero-visual,
    .fv-intelligence-particle {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .fv-motion-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}