/* MDUC Hero Eyecatch CSS - Flipper Animation Fix */

.hero-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #ECEFF1;
    z-index: 10;
    transition: opacity 0.3s ease-out;
}

.hero-background-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1;
    transition: opacity 0.5s ease-out;
}

.medical-isometric-bg {
    width: 100%; height: 100%;
    /* Fallback for browsers that don't support WebP */
    background-image: url('/img/heroes/futuristic-medical-center.png');
    /* WebP for supported browsers */
    background-image: url('/img/heroes/futuristic-medical-center.webp');
    background-size: cover;
    background-position: center;
    opacity: 1;
}

/* Responsive background images for mobile optimization */
@media (max-width: 768px) {
    .medical-isometric-bg {
        background-image: url('/img/heroes/futuristic-medical-center-md.webp');
    }
}

@media (max-width: 480px) {
    .medical-isometric-bg {
        background-image: url('/img/heroes/futuristic-medical-center-sm.webp');
    }
}

.hero-content-layer {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 5%;
}

.hero-main-title { font-size: 3rem; color: var(--primary-orange); }
.hero-sub-title { font-size: 1.5rem; color: var(--muted-gray); }

/* Mascot Container & Animations */
.hero-mascot-container {
    flex-basis: 50%;
    text-align: center;
    animation: float-container 6s ease-in-out infinite;
    transition: opacity 0.3s ease-out;
}

.mduc-flipper {
    position: relative;
    width: 600px;
    height: 600px;
    margin: auto;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-mascot-container:hover .mduc-flipper {
    transform: rotateY(180deg);
}

.mduc-front, .mduc-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.mduc-back {
    transform: rotateY(180deg);
}

.hero-mduc-chan {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.2));
}

@keyframes float-container {
    0% { transform: translateY(-15px); }
    50% { transform: translateY(15px); }
    100% { transform: translateY(-15px); }
}

/* Responsive Adjustments */
@media (max-width: 1023px) {
    .hero-content-layer { flex-direction: column; justify-content: center; }
    .hero-title-panel { flex-basis: auto; width: 90%; margin: 5vh 0; padding: 2rem; }
    .hero-mascot-container { flex-basis: auto; width: 100%; }
    .mduc-flipper { width: 80vw; height: auto; min-height: 40vh; }
    .hero-main-title { font-size: 2rem; }
    .hero-sub-title { font-size: 1.2rem; }
}

/* Hero spacer - same size as hero section */
#hero-spacer {
    height: 100vh;
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Main content */
#main-content {
    position: relative;
    z-index: 1;
    background-color: transparent;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.8s ease-out, opacity 0.8s ease-out;
}

/* Main content slide-up animation class */
#main-content.slide-up {
    transform: translateY(0);
    opacity: 1;
}

/* Fade classes for scroll animation */
.hero-fade-title { opacity: 0; }
.hero-fade-mascot { opacity: 0; }
.hero-fade-background { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .hero-mascot-container { animation: none; }
    .mduc-flipper { transition: none; }
}