/* ===================================
   AADU 3 - Animations & Transitions
   =================================== */

/* ===================================
   PAGE LOAD ANIMATIONS
   =================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

/* ===================================
   HERO ANIMATIONS
   =================================== */

/* Ken Burns Effect (kept for fallback, not used with video) */
@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    25% {
        transform: scale(1.1) translate(2%, -2%);
    }
    50% {
        transform: scale(1.15) translate(-2%, 2%);
    }
    75% {
        transform: scale(1.1) translate(2%, 2%);
    }
    100% {
        transform: scale(1) translate(0, 0);
    }
}

/* Video fade in effect */
.hero-video {
    animation: videoFadeIn 1s ease-in;
}

@keyframes videoFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Gold Shimmer Animation */
@keyframes shimmer {
    0%, 100% {
        text-shadow: 0 0 10px rgba(212, 168, 67, 0.5),
                     0 0 20px rgba(212, 168, 67, 0.3),
                     0 0 30px rgba(212, 168, 67, 0.2);
    }
    50% {
        text-shadow: 0 0 20px rgba(212, 168, 67, 0.8),
                     0 0 40px rgba(212, 168, 67, 0.5),
                     0 0 60px rgba(212, 168, 67, 0.3);
    }
}

/* Scroll Indicator Bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) rotate(45deg);
    }
    40% {
        transform: translateY(10px) rotate(45deg);
    }
    60% {
        transform: translateY(5px) rotate(45deg);
    }
}

/* ===================================
   BUTTON ANIMATIONS
   =================================== */

/* Button Shimmer Sweep */
@keyframes buttonShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.btn-trailer,
.btn-book-tickets,
.btn-book-tickets-footer {
    position: relative;
    overflow: hidden;
}

.btn-trailer::before,
.btn-book-tickets::before,
.btn-book-tickets-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: var(--transition-slow);
}

.btn-trailer:hover::before,
.btn-book-tickets:hover::before,
.btn-book-tickets-footer:hover::before {
    left: 100%;
}

/* Play Button Pulse */
@keyframes playButtonPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(212, 168, 67, 0);
    }
}

.play-button {
    animation: playButtonPulse 2s infinite;
}

/* ===================================
   COUNTDOWN TIMER ANIMATIONS
   =================================== */

/* Flip Animation for Numbers */
@keyframes flipNumber {
    0% {
        transform: rotateX(0deg);
    }
    50% {
        transform: rotateX(90deg);
    }
    100% {
        transform: rotateX(0deg);
    }
}

.countdown-value {
    display: inline-block;
    animation: flipNumber 0.6s ease-in-out;
}

/* Countdown Card Glow */
@keyframes countdownGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 168, 67, 0.2);
    }
    50% {
        box-shadow: 0 0 30px rgba(212, 168, 67, 0.4);
    }
}

.countdown-item {
    animation: countdownGlow 3s ease-in-out infinite;
}

/* ===================================
   CAST & CREW CARD ANIMATIONS
   =================================== */

/* Card Hover Effects */
.cast-card,
.crew-card {
    transition: transform var(--transition-medium), 
                box-shadow var(--transition-medium);
}

/* Image Zoom on Hover */
.cast-card:hover,
.crew-card:hover {
    transform: translateY(-10px);
}

/* Border Glow Animation */
@keyframes borderGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 168, 67, 0.2);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 168, 67, 0.6);
    }
}

.cast-image:hover,
.crew-image:hover {
    animation: borderGlow 1.5s ease-in-out infinite;
}

/* ===================================
   TIMELINE ANIMATIONS
   =================================== */

/* Dot Pulse Animation */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(212, 168, 67, 0.5);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 40px rgba(212, 168, 67, 1);
        transform: scale(1.1);
    }
}

/* Line Draw Animation */
@keyframes drawLine {
    from {
        height: 0;
    }
    to {
        height: 100%;
    }
}

.timeline::before {
    animation: drawLine 2s ease-out;
}

/* Timeline Item Slide In */
.timeline-item {
    animation: fadeInRight 0.8s ease-out;
}

.timeline-item:nth-child(2) {
    animation-delay: 0.2s;
}

.timeline-item:nth-child(3) {
    animation-delay: 0.4s;
}

/* ===================================
   GALLERY ANIMATIONS
   =================================== */

/* Gallery Slide Hover Effect */
.gallerySwiper .swiper-slide {
    transition: box-shadow var(--transition-medium),
                border-color var(--transition-medium);
}

.gallerySwiper .swiper-slide:hover {
    /* Removed transform to maintain image clarity */
    box-shadow: 0 10px 40px rgba(212, 168, 67, 0.5);
}

/* Image Fade In */
@keyframes imageFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================
   MODAL ANIMATIONS
   =================================== */

/* Modal Fade In */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Content Zoom In */
@keyframes modalZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal.active .modal-overlay {
    animation: modalFadeIn 0.3s ease-out;
}

.modal.active .modal-content {
    animation: modalZoomIn 0.4s ease-out;
}

/* ===================================
   PARTICLE ANIMATIONS (Canvas)
   =================================== */

/* Floating Particles */
@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-40px) translateX(-10px);
        opacity: 1;
    }
    75% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.6;
    }
}

/* ===================================
   NAVIGATION ANIMATIONS
   =================================== */

/* Navbar Slide Down */
@keyframes navSlideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.navbar {
    animation: navSlideDown 0.5s ease-out;
}

/* Mobile Menu Slide In */
.nav-menu {
    animation: slideInRight 0.4s ease-out;
}

/* Hamburger Animation */
.hamburger span {
    transition: all 0.3s ease;
}

/* ===================================
   SCROLL REVEAL ANIMATIONS
   =================================== */

/* Fade Up on Scroll */
[data-aos="fade-up"] {
    animation: fadeInUp 0.8s ease-out;
}

/* Fade Down on Scroll */
[data-aos="fade-down"] {
    animation: fadeInDown 0.8s ease-out;
}

/* Fade Left on Scroll */
[data-aos="fade-left"] {
    animation: fadeInLeft 0.8s ease-out;
}

/* Fade Right on Scroll */
[data-aos="fade-right"] {
    animation: fadeInRight 0.8s ease-out;
}

/* Zoom In on Scroll */
[data-aos="zoom-in"] {
    animation: zoomIn 0.8s ease-out;
}

/* Flip Left on Scroll */
@keyframes flipLeft {
    from {
        transform: perspective(1000px) rotateY(-90deg);
        opacity: 0;
    }
    to {
        transform: perspective(1000px) rotateY(0);
        opacity: 1;
    }
}

[data-aos="flip-left"] {
    animation: flipLeft 0.8s ease-out;
}

/* ===================================
   SECTION DIVIDER ANIMATION
   =================================== */

@keyframes dividerExpand {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100px;
        opacity: 1;
    }
}

.section-divider {
    animation: dividerExpand 1s ease-out;
}

/* ===================================
   LOADING ANIMATIONS
   =================================== */

/* Spinner */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(212, 168, 67, 0.2);
    border-top-color: var(--color-accent-gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* ===================================
   TRAILER PREVIEW HOVER ANIMATION
   =================================== */

.trailer-preview {
    transition: transform var(--transition-medium);
}

.trailer-card:hover .trailer-preview {
    transform: scale(1.05);
}

/* ===================================
   FOOTER ANIMATIONS
   =================================== */

/* Social Icon Bounce */
@keyframes iconBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.social-links a:hover {
    animation: iconBounce 0.5s ease;
}

/* ===================================
   TEXT GRADIENT ANIMATION
   =================================== */

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

.gradient-text {
    background: linear-gradient(
        90deg,
        var(--color-accent-gold),
        var(--color-accent-bronze),
        var(--color-accent-gold)
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

/* ===================================
   GENRE TAG ANIMATIONS
   =================================== */

.genre-tag {
    transition: all var(--transition-medium);
}

.genre-tag:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(212, 168, 67, 0.3);
    background: rgba(212, 168, 67, 0.2);
}

/* ===================================
   INFO CARD ANIMATIONS
   =================================== */

.info-card {
    transition: all var(--transition-medium);
}

.info-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* ===================================
   CUSTOM CURSOR (Desktop Only)
   =================================== */

@media (min-width: 1024px) {
    body {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23D4A843" stroke-width="2"><circle cx="12" cy="12" r="10"/></svg>'), auto;
    }
    
    a, button, .cast-card, .crew-card, .trailer-card {
        cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23D4A843"><circle cx="12" cy="12" r="10"/></svg>'), pointer;
    }
}

/* ===================================
   STAGGER ANIMATIONS
   =================================== */

/* Stagger children elements */
.stagger-animation > * {
    animation: fadeInUp 0.6s ease-out;
}

.stagger-animation > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-animation > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-animation > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-animation > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-animation > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-animation > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-animation > *:nth-child(7) { animation-delay: 0.7s; }
.stagger-animation > *:nth-child(8) { animation-delay: 0.8s; }

/* ===================================
   PERFORMANCE OPTIMIZATIONS
   =================================== */

/* Use GPU acceleration for animations */
.hero-video,
.cast-image img,
.crew-image img,
.trailer-preview,
.play-button {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}