/* ==========================================================================
   BARCLAYS Bank — animations.css
   Subtle, restrained motion. Everything is disabled for prefers-reduced-motion.
   ========================================================================== */

/* ---------- Keyframes ---------- */

@keyframes nt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes nt-slide-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes nt-slide-in {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes nt-zoom-in {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---------- Hero entrance (one orchestrated page-load moment) ---------- */

.hero__inner > * {
    animation: nt-slide-up .75s cubic-bezier(.22, .68, .32, 1) backwards;
}

.hero__inner > *:nth-child(1) { animation-delay: .05s; }
.hero__inner > *:nth-child(2) { animation-delay: .13s; }
.hero__inner > *:nth-child(3) { animation-delay: .21s; }
.hero__inner > *:nth-child(4) { animation-delay: .29s; }
.hero__inner > *:nth-child(5) { animation-delay: .37s; }

.hero__bg img,
.hero__bg video {
    animation: nt-zoom-in 1.6s ease-out backwards;
}

/* ---------- Scroll reveal (driven by js/main.js) ---------- */

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22, .68, .32, 1),
                transform .7s cubic-bezier(.22, .68, .32, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal--fade { transform: none; }

.reveal--right { transform: translateX(26px); }

/* Stagger children of a revealed grid */
.reveal-group > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal-group.is-visible > * { opacity: 1; transform: none; }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: .00s; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: .08s; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: .16s; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: .24s; }
.reveal-group.is-visible > *:nth-child(5) { transition-delay: .32s; }
.reveal-group.is-visible > *:nth-child(6) { transition-delay: .40s; }

/* ---------- Mobile menu items ---------- */

.nav-menu.is-open .nav-item {
    animation: nt-slide-in .4s ease backwards;
}

.nav-menu.is-open .nav-item:nth-child(1) { animation-delay: .04s; }
.nav-menu.is-open .nav-item:nth-child(2) { animation-delay: .08s; }
.nav-menu.is-open .nav-item:nth-child(3) { animation-delay: .12s; }
.nav-menu.is-open .nav-item:nth-child(4) { animation-delay: .16s; }
.nav-menu.is-open .nav-item:nth-child(5) { animation-delay: .20s; }
.nav-menu.is-open .nav-item:nth-child(6) { animation-delay: .24s; }
.nav-menu.is-open .nav-item:nth-child(7) { animation-delay: .28s; }
.nav-menu.is-open .nav-item:nth-child(8) { animation-delay: .32s; }

/* ---------- Form feedback ---------- */

.form-alert.is-visible { animation: nt-fade-in .3s ease; }

.field.has-error .field__error { animation: nt-fade-in .25s ease; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal-group > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .btn:hover,
    .card:hover,
    .bank-card:hover {
        transform: none;
    }
}