/* ==========================================
   MIKO CARD SYSTEM
========================================== */

.miko-card{

    position:relative;

    background:#fff;

    border:1px solid var(--border);

    border-radius:32px;

    box-shadow:var(--shadow-soft);

    transition:all .35s ease;

    overflow:hidden;

}

.miko-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-premium);

}

/* Large Card */

.miko-card-lg{

    padding:48px;

}

/* Medium Card */

.miko-card-md{

    padding:36px;

}

/* Small Card */

.miko-card-sm{

    padding:24px;

}

/* Premium Border */

.miko-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

    linear-gradient(

        135deg,

        rgba(37,99,235,.15),

        transparent,

        rgba(99,102,241,.15)

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    pointer-events:none;

}

/* Hover Shine */

.miko-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:60%;

    height:300%;

    transform:rotate(20deg);

    background:

    rgba(255,255,255,.18);

    transition:.8s;

}

.miko-card:hover::after{

    left:130%;

}