/* ==========================================
   FEATURE: BANK & SERVICES - FULLSCREEN APPS
========================================== */

.feature-bank-card{
    cursor:pointer;
}

.bank-app-animation{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    background:rgba(0,0,0,.18);
    animation:bankSceneFade 2.4s ease forwards;
}

.bank-app-title{
    position:absolute;
    top:22vh;
    left:50%;
    transform:translateX(-50%);
    text-align:center;
    animation:bankTitlePop 2.4s ease forwards;
}

.bank-app-title strong{
    display:block;
    font-size:clamp(2rem,4vw,4rem);
    color:#ff8a00;
    text-shadow:
        0 0 16px rgba(255,140,0,.9),
        0 0 48px rgba(255,140,0,.45);
}

.bank-app-title span{
    display:block;
    margin-top:8px;
    color:rgba(255,255,255,.78);
    letter-spacing:2px;
    font-size:.95rem;
}

.bank-app-icon{
    width:92px;
    height:92px;
    border-radius:26px;
    background:
        radial-gradient(circle at 35% 25%, rgba(255,255,255,.3), transparent 34%),
        linear-gradient(145deg, rgba(255,106,0,.96), rgba(70,28,0,.96));
    box-shadow:
        0 0 34px rgba(255,106,0,.58),
        0 22px 46px rgba(0,0,0,.58);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:white;
    animation:bankAppPop 2.4s cubic-bezier(.16,.84,.24,1) forwards;
}

.bank-app-icon span{
    font-size:2rem;
    line-height:1;
}

.bank-app-icon p{
    margin:0;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:.5px;
}

@keyframes bankSceneFade{
    0%,100%{opacity:0;}
    12%,82%{opacity:1;}
}

@keyframes bankTitlePop{
    0%{
        transform:translateX(-50%) translateY(-25px) scale(.9);
        opacity:0;
    }
    15%,80%{
        transform:translateX(-50%) translateY(0) scale(1);
        opacity:1;
    }
    100%{
        transform:translateX(-50%) translateY(-20px) scale(.95);
        opacity:0;
    }
}

@keyframes bankAppPop{
    0%{
        transform:translateY(90px) scale(.35) rotate(-14deg);
        opacity:0;
    }
    18%,76%{
        transform:translateY(0) scale(1) rotate(0);
        opacity:1;
    }
    100%{
        transform:translateY(-70px) scale(.72) rotate(12deg);
        opacity:0;
    }
}