/*
 * Zeemarq Phase E motion.
 *
 * The complete motion vocabulary of the site lives here. CSS-only,
 * no JavaScript dependency, prefers-reduced-motion respected throughout.
 *
 * Loaded alongside /brand/tokens.css from every chrome layout. Class
 * hooks consume tokens defined in tokens.css; nothing here defines or
 * overrides a colour, type, or spacing token.
 *
 * Vocabulary (per docs/ZEEMARQ_REFINEMENT_BRIEF.md Phase E):
 *   - Ribbon mark seam-draw on hover (240ms ease-out, two paper folds
 *     remain still). Same gesture on the homepage chrome and on the
 *     authenticated nav so the brand mark behaves consistently.
 *   - Page transition: opacity 80ms on first paint of the brand-rebuilt
 *     marketing surfaces only. Portal pages are task surfaces and a
 *     fade reads as latency.
 *   - Status pin colour transitions (120ms ease-out on background-color
 *     and color). Subtle colour fade on state change.
 *   - Copper CTA hover/focus/active microinteractions (120ms transition,
 *     subtle pressed state on :active, brand 2px Copper focus ring).
 *   - State component fade-in (120ms): empty / loading / error /
 *     success states all share the same fade-in. No slide, no bounce.
 *   - Selective scroll-reveal: only Section 2 dashboard graphic and
 *     Section 7 testimonials on the homepage participate. Progressive
 *     enhancement — HTML default is opacity:1, JS adds .is-reveal on
 *     load to flip elements to opacity:0, IO removes .is-reveal on
 *     enter. If JS fails or is absent, the page reads correctly with
 *     everything visible from first paint.
 *
 * The single ease curve used across motion: cubic-bezier(0.2, 0.7, 0.3, 1)
 * (a smooth ease-out). Listed as `var(--zmq-ease)` for clarity.
 *
 * No backdrop-filter, no glassmorphism. Brand contract §18 rule 5.
 */

:root {
    --zmq-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --zmq-motion-fast: 80ms;
    --zmq-motion-base: 120ms;
    --zmq-motion-deliberate: 240ms;
}

/* ============================== Ribbon mark animated component ============================== */

.zmq-mark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.zmq-mark__svg {
    display: block;
    width: var(--zmq-mark-size, 36px);
    height: var(--zmq-mark-size, 36px);
    aspect-ratio: 1 / 1;
}
/*
 * Seam reveal animation. The resting mark renders as designed (Copper
 * seam visible — the brand identity is the whole mark, not the paper
 * folds alone). On hover/focus the seam REPLAYS the draw: clipped to
 * centre instantly, then expanded outward over 240ms ease-out. The two
 * paper folds remain still per brand contract §17 rule 5.
 *
 * Same gesture fires for keyboard focus (focus-visible) so non-mouse
 * users get parity. Identical rule on chrome header logo and on any
 * other Ribbon mark placement that wants the animation.
 */
.zmq-mark--animate:hover .zmq-mark__seam,
.zmq-mark--animate:focus-visible .zmq-mark__seam {
    animation: zmq-seam-draw var(--zmq-motion-deliberate) var(--zmq-ease) both;
}
@keyframes zmq-seam-draw {
    0%   { clip-path: inset(0 50% 0 50%); }
    100% { clip-path: inset(0 0 0 0); }
}

/* ============================== Page transition fade ============================== */
/*
 * Marketing surfaces fade in over 80ms on first paint. Authenticated
 * portal pages do not fade — they're task surfaces and the fade reads as
 * latency. Scoped to the brand wrappers so we touch nothing else.
 */
.zmq-landing-v3,
.zmq-pricing-v3 {
    animation: zmq-page-fade var(--zmq-motion-fast) var(--zmq-ease) both;
}
@keyframes zmq-page-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ============================== Status pin colour transition ============================== */
/*
 * When a status pin's class swaps (e.g. Copper "awaiting" to Verdigris
 * "fulfilled" after a row picks an order, or Madder "late" appearing on
 * an overdue row), the colour transitions over 120ms instead of snapping.
 * Subtle, fast — does not call attention to itself, only smooths the
 * change.
 *
 * Pin classes: .zmq-frag-pin (homepage fragments), .zmq-badge (Phase A
 * primitive), .zmq-pricing-v3 .col-highlight (pricing comparison
 * highlight column).
 */
.zmq-frag-pin,
.zmq-badge,
.zmq-pricing-v3 .col-highlight {
    transition:
        background-color var(--zmq-motion-base) var(--zmq-ease),
        color var(--zmq-motion-base) var(--zmq-ease),
        border-color var(--zmq-motion-base) var(--zmq-ease);
}

/* ============================== Copper CTA microinteractions ============================== */
/*
 * Every Copper CTA across the brand-rebuilt surfaces gets the same lift
 * on hover, the same Copper focus ring on keyboard focus, and the same
 * subtle pressed state on :active. Consumes the existing class hooks
 * defined inline on each surface — no markup changes required.
 */
.zmq-cta,
.plan-cta,
.forecast-btn-primary,
.forecast-btn-secondary,
.btn-payment-proceed,
.btn-payment-cancel {
    transition:
        background-color var(--zmq-motion-base) var(--zmq-ease),
        color var(--zmq-motion-base) var(--zmq-ease),
        border-color var(--zmq-motion-base) var(--zmq-ease),
        transform var(--zmq-motion-base) var(--zmq-ease);
}
.zmq-cta:active,
.plan-cta:active,
.forecast-btn-primary:active,
.btn-payment-proceed:not(:disabled):active {
    transform: translateY(1px);
}
.zmq-cta:focus-visible,
.plan-cta:focus-visible,
.forecast-btn-primary:focus-visible,
.forecast-btn-secondary:focus-visible,
.btn-payment-proceed:focus-visible,
.btn-payment-cancel:focus-visible {
    outline: 2px solid var(--zmq-copper);
    outline-offset: 2px;
}

/* ============================== State component fade-in ============================== */
/*
 * Empty / loading / error / success state primitives fade in over 120ms
 * when they become visible (mounted, or unhidden after a request
 * resolves). No slide, no bounce, no scale — fade only.
 *
 * Class hooks consume the Phase A state primitives plus the dashboard
 * chart's data-attribute-driven hidden empty/error wrappers from PR
 * #463. Adding `.zmq-success-state` lets a server-rendered toast or
 * inline success row reuse the same fade by adding the class.
 */
.zmq-empty-state,
.zmq-loading-state,
.zmq-error-state,
.zmq-success-state,
[data-zmq-chart-empty]:not([hidden]),
[data-zmq-chart-error]:not([hidden]) {
    animation: zmq-state-fade var(--zmq-motion-base) var(--zmq-ease) both;
}
@keyframes zmq-state-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ============================== Selective scroll reveal ============================== */
/*
 * Only the Section 2 dashboard graphic and the Section 7 testimonial
 * cards on the homepage participate. Progressive enhancement —
 * default CSS state is opacity:1 (HTML/no-JS reads correctly with
 * everything visible). On page load, JS in landing.blade.php adds
 * `.is-reveal` to each `.zmq-scroll-reveal` element, flipping it to
 * opacity:0; IntersectionObserver removes `.is-reveal` when the
 * element enters viewport, transitioning back to opacity:1.
 *
 * If JS fails / is delayed / is absent, no class is added, elements
 * stay at the default opacity:1, and the page reads correctly. Past
 * mistake (PR #467 had every section opacity:0 by default, blank
 * below the hero on first paint) is not repeated.
 */
.zmq-scroll-reveal.is-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 320ms var(--zmq-ease),
        transform 320ms var(--zmq-ease);
}

/* ============================== prefers-reduced-motion ============================== */
/*
 * The user has asked their system to dial down motion. Every Phase E
 * animation disables. Resting states render correctly because
 * 1) the Ribbon mark seam is visible at rest (the hover replay is
 *    additive),
 * 2) page-fade `both` keeps end state,
 * 3) status-pin colour transitions become instant (still readable),
 * 4) CTA microinteractions become instant (still functional),
 * 5) state-fade keeps end state,
 * 6) scroll-reveal: the JS in landing.blade.php skips adding
 *    `.is-reveal` when reduced motion is preferred, so reveal
 *    elements stay at the default opacity:1.
 */
@media (prefers-reduced-motion: reduce) {
    .zmq-mark--animate:hover .zmq-mark__seam,
    .zmq-mark--animate:focus-visible .zmq-mark__seam,
    .zmq-landing-v3,
    .zmq-pricing-v3,
    .zmq-frag-pin,
    .zmq-badge,
    .zmq-cta,
    .plan-cta,
    .forecast-btn-primary,
    .forecast-btn-secondary,
    .btn-payment-proceed,
    .btn-payment-cancel,
    .zmq-empty-state,
    .zmq-loading-state,
    .zmq-error-state,
    .zmq-success-state,
    [data-zmq-chart-empty]:not([hidden]),
    [data-zmq-chart-error]:not([hidden]),
    .zmq-scroll-reveal,
    .zmq-scroll-reveal.is-reveal {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}