/* Import local fonts */
@font-face {
    font-family: 'Raleway';
    src: url('./fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900; /* Define the range for the variable font */
    font-style: normal;
}

@font-face {
    font-family: 'Permanent Marker';
    src: url('./fonts/Permanent_Marker/PermanentMarker-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Basic styling */
body {
    font-family: 'Raleway', sans-serif; /* Default font */
    background-color: #0f172a; /* Dark blueish background */
    color: #e0e0e0; /* Light gray text for readability */
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo-container {
    position: relative; /* Needed for the pseudo-element positioning */
    width: 300px; /* As updated by you */
    height: auto;
    /* Initial reveal animation for the color logo underneath */
    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
    mask-image: linear-gradient(to right, black 50%, transparent 50%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-position: 100% 0; /* Start with the mask hiding the element */
    mask-position: 100% 0;
    animation: reveal 1.5s 0.5s forwards ease-out; /* 0.5s delay before starting */
}

.logo {
    display: block; /* Ensures proper block-level behavior */
    width: 100%;    /* Makes the image fill the container's width */
    height: auto;
}

/* This pseudo-element is the white logo on top */
.logo-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    -webkit-mask-image: url(logo.png);
    mask-image: url(logo.png);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /* This animation wipes the white logo away to reveal the color one */
    animation: reveal 1.5s 0.5s forwards ease-out, /* Matches the logo reveal */
               wipe-away 1.5s 2.5s forwards ease-in-out, /* Wipes away after a delay */
               cover-up 1.5s 4.5s forwards ease-in-out; /* Covers it back up after another delay */
}

/* Animation to reveal an element from left to right */
@keyframes reveal {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

/* Animation to wipe an element away from left to right */
@keyframes wipe-away {
    from {
        clip-path: inset(0 0 0 0);
    }
    to {
        clip-path: inset(0 0 0 100%);
    }
}

/* Animation to cover an element back up from right to left */
@keyframes cover-up {
    from {
        clip-path: inset(0 0 0 100%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

header {
    position: absolute;
    top: 2rem;
    left: 2rem;
}

.wrapper {
    max-width: 1000px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Adds space between elements */
}

h2 {
    font-family: 'Raleway', sans-serif; /* Swapped from mockup */
    font-size: 3.5rem;
    font-weight: 700; /* Bolder text */
    letter-spacing: 2px;
    margin: 0;
    color: #ffffff;
}

h2 .dot {
    font-family: 'Permanent Marker', cursive; /* Swapped from mockup */
    color: red; /* Accent color for the dot */
    font-size: 4.5rem;
    line-height: 0;
}

.legacy-link {
    color: #7a5af2;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.legacy-link:hover {
    color: #9d86f5; /* Lighter accent on hover */
}

.sub-heading {
    margin-top: 2rem;
    font-size: 1.52rem; /* 20% larger than base */
    color: red; /* A nice, modern blue */
}

#current-date {
    font-size: 3rem; /* Increased font size */
    font-weight: 600;
    margin-bottom: 5rem; /* Moves it up by reducing space below it */
}

#countdown {
    font-size: 1.4rem; /* Reduced by 30% from 2rem */
    font-weight: 500;
    margin-top: 10rem; /* Pushes "Follow us" and icons down */
}


.icons {
    margin-top: 2.5rem; /* Adds extra space above the icons */
}

.icons a {
    margin: 0 2rem;
    font-size: 2.5rem;
    text-decoration: none;
}

.icons a i {
    color: transparent; /* Make the icon text transparent */
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    transition: transform 0.3s ease;
    /* Apply the wiggle animation by default */
    animation: wiggle 2s infinite ease-in-out;
}

/* Instagram Icon - Fills with its brand gradient */
.fa-instagram {
    background-image: linear-gradient(to top, #e0e0e0, #e0e0e0 50%, #833ab4 50%, #fd1d1d 75%, #fcb045 100%);
}

/* Facebook Icon - Fills with its brand blue */
.fa-facebook {
    background-image: linear-gradient(to top, #e0e0e0, #e0e0e0 50%, #1877F2 50%);
}

.icons a:hover i {
    /* On hover, replace the water-fill animation with the wiggle animation */
    transform: scale(1.2); /* On hover, just make the icon larger */
    animation-play-state: paused; /* Pause the wiggle on hover for a stable scale effect */
}

@keyframes water-fill {
    0%, 100% {
        background-position: 0 0; /* Start/End with the top color (white) */
    }
    50% {
        background-position: 0 100%; /* Middle of animation is the bottom color (brand) */
    }
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(-3deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* --- Responsive Styles for Mobile --- */
@media (max-width: 768px) {
    /* Center the logo and make it smaller */
    header {
        top: 1.5rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .logo-container {
        width: 200px;
    }

    /* Adjust main content padding */
    .wrapper {
        padding: 1rem;
    }

    /* Reduce font sizes for better readability */
    h2 {
        font-size: 2.2rem;
    }

    .sub-heading {
        font-size: 1.1rem;
    }

    #current-date {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }

    #countdown {
        margin-top: 5rem;
    }
}