/* AD STUDIO — Cinematic Stylesheet */

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

/* Cinematic effects */
.cinematic-video, .cinematic-img {
    filter: grayscale(100%) contrast(1.15) brightness(0.8);
    transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .cinematic-video, .group:hover .cinematic-img {
    filter: grayscale(0%) contrast(1.05) brightness(0.95);
    transform: scale(1.04);
}

/* Marquee animations */
@keyframes marqueeLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes marqueeRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
.animate-marquee-left { animation: marqueeLeft 45s linear infinite; }
.animate-marquee-right { animation: marqueeRight 45s linear infinite; }
.marquee-container:hover .animate-marquee-left,
.marquee-container:hover .animate-marquee-right { animation-play-state: paused; }

/* Glow overlay */
.glow-overlay { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.02) 0%, transparent 80%); }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 9999; background: #050505; display: flex; align-items: center; justify-content: center; transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.8s; }
.preloader.fade-out { opacity: 0; visibility: hidden; }
.preloader-content { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.preloader-logo { height: 40px; width: auto; animation: pulse 2s ease-in-out infinite; }
.preloader-bar-container { width: 200px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 10px; overflow: hidden; position: relative; }
.preloader-bar { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: #fff; animation: loadBar 2s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes pulse { 0%, 100% { opacity: 0.5; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1); } }
@keyframes loadBar { 0% { width: 0%; } 100% { width: 100%; } }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s, visibility 0.4s; cursor: zoom-out; }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 2px; border: 1px solid rgba(255,255,255,0.1); transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); cursor: default; }
.lightbox.active img { transform: scale(1); }
.lightbox-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #fff; font-size: 2.5rem; cursor: pointer; z-index: 10; opacity: 0.7; transition: opacity 0.3s, transform 0.3s; line-height: 1; }
.lightbox-close:hover { opacity: 1; transform: scale(1.1); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #fff; font-size: 1.5rem; padding: 12px 16px; cursor: pointer; z-index: 10; opacity: 0.7; transition: opacity 0.3s, background 0.3s; border-radius: 2px; backdrop-filter: blur(8px); }
.lightbox-nav:hover { opacity: 1; background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
.lightbox-caption { text-align: center; margin-top: 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: #8E8E93; }

/* BTS filter transition */
.bts-item { transition: opacity 0.3s ease, transform 0.3s ease; }

/* Reveal animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 1s cubic-bezier(0.23, 1, 0.32, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Logo carousel images */
.logo-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(100%) brightness(0.6); opacity: 0.5; transition: all 0.4s ease; }
.logo-card:hover img { filter: grayscale(0%) brightness(1); opacity: 1; }

/* Mobile responsive */
@media (max-width: 768px) {
    .animate-marquee-left { animation-duration: 25s; }
    .animate-marquee-right { animation-duration: 25s; }
    .lightbox-nav { padding: 8px 12px; font-size: 1.2rem; }
    .lightbox-close { top: 12px; right: 16px; font-size: 2rem; }
}