/* Base Utilities */
.text-shadow {
    text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.9);
}

/* Gradient that keeps the hero image visible but grounds the white text */
/* Default (Dark Mode) Gradient */
.hero-gradient {
    background: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.9) 0%, 
        rgba(0, 0, 0, 0.5) 50%, 
        transparent 100%
    ),
    linear-gradient(
        to top, 
        rgba(11, 11, 15, 0.8) 0%, 
        transparent 30%
    );
}

/* Specific Light Mode tweak for the hero gradient to blend smoothly into the light bg below it */
html:not(.dark) .hero-gradient {
    background: linear-gradient(
        to right, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0.4) 50%, 
        transparent 100%
    ),
    linear-gradient(
        to top, 
        rgba(249, 250, 251, 1) 0%, /* matches bg-gray-50 */
        transparent 20%
    );
}

/* Ticker Animation */
.animate-ticker {
    display: inline-block;
    padding-left: 100%;
    animation: ticker 25s linear infinite;
}

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

/* Hide scrollbars */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Grunge Texture Text for Movie Title */
.text-texture-grunge {
    background-image: url('https://images.unsplash.com/photo-1518098268026-4e89f1a2cd8e?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80');
    background-size: cover;
    background-position: center;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    background-color: #f3f4f6; 
}

/* =========================================
   HORIZONTAL CAST ACCORDION SLIDER 
========================================= */

.cast-acc-item {
    flex: 0 0 calc(30% - 4px);
    width: calc(30% - 4px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.cast-acc-item.active {
    flex: 0 0 calc(70% - 4px);
    width: calc(70% - 4px);
}

@media (min-width: 768px) {
    .cast-acc-item {
        /* Inactive width: Exactly 20% minus gap calculation */
        flex: 0 0 calc(20% - 8px);
        width: calc(20% - 8px);
    }
    .cast-acc-item.active {
        /* Active width: Exactly 60% minus gap calculation.
           60% + 20% + 20% = 100% (Exactly 3 items fit on screen) */
        flex: 0 0 calc(60% - 16px);
        width: calc(60% - 16px);
    }
}

/* Dimmer Overlay for inactive items */
.cast-acc-item .acc-dim {
    background-color: transparent;
    transition: background-color 0.4s ease;
}

.cast-acc-item:not(.active) .acc-dim {
    background-color: rgba(0, 0, 0, 0.6);
}

.cast-acc-item:not(.active):hover .acc-dim {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Content Gradient Overlay */
.cast-acc-item .acc-overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cast-acc-item.active .acc-overlay {
    opacity: 1;
}

.cast-acc-item .acc-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.cast-acc-item.active .acc-content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease 0.3s; 
}

/* Vertical Title Handling */
.cast-acc-item .acc-vertical-text {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
}

.cast-acc-item:not(.active) .acc-vertical-text {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease 0.3s;
}