/* ============================================================
   Dreamtrackdays - Index Page Styles
   ============================================================ */

/* ------------------ Hero Section Animations ------------------ */
@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

/* ------------------ Hero Section Layout ------------------ */
#hero-section {
    height: 110vh !important;
}

@media (min-width: 768px) {
    #hero-section {
        height: 110vh !important;
    }
}

/* Hero Content Wrapper Padding */
.hero-content-wrapper {
    padding-bottom: 35vh;
}

@media (min-width: 768px) {
    .hero-content-wrapper {
        padding-bottom: 25vh;
    }
}

/* ------------------ Newsletter Section ------------------ */
.newsletter-image-column {
    display: none;
}

@media (min-width: 768px) {
    .newsletter-image-column {
        display: block;
    }
}

.newsletter-container {
    width: 100%;
}

@media (min-width: 768px) {
    .newsletter-container {
        width: 60%;
    }
}

/* Newsletter móvil: mismo ancho que el mapa */
@media (max-width: 767px) {
    .newsletter-container {
        flex-direction: column;
    }
    
    .newsletter-container > div {
        flex: 1 1 auto !important;
        text-align: center;
        padding: 2rem 1rem;
    }
}

/* ------------------ Map Container ------------------ */
#mapa-circuitos {
    width: 100%;
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid #f3f4f6;
    height: 580px;
    overflow: hidden;
}

@media (min-width: 768px) {
    #mapa-circuitos {
        height: 810px;
    }
}

@media (min-width: 1024px) {
    #mapa-circuitos {
        height: 960px;
    }
}

/* ------------------ Image Placeholder & Skeleton (from animations.css) ------------------ */
.image-placeholder {
    position: relative;
    overflow: hidden;
    background-color: var(--color-bg-tertiary);
}

.image-placeholder img {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.image-placeholder img.loaded {
    opacity: 1;
}

.image-placeholder.loaded::before {
    display: none;
}

@keyframes skeleton-loading {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

.skeleton {
    background-color: var(--skeleton-bg);
    background-image: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0,
            var(--skeleton-shine) 20%,
            rgba(255, 255, 255, 0.5) 60%,
            rgba(255, 255, 255, 0));
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

/* ------------------ Fade In Animation (from animations.css) ------------------ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}