/* Estilos personalizados para WWR Records */

/* Animaciones suaves para el carrusel */
.carousel-container {
    position: relative;
    overflow: hidden;
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
    min-width: 100%;
    position: relative;
}

/* Efectos de hover para controles */

/* .indicator.active styles moved to inline CSS */

/* Animación de fade-in para imágenes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-slide img {
    animation: fadeIn 0.8s ease-out;
}

/* Efecto parallax sutil */
.carousel-slide img {
    transition: transform 0.3s ease;
}

/* .carousel-slide:hover img effect removed */

/* Gradiente overlay mejorado */
.carousel-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(10, 10, 10, 0.3) 0%,
        rgba(26, 26, 26, 0.6) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Texto con mejor legibilidad */
.carousel-slide .absolute {
    z-index: 2;
}

/* Transiciones suaves para navegación */
nav a {
    position: relative;
}

/* Efectos de botón mejorados */
button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ======================================== */

/* Mobile (320px - 767px) */
@media (max-width: 768px) {
    .carousel-slide h3 {
        font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }

    .carousel-slide p {
        font-size: clamp(0.875rem, 4vw, 1.125rem) !important;
        line-height: 1.4 !important;
    }

    .carousel-prev,
    .carousel-next {
        width: 44px !important;
        height: 44px !important;
        background: none !important;
        border-radius: 0 !important;
    }

    .carousel-prev svg,
    .carousel-next svg {
        width: 28px !important;
        height: 28px !important;
    }
}

/* Extra Small Mobile (320px - 480px) */
@media (max-width: 480px) {
    .carousel-slide h3 {
        font-size: clamp(1.25rem, 7vw, 1.75rem) !important;
        margin-bottom: 0.5rem !important;
    }

    .carousel-slide p {
        font-size: clamp(0.75rem, 3.5vw, 1rem) !important;
    }

    .carousel-prev,
    .carousel-next {
        width: 40px !important;
        height: 40px !important;
        background: none !important;
        border-radius: 0 !important;
    }

    .carousel-prev svg,
    .carousel-next svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* Landscape orientation optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .worldwide-text,
    .worldwide-text.shrink {
        font-size: clamp(2.5rem, 20vw, 5rem) !important;
        top: 0.5rem !important;
    }
    
    .nav-menu,
    .nav-menu.shift-up {
        top: clamp(2rem, 8vw, 4rem) !important;
    }
    
    .social-icons {
        bottom: 0.5rem !important;
    }
}

/* Loading state para imágenes */
.carousel-slide img {
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

.carousel-slide img[src] {
    animation: none;
    background: none;
}

/* Touch optimization for mobile */
@media (max-width: 768px) {
    .carousel-slide img {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: pan-x pan-y;
    }
    
    /* Prevent zoom on double tap */
    * {
        touch-action: manipulation;
    }
}

/* Efectos de glassmorphism */
.carousel-prev,
.carousel-next {
    backdrop-filter: none;
    border: none;
    background: none;
}

/* Animación de entrada para el header */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

header {
    animation: slideDown 0.6s ease-out;
}

/* Mejor contraste para accesibilidad */
.carousel-slide h3 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.carousel-slide p {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Focus states para accesibilidad */
.carousel-prev:focus,
.carousel-next:focus,
.indicator:focus {
    outline: none;
}

/* Estados de carga */
.carousel-slide {
    background: linear-gradient(45deg, #0a0a0a, #1a1a1a);
    background-size: 400% 400%;
    animation: gradientShift 8s ease infinite;
}

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

/* Dashboard Upload Area Styles */
.upload-area-dragover {
    border-color: #ff6b35 !important;
    background-color: rgba(255, 107, 53, 0.1) !important;
    transform: scale(1.02);
}

/* Minimalist Design Enhancements */
.minimalist-gradient {
    background: linear-gradient(135deg, #000000 0%, #111111 100%);
}

.carousel-slide img {
    filter: brightness(0.9) contrast(1.1);
}

/* .carousel-slide:hover img effect removed */

.carousel-slide {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ultra minimal controls */
.carousel-prev,
.carousel-next {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-indicators {
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

/* Minimalist hover effects */
.slide-preview:hover {
    transform: translateY(-4px);
}

.slide-preview {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Clean typography */
h1, h2, h3 {
    letter-spacing: -0.025em;
}

/* Minimalist footer */
footer {
    background: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Responsive improvements for minimalist design */
@media (max-width: 768px) {
    .carousel-slide h3 {
        font-size: clamp(1.25rem, 7vw, 1.75rem) !important;
        line-height: 1.3 !important;
    }

    .carousel-slide p {
        font-size: clamp(0.75rem, 3.5vw, 1rem) !important;
        line-height: 1.5 !important;
    }

    .carousel-prev,
    .carousel-next {
        width: 42px !important;
        height: 42px !important;
        opacity: 0.9 !important;
        background: none !important;
        border-radius: 0 !important;
    }

    .carousel-prev svg,
    .carousel-next svg {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Minimalist animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-slide {
    animation: fadeInUp 0.8s ease-out;
}

/* Full-screen carousel optimizations */
.full-screen-slide img {
    filter: brightness(1) contrast(1.1) saturate(1.1);
}

/* .full-screen-slide:hover img effect removed */

/* Full-screen controls enhanced */
.full-screen-nav {
    border: none;
    background: none;
}

/* .full-screen-indicators styles removed - using inline styles instead */

.admin-button {
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3);
}

/* Minimalist loading */
.carousel-slide img {
    background: none;
}

.upload-area-uploading {
    opacity: 0.7;
    pointer-events: none;
}

.image-preview-fade-in {
    animation: previewFadeIn 0.3s ease-out;
}

@keyframes previewFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.drag-pulse {
    animation: dragPulse 1.5s ease-in-out infinite;
}

@keyframes dragPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

/* Enhanced hover effects for upload area */
.image-upload-area:hover {
    border-color: rgba(255, 107, 53, 0.5) !important;
    background-color: rgba(255, 107, 53, 0.05) !important;
}

.image-upload-area:hover svg {
    color: rgba(255, 107, 53, 0.7) !important;
}

.image-upload-area:hover p {
    color: #ffffff !important;
}

/* Better image preview styling */
.image-preview-container {
    background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
}

.image-info-badge {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Smooth transitions for all upload elements */
#image-upload-area,
#image-preview,
#drag-overlay,
#preview-img {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .image-upload-area {
        padding: clamp(1rem, 4vw, 1.5rem) !important;
        min-height: 200px !important;
    }

    .image-upload-area svg {
        width: clamp(2.5rem, 12vw, 3rem) !important;
        height: clamp(2.5rem, 12vw, 3rem) !important;
    }

    .drag-overlay svg {
        width: clamp(1.5rem, 8vw, 2rem) !important;
        height: clamp(1.5rem, 8vw, 2rem) !important;
    }
}