/* ------------------- */
/* ----- GENERAL ----- */
/* ------------------- */

.rounded-8 { border-radius: 0.5rem; }

.rounded-top { border-radius: 1rem 1rem 0px 0px !important; }

.rounder-portrait { border-radius: 50%; }

/* ----- OPACITY & VISIBILITY ----- */

.invisible {
    opacity: 0;
    transition: 0.5s;
}

.semi-visible {
    opacity: 0.5;
    transition: 0.5s;
}

.slight-fade {
    opacity: 0.8;
    transition: 0.5s;
}

.visible {
    opacity: 1;
    transition: 0.5s;
}

.translucide {
    filter: opacity(0.30);
    transition: 0.5s;
}


/* --------- SHADOWS --------- */

.shadow-more { box-shadow: 2px 2px 4px rgba(0, 0, 0, .4); }

.filter-shadow { filter: drop-shadow(4px 4px 16px rgba(0,0,0,0.5)); }

/* ---- GRADIENTS & MASKS ---- */  

.gradient-after-down {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            linear-gradient(
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0.5),
                rgba(0, 0, 0, 0.9));
    }
}

.gradient-after-top-down {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image:
            linear-gradient(
                rgba(0, 0, 0, 0.75),
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0),
                rgba(0, 0, 0, 0.5),
                rgba(0, 0, 0, 0.9));
    }
}

.mask {
    mask-image:
        linear-gradient(to top,
        rgba(0,0,0,0.1),
        rgba(0,0,0,0.5),
        rgba(0,0,0,1),
        rgba(0,0,0,1),
        rgba(0,0,0,1),
        rgba(0,0,0,1)
        )
    ;
}

.mask-bg-dark {
    background-color: var(--black);
    border-radius: 4px;
    img {
        mask-image:
            linear-gradient(to top,
                rgba(0,0,0,0.25),
                rgba(0,0,0,0.50),
                rgba(0,0,0,1),
                rgba(0,0,0,1)
            )
        ;
    }
}

/* -------- TRANSFORM ---------- */

.scale-120 { scale: 120%; }
.scale-100 { scale: 100%; }
.scale-80 { scale: 80%; }

/* -------- FILTERS ---------- */

.grayscale {
    filter: grayscale(100%);
    transition: 0.5s;
}

.darken {
    filter: brightness(0.5);
    transition: 0.5s;
}

.invert {
    filter: invert(1);
    transition: 0.5s;
}

.dead {
    filter:
        grayscale(100%)
        brightness(0.4)
        sepia(100%)
        hue-rotate(-50deg)
        saturate(300%)
    ;
}

.hue-gray {
    filter:
        grayscale(100%);
    &:hover {
        filter:
            grayscale(100%)
            brightness(125%);
    }
}

.hue-fuschia {
    filter:
        hue-rotate(-45deg);
    &:hover {
        filter:
            hue-rotate(-45deg)
            brightness(125%);
    }
}

.outlined {
    box-shadow:
        2px 2px 0 var(--flash-green),
        -2px -2px 0 var(--flash-green),
        2px -2px 0 var(--flash-green),
        -2px 2px 0 var(--flash-green)
    ;
}

/* ----- IMAGE RATIO ----- */

.ratio-43,
.ratio-169,
.ratio-916,
.ratio-1610 {
    position: relative;
    width: 100%;
    height: 0;

    .ratio-cropped {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        object-fit: cover;
        object-position: center;
    }
}

.ratio-43 { padding-top: calc(100% * (3 / 4)); }
.ratio-169 { padding-top: calc(100% * (9 / 16)); }
.ratio-916 { padding-top: calc(100% * (16 / 9)); }
.ratio-1610 { padding-top: calc(100% * (10 / 16)); }


/* TEXT ZONE BLURRED */

.text-zone-blur {
    position: relative;
    z-index: 2;
    color: var(--lighter-more);

    &::before {
        position: absolute;
        z-index: -1;
        content: "";
        background-color: black;
        filter: blur(1.5rem);
        opacity: 0.5;
        width: 100%;
        height: 100%;
    }
}