/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* Prevent horizontal scroll loops */
    overflow-y: auto; /* Allow content to scroll vertically if needed */
    background-color: #000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Background Layers */
.bg-desktop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Leave 80px for a black footer below the image */
    height: calc(100% - 80px);
    background-image: url('webwallpaper.jpg');
    background-size: cover;
    background-position: center center; 
    background-repeat: no-repeat;
    z-index: 1;
    display: none;
}

.bg-mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers the entire viewport */
    z-index: 1;
    display: none;
}

/* Content Container */
.content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through content container to background if needed */
}

/* Social Links Common */
.social-links {
    position: absolute;
    display: flex;
    gap: 15px;
    pointer-events: auto; /* Re-enable clicks for the links */
}

.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Strict dimensions using CSS variable to easily scale per-device */
    width: var(--icon-size, 48px) !important;
    height: var(--icon-size, 48px) !important;
    min-width: var(--icon-size, 48px);
    min-height: var(--icon-size, 48px);
    max-width: var(--icon-size, 48px);
    max-height: var(--icon-size, 48px);
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
    opacity: 0; /* Hidden initially for the entrance animation */
}

.social-icon img {
    /* Strict dimensions for the img tag itself */
    width: var(--icon-size, 48px) !important;
    height: var(--icon-size, 48px) !important;
    object-fit: contain; /* Ensures the image fits inside the box without distortion */
    display: block;
}

.social-icon:hover {
    transform: scale(1.1) !important; /* !important overrides the animation forwards end-state */
    opacity: 0.8 !important; 
}

/* 
   Media Queries to handle Desktop vs Mobile layouts
   Assuming mobile is anything under 768px wide
*/

/* --- MOBILE LAYOUT (Portrait) --- */
@media (max-width: 1024px) and (orientation: portrait) {
    .bg-mobile {
        display: block;
    }
    
    .bg-desktop {
        display: none;
    }

    .social-links {
        --icon-size: 34px; /* Smaller icons for mobile */
        flex-direction: column;
        top: 50%;
        bottom: auto;
        left: auto;
        transform: translateY(-50%); /* Centered exactly in the middle vertically */
        right: 15px; /* Glued to the right edge */
        gap: 12px; /* Proportionally reduced gap */
    }

    .social-icon {
        animation: cascadeDown 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
}

/* --- MOBILE LAYOUT (Landscape) --- */
@media (max-width: 1024px) and (orientation: landscape) {
    .bg-mobile {
        display: block;
        /* Shrink video height gently to leave a black bottom footer, similar to desktop */
        height: calc(100% - 70px); 
    }
    
    .bg-desktop {
        display: none;
    }

    .social-links {
        --icon-size: 34px; 
        flex-direction: row;
        /* Position them horizontally at the bottom just like the web version */
        bottom: 18px; 
        left: 50%;
        top: auto;
        right: auto;
        transform: translateX(-50%);
        gap: 16px; 
    }

    .social-icon {
        animation: cascadeRight 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
}

/* --- DESKTOP LAYOUT --- */
@media (min-width: 1025px) {
    body, html {
        background-color: #000; /* Ensuring the 80px cut at the bottom stays black */
    }

    .bg-desktop {
        display: block;
    }
    
    .bg-mobile {
        display: none;
    }

    .social-links {
        --icon-size: 38px; /* Slightly smaller icons for desktop (was 48px) */
        flex-direction: row;
        /* Position them slightly higher within the 80px black footer */
        bottom: 24px; 
        left: 50%;
        top: auto;
        right: auto;
        transform: translateX(-50%);
        gap: 16px; /* Reduced gap between icons */
    }

    .social-icon {
        animation: cascadeRight 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    }
}

/* --- ANIMATIONS --- */
@keyframes cascadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cascadeRight {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered animation delays ensuring cascade effect. 1s initial pause */
.social-icon:nth-child(1) { animation-delay: 1.00s; }
.social-icon:nth-child(2) { animation-delay: 1.15s; }
.social-icon:nth-child(3) { animation-delay: 1.30s; }
.social-icon:nth-child(4) { animation-delay: 1.45s; }
.social-icon:nth-child(5) { animation-delay: 1.60s; }
.social-icon:nth-child(6) { animation-delay: 1.75s; }
.social-icon:nth-child(7) { animation-delay: 1.90s; }
.social-icon:nth-child(8) { animation-delay: 2.05s; }