/* ============================================
   PinguPenguin Landing Page
   An inconspicuous gateway disguised as a
   cute penguin fan page.
   ============================================ */

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

html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Sky gradient background */
.scene {
    width: 100%;
    height: 100vh;
    background: linear-gradient(
        180deg,
        #87CEEB 0%,       /* Sky blue top */
        #B0E0F6 40%,      /* Lighter mid */
        #D4F1F9 70%,      /* Very light near horizon */
        #E8F8FF 100%      /* Almost white at bottom */
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* ---- Floating Clouds ---- */
.cloud {
    position: absolute;
    background: white;
    border-radius: 50px;
    opacity: 0.8;
}

.cloud::before,
.cloud::after {
    content: '';
    position: absolute;
    background: white;
    border-radius: 50%;
}

.cloud-1 {
    width: 120px;
    height: 40px;
    top: 12%;
    left: -120px;
    animation: drift 25s linear infinite;
}
.cloud-1::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 20px;
}
.cloud-1::after {
    width: 70px;
    height: 55px;
    top: -30px;
    left: 50px;
}

.cloud-2 {
    width: 160px;
    height: 50px;
    top: 25%;
    left: -160px;
    animation: drift 35s linear infinite;
    animation-delay: -10s;
    opacity: 0.6;
}
.cloud-2::before {
    width: 65px;
    height: 60px;
    top: -30px;
    left: 25px;
}
.cloud-2::after {
    width: 85px;
    height: 65px;
    top: -35px;
    left: 65px;
}

.cloud-3 {
    width: 100px;
    height: 35px;
    top: 8%;
    left: -100px;
    animation: drift 30s linear infinite;
    animation-delay: -20s;
    opacity: 0.5;
}
.cloud-3::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 15px;
}
.cloud-3::after {
    width: 55px;
    height: 45px;
    top: -25px;
    left: 40px;
}

@keyframes drift {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 200px)); }
}

/* ---- Pingu ---- */
.pingu-link {
    text-decoration: none;
    cursor: default;       /* Keep it inconspicuous */
    z-index: 10;
    position: relative;
    margin-bottom: 20px;
}

.pingu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pingu {
    width: 150px;
    height: auto;
    transition: transform 0.3s ease;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
    user-select: none;
    -webkit-user-select: none;
}

/* Subtle hover - just a tiny bounce, no obvious link behavior */
.pingu-link:hover .pingu {
    transform: translateY(-8px);
    animation: wobble 0.6s ease-in-out;
}

.pingu-link:active .pingu {
    transform: translateY(-2px) scale(0.97);
}

@keyframes wobble {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-10px) rotate(-2deg); }
    50%  { transform: translateY(-8px) rotate(1deg); }
    75%  { transform: translateY(-9px) rotate(-1deg); }
    100% { transform: translateY(-8px) rotate(0deg); }
}

/* Shadow beneath Pingu */
.shadow {
    width: 75px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(0,0,0,0.15) 0%, transparent 70%);
    border-radius: 50%;
    margin-top: 5px;
    transition: all 0.3s ease;
}

.pingu-link:hover .shadow {
    width: 60px;
    opacity: 0.5;
}

/* ---- Ground / Ice ---- */
.ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.6) 100%);
}

.snow-patch {
    position: absolute;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50% 50% 0 0;
}

.snow-1 {
    width: 300px;
    height: 40px;
    left: 10%;
}

.snow-2 {
    width: 450px;
    height: 50px;
    left: 40%;
}

.snow-3 {
    width: 250px;
    height: 35px;
    right: 5%;
}

/* ---- Footer ---- */
.noot {
    position: absolute;
    bottom: 15px;
    color: rgba(100, 140, 160, 0.4);
    font-size: 12px;
    letter-spacing: 2px;
    user-select: none;
    -webkit-user-select: none;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .pingu {
        width: 115px;
    }

    .shadow {
        width: 58px;
    }

    .cloud-1 { width: 80px; height: 28px; }
    .cloud-2 { width: 110px; height: 35px; }
    .cloud-3 { width: 70px; height: 25px; }
}

@media (max-width: 400px) {
    .pingu {
        width: 90px;
    }
}