/*

? REVEAL CARD

*/

.reveal-card {
    display: grid;
    grid-template-areas: "stack";
    width: 250px;
    height: 350px; /* Adjust the height as needed to maintain desired aspect ratio */
    border-radius: var(--radius-m);
    overflow: hidden;
    transition: transform 500ms ease;
    position: relative;
}

.reveal-card>* {
    grid-area: stack;
    z-index: 1; /* Ensure all elements are above the image */
}

.reveal-card img {
    height: 375px;
    object-fit: cover; /* Ensure image covers the card area */
    z-index: 0; /* Image should be behind other elements */
    position: relative;
}

.reveal-card-content {
    padding: var(--space-s);
    background: linear-gradient(hsl(0 0% 0% / 0), hsl(20 0% 0% / .3) 20%, hsl(0 0% 0% / 1));
    position: relative;
    z-index: 2; /* Ensure content is above the image */
    box-sizing: border-box; /* Include padding in width and height calculations */
    overflow: hidden; /* Prevent content overflow */
    word-wrap: break-word; /* Ensure long words break and wrap */
    width: inherit;
}

.reveal-card:hover,
.reveal-card:focus-within {
    transform: scale(1.05);
}

.reveal-card-title {
    position: relative;
    width: max-content;
    z-index: 3;
}

.reveal-card-title::after {
    content: "";
    position: absolute;
    height: 4px;
    left: 0;
    bottom: 0;
    height: 3px;
    background: var(--primary);
    width: 100%;
    transition: transform 500ms ease;
    transform-origin: left;
    z-index: 3;
}

.reveal-card:hover .reveal-card-title::after,
.reveal-card:focus-within .reveal-card-title::after {
    transform: scaleX(1);
}

@media (hover) {
    .reveal-card-content {
        transform: translateY(72%);
        transition: transform 500ms ease;
    }
    .reveal-card:hover .reveal-card-content,
    .reveal-card:focus-within .reveal-card-content {
        transform: translateY(40%);
        transition-delay: 500ms;
    }
    .reveal-card:focus-within .reveal-card-content {
        transition-duration: 0ms;
    }
    .reveal-card-content>*:not(.reveal-card-title) {
        opacity: 0;
        transition: opacity 580ms linear;
    }
    .reveal-card:hover .reveal-card-content>*:not(.reveal-card-title),
    .reveal-card:focus-within .reveal-card-content>*:not(.reveal-card-title) {
        opacity: 1;
        transition-delay: 700ms;
    }
    .reveal-card-title::after {
        transform: scaleX(0);
    }

  
}

.reveal-card.translate-y-30:hover .reveal-card-content {
    transform: translateY(30%);
}


/*

? Button Pop

*/

.button-pop {
    position: relative;
    padding: 10px 22px;
    border-radius: 6px;
    border: none;
    color: var(--dark);
    cursor: pointer;
    background-color: var(--primary);
    transition: all 0.2s ease;
}

.button-pop:active {
    transform: scale(0.96);
}

.button-pop:before,
.button-pop:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.button-pop.button-pop-animate::before {
    top: -70%;
    background-image: radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, transparent 20%, var(--primary) 20%, transparent 30%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--primary) 15%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
    animation: greentopBubbles ease-in-out 0.6s forwards infinite;
}

@keyframes greentopBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }
    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }
    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.button-pop.button-pop-animate::after {
    bottom: -70%;
    background-image: radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, transparent 10%, var(--primary) 15%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%), radial-gradient(circle, var(--primary) 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    animation: greenbottomBubbles ease-in-out 0.6s forwards infinite;
}

@keyframes greenbottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }
    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }
    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

/*

? FANCY LINKS

*/


.fancy-link-2 {
    /* ONLY WORK ON 1 LINE */
    position: relative;

}

.fancy-link-2::before {
    content: "";
    background-color: var(--primary);
    position: absolute;
    left: 0.5rem;
    bottom: 0px;
    width: 100%;
    height: 8px;
    z-index: -1;
    transition: all 0.3s ease-in-out;
}

.fancy-link-2:hover::before {
    left: -5px;
    bottom: 0;
    height: 100%;
    width: calc(100% + 10px);
}

.fancy-link-3 {
    background-image: linear-gradient(var(--bg-surface) 50%, var(--primary) 50%);
    background-size: auto 200%;
    transition: background 0.3s ease-in-out;

}

.fancy-link-3:hover {
    background-position-y: 100%;
}

.fancy-link-4 {
    padding: 0.25rem;
    margin: -0.25rem;
    box-shadow: inset 0 0 0 0 var(--primary);
    color: var(--primary);
    transition: color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.fancy-link-4:hover{
     color: white;
    box-shadow: inset 200px 0 0 0 var(--primary);
}