/* =====================================================================
   ANEKOR – career.css  (career page animations only)
   Load AFTER layout.animations.css (re-uses its @keyframes anFadeUp).
   Requires AOS (css + js), layout.animations.js and career.js.
   Every animation uses "backwards" fill, so the normal (visible) state is
   always the default.
   ===================================================================== */

/* ---------- Career-only keyframes ---------- */
@keyframes anSquareTurn {
    from {
        opacity: 0;
        transform: scale(0) rotate(-90deg);
    }

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

@keyframes anPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.25);
    }
}

/* =====================================================================
   PAGE HEADER (class added by career.js)
   ===================================================================== */
.career-header h1 {
    animation: anFadeUp .8s cubic-bezier(.2, .7, .2, 1) .1s backwards;
}

.career-header .col-12>a,
.career-header .col-12>i {
    animation: anFadeUp .7s ease .35s backwards;
}

.career-header .fa-square {
    animation: anSquareTurn .7s cubic-bezier(.2, .7, .2, 1) .5s backwards;
    transition: transform .4s ease;
}

.career-header .fa-square:hover {
    transform: rotate(135deg) scale(1.2);
}

.career-header .col-12>a {
    transition: color .3s ease, letter-spacing .3s ease;
}

.career-header .col-12>a:hover {
    letter-spacing: .04em;
}

/* =====================================================================
   FILTER BAR (class added by career.js)
   ===================================================================== */
.career-filter .form-control,
.career-filter .form-select,
.career-filter .input-group-text {
    transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.career-filter .form-control:hover,
.career-filter .form-select:hover {
    border-color: var(--primary);
}

.career-filter .form-control:focus,
.career-filter .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(27, 158, 147, .15);
}

.career-filter .input-group-text i {
    transition: color .3s ease, transform .3s ease;
}

.career-filter .input-group:focus-within .input-group-text i {
    color: var(--primary) !important;
    transform: scale(1.2);
}

.career-filter .btn {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.career-filter .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(27, 158, 147, .28);
}

.career-filter .btn:active {
    transform: translateY(0);
}

/* =====================================================================
   JOB CARDS
   (AOS sits on the column, so the card keeps its own hover transform)
   ===================================================================== */
.job-card {
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .3s ease;
}

.job-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--logo-blue, #4A8BC7), var(--logo-green, #329F76));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s ease;
}

.job-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary) !important;
    box-shadow: 0 16px 36px rgba(38, 94, 114, .14);
}

.job-card:hover::before {
    transform: scaleX(1);
}

.job-card h5 {
    transition: color .3s ease;
}

.job-card:hover h5 {
    color: var(--primary) !important;
}

.job-card .badge {
    transition: transform .3s ease, background-color .3s ease, box-shadow .3s ease;
}

.job-card:hover .badge.bg-primary {
    transform: scale(1.08);
}

.job-card .badge.bg-light:hover {
    background-color: rgba(27, 158, 147, .12) !important;
    transform: translateY(-2px);
}

.job-card .badge i {
    transition: transform .3s ease;
}

.job-card .badge.bg-light:hover i {
    transform: scale(1.25);
}

.job-card .job-desc {
    transition: color .3s ease;
}

.job-card:hover .job-desc {
    color: #4a5568 !important;
}

.job-card .btn {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}

.job-card .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(21, 36, 64, .18);
}

.job-card .btn:active {
    transform: translateY(0);
}

/* closing-soon deadline (class added by career.js) */
.deadline-urgent i {
    display: inline-block;
    animation: anPulse 1.6s ease-in-out infinite;
}

/* =====================================================================
   PAGINATION
   ===================================================================== */
.job-pagination .page-link {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease, color .3s ease;
}

.job-pagination .page-item:not(.disabled) .page-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 18px rgba(21, 36, 64, .16);
}

.job-pagination .page-item.active .page-link {
    box-shadow: 0 8px 18px rgba(27, 158, 147, .3);
}

.job-pagination .page-link i {
    transition: transform .3s ease;
}

.job-pagination .page-item:not(.disabled) .page-link:hover .fa-chevron-right {
    transform: translateX(3px);
}

.job-pagination .page-item:not(.disabled) .page-link:hover .fa-chevron-left {
    transform: translateX(-3px);
}

/* =====================================================================
   NEWSLETTER STRIP (class added by career.js)
   ===================================================================== */
.career-newsletter .form-control {
    transition: box-shadow .3s ease, transform .3s ease;
}

.career-newsletter .form-control:focus {
    box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .35);
}

.career-newsletter .btn {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.career-newsletter .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
}

.career-newsletter .btn:active {
    transform: translateY(0);
}