/* ==========================================================
   CH NET GUARD — Quote Modal 3D Entrance (Phase 4)
   ----------------------------------------------------------
   Loaded after base.css. Overrides the basic scale+fade
   entrance with a true 3D rotation, a holographic backdrop
   sweep, a corner-bracket snap-in, and live hover parallax.

   Layered transforms via `transform-style: preserve-3d` on
   the wrap; the card spins/translates in Z space while the
   backdrop fades and scans behind it.
   ========================================================== */

/* ----------------------------------------------------------
   ROOT — establish the 3D perspective
   ---------------------------------------------------------- */
.quote-modal-root {
    perspective: 1400px;
    perspective-origin: 50% 45%;
}

.quote-card-wrap {
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.quote-card {
    transform-style: preserve-3d;
}

/* ----------------------------------------------------------
   BACKDROP — fade + radial bloom + holographic scan sweep
   The sweep is a teal vertical bar that crosses left-to-right
   exactly once on open. It's purely cosmetic, sitting on top
   of the blurred backdrop.
   ---------------------------------------------------------- */
.qm-fade-enter,
.qm-fade-leave {
    transition: opacity 380ms var(--ease-out);
}
.qm-fade-enter-start,
.qm-fade-leave-end { opacity: 0; }
.qm-fade-enter-end,
.qm-fade-leave-start { opacity: 1; }

/* Scan-sweep — runs once on every open. ::after on the backdrop
   lets us avoid touching the markup. */
.quote-backdrop::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(15, 181, 164, 0.04) 30%,
        rgba(20, 215, 195, 0.18) 50%,
        rgba(15, 181, 164, 0.04) 70%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 0;
}
/* Trigger the sweep when the wrap is mounted (x-show adds it to the DOM) */
.quote-modal-root.is-mounted .quote-backdrop::after {
    animation: qm-scan 1100ms var(--ease-out) 1;
}
@keyframes qm-scan {
    0%   { opacity: 0; left: -40%; }
    20%  { opacity: 1; }
    100% { opacity: 0; left: 110%; }
}

/* Radial bloom behind the card on entrance */
.quote-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%,
            rgba(15, 181, 164, 0.18) 0%,
            rgba(201, 162, 39, 0.08) 30%,
            transparent 70%);
    opacity: 0;
    transition: opacity 600ms var(--ease-out);
    pointer-events: none;
}
.quote-modal-root.is-mounted .quote-backdrop::before { opacity: 1; }

/* ----------------------------------------------------------
   CARD — 3D entrance and exit
   Override the older simple scale/translate with full 3D.
   ---------------------------------------------------------- */
.qm-card-enter {
    transition:
        opacity 480ms var(--ease-out),
        transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
}
.qm-card-leave {
    transition:
        opacity 320ms var(--ease-in-out),
        transform 420ms cubic-bezier(0.65, 0, 0.35, 1);
}

/* Start: card is edge-on (rotated 65° on Y), tilted back on X,
   pushed deep into Z space, faded out. As it lands it rotates
   to face-on, lifts on X, and pulls forward. */
.qm-card-enter-start {
    opacity: 0;
    transform:
        translateZ(-480px)
        rotateX(28deg)
        rotateY(-55deg)
        scale(0.85);
}
.qm-card-enter-end {
    opacity: 1;
    transform:
        translateZ(0)
        rotateX(0deg)
        rotateY(0deg)
        scale(1);
}

/* Exit: tip away on the opposite Y axis and recede back */
.qm-card-leave-start {
    opacity: 1;
    transform:
        translateZ(0)
        rotateX(0deg)
        rotateY(0deg)
        scale(1);
}
.qm-card-leave-end {
    opacity: 0;
    transform:
        translateZ(-240px)
        rotateX(-18deg)
        rotateY(35deg)
        scale(0.92);
}

/* ----------------------------------------------------------
   HOVER PARALLAX — desktop only
   JS sets --qm-rx and --qm-ry on the card based on cursor
   position; we apply them via a CSS var so it composes with
   the entrance transform during transition.
   The .is-tilting class is added after the entrance finishes
   so we don't fight the open animation.
   ---------------------------------------------------------- */
.quote-card.is-tilting {
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
    transform:
        perspective(1400px)
        rotateX(var(--qm-rx, 0deg))
        rotateY(var(--qm-ry, 0deg));
}

/* Don't apply tilt on touch — handled by JS too but belt-and-braces */
html.is-touch .quote-card.is-tilting { transform: none; }

/* ----------------------------------------------------------
   INNER CONTENT CASCADE
   After the card lands, sections inside it animate up in
   sequence. Initial state hidden, .is-revealed class added
   one-by-one by JS.
   ---------------------------------------------------------- */
.quote-card[data-qm-cascade] .qm-header,
.quote-card[data-qm-cascade] .quote-form > * {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 520ms var(--ease-out),
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.quote-card[data-qm-cascade].is-revealed .qm-header,
.quote-card[data-qm-cascade].is-revealed .quote-form > * {
    opacity: 1;
    transform: translateY(0);
}

/* Per-child stagger via CSS vars so JS doesn't need to touch
   each element. The `--qm-i` is the 0-based index. */
.quote-card[data-qm-cascade].is-revealed .qm-header {
    transition-delay: 80ms;
}
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(1)  { transition-delay: 160ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(2)  { transition-delay: 200ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(3)  { transition-delay: 240ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(4)  { transition-delay: 280ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(5)  { transition-delay: 320ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(6)  { transition-delay: 360ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(7)  { transition-delay: 400ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(8)  { transition-delay: 440ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(9)  { transition-delay: 480ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(10) { transition-delay: 520ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(11) { transition-delay: 560ms; }
.quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(12) { transition-delay: 600ms; }

/* ----------------------------------------------------------
   CORNER BRACKETS — snap in last like a HUD lock
   ---------------------------------------------------------- */
.quote-card .qc-bracket {
    opacity: 0;
    transition: opacity 280ms var(--ease-out),
                transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.quote-card .qc-bracket--tl { transform: translate(-12px, -12px); }
.quote-card .qc-bracket--tr { transform: translate( 12px, -12px); }
.quote-card .qc-bracket--bl { transform: translate(-12px,  12px); }
.quote-card .qc-bracket--br { transform: translate( 12px,  12px); }

.quote-card.is-locked .qc-bracket {
    opacity: 1;
    transform: translate(0, 0);
}
.quote-card.is-locked .qc-bracket--tl { transition-delay: 720ms; }
.quote-card.is-locked .qc-bracket--tr { transition-delay: 760ms; }
.quote-card.is-locked .qc-bracket--bl { transition-delay: 800ms; }
.quote-card.is-locked .qc-bracket--br { transition-delay: 840ms; }

/* Subtle accent flash when the brackets lock in */
.quote-card.is-locked .qc-bracket {
    box-shadow: 0 0 8px rgba(15, 181, 164, 0.0);
    animation: qm-bracket-pulse 600ms var(--ease-out) 920ms 1;
}
@keyframes qm-bracket-pulse {
    0%   { box-shadow: 0 0 0   rgba(15, 181, 164, 0); }
    40%  { box-shadow: 0 0 14px rgba(20, 215, 195, 0.7); }
    100% { box-shadow: 0 0 0   rgba(15, 181, 164, 0); }
}

/* ----------------------------------------------------------
   MOBILE — reduce intensity (no perspective fight on small screens)
   ---------------------------------------------------------- */
@media (max-width: 768px) {
    .quote-modal-root { perspective: 900px; }
    .qm-card-enter-start {
        transform:
            translateZ(-280px)
            rotateX(18deg)
            rotateY(-35deg)
            scale(0.88);
    }
    .qm-card-leave-end {
        transform:
            translateZ(-160px)
            rotateX(-12deg)
            rotateY(22deg)
            scale(0.94);
    }
    /* Mobile gets a faster cascade — the screen is small, no need to draw it out */
    .quote-card[data-qm-cascade].is-revealed .quote-form > *:nth-child(n) {
        transition-delay: calc(120ms + 60ms * var(--qm-i, 0));
    }
}

/* ----------------------------------------------------------
   REDUCED MOTION — no 3D, just a quick fade
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .qm-card-enter,
    .qm-card-leave {
        transition: opacity 180ms linear !important;
    }
    .qm-card-enter-start,
    .qm-card-leave-end {
        opacity: 0;
        transform: none !important;
    }
    .qm-card-enter-end,
    .qm-card-leave-start {
        opacity: 1;
        transform: none !important;
    }
    .quote-backdrop::after,
    .quote-backdrop::before { animation: none !important; opacity: 0 !important; }
    .quote-card.is-tilting { transform: none !important; transition: none !important; }
    .quote-card[data-qm-cascade] .qm-header,
    .quote-card[data-qm-cascade] .quote-form > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .quote-card .qc-bracket {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}