/* Desktop · Windows · MP4 — wspólny styl hero (strona główna + podstrony SEO) */
:root {
    --vap-eyebrow-pulse-cycle: 4.37s; /* ~1,37 s sekwencja + 3 s przerwy */
}
.eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 0.90rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent-light, rgb(118, 140, 245));
    margin-bottom: 16px;
    font-family: var(--font-hero-lead, 'IBM Plex Sans', 'Inter', 'Source Sans 3', system-ui, sans-serif);
    line-height: 1.65;
}
.eyebrow-chip,
.eyebrow-sep {
    display: inline-block;
    transform-origin: center center;
}
.eyebrow-chip {
    cursor: default;
    font-size: calc(1em + 0.5px);
    transform: scale(1);
}
/* Pętla: Desktop → Windows → MP4, przerwa 3 s — start po 1,7 s */
@keyframes vap-eyebrow-chip-pulse-loop-1 {
    0%, 7.32%, 100% {
        color: var(--accent-light, rgb(118, 140, 245));
        transform: scale(1);
    }
    3.66% {
        color: rgb(172, 188, 252);
        transform: scale(1.05);
    }
}
@keyframes vap-eyebrow-chip-pulse-loop-2 {
    0%, 8.01%, 15.33%, 100% {
        color: var(--accent-light, rgb(118, 140, 245));
        transform: scale(1);
    }
    11.67% {
        color: rgb(172, 188, 252);
        transform: scale(1.05);
    }
}
@keyframes vap-eyebrow-chip-pulse-loop-3 {
    0%, 16.02%, 23.34%, 100% {
        color: var(--accent-light, rgb(118, 140, 245));
        transform: scale(1);
    }
    19.68% {
        color: rgb(172, 188, 252);
        transform: scale(1.05);
    }
}
.eyebrow-sep {
    opacity: 0.72;
    padding: 0 0.42em;
    user-select: none;
    pointer-events: none;
}
@keyframes vap-eyebrow-chip-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes vap-eyebrow-sep-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 0.72; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
    .eyebrow-chip,
    .eyebrow-sep {
        opacity: 0;
    }
    .eyebrow > :nth-child(1) {
        animation:
            vap-eyebrow-chip-in 0.48s var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 0s forwards,
            vap-eyebrow-chip-pulse-loop-1 var(--vap-eyebrow-pulse-cycle) var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 1.7s infinite;
    }
    .eyebrow > :nth-child(2) {
        animation: vap-eyebrow-sep-in 0.38s var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 0.12s forwards;
    }
    .eyebrow > :nth-child(3) {
        animation:
            vap-eyebrow-chip-in 0.48s var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 0.24s forwards,
            vap-eyebrow-chip-pulse-loop-2 var(--vap-eyebrow-pulse-cycle) var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 1.7s infinite;
    }
    .eyebrow > :nth-child(4) {
        animation: vap-eyebrow-sep-in 0.38s var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 0.36s forwards;
    }
    .eyebrow > :nth-child(5) {
        animation:
            vap-eyebrow-chip-in 0.48s var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 0.48s forwards,
            vap-eyebrow-chip-pulse-loop-3 var(--vap-eyebrow-pulse-cycle) var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 1.7s infinite;
    }
}
@media (prefers-reduced-motion: reduce) {
    .eyebrow-chip,
    .eyebrow-sep {
        opacity: 1;
        animation: none !important;
        transform: none !important;
    }
    .eyebrow-sep { opacity: 0.72; }
    .vap-psy-hero .vap-psy-hero-title-tag {
        animation: none !important;
        filter: none !important;
    }
}

/* Podstrony SEO: 4. krok pętli — tag po „—” (tylko brightness, jak Pro na głównej) */
@keyframes vap-psy-hero-title-tag-pulse-loop {
    0%, 24.03%, 31.35%, 100% {
        filter: brightness(1);
    }
    27.69% {
        filter: brightness(1.22);
    }
}
@media (prefers-reduced-motion: no-preference) {
    .vap-psy-hero .vap-psy-hero-title-tag {
        display: inline-block;
        animation: vap-psy-hero-title-tag-pulse-loop var(--vap-eyebrow-pulse-cycle) var(--ease, cubic-bezier(0.25, 0.1, 0.25, 1)) 1.7s infinite;
    }
}
@media (max-width: 700px) {
    .hero .eyebrow,
    .vap-psy-hero .eyebrow {
        font-size: calc(0.90rem * 0.92);
    }
}
@media (max-width: 500px) {
    .hero .eyebrow,
    .vap-psy-hero .eyebrow {
        font-size: calc(0.90rem * 0.85);
    }
}