* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

body {
    font-family: 'Arial', sans-serif;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #E8F4F8 0%, #B8E1F0 25%, #FFFFFF 50%, #E8F4F8 75%, #B8E1F0 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite, zoomIn 2s ease-out 1s forwards, lightPulse 8s ease-in-out 1s infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Logo Container */
.logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 1.5s ease-in 1s forwards;
}

.logo {
    width: 500px;
    height: 500px;
    filter: drop-shadow(0 10px 30px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 20px rgba(0, 204, 0, 0.3));
    animation: floatLogo 3s ease-in-out infinite, rotateLogo 20s linear infinite;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* Advanced Animations */
@keyframes floatLogo {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes rotateLogo {
    0% {
        filter: drop-shadow(0 10px 30px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 20px rgba(0, 204, 0, 0.3)) hue-rotate(0deg);
    }
    50% {
        filter: drop-shadow(0 10px 30px rgba(0, 204, 0, 0.5)) drop-shadow(0 0 20px rgba(0, 102, 204, 0.3)) hue-rotate(10deg);
    }
    100% {
        filter: drop-shadow(0 10px 30px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 20px rgba(0, 204, 0, 0.3)) hue-rotate(0deg);
    }
}

/* Fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Zoom-in animation */
@keyframes zoomIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Floating effect for the page */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Subtle breathing effect */
@keyframes breathe {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.95;
    }
}

/* Light pulse effect */
@keyframes lightPulse {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.05);
    }
}

body {
    animation: fadeIn 1.5s ease-in 1s forwards, breathe 4s ease-in-out 1s infinite;
}

.container {
    animation: zoomIn 2s ease-out 1s forwards, lightPulse 8s ease-in-out 1s infinite;
}

/* ==================== RESPONSIVE DESIGN ==================== */

/* Large Desktop (1920px and above) */
@media (min-width: 1920px) {
    html, body {
        height: 100vh;
    }

    .logo {
        width: 660px;
        height: 660px;
    }
}

/* Desktop (1025px to 1919px) */
@media (min-width: 1025px) and (max-width: 1919px) {
    html, body {
        height: 100vh;
    }

    .logo {
        width: 580px;
        height: 580px;
    }
}

/* Tablets (768px to 1024px) */
@media (max-width: 1024px) {
    html, body {
        height: 100vh;
    }

    .logo {
        width: 460px;
        height: 460px;
    }
}

/* Small tablets and large phones (481px to 767px) */
@media (max-width: 767px) {
    html, body {
        height: 100vh;
    }

    .logo {
        width: 360px;
        height: 360px;
    }
}

/* Smartphones (320px to 480px) */
@media (max-width: 480px) {
    html, body {
        height: 100vh;
    }

    .logo {
        width: 300px;
        height: 300px;
    }
}

/* Extra small devices (up to 360px) */
@media (max-width: 360px) {
    html, body {
        height: 100vh;
    }

    .logo {
        width: 260px;
        height: 260px;
    }
}

/* Landscape orientation on mobile */
@media (max-height: 600px) and (orientation: landscape) {
    html, body {
        height: 100vh;
    }

    .logo {
        width: 250px;
        height: 250px;
    }
}

/* Portrait orientation */
@media (orientation: portrait) {
    html, body {
        height: 100vh;
    }
}

/* High DPI screens (Retina displays) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
        filter: drop-shadow(0 10px 30px rgba(0, 102, 204, 0.5)) drop-shadow(0 0 20px rgba(0, 204, 0, 0.3));
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .logo {
        cursor: pointer;
    }
}