/* =====================================================================
   ANEKOR – for-employers.css  (For Employers page animations only)
   Load AFTER layout.animations.css (re-uses its @keyframes anFadeUp and
   the .an-item / .an-pop text reveal).
   Requires AOS (css + js), layout.animations.js and for-employers.js.
   Navbar, topbar, footer, pill-button hovers and reduced-motion live in
   layout.animations.css.
   Every animation uses "backwards" fill, so the normal (visible) state is
   always the default; nothing stays hidden if an animation is removed.
   ===================================================================== */

/* ---------- Page-only keyframes ---------- */
@keyframes anWordUp {
    from {
        opacity: 0;
        transform: translateY(110%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes anIconPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-45deg);
    }

    60% {
        opacity: 1;
        transform: scale(1.25) rotate(8deg);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}

@keyframes anSpinIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================================
   PAGE HEADER  (dark banner: only the text moves, not the banner)
   ===================================================================== */
.container-fluid.bg-dark.p-5 h1 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .14em;
    margin-bottom: -.14em;
}

.container-fluid.bg-dark.p-5 h1 .word-in {
    display: inline-block;
    animation: anWordUp .8s cubic-bezier(.2, .7, .2, 1) calc(.15s + var(--i, 0) * .1s) backwards;
}

/* breadcrumb: Home  []  For Employers */
.container-fluid.bg-dark.p-5 .col-12>a,
.container-fluid.bg-dark.p-5 .col-12>i {
    display: inline-block;
}

.container-fluid.bg-dark.p-5 .col-12> :nth-child(2) {
    animation: anFadeUp .6s cubic-bezier(.2, .7, .2, 1) .5s backwards;
}

.container-fluid.bg-dark.p-5 .col-12> :nth-child(3) {
    animation: anSpinIn .7s cubic-bezier(.2, .7, .2, 1) .62s backwards;
}

.container-fluid.bg-dark.p-5 .col-12> :nth-child(4) {
    animation: anFadeUp .6s cubic-bezier(.2, .7, .2, 1) .74s backwards;
}

.container-fluid.bg-dark.p-5 a.text-white-50 {
    transition: color .3s ease;
}

.container-fluid.bg-dark.p-5 a.text-white-50:hover {
    color: #fff !important;
}

/* =====================================================================
   WE HELP YOU – six benefit cards
   (for-employers.js adds .help-card to each card)
   ===================================================================== */
.help-card {
    transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}

.help-card:hover {
    transform: translateY(-6px);
    background-color: #fff !important;
    box-shadow: inset 4px 0 0 var(--primary), 0 14px 30px rgba(21, 36, 64, .12);
}

.help-card>i {
    flex-shrink: 0;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.help-card:hover>i {
    transform: scale(1.2) rotate(360deg);
}

.help-card p {
    transition: color .3s ease, transform .35s ease;
}

.help-card:hover p {
    color: var(--dark);
    transform: translateX(4px);
}

/* check icon pops in when the card's column scrolls into view */
.aos-animate .help-card>i {
    animation: anIconPop .8s cubic-bezier(.2, .7, .2, 1) .3s backwards;
}

/* =====================================================================
   TRUST / PROOF BAR (counters)
   ===================================================================== */
.trust-item {
    transition: transform .35s ease;
}

.trust-item:hover {
    transform: translateY(-4px);
}

.trust-item>i {
    display: inline-block;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.trust-item:hover>i {
    transform: scale(1.2) rotate(-8deg);
}

.trust-item h3 {
    font-variant-numeric: tabular-nums;
    transition: color .3s ease;
}

.trust-item:hover h3 {
    color: var(--primary) !important;
}

.aos-animate .trust-item>i {
    animation: anIconPop .8s cubic-bezier(.2, .7, .2, 1) .25s backwards;
}

/* =====================================================================
   EXPLORE SOLUTIONS CTA
   The dark outline button is not covered by the shared pill hovers.
   ===================================================================== */
.btn.btn-outline-dark.rounded-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(21, 36, 64, .25);
}

/* =====================================================================
   "STAY UPDATE" NEWSLETTER STRIP
   ===================================================================== */
.container-fluid.bg-primary.text-secondary.p-5 .input-group {
    transition: box-shadow .35s ease, transform .35s ease;
}

.container-fluid.bg-primary.text-secondary.p-5 .input-group:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}