/* ============================================ */
/* PETR LORENZ — CINEMATIC PORTFOLIO            */
/* Custom styles beyond Tailwind                */
/* ============================================ */

/* --- Base --- */
::selection {
    background: rgba(200, 168, 110, 0.3);
    color: #f0f0f0;
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #c8a86e;
}

/* Hide scrollbar for timeline */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* --- Preloader --- */
.preloader-line {
    animation: preloaderPulse 1.5s ease-in-out infinite;
}

@keyframes preloaderPulse {
    0%, 100% { width: 48px; opacity: 0.3; }
    50% { width: 80px; opacity: 1; }
}

#preloader.loaded {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Film Grain Overlay --- */
.film-grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 128px 128px;
    pointer-events: none;
}

/* --- Navigation --- */
#nav {
    background: transparent;
}

#nav.scrolled {
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

#nav.scrolled .nav-link {
    color: #888;
}

/* --- Hero Animations --- */
.hero-line {
    animation: heroLineExpand 1.5s 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    width: 0;
}

@keyframes heroLineExpand {
    to { width: 48px; }
}

.hero-subtitle {
    opacity: 0;
    transform: translateY(10px);
    animation: heroFadeUp 1s 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-title {
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp 1.2s 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-tagline {
    opacity: 0;
    transform: translateY(15px);
    animation: heroFadeUp 1s 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-scroll {
    opacity: 0;
    animation: heroFadeIn 1s 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes heroFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFadeIn {
    to { opacity: 1; }
}

/* Scroll line animation */
.scroll-line {
    animation: scrollPulse 2s 3s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%, 100% { height: 32px; opacity: 0.4; }
    50% { height: 48px; opacity: 0.8; }
}

/* Cinema bar entrance */
.cinema-bar {
    animation: cinemaBarIn 1.2s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    height: 0;
}

@keyframes cinemaBarIn {
    to { height: 6vh; }
}

/* --- Gallery Items --- */
.gallery-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger animation delay */
.gallery-item:nth-child(3n+1) { transition-delay: 0s; }
.gallery-item:nth-child(3n+2) { transition-delay: 0.15s; }
.gallery-item:nth-child(3n+3) { transition-delay: 0.3s; }

/* Gallery filter animation */
.gallery-item.hidden {
    opacity: 0;
    transform: scale(0.95);
    position: absolute;
    pointer-events: none;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* --- Year Tabs --- */
.year-tab {
    color: #aaa;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
}

.year-tab:hover {
    color: #f0f0f0;
    background: rgba(255, 255, 255, 0.06);
}

.year-tab.active {
    color: #c8a86e;
    background: rgba(200, 168, 110, 0.08);
    border-color: rgba(200, 168, 110, 0.3);
}

/* --- Filter Buttons --- */
.filter-btn.active {
    background: rgba(200, 168, 110, 0.1);
    border-color: #c8a86e;
    color: #c8a86e;
}

/* --- Timeline --- */
.timeline-item {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-item:hover {
    border-top-color: #c8a86e;
}

.timeline-item:hover span:first-child {
    color: rgba(200, 168, 110, 0.3) !important;
}

.timeline-item.active {
    border-top-color: #c8a86e;
}

.timeline-item.active span:first-child {
    color: rgba(200, 168, 110, 0.4) !important;
}

/* --- Screenplay Section --- */
.screenplay {
    border-left: 1px solid rgba(200, 168, 110, 0.15);
    padding-left: 2rem;
}

/* --- Parallax Sections --- */
.parallax-section {
    will-change: transform;
}

/* --- Lightbox --- */
#lightbox.active {
    opacity: 1;
    pointer-events: all;
}

#lightbox img {
    animation: lightboxZoom 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes lightboxZoom {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Mobile Menu --- */
#mobile-menu.active {
    opacity: 1;
    pointer-events: all;
}

#mobile-menu .mobile-link {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

#mobile-menu.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu.active li:nth-child(1) .mobile-link { transition-delay: 0.1s; }
#mobile-menu.active li:nth-child(2) .mobile-link { transition-delay: 0.2s; }
#mobile-menu.active li:nth-child(3) .mobile-link { transition-delay: 0.3s; }
#mobile-menu.active li:nth-child(4) .mobile-link { transition-delay: 0.4s; }

/* Burger animation */
#burger.active .burger-line:first-child {
    transform: translateY(3px) rotate(45deg);
}

#burger.active .burger-line:last-child {
    transform: translateY(-3px) rotate(-45deg);
    width: 100%;
}

/* --- Reveal animations (scroll-triggered) --- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .cinema-bar {
        animation: cinemaBarInMobile 1.2s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }

    @keyframes cinemaBarInMobile {
        to { height: 3vh; }
    }

    .screenplay {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(200, 168, 110, 0.15);
        padding-top: 2rem;
    }
}

/* --- Smooth page transitions --- */
html {
    scroll-behavior: smooth;
}

/* Prevent layout shift on images */
.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    background-color: #111;
}

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

    html {
        scroll-behavior: auto;
    }
}