/*==================================================
=                Contacts Card
==================================================*/
.social-card{
    
    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:var(--space-sm);

    padding:var(--space-lg);

    border-radius:var(--radius-lg);

    text-decoration:none;

    color:var(--color-text);

    background:var(--glass-bg-strong);

    border:2px solid var(--color-border);

    transition:
        transform var(--motion-normal) var(--ease-smooth),
        box-shadow var(--motion-normal) var(--ease-smooth),
        border-color var(--motion-normal) var(--ease-smooth);
   

}

.social-card i{

    font-size:var(--text-h2);

    color:var(--color-text-secondary);

}

.social-card:hover{

    transform:translateY(-5px);

    border-color:var(--color-primary-hover);

    box-shadow:

      var(--shadow-soft);

}

/*==================================================
=                Release Cards
==================================================*/

.release-card:hover{

    transform:translateY(-8px);
    filter:

        drop-shadow(
            0 0 2px
            var(--color-primary-hover)
        )

        drop-shadow(
            0 0 2px
            var(--color-active-button)
        );

}


.release-card{

    transition:
        transform var(--motion-upperslow) var(--ease-smooth),
        box-shadow var(--motion-upperslow) var(--ease-smooth),
        border-color var(--motion-upperslow) var(--ease-smooth);

}

.release-card img{
    transform: scale(.85);
    width:100%;
    opacity:.20;
    aspect-ratio:18/10;
    filter:
        blur(0.08px);
    object-fit:cover;

}

.release-info{

    padding:var(--space-lg);

}

.release-info h3{

    color:var(--color-text);

}

.release-info p{

    color:var(--color-text-secondary);

}

#release-price{

    color:var(--color-primary-light);

    font-size:var(--text-h3);

    font-weight:var(--weight-bold);

}


/*=========================================
ABOUT VALUE CARDS 
=========================================*/

.value-card{
    padding:var(--space-xl);

    transition:

        transform var(--motion-normal),

        border-color var(--motion-normal),

        box-shadow var(--motion-normal);

}
.value-card::before{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:2px;

    background:var(--color-primary-hover);

    transform:

        scaleX(0);

    transform-origin:left;

    transition:
        transform 
        var(--motion-normal) 
        var(--ease-smooth);

}

.value-card:hover::before{

    transform:

        scaleX(1);

}

.value-card:hover{

    transform:

        translateY(-8px);

    border-color:

        var(--color-shadow-red);

    box-shadow:

        var(--shadow-large)

}

.value-card h3{

    color:var(--color-text);

    font-size:var(--text-h3);

    margin-bottom:var(--space-md);

}

.value-card p{

    color:var(--color-text-secondary);

    line-height:var(--leading-body);

}

/*=========================================
PROMOTIONS CARDS 
=========================================*/

.promotion-card{
    width:100%;
    max-width:420px;
    justify-self:center;
    padding:var(--space-2xl);
    transition:

        transform var(--motion-normal),

        border-color var(--motion-normal),

        box-shadow var(--motion-normal);

    animation:

        fadeUp 1s var(--ease-smooth) forwards;

}

.promotion-card h2{

    font-size:var(--text-h2);

    margin-bottom:var(--space-lg);

    color:var(--color-text);

}

.promotion-card p{

    color:var(--color-text-secondary);

    line-height:var(--leading-body);

    margin-bottom:var(--space-xl);

}

.promotion-card:hover{

    transform:

        translateY(-12px)
        scale(1.02);

    border-color:
        var(--color-primary-hover);

    box-shadow:

        var(--glow-red-strong);

}
.promotion-card::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:50%;

    height:100%;

    background:

    linear-gradient(

        95deg,

        transparent,

        var(--glass-highlight),

        transparent

    );

    transition:
        left
        var(--motion-upperslow)
        var(--ease-smooth);

}
.promotion-card:hover::before{
    left:150%;
}

.featured::after{

    content:"NEW OFFER";

    position:absolute;

    top:var(--space-lg);

    right:-45px;

    width:170px;

    text-align:center;

    background:var(--color-primary-light);

    color:var(--color-text);

    transform:rotate(40deg);

    font-size:var(--text-uppersmall);

    padding:var(--space-sm) 0;

    font-weight:var(--weight-bold);

}

.price{

    display:flex;

    flex-direction:column;

    gap:var(--space-sm);

    margin-bottom:var(--space-xl);

}

.old-price{

    color:var(--color-text-dark);

    text-decoration:line-through;

    font-size:var(--text-body);

}

.new-price{

    color:var(--color-text);

    font-size:var(--text-h2);

    font-weight:var(--weight-bold);

}


.featured{

    border:2px solid var(--color-primary-light);

    animation:

        pulseGlow var(--motion-upperslow) infinite;

}