/* =====================================================================
   ANEKOR – contact.css  (Contact Us 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 contact.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  []  Contact Us */
.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;
}

/* =====================================================================
   CONTACT INFO CARDS  (Visit Us / Call Us / Email Us)
   (contact.js adds .info-card to each card)
   ===================================================================== */
.info-card {
    transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease;
}

.info-card:hover {
    transform: translateY(-8px);
    background-color: #fff !important;
    box-shadow: inset 0 3px 0 var(--primary), 0 16px 34px rgba(21, 36, 64, .12);
}

.info-card>i {
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.info-card:hover>i {
    transform: translateY(-4px) scale(1.2) rotate(-8deg);
}

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

.info-card:hover h5 {
    color: var(--primary);
}

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

/* =====================================================================
   CONTACT FORM
   Heading, intro text and every field rise one by one (see contact.js).
   ===================================================================== */
.form-floating {
    transition: transform .3s ease;
}

.form-floating:focus-within {
    transform: translateY(-2px);
}

.form-floating>.form-control {
    transition: border-color .3s ease, box-shadow .3s ease;
}

.form-floating>.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(27, 158, 147, .15);
}

.form-floating>label {
    transition: opacity .15s ease-in-out, transform .15s ease-in-out, color .3s ease;
}

.form-floating:focus-within>label {
    color: var(--primary);
}

/* submit button (square, not a pill, so the shared pill hover does not cover it) */
.btn.btn-primary.w-100 {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease;
}

.btn.btn-primary.w-100:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(27, 158, 147, .35);
}

.btn.btn-primary.w-100:active {
    transform: translateY(-1px);
}

/* =====================================================================
   "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);
}