/* Star Wars Font Implementation */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* Custom Star Wars Font */
.star-wars-font {
    font-family: 'Orbitron', 'Star Jedi', monospace;
}

.star-wars-title {
    font-family: 'Orbitron', monospace;
    text-shadow: 0 0 10px rgba(255, 232, 31, 0.5);
    letter-spacing: 0.1em;
}

/* Enhanced Animated Starfield Background */
.stars {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 
        /* Small distant stars */
        70px 80px rgba(255,255,255,0.9), 90px 100px rgba(255,255,255,0.8), 130px 40px rgba(255,255,255,0.7), 160px 160px rgba(255,255,255,0.9),
        20px 50px rgba(255,255,255,0.6), 60px 30px rgba(255,255,255,0.8), 110px 70px rgba(255,255,255,0.9), 150px 120px rgba(255,255,255,0.7),
        40px 140px rgba(255,255,255,0.8), 80px 20px rgba(255,255,255,0.9), 120px 90px rgba(255,255,255,0.6), 170px 50px rgba(255,255,255,0.8),
        10px 10px rgba(255,255,255,0.9), 50px 60px rgba(255,255,255,0.7), 100px 110px rgba(255,255,255,0.8), 140px 10px rgba(255,255,255,0.9),
        30px 90px rgba(255,255,255,0.6), 70px 130px rgba(255,255,255,0.8), 110px 30px rgba(255,255,255,0.9), 150px 80px rgba(255,255,255,0.7),
        180px 140px rgba(255,255,255,0.8), 200px 20px rgba(255,255,255,0.9), 220px 100px rgba(255,255,255,0.6), 250px 60px rgba(255,255,255,0.8),
        270px 120px rgba(255,255,255,0.9), 300px 40px rgba(255,255,255,0.7), 320px 90px rgba(255,255,255,0.8), 350px 150px rgba(255,255,255,0.9),
        370px 30px rgba(255,255,255,0.6), 400px 80px rgba(255,255,255,0.8), 420px 140px rgba(255,255,255,0.9), 450px 50px rgba(255,255,255,0.7),
        470px 110px rgba(255,255,255,0.8), 500px 20px rgba(255,255,255,0.9), 520px 70px rgba(255,255,255,0.6), 550px 130px rgba(255,255,255,0.8),
        570px 40px rgba(255,255,255,0.9), 600px 100px rgba(255,255,255,0.7), 620px 160px rgba(255,255,255,0.8), 650px 60px rgba(255,255,255,0.9),
        670px 120px rgba(255,255,255,0.6), 700px 30px rgba(255,255,255,0.8), 720px 90px rgba(255,255,255,0.9), 750px 150px rgba(255,255,255,0.7),
        770px 50px rgba(255,255,255,0.8), 800px 110px rgba(255,255,255,0.9), 820px 20px rgba(255,255,255,0.6), 850px 80px rgba(255,255,255,0.8),
        /* Additional stars for density */
        900px 50px rgba(255,255,255,0.7), 950px 120px rgba(255,255,255,0.8), 1000px 80px rgba(255,255,255,0.9), 1050px 140px rgba(255,255,255,0.6),
        1100px 30px rgba(255,255,255,0.8), 1150px 100px rgba(255,255,255,0.9), 1200px 160px rgba(255,255,255,0.7), 1250px 60px rgba(255,255,255,0.8),
        1300px 110px rgba(255,255,255,0.9), 1350px 20px rgba(255,255,255,0.6), 1400px 90px rgba(255,255,255,0.8), 1450px 150px rgba(255,255,255,0.9);
    animation: animStar 80s linear infinite;
}

.twinkling {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 
        /* Larger twinkling stars */
        100px 100px rgba(255,255,255,1), 200px 50px rgba(255,255,200,0.9), 300px 150px rgba(200,255,255,0.8), 400px 80px rgba(255,255,255,1),
        150px 30px rgba(255,255,200,0.9), 250px 120px rgba(255,255,255,0.8), 350px 60px rgba(200,255,255,0.9), 450px 140px rgba(255,255,255,1),
        50px 170px rgba(255,255,200,0.8), 180px 90px rgba(255,255,255,0.9), 280px 40px rgba(200,255,255,0.8), 380px 130px rgba(255,255,255,1),
        480px 70px rgba(255,255,200,0.9), 120px 200px rgba(255,255,255,0.8), 220px 110px rgba(200,255,255,0.9), 320px 180px rgba(255,255,255,1),
        420px 20px rgba(255,255,200,0.8), 520px 160px rgba(255,255,255,0.9), 80px 140px rgba(200,255,255,0.8), 190px 70px rgba(255,255,255,1),
        /* Additional twinkling stars */
        600px 90px rgba(255,255,200,0.9), 700px 130px rgba(255,255,255,0.8), 800px 50px rgba(200,255,255,0.9), 900px 170px rgba(255,255,255,1),
        1000px 110px rgba(255,255,200,0.8), 1100px 40px rgba(255,255,255,0.9), 1200px 150px rgba(200,255,255,0.8), 1300px 80px rgba(255,255,255,1);
    animation: animStar 120s linear infinite;
}

/* Add extra star layer for more depth */
.stars:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 
        /* Brightest stars */
        300px 300px rgba(255,255,255,1), 800px 200px rgba(255,255,200,1), 1200px 400px rgba(200,255,255,1),
        500px 600px rgba(255,255,255,1), 900px 500px rgba(255,255,200,1), 1400px 300px rgba(200,255,255,1),
        200px 800px rgba(255,255,255,1), 600px 100px rgba(255,255,200,1), 1000px 700px rgba(200,255,255,1),
        700px 450px rgba(255,255,255,1), 1100px 150px rgba(255,255,200,1), 1500px 550px rgba(200,255,255,1);
    animation: animStar 200s linear infinite;
}

@keyframes animStar {
    from { 
        transform: translateY(0px);
        opacity: 1;
    }
    to { 
        transform: translateY(-2000px);
        opacity: 0.3;
    }
}

/* Pulsing effect for some stars */
@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.twinkling {
    animation: animStar 120s linear infinite, twinkle 3s ease-in-out infinite alternate;
}

/* Distant galaxies/nebulae layer */
.galaxies {
    width: 4px;
    height: 4px;
    background: transparent;
    box-shadow: 
        /* Very large distant objects */
        400px 400px 20px rgba(255,255,255,0.1), 1200px 200px 15px rgba(200,255,255,0.15), 800px 600px 25px rgba(255,255,200,0.1),
        200px 800px 18px rgba(255,255,255,0.12), 1000px 100px 22px rgba(255,200,255,0.1), 600px 900px 16px rgba(200,255,200,0.15),
        1400px 500px 30px rgba(255,255,255,0.08), 300px 300px 12px rgba(255,255,200,0.2), 1100px 700px 20px rgba(200,255,255,0.12);
    border-radius: 50%;
    animation: animStar 300s linear infinite;
}

/* Card Styles */
.card {
    background: linear-gradient(145deg, rgba(31, 41, 55, 0.8), rgba(17, 24, 39, 0.9));
    border: 1px solid rgba(234, 179, 8, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    cursor: pointer;
    touch-action: manipulation;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(234, 179, 8, 0.3);
    border-color: rgba(234, 179, 8, 0.8);
}

.card:active {
    transform: translateY(-4px);
    transition: all 0.1s ease;
}

.card-hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(255, 232, 31, 0.3);
}

/* Improve touch targets for mobile */
.card button, .card input, .card select {
    min-height: 44px;
    min-width: 44px;
}

/* Status Badges */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-released {
    background-color: rgba(34, 197, 94, 0.2);
    color: rgb(34, 197, 94);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-ongoing {
    background-color: rgba(59, 130, 246, 0.2);
    color: rgb(59, 130, 246);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-upcoming {
    background-color: rgba(234, 179, 8, 0.2);
    color: rgb(234, 179, 8);
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.status-completed {
    background-color: rgba(168, 85, 247, 0.2);
    color: rgb(168, 85, 247);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Type Badges */
.type-movie {
    background-color: rgba(239, 68, 68, 0.2);
    color: rgb(239, 68, 68);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.type-series {
    background-color: rgba(34, 197, 94, 0.2);
    color: rgb(34, 197, 94);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.type-animated {
    background-color: rgba(168, 85, 247, 0.2);
    color: rgb(168, 85, 247);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Watch Status Toggle */
.watch-toggle {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    flex-shrink: 0;
}

.watch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(107, 114, 128, 0.5);
    transition: 0.3s;
    border-radius: 34px;
    border: 2px solid rgba(234, 179, 8, 0.3);
    touch-action: manipulation; /* Improve touch response */
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider {
    background-color: rgba(34, 197, 94, 0.8);
    border-color: rgba(34, 197, 94, 1);
}

input:checked + .slider:before {
    transform: translateX(26px);
    background-color: rgb(34, 197, 94);
}

/* Add touch feedback */
.slider:active:before {
    width: 28px;
}

/* Rating Stars */
.rating-stars {
    color: #fbbf24;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
}

::-webkit-scrollbar-thumb {
    background: rgba(234, 179, 8, 0.5);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(234, 179, 8, 0.8);
}

/* Loading Animation */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(234, 179, 8, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(234, 179, 8, 0.8);
    }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Modal Animations */
.modal-enter {
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .star-wars-title {
        font-size: 1.75rem !important;
        text-shadow: 0 0 8px rgba(255, 232, 31, 0.5);
        line-height: 1.2;
    }
    
    .card {
        margin-bottom: 1rem;
        padding: 1rem;
    }
    
    /* Improve touch targets */
    button, input, select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Better modal on mobile */
    #detailModal .bg-gray-900 {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
    }
    
    /* Smaller watch toggle for mobile */
    .watch-toggle {
        width: 50px;
        height: 28px;
    }
    
    .slider:before {
        height: 20px;
        width: 20px;
        left: 4px;
        bottom: 2px;
    }
    
    input:checked + .slider:before {
        transform: translateX(22px);
    }
    
    /* Better spacing for mobile */
    .status-badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    /* Improve card readability */
    .card {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .card:hover {
        transform: translateY(-4px);
    }
    
    /* Better text sizing */
    .card h3 {
        font-size: 1.1rem;
        line-height: 1.3;
    }
    
    .card p {
        font-size: 0.9rem;
        line-height: 1.4;
    }
}

/* Era-specific color themes */
.era-prequel {
    border-left: 4px solid #3b82f6;
}

.era-original {
    border-left: 4px solid #eab308;
}

.era-sequel {
    border-left: 4px solid #ef4444;
}

.era-high-republic {
    border-left: 4px solid #8b5cf6;
}

.era-empire {
    border-left: 4px solid #6b7280;
}

.era-new-republic {
    border-left: 4px solid #10b981;
}

/* Container alignment fixes */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* Ensure consistent padding across all sections */
header .container,
.bg-gray-900 .container,
main.container {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    header .container,
    .bg-gray-900 .container,
    main.container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Additional mobile optimizations */
@media (max-width: 480px) {
    /* Ensure proper font sizes for readability */
    body {
        font-size: 14px;
        line-height: 1.5;
    }
    
    /* Improve button accessibility */
    button {
        min-height: 48px;
        font-size: 16px;
        padding: 12px 16px;
    }
    
    /* Better modal spacing */
    #detailModal .bg-gray-900 {
        margin: 0.5rem;
        border-radius: 16px;
    }
    
    /* Improve filter dropdowns */
    select {
        background-size: 16px;
        padding-right: 40px;
    }
    
    /* Better card spacing */
    .card {
        padding: 1.25rem;
        border-radius: 16px;
    }
    
    /* Improve stats display */
    .grid.grid-cols-2 {
        gap: 0.75rem;
    }
}

/* Scroll to Top Button */
#scrollToTop {
    box-shadow: 0 4px 20px rgba(234, 179, 8, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#scrollToTop:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(234, 179, 8, 0.4);
}

#scrollToTop:active {
    transform: translateY(0);
    transition: all 0.1s ease;
}

/* Mobile adjustments for scroll button */
@media (max-width: 640px) {
    #scrollToTop {
        bottom: 1rem;
        right: 1rem;
        padding: 0.75rem;
    }
    
    #scrollToTop svg {
        width: 1.25rem;
        height: 1.25rem;
    }
}