/* ══════════════════════════════════════════════════════════════════════
   Talk-to-Expert Advisory Funnel — progress bar CSS (Doc 515 §16.3).
   Blueprint clone of gs-progress.css per zero-shared-files boundary.
   Own class prefix (.mz-tte-progress-topbar) — no cross-project CSS
   collision with /get-started/* (.mz-gs-topbar).

   Consumer: partials/web/talk_to_an_expert_progress.blade.php
   Scope: /talk-to-an-expert/* Step 2+ (Step 1 hidden per Doc 515 §5).

   Design:
     - Monezzi brand blue (#2563eb) — differentiates from get-started's
       purple (#7c3aed) at a glance (BO admin session in dev, users may
       flip between flows).
     - Same fixed-top, 5px, z-index 9999, GPU compositing hack for iOS
       Safari fixed-positioning bug — same rationale as get-started.
   ══════════════════════════════════════════════════════════════════════ */

.mz-tte-progress-topbar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 5px;
    background: rgba(37, 99, 235, 0.18);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    will-change: opacity, transform;
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}
.mz-tte-progress-topbar.is-active {
    opacity: 1;
}
.mz-tte-progress-topbar > span {
    display: block;
    height: 100%;
    width: 0;
    background: #2563eb;
    box-shadow: 0 2px 12px rgba(37, 99, 235, 0.8);
}
.mz-tte-progress-topbar.is-active > span {
    animation: mz-tte-progress-topbar-fill 6s cubic-bezier(0.1, 0.7, 0.1, 1) forwards;
}
@keyframes mz-tte-progress-topbar-fill {
    0%   { width: 0; }
    30%  { width: 60%; }
    70%  { width: 85%; }
    100% { width: 92%; }
}