/* Base custom styles and hiding scrollbars cleanly */

/* === Continuous Glow Animations === */
@keyframes orangeGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.7)); }
    50%       { filter: drop-shadow(0 0 18px rgba(249, 115, 22, 1)); }
}
@keyframes whiteGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)); }
    50%       { filter: drop-shadow(0 0 18px rgba(255, 255, 255, 1)); }
}

/* Social media card icons — continuous glow based on platform */

@keyframes ytGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.7)); }
    50%       { filter: drop-shadow(0 0 18px rgba(239, 68, 68, 1)); }
}
.social-glow-yt { animation: ytGlow 1.2s ease-in-out infinite; }
.social-card-yt {
    border: 1px solid rgba(239, 68, 68, 1);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.4);
}

@keyframes igGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(236, 72, 153, 0.7)); }
    50%       { filter: drop-shadow(0 0 18px rgba(236, 72, 153, 1)); }
}
.social-glow-ig { animation: igGlow 1.2s ease-in-out infinite; }
.social-card-ig {
    border: 1px solid rgba(236, 72, 153, 1);
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.4);
}

@keyframes ttGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.7)); }
    50%       { filter: drop-shadow(0 0 18px rgba(34, 211, 238, 1)); }
}
.social-glow-tt { animation: ttGlow 1.2s ease-in-out infinite; }
.social-card-tt {
    border: 1px solid rgba(34, 211, 238, 1);
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.4);
}

@keyframes xGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }
    50%       { filter: drop-shadow(0 0 18px rgba(255, 255, 255, 1)); }
}
.social-glow-x { animation: xGlow 1.2s ease-in-out infinite; }
.social-card-x {
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
}

@keyframes tgGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.7)); }
    50%       { filter: drop-shadow(0 0 18px rgba(56, 189, 248, 1)); }
}
.social-glow-tg { animation: tgGlow 1.2s ease-in-out infinite; }
.social-card-tg {
    border: 1px solid rgba(56, 189, 248, 1);
    box-shadow: 0 0 25px rgba(56, 189, 248, 0.4);
}

@keyframes inGlow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.7)); }
    50%       { filter: drop-shadow(0 0 18px rgba(59, 130, 246, 1)); }
}
.social-glow-in { animation: inGlow 1.2s ease-in-out infinite; }
.social-card-in {
    border: 1px solid rgba(59, 130, 246, 1);
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
}

/* Video platform borders for carousel items */
.video-border-yt {
    border: 3px solid rgba(239, 68, 68, 0.9);
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.6), 0 0 50px rgba(239, 68, 68, 0.3), 0 10px 30px rgba(0,0,0,0.8);
}
.video-border-ig {
    border: 3px solid rgba(236, 72, 153, 0.9);
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.6), 0 0 50px rgba(236, 72, 153, 0.3), 0 10px 30px rgba(0,0,0,0.8);
}
.video-border-tt {
    border: 3px solid rgba(34, 211, 238, 0.9);
    box-shadow: 0 0 25px rgba(34, 211, 238, 0.6), 0 0 50px rgba(34, 211, 238, 0.3), 0 10px 30px rgba(0,0,0,0.8);
}

/* Video carousel platform logos — continuous white glow on hover */
.video-logo-glow {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
    transition: filter 0.3s ease, transform 0.3s ease;
}
.video-logo-glow:hover,
.group:hover .video-logo-glow {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 1));
    animation: whiteGlow 1.2s ease-in-out infinite;
    transform: scale(1.08);
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Infinite marquee carousel */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 60s linear infinite;
}
.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes slideRightLogo {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
@keyframes slideLeftLogo {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-right {
    display: flex;
    width: max-content;
    animation: slideRightLogo 40s linear infinite;
}
.marquee-left {
    display: flex;
    width: max-content;
    animation: slideLeftLogo 40s linear infinite;
}
.marquee-right:hover, .marquee-left:hover {
    animation-play-state: paused;
}


/* 
 * The split screen layout works by utilizing flexbox.
 * By default both sides take 50% width on desktop.
 * On hover, we adjust flex-basis via JS or CSS.
 */

body.is-active {
    overflow: hidden; /* Prevent body scrolling when a section is open */
}

/* Split-side defaults */
#split-container .split-side {
    flex-basis: 50%;
    /* Transition base properties plus filter for color up effect */
    transition: filter 0.8s ease-in-out;
}

/* Desktop Hover States */
@media (min-width: 768px) {
    /* Initial state: slightly blurred and dark */
    #split-container:not(.section-active) .split-side {
        filter: blur(2px) brightness(0.8) grayscale(0.2);
    }
    
    /* Highlight the hovered side */
    #split-container:not(.section-active) .split-side:hover {
        filter: blur(0px) brightness(1.1) grayscale(0);
        z-index: 10;
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.05); 
    }
    
    /* Shrink and blur the un-hovered side deeper */
    #split-container:not(.section-active):hover .split-side:not(:hover) {
        filter: blur(8px) brightness(0.4) grayscale(0.8);
    }
}

/* Mobile Hover / Touch states are tricky, we just let it be 50/50 and handle clicks */

/* Transitioning content visibility */
.expanded-content {
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s ease-in-out;
}

/* Active Section Styles */
.split-side.active {
    flex-basis: 100% !important;
    width: 100% !important;
    height: 100% !important;
    cursor: default;
}

.split-side.active .expanded-content {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.split-side.active > div:not(.expanded-content):not(.back-btn):not(.absolute.inset-0) {
    /* Hide the initial centered title block when active */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.split-side.active .back-btn {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease 0.5s; /* Delay button appearance */
}

.split-side.inactive {
    flex-basis: 0% !important; /* shrink to 0 */
    width: 0% !important;
    height: 100% !important; /* On mobile it will be height 0 */
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 767px) {
    .split-side.inactive {
        height: 0% !important;
    }
}

/* =====================================================
   NAVBAR — always visible grey bar when section open
   ===================================================== */
nav {
    transition:
        background    0.5s ease,
        height        0.5s ease,
        padding       0.5s ease,
        border-color  0.5s ease;
}

/* Grey bar appears the moment a section is opened */
body.is-active nav {
    background: rgba(60, 60, 65, 0.8) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    transition: all 0.5s ease-in-out;
}

/* Disable mix-blend-difference when section active OR scrolled
   (otherwise text disappears into page content)             */
body.is-active nav .mix-blend-difference,
nav.scrolled .mix-blend-difference {
    mix-blend-mode: normal !important;
}

/* Scrolled: shrink + darken */
nav.scrolled {
    background: rgba(50, 50, 55, 0.95) !important;
    height: 4.5rem !important;
    padding: 0 1.5rem !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    /* Soft animation when shrinking */
    transition: all 0.5s ease-in-out;
}

nav.scrolled #logo img {
    height: 2.2rem;
    transition: height 0.5s ease-in-out;
}

nav.scrolled #center-nav {
    font-size: 0.85rem !important;
    transition: font-size 0.5s ease-in-out;
}

nav.scrolled #lang-switcher {
    transform: translateY(-50%) scale(0.9);
    transition: transform 0.5s ease-in-out;
}