/* ============================================================
   QB — Logos Marquee  |  Entrance Animations  v1.3
   Almasa Digital — QB Studio

   Bulletproof approach:
   - NO clip-path on section (breaks when section is in initial viewport)
   - IO fires with threshold:0 + rootMargin so it catches already-visible
   - Fallback: if IO never fires within 800ms, force-enter anyway
   - All reveals use opacity + transform only (GPU composited, never jank)

   Sequence after .qbl-entered is added:
   0.00s  scan line sweeps left → right
   0.00s  divider lines draw outward from center
   0.20s  particles fade in
   0.28s  eyebrow rises
   0.44s  title words cascade up (word-by-word)
   0.64s  subtitle fades up
   0.75s  row 1 track sweeps from left
   0.88s  row 2 track sweeps from right
   1.00s  cards glow-burst stagger
   1.30s  marquee starts moving
   ============================================================ */

/* ── DIVIDER LINES: draw outward from center ────────────────  */
.qbl-has-dividers::before,
.qbl-has-dividers::after {
    transform: scaleX(0);
    transform-origin: center;
    transition: none;
}
.qbl-section.qbl-entered.qbl-has-dividers::before {
    transform: scaleX(1);
    transition: transform 1.0s cubic-bezier(0.77,0,0.18,1) 0.02s;
}
.qbl-section.qbl-entered.qbl-has-dividers::after {
    transform: scaleX(1);
    transition: transform 1.0s cubic-bezier(0.77,0,0.18,1) 0.10s;
}

/* ── PARTICLES: fade in ─────────────────────────────────────  */
.qbl-particles {
    opacity: 0;
    transition: none;
}
.qbl-section.qbl-entered .qbl-particles {
    opacity: 0.55;
    transition: opacity 1.4s ease 0.22s;
}
.qbl-section.qbl-light.qbl-entered .qbl-particles {
    opacity: 0.18;
}

/* ── HEADER ELEMENTS: start hidden, reveal on .qbl-entered ───
   Override the base CSS auto-fire animation completely
   ──────────────────────────────────────────────────────────── */
.qbl-eyebrow {
    animation: none !important;
    opacity: 0;
    transform: translateY(22px);
    transition: none;
}
.qbl-title {
    animation: none !important;
    opacity: 0;
    transform: translateY(28px);
    transition: none;
}
.qbl-subtitle {
    animation: none !important;
    opacity: 0;
    transform: translateY(18px);
    transition: none;
}

/* Eyebrow reveal */
.qbl-section.qbl-entered .qbl-eyebrow {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity   0.7s cubic-bezier(.16,1,.3,1) 0.28s,
        transform 0.7s cubic-bezier(.16,1,.3,1) 0.28s;
}

/* Title container — just make visible, words handle the reveal */
.qbl-section.qbl-entered .qbl-title {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.01s linear 0.44s, transform 0.01s linear 0.44s;
}

/* Individual word spans — injected by JS */
.qbl-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: 1.15;
}
.qbl-word-inner {
    display: inline-block;
    transform: translateY(105%);
    opacity: 0;
    transition: none;
}
.qbl-section.qbl-entered .qbl-word-inner {
    transform: translateY(0);
    opacity: 1;
    transition:
        transform 0.68s cubic-bezier(.16,1,.3,1) var(--qbl-wd, 0.46s),
        opacity   0.45s ease                      var(--qbl-wd, 0.46s);
}

/* Subtitle reveal */
.qbl-section.qbl-entered .qbl-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity   0.7s cubic-bezier(.16,1,.3,1) 0.64s,
        transform 0.7s cubic-bezier(.16,1,.3,1) 0.64s;
}

/* ── TRACK ROWS: sweep in from sides ────────────────────────  */
.qbl-track-wrap {
    opacity: 0;
    transition: none;
}
.qbl-track-wrap:not(.qbl-row2) {
    transform: translateX(-48px);
}
.qbl-track-wrap.qbl-row2 {
    transform: translateX(48px);
}

.qbl-section.qbl-entered .qbl-track-wrap:not(.qbl-row2) {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity   0.75s cubic-bezier(.16,1,.3,1) 0.75s,
        transform 0.75s cubic-bezier(.16,1,.3,1) 0.75s;
}
.qbl-section.qbl-entered .qbl-track-wrap.qbl-row2 {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity   0.75s cubic-bezier(.16,1,.3,1) 0.88s,
        transform 0.75s cubic-bezier(.16,1,.3,1) 0.88s;
}

/* ── CARD STAGGER GLOW ──────────────────────────────────────  */
.qbl-section.qbl-entered .qbl-card {
    animation: qbl-card-appear 0.5s cubic-bezier(.16,1,.3,1) var(--qbl-ci, 1.05s) both;
}

@keyframes qbl-card-appear {
    0%   { opacity: 0; transform: scale(0.90) translateY(10px); box-shadow: none; }
    55%  {
        box-shadow:
            0 0 20px color-mix(in srgb, var(--qbl-glow,#6EC1E4) 50%, transparent),
            0 0 50px color-mix(in srgb, var(--qbl-glow,#6EC1E4) 18%, transparent);
    }
    100% { opacity: 1; transform: scale(1) translateY(0); box-shadow: none; }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    @keyframes qbl-card-appear {
        0%   { opacity: 0; transform: scale(0.90) translateY(10px); }
        55%  { box-shadow: 0 0 20px rgba(110,193,228,.5), 0 0 50px rgba(110,193,228,.18); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }
}

/* ── SCAN LINE: sweeps left → right once ───────────────────  */
.qbl-scan-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(110,193,228,0.0) 10%,
        rgba(110,193,228,0.65) 40%,
        rgba(255,255,255,0.95) 50%,
        rgba(110,193,228,0.65) 60%,
        rgba(110,193,228,0.0) 90%,
        transparent 100%
    );
    z-index: 99;
    pointer-events: none;
    opacity: 0;
    filter: blur(0.5px);
    will-change: transform, opacity;
}

.qbl-section.qbl-entered .qbl-scan-line {
    animation: qbl-scan 1.0s cubic-bezier(0.4,0,0.6,1) 0.05s forwards;
}

@keyframes qbl-scan {
    0%   { opacity: 0;   transform: translateX(0); }
    8%   { opacity: 1; }
    88%  { opacity: 0.7; }
    100% { opacity: 0;   transform: translateX(var(--qbl-scan-w, 1366px)); }
}

/* Light mode scan: purple */
.qbl-section.qbl-light .qbl-scan-line {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(95,45,238,0.0) 10%,
        rgba(95,45,238,0.6) 40%,
        rgba(95,45,238,0.9) 50%,
        rgba(95,45,238,0.6) 60%,
        rgba(95,45,238,0.0) 90%,
        transparent 100%
    );
}

/* ── REDUCED MOTION: instant, no effects ───────────────────  */
@media (prefers-reduced-motion: reduce) {
    .qbl-eyebrow, .qbl-title, .qbl-subtitle,
    .qbl-track-wrap, .qbl-particles,
    .qbl-word-inner {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .qbl-section.qbl-entered .qbl-card { animation: none !important; opacity: 1 !important; }
    .qbl-scan-line { display: none !important; }
    .qbl-has-dividers::before,
    .qbl-has-dividers::after { transform: scaleX(1) !important; transition: none !important; }
}

/* ── ELEMENTOR EDITOR: bypass all entrance ─────────────────  */
.elementor-editor-active .qbl-eyebrow,
.elementor-editor-active .qbl-title,
.elementor-editor-active .qbl-subtitle {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
}
.elementor-editor-active .qbl-track-wrap {
    opacity: 1 !important; transform: none !important; transition: none !important;
}
.elementor-editor-active .qbl-word-inner {
    opacity: 1 !important; transform: none !important; transition: none !important;
}
.elementor-editor-active .qbl-card { animation: none !important; }
.elementor-editor-active .qbl-has-dividers::before,
.elementor-editor-active .qbl-has-dividers::after {
    transform: scaleX(1) !important; transition: none !important;
}
.elementor-editor-active .qbl-scan-line { display: none !important; }