/* =====================================================================
   ANEKOR – layout.animations.css
   Shared by EVERY page: topbar, navbar, footer, buttons, back-to-top.
   Load order:  bootstrap -> style.css -> layout.animations.css -> <page>.css
   (page files such as home.css reuse the @keyframes defined here)

   Text-level animation: the bars/containers stay still, only the text,
   logo, links and icons move.
   ===================================================================== */

/* ---------- Shared keyframes ---------- */
@keyframes anFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

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

@keyframes anDown {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

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

@keyframes anLeft {
    from {
        opacity: 0;
        transform: translateX(-18px);
    }

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

@keyframes anPop {
    from {
        opacity: 0;
        transform: scale(.6);
    }

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

@keyframes anDropIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

/* =====================================================================
   TOPBAR  (only the text items animate, not the grey / teal bars)
   ===================================================================== */
.container-fluid.bg-secondary.d-xl-block .d-inline-flex>a {
    animation: anDown .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

.container-fluid.bg-secondary.d-xl-block .d-inline-flex>a:nth-child(1) {
    animation-delay: .10s;
}

.container-fluid.bg-secondary.d-xl-block .d-inline-flex>a:nth-child(2) {
    animation-delay: .17s;
}

.container-fluid.bg-secondary.d-xl-block .d-inline-flex>a:nth-child(3) {
    animation-delay: .24s;
}

.container-fluid.bg-secondary.d-xl-block .d-inline-flex>a:nth-child(4) {
    animation-delay: .31s;
}

.container-fluid.bg-secondary.d-xl-block .d-inline-flex>a:nth-child(5) {
    animation-delay: .38s;
}

.top-shape p {
    animation: anFadeUp .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

.top-shape>div:nth-child(1) p {
    animation-delay: .30s;
}

.top-shape>div:nth-child(2) p {
    animation-delay: .42s;
}

/* =====================================================================
   NAVBAR  (logo, each link and the button animate one by one)
   ===================================================================== */
.navbar-brand img {
    animation: anLeft .7s cubic-bezier(.2, .7, .2, 1) .1s backwards;
    transition: transform .4s ease;
}

.navbar-brand:hover img {
    transform: scale(1.06);
}

.navbar-nav>.nav-item {
    animation: anDown .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

.navbar-nav>.nav-item:nth-child(1) {
    animation-delay: .25s;
}

.navbar-nav>.nav-item:nth-child(2) {
    animation-delay: .33s;
}

.navbar-nav>.nav-item:nth-child(3) {
    animation-delay: .41s;
}

.navbar-nav>.nav-item:nth-child(4) {
    animation-delay: .49s;
}

.navbar-nav>.nav-item:nth-child(5) {
    animation-delay: .57s;
}

.navbar-nav>.nav-item:nth-child(6) {
    animation-delay: .65s;
}

.navbar-nav>.nav-item:nth-child(7) {
    animation-delay: .73s;
}

.navbar-collapse>.btn {
    animation: anPop .6s cubic-bezier(.2, .7, .2, 1) .8s backwards;
}

/* Animated underline for links (desktop menu only) */
@media (min-width: 1400px) {
    .navbar-light .navbar-nav .nav-link {
        position: relative;
    }

    .navbar-light .navbar-nav .nav-link::before {
        content: "";
        position: absolute;
        left: 15px;
        right: 15px;
        bottom: 22px;
        height: 2px;
        background: var(--primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .35s ease;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        transform: scaleX(1);
    }
}

/* Dropdown */
.navbar .dropdown-menu.show {
    animation: anDropIn .3s ease backwards;
}

.navbar .dropdown-item {
    transition: padding-left .25s ease, color .25s ease, background-color .25s ease;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    padding-left: 1.6rem;
    color: var(--primary);
    background-color: var(--secondary);
}

/* =====================================================================
   BUTTONS (pill buttons used on every page)
   ===================================================================== */
.btn.rounded-pill {
    transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease,
        color .3s ease, border-color .3s ease;
}

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

.btn.rounded-pill:active {
    transform: translateY(-1px);
}

.btn .fa-arrow-right {
    transition: transform .3s ease;
}

.btn:hover .fa-arrow-right {
    transform: translateX(6px);
}

/* =====================================================================
   FOOTER
   layout.animations.js marks each text item with .an-item / .an-pop and
   gives every footer column an invisible AOS trigger. When a column
   scrolls into view AOS adds .aos-animate and the items rise one by one.
   Nothing is hidden by default, so the footer is always readable.
   ===================================================================== */
.aos-animate .an-item {
    animation: anFadeUp .7s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1s) backwards;
}

.aos-animate .an-pop {
    animation: anPop .55s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0) * 1s) backwards;
}

/* the trigger element itself must stay visually untouched */
[data-aos="an-trigger"] {
    opacity: 1;
    transform: none;
}

.container-fluid.bg-dark.text-secondary a.text-secondary.d-block {
    transition: color .3s ease, transform .3s ease;
}

.container-fluid.bg-dark.text-secondary a.text-secondary.d-block:hover {
    color: var(--primary) !important;
    transform: translateX(6px);
}

.container-fluid.bg-dark.text-secondary a.text-secondary.border-bottom {
    transition: color .3s ease;
}

.container-fluid.bg-dark.text-secondary a.text-secondary.border-bottom:hover {
    color: var(--primary) !important;
}

.btn-square.btn-primary.rounded-circle:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(27, 158, 147, .45);
}

.back-to-top:hover {
    transform: translateY(-5px);
}

/* =====================================================================
   REDUCED MOTION – respect the visitor's system setting (all pages)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}