body {
    margin: 0;
    padding: 0;
    background-color: #121212; /* Dark mode background */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Passion One', cursive; /* Fallback to cursive just in case */
    overflow: hidden;
    color: white;
}

/* Video Background */
#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: opacity 1s ease;
}

/* Screenshot Layer */
#screenshot-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('ss.png');
    background-size: cover;
    background-position: center;
    z-index: 999; /* Above everything */
    opacity: 0;
    pointer-events: none; /* Let clicks pass through initially */
    transition: opacity 1s ease;
}

#screenshot-layer.visible {
    opacity: 1;
    pointer-events: auto;
}

.container {
    text-align: center;
    position: relative;
    z-index: 1;
    transition: opacity 1s ease;
}

.container.fade-out {
    opacity: 0;
}

#bg-video.fade-out {
    opacity: 0;
}

/* Wrapper to align logo and text */
.logo-text-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Space between logo and text */
    transition: all 0.5s ease;
}

/* Logos */
.logo {
    height: 6rem; /* Match font-size of text */
    width: auto;
    display: block; /* Removes bottom space for inline-block */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.logo-wrapper {
    position: relative;
    overflow: hidden; /* Clips the shine effect */
    display: flex; /* Keeps the logo behaving nicely */
    align-items: center;

    /* Animation initial state */
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); /* Cubic-bezier for smooth slide */
}

.logo-wrapper.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Shine Effect */
.logo-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%; /* Start well outside */
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
}

.logo-wrapper.shine-active::after {
    animation: shine-move 1.2s ease-in-out forwards;
}

@keyframes shine-move {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

.hidden-logo {
    display: none !important;
}

#main-text {
    font-size: 6rem; /* Large text */
    margin: 0;
    transition: all 0.5s ease;
    white-space: nowrap;
}

/* Initial State Styles */
.text-initial .simply {
    color: #FF0C6A;
}

.text-initial .apply {
    color: #00AAFF;
}

/* V2 State Styles (Animated Gradient) */
.text-v2 {
    /*
       Gradient: A, B, A, B, A for seamless looping over 200% width.
       0% (Start of first half) matches 50% (Start of second half) visually
       if the pattern repeats every 50%.
       A=Pink, B=Blue.
       0%: Pink
       25%: Blue
       50%: Pink
       75%: Blue
       100%: Pink
    */
    background: linear-gradient(
        90deg,
        #FF0C6A 0%,
        #00AAFF 25%,
        #FF0C6A 50%,
        #00AAFF 75%,
        #FF0C6A 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */

    animation: shine 3s linear infinite;
}

@keyframes shine {
    from {
        background-position: 0% center;
    }
    to {
        background-position: 100% center; /* Shift to the second half of the gradient */
    }
}

/* Redirect Message */
#redirect-msg {
    font-family: sans-serif; /* Standard font for the message */
    font-size: 1.2rem;
    margin-top: 20px;
    opacity: 0;
    transition: opacity 1s ease-in;
    color: #cccccc;
}

#redirect-msg.visible {
    opacity: 1;
}

.hidden {
    opacity: 0;
}