/* ===========================================
   Otter Family Login - Split Layout & Animations v3
   =========================================== */

/* ============ Split Layout ============ */
.login-page-layout {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 100vh;
    align-items: center;
}

.otter-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 100vh;
}

.otter-family-container {
    width: 100%;
    max-width: 500px;
}

.otter-family-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.3));
}

.login-divider {
    width: 2px;
    align-self: stretch;
    margin: 8vh 0;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.12) 15%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0.12) 85%,
        transparent
    );
    flex-shrink: 0;
}

.login-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 2rem 3rem 2rem 2.5rem;
    min-height: 100vh;
}

.login-page-layout .login-container {
    margin: 0;
    padding: 2rem 0;
    width: 100%;
    max-width: 440px;
}

/* ============ CSS 3D Head Turning ============ */
.otter-head-group {
    transform-style: preserve-3d;
}
.head-3d {
    transform-origin: 80px 75px;
    will-change: transform;
}

/* ============ SVG Expression States ============ */

.otter-family-svg .mouth {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.otter-family-svg .otter-eyes-closed {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.otter-family-svg .otter-eyes-open {
    transition: opacity 0.35s ease;
}

.otter-family-svg .eyelashes {
    transition: opacity 0.35s ease;
}

.otter-family-svg .otter-cheek {
    transition: fill 0.4s ease, rx 0.4s ease;
}

/* Tracking: normal smile */
.otter-family-svg.state-tracking .mouth-normal {
    opacity: 1;
}

/* Focused: big happy smile */
.otter-family-svg.state-focused .mouth-happy {
    opacity: 1;
}

/* Hiding: eyes closed, worried mouth, enhanced blush */
.otter-family-svg.state-hiding .mouth-hidden {
    opacity: 1;
}

.otter-family-svg.state-hiding .otter-eyes-open {
    opacity: 0;
}

.otter-family-svg.state-hiding .eyelashes {
    opacity: 0;
}

.otter-family-svg.state-hiding .otter-eyes-closed {
    opacity: 1;
}

/* ============ Decorative Animations ============ */

.deco-bubbles circle {
    animation: bubble-drift 6s ease-in-out infinite;
}

.deco-bubbles circle:nth-child(2) { animation-delay: -1s; animation-duration: 7s; }
.deco-bubbles circle:nth-child(3) { animation-delay: -2s; animation-duration: 5s; }
.deco-bubbles circle:nth-child(4) { animation-delay: -3.5s; animation-duration: 8s; }
.deco-bubbles circle:nth-child(5) { animation-delay: -4s; animation-duration: 6.5s; }
.deco-bubbles circle:nth-child(6) { animation-delay: -1.5s; animation-duration: 7.5s; }

@keyframes bubble-drift {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.1; }
    50% { transform: translateY(-12px) scale(1.15); opacity: 0.18; }
}

.sparkle {
    animation: sparkle-pulse 3s ease-in-out infinite;
}
.sparkle.sp2 { animation-delay: -1s; animation-duration: 3.5s; }
.sparkle.sp3 { animation-delay: -2s; animation-duration: 4s; }

@keyframes sparkle-pulse {
    0%, 100% { opacity: 0.15; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.35; transform: scale(1.3) rotate(20deg); }
}

/* ============ Responsive ============ */

@media (max-width: 1100px) {
    .otter-section {
        flex: 0.8;
    }
    .login-section {
        flex: 1.2;
    }
    .otter-family-container {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .login-page-layout {
        flex-direction: column;
        min-height: auto;
    }

    .otter-section {
        min-height: auto;
        padding: 2rem 2rem 0.5rem;
        flex: none;
    }

    .otter-family-container {
        max-width: 320px;
        margin: 0 auto;
    }

    .login-divider {
        width: 60%;
        height: 2px;
        margin: 0.5rem auto;
        align-self: auto;
        background: linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.15) 20%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.15) 80%,
            transparent
        );
    }

    .login-section {
        min-height: auto;
        padding: 1rem 2rem 2rem;
        justify-content: center;
    }

    .login-page-layout .login-container {
        margin: 0 auto;
        padding: 1rem 0 2rem;
    }
}

@media (max-width: 480px) {
    .otter-family-container {
        max-width: 260px;
    }

    .otter-section {
        padding: 1.5rem 1rem 0.5rem;
    }

    .login-section {
        padding: 0.5rem 1rem 2rem;
    }

    .login-page-layout .login-container {
        padding: 0.5rem 0 1.5rem;
    }
}