/* Shared interaction layer for the Blade port.
   The visual design lives in app.css (compiled Tailwind from the original React app).
   This file only provides: scroll reveals, modal shell, and misc behavior hooks. */

/* ---------- Scroll reveal (replaces Framer Motion whileInView) ---------- */
.cq-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--cq-delay, 0ms);
    will-change: opacity, transform;
}
.cq-reveal[data-reveal="fade"] { transform: none; }
.cq-reveal[data-reveal="left"] { transform: translateX(-32px); }
.cq-reveal[data-reveal="right"] { transform: translateX(32px); }
.cq-reveal[data-reveal="scale"] { transform: scale(0.95); }
.cq-reveal.cq-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .cq-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---------- Modal shell ---------- */
body.cq-modal-locked { overflow: hidden; }

.cq-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.cq-modal.cq-open { display: flex; }

.cq-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 7, 17, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: cq-fade-in 0.25s ease;
}

.cq-modal-panel {
    position: relative;
    z-index: 10;
    margin: auto;
    animation: cq-pop-in 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes cq-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes cq-pop-in {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cq-modal-backdrop, .cq-modal-panel { animation: none; }
}

/* ---------- Form feedback states ---------- */
.cq-form-success, .cq-form-error { display: none; }
.cq-form-success.cq-show, .cq-form-error.cq-show { display: block; }