/* =========================================================
   TRANSACTION CARD - HOVER LOGO REVEAL
   ========================================================= */
 
 .timage {
    width: 100%;
    min-height: 100px;
 	display: flex;
    align-items: center;
    justify-content: center;
 	padding: 10px 15px;
    box-sizing: border-box;
 	overflow: visible;
}

.timage img {
    display: block;
	max-width: 90%;
    max-height: 70px;
 	width: auto;
    height: auto;
 	object-fit: contain;
}

.transaction-card {
    position: relative;
    overflow: hidden;
 	background: #ffffff;
    border: .4px solid #e1e1e1;
   	padding: 20px;
	text-align: center;
 	min-height: 450px;
 	transition:
        transform 1.45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease,
        border-color .45s ease;
}


/* ---------------------------------------------------------
   NORMAL CARD CONTENT
   Logo + title + location + description
   --------------------------------------------------------- */

.transaction-card .card-content {
    position: relative;
    z-index: 2;

    transition:
        opacity .35s ease,
        transform 1.45s cubic-bezier(.22, 1, .36, 1),
        filter .35s ease;
}


/* ---------------------------------------------------------
   LARGE LOGO SHOWN ON HOVER
   --------------------------------------------------------- */

.transaction-card .hover-logo {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 50px;

    opacity: 0;

    transform: scale(.72);

    transition:
        opacity .4s ease,
        transform 1.6s cubic-bezier(.22, 1, .36, 1);

    z-index: 4;

    pointer-events: none;
}


/* Hover logo image */

.transaction-card .hover-logo img {
    display: block;
     width: auto;
    height: auto;
     max-width: 30%;
    max-height: 180px;
    object-fit: contain;
    transform: scale(.95);
    transition:
        transform 1.6s cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------------------------------
   SOFT BLUE BACKGROUND GLOW
   --------------------------------------------------------- */

.transaction-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(40, 90, 160, .11) 0%,
            rgba(40, 90, 160, .05) 30%,
            rgba(255, 255, 255, 0) 70%
        );

    opacity: 0;

    transition:
        opacity .5s ease;

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   HOVER EFFECTS
   ========================================================= */


/* Card slightly moves upward */

.transaction-card:hover {
    transform: translateY(-6px);
     border-color: rgba(25, 55, 110, .18);
    box-shadow:
        0 20px 45px rgba(0, 20, 60, .08);
}


/* Existing content disappears */

.transaction-card:hover .card-content {
    opacity: 0;
    transform: scale(.92);
    filter: blur(4px);
}


/* Large logo appears */

.transaction-card:hover .hover-logo {
    opacity: 1;
    transform: scale(1);
}


/* Slight additional logo zoom */

.transaction-card:hover .hover-logo img {
    transform: scale(1.5);
}


/* Blue glow appears */

.transaction-card:hover::after {
    opacity: 1;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .transaction-card {
        min-height: 450px;
    }

    .transaction-card .hover-logo {
        padding: 30px;
    }

    .transaction-card .hover-logo img {
        max-width: 55%;
        max-height: 140px;
    }

}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .transaction-card,
    .transaction-card .card-content,
    .transaction-card .hover-logo,
    .transaction-card .hover-logo img,
    .transaction-card::after {
        transition-duration: .01ms;
    }

}