/* ==========================================
   Placeholder Card
========================================== */

.cf-placeholder-card{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:260px;

    overflow:hidden;

}

/* ==========================================
   Title Area
========================================== */

.cf-placeholder-title{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    z-index:2;

}

/* ==========================================
   Icon
========================================== */

.cf-placeholder-icon{

    width:180px;

    height:180px;

    object-fit:contain;

    animation:cfPlaceholderBounce 2s ease-in-out infinite;

}

/* ==========================================
   Text
========================================== */

.cf-placeholder-text{

    position:relative;

    display:inline-block;

    font-size:2.1rem;

    font-weight:700;

    color:#6B7280;

    letter-spacing:.3px;

    line-height:1.3;

    z-index:2;

    transition:color .4s ease;

}

/* ==========================================
   Magnifier
========================================== */

.cf-placeholder-magnifier{

    position:absolute;

    top:150px;

    left:50%;

    width:200px;

    transform:translateX(-220px);

    z-index:10;

    pointer-events:none;

    filter:drop-shadow(0 6px 14px rgba(0,0,0,.22));

    animation:cfPlaceholderScan 5s ease-in-out infinite;

}

/* ==========================================
   Fade In
========================================== */

@keyframes cfPlaceholderFade{

    from{

        opacity:0;

        transform:translateY(10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================
   Icon Bounce
========================================== */

@keyframes cfPlaceholderBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/* ==========================================
   Magnifier Scan
========================================== */

@keyframes cfPlaceholderScan{

    0%{

        transform:translateX(-220px) rotate(-8deg);

    }

    50%{

        transform:translateX(120px) rotate(8deg);

    }

    100%{

        transform:translateX(-220px) rotate(-8deg);

    }

}

/* ==========================================
   Large Desktop (1400px+)
========================================== */

@media (min-width:1400px){

    .cf-placeholder-card{

        min-height:300px;

    }

    .cf-placeholder-title{

        gap:24px;

    }

    .cf-placeholder-icon{

        width:200px;

        height:200px;

    }

    .cf-placeholder-text{

        font-size:2.3rem;

    }

    .cf-placeholder-magnifier{

        width:220px;

        top:145px;

        transform:translateX(-240px);

    }

}


/* ==========================================
   Desktop (1200px - 1399.98px)
========================================== */

@media (min-width:1200px) and (max-width:1399.98px){

    .cf-placeholder-card{

        min-height:260px;

    }

    .cf-placeholder-title{

        gap:18px;

    }

    .cf-placeholder-icon{

        width:180px;

        height:180px;

    }

    .cf-placeholder-text{

        font-size:2.1rem;

    }

    .cf-placeholder-magnifier{

        width:200px;

        top:150px;

        transform:translateX(-220px);

    }

}


/* ==========================================
   Tablet Landscape (992px - 1199.98px)
========================================== */

@media (min-width:992px) and (max-width:1199.98px){

    .cf-placeholder-card{

        min-height:220px;

    }

    .cf-placeholder-title{

        gap:16px;

    }

    .cf-placeholder-icon{

        width:145px;

        height:145px;

    }

    .cf-placeholder-text{

        font-size:1.75rem;

    }

    .cf-placeholder-magnifier{

        width:155px;

        top:120px;

        animation:cfPlaceholderScanLandscape 5s ease-in-out infinite;

    }

}

/* ==========================================
   Tablet Landscape Magnifier Animation
========================================== */

@keyframes cfPlaceholderScanLandscape{

    0%{

        transform:translateX(-175px) rotate(-8deg);

    }

    50%{

        transform:translateX(105px) rotate(8deg);

    }

    100%{

        transform:translateX(-175px) rotate(-8deg);

    }

}


/* ==========================================
   Tablet Portrait (768px - 991.98px)
========================================== */

@media (min-width:768px) and (max-width:991.98px){

    .cf-placeholder-card{

        min-height:200px;

    }

    .cf-placeholder-title{

        gap:14px;

    }

    .cf-placeholder-icon{

        width:120px;

        height:120px;

    }

    .cf-placeholder-text{

        font-size:1.5rem;

    }

    .cf-placeholder-magnifier{

        width:135px;

        top:128px;

        transform:translateX(-150px);

        animation:cfPlaceholderScanTablet 5s ease-in-out infinite;

    }

}

/* Tablet Animation */

@keyframes cfPlaceholderScanTablet{

    0%{

        transform:translateX(-150px) rotate(-8deg);

    }

    50%{

        transform:translateX(90px) rotate(8deg);

    }

    100%{

        transform:translateX(-150px) rotate(-8deg);

    }

}


/* ==========================================
   Large Mobile (576px - 767.98px)
========================================== */

@media (min-width:576px) and (max-width:767.98px){

    .cf-placeholder-card{

        min-height:180px;

    }

    .cf-placeholder-title{

        gap:12px;

    }

    .cf-placeholder-icon{

        width:95px;

        height:95px;

    }

    .cf-placeholder-text{

        font-size:1.25rem;

        text-align:center;

    }

    .cf-placeholder-magnifier{

        width:95px;

        top:139px;

        animation:cfPlaceholderScanTablet 5s ease-in-out infinite;

    }

}

/* ==========================================
   Tablet / Large Mobile Scan
========================================== */

@keyframes cfPlaceholderScanTablet{

    0%{

        transform:translateX(-105px) rotate(-8deg);

    }

    50%{

        transform:translateX(65px) rotate(8deg);

    }

    100%{

        transform:translateX(-105px) rotate(-8deg);

    }

}

/* ==========================================
   Small Mobile (320px - 575.98px)
========================================== */

@media (max-width:575.98px){

    .cf-placeholder-card{

        min-height:160px;

    }

    .cf-placeholder-title{

        display:flex;

        flex-direction:row;

        align-items:center;

        justify-content:center;

        gap:10px;

        flex-wrap:nowrap;

        text-align:left;

    }

    .cf-placeholder-icon{

        width:75px;

        height:75px;

        flex-shrink:0;

    }

    .cf-placeholder-text{

        font-size:1rem;

        line-height:1.4;

        text-align:left;

        white-space:normal;

    }

    .cf-placeholder-magnifier{

        width:70px;

        top:95px;

        animation:cfPlaceholderScanMobile 5s ease-in-out infinite;

    }

}
/* ==========================================
   Mobile Magnifier Animation
========================================== */

@keyframes cfPlaceholderScanMobile{

    0%{

        transform:translateX(-80px) rotate(-8deg);

    }

    50%{

        transform:translateX(50px) rotate(8deg);

    }

    100%{

        transform:translateX(-80px) rotate(-8deg);

    }

}