@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

html { scroll-behavior: smooth; background-color: #000000; }

@layer utilities {
    .bg-cast-dark { background-color: #000000; }
    .bg-cast-gray { background-color: #111111; }
    .bg-cast-accent { background-color: #FF2E00; } /* Vibrant Red/Orange */
    
    .text-cast-light { color: #FFFFFF; }
    .text-cast-muted { color: #888888; }
    .text-cast-accent { color: #FF2E00; }
    
    .font-syne { font-family: 'Syne', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
}

/* Spotlight Animation */
.spotlight {
    position: relative;
    overflow: hidden;
}

.spotlight::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(255, 46, 0, 0.15) 0%, transparent 50%);
    animation: rotate 20s linear infinite;
    z-index: 0;
    pointer-events: none;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cast-btn {
    @apply inline-flex items-center justify-center px-10 py-4 bg-[#FF2E00] text-white font-syne font-bold tracking-widest uppercase hover:bg-white hover:text-black transition-all duration-300;
}

.cast-btn-outline {
    @apply inline-flex items-center justify-center px-10 py-4 border-2 border-white text-white font-syne font-bold tracking-widest uppercase hover:bg-white hover:text-black transition-all duration-300;
}

.talent-card {
    @apply relative overflow-hidden group cursor-pointer aspect-[3/4];
}

.talent-card img {
    @apply w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0;
}

.talent-info {
    @apply absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent flex flex-col justify-end p-8 translate-y-8 group-hover:translate-y-0 transition-all duration-500 opacity-0 group-hover:opacity-100;
}

/* Glitch text effect for modern cinematic feel */
.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

@keyframes glitch {
    0% { transform: translate(0) }
    20% { transform: translate(-2px, 2px) }
    40% { transform: translate(-2px, -2px) }
    60% { transform: translate(2px, 2px) }
    80% { transform: translate(2px, -2px) }
    100% { transform: translate(0) }
}