/* 1. Reset and Center */
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a1a2e;
}

/* 2. The Parent Container */
.meme-container {
    position: relative; /* This is the 'anchor' for everything inside */
    display: inline-block;
    line-height: 0; /* Removes the tiny gap at the bottom of images */
}

/* 3. The Base Image */
.meme-main {
    max-width: 90vw;
    max-height: 90vh;
    height: auto;
    display: block;
}

/* 4. The Clickable Link (The Fix) */
.agree-link {
    position: absolute; /* Pulls it out of normal flow */
    top: 0;
    left: 0;
    width: 100%; /* Spans the full width of the container */
    height: 100%; /* Spans the full height of the container */
    z-index: 10;
}

/* 5. The Top Image (Glitchy Button) */
.privacy-agree-btn {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures it scales exactly like the base image */
    display: block;
    opacity: 0; /* Hide it initially */
    transition: opacity 0.1s ease;
}

.agree-link:hover .privacy-agree-btn {
    opacity: 1;
    animation: subtle-vibration 1s infinite;
}


@keyframes subtle-vibration {
    0% {
        transform: translate(0);
        filter: hue-rotate(0deg) brightness(1);
    }
    25% {
        transform: translate(1px, 1px);
        filter: hue-rotate(5deg) brightness(1.2);
    }
    50% {
        transform: translate(-1px, 0);
        filter: hue-rotate(-5deg) contrast(1.1);
    }
    75% {
        transform: translate(1px, -1px);
        filter: brightness(1.1);
    }
    100% {
        transform: translate(0);
        filter: hue-rotate(0deg);
    }
}


.meme-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.1) 50%
    );
    background-size: 100% 4px; 
    z-index: 5;
    pointer-events: none;
}