:root {
    --primary-font-color: #FFF;
    --secondary-font-color: white;
    --primary-bg-color: #000;
    --secondary-bg-color: #000;
}



/* General styles */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

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


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;

    cursor: none !important; /* Force hide default cursor */
    font-size: 11px;
}

@font-face {
    font-family: 'BladeRunner';
    src: url('/assets/BLADRMF_.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body {
    position: relative;
    font-family: BladeRunner, sans-serif;
    color: var(--primary-font-color);
    overflow: hidden; /* Prevent scrolling */
    margin: 0;
    padding: 0;
    background: #000; /* Fallback background color */
    letter-spacing: 2px;
}

/* Add this CSS at the end of your existing styles */

.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.loading-text {
    color: white;
    font-size: 2rem;
    animation: fade 1.5s infinite;
}

.loading-text a {
    font-family: BladeRunner, sans-serif;
}

@keyframes fade {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}


.neon-light {
    position: relative;
    width: 100%;
    max-width: 80vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1002;
}


.neon-light img {
    width: 100%;
    max-width: 500px;
    height: auto;
    animation: fadeIn 2s ease-in-out;
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
.neon-light img {
    max-width: 300px;
}
}
@keyframes flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0.4;
    }
}

@media (min-width: 768px) {
    #bgvid-desktop {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: -1;
    }

    #bgvid-mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    #bgvid-desktop {
        display: none;
    }

    #bgvid-mobile {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: -1;
    }
}
    /*
    radial-gradient(at 8% 40%, hsla(103,31%,12%,1) 0px, transparent 50%),
    radial-gradient(at 41% 61%, hsla(178,10%,15%,1) 0px, transparent 50%),
    radial-gradient(at 23% 13%, hsla(193,29%,11%,1) 0px, transparent 50%),
    radial-gradient(at 41% 56%, hsla(324,31%,12%,1) 0px, transparent 50%),
    radial-gradient(at 76% 30%, hsla(200,27%,9%,1) 0px, transparent 50%),
    radial-gradient(at 30% 74%, hsla(258,28%,8%,1) 0px, transparent 50%),
    radial-gradient(at 87% 44%, hsla(43,33%,12%,1) 0px, transparent 50%);
    */
    .content {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        position: relative;
    }
    




    #landing-page {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh; /* Full viewport height */
        gap: 40px; /* Space between logo and button only */
    }
    
    .tagline {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        margin: 0;
        z-index: 1003;
    }
    
    .tagline p {
        font-family: Arial, Helvetica, sans-serif;
        color: white;
        font-size: 14px;
        letter-spacing: 2px;
        margin: 0;
        white-space: nowrap;
    }

    .tagline p span {
        opacity: 0;
        display: inline-block;
        margin-right: 8px;
        animation: wordFadeIn 0.8s ease-in-out forwards;
    }

    .tagline p span:last-child {
        margin-right: 0;
    }

    /* Staggered animation delays for each word */
    .tagline p .word-1 { animation-delay: 2s; }
    .tagline p .word-2 { animation-delay: 2.6s; }
    .tagline p .word-3 { animation-delay: 3.2s; }
    .tagline p .word-4 { animation-delay: 3.8s; }

    @keyframes wordFadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 0.8;
            transform: translateY(0);
        }
    }

    @media (max-width: 768px) {
        .tagline {
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 100vw;
            padding: 0 20px;
            box-sizing: border-box;
        }
        .tagline p {
            font-size: 9px;
            letter-spacing: 0.5px;
        }
        .tagline p span {
            margin-right: 4px;
        }
    }
    
    .landing-content {
        text-align: center;
        margin-top: 0; /* Remove the margin since we're using flexbox gap */
    }
    
    .landing-logo {
        display: block;
        margin: 0 auto;
        width: 100vw; /* Adjust as needed for responsiveness */
        max-width: 80vw; /* Maximum width */
        height: auto; /* Maintain aspect ratio */
    }
    
    .enter-button {
        font-family: BladeRunner, sans-serif;
        font-size: 20px;
        display: block;
        margin: 0 auto;
        padding: 15px 30px;
        border: 1px solid white;
        background: black;
        color: white;
        cursor: pointer;
        animation: fadeIn 2s ease-in-out, float 3s ease-in-out infinite;
        letter-spacing: 2px;
    }

    .enter-button:hover {
        color: #eb1b28; /* Neon color on hover */
        filter: drop-shadow(0 1px 3px) blur(0.5px); /* Drop shadow and subtle blur effect */
        border: 1px solid #eb1b28;
    }

    .popup-inner-content h2{
        font-family: BladeRunner, sans-serif;
    }

    /* Floating effect animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

/* Header and Navigation */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: transparent; /* Semi-transparent background */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
    z-index: 1000; /* Ensure the header is on top */
    box-sizing: border-box;
}

header .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}



header .logo img {
    width: 250px;
    height: auto;
}

@media (max-width: 768px) {
    header {
        height: 60px;
        padding: 0.5em;
    }
    header .logo img {
        width: 200px;
    }
}

header nav {
    position: absolute;
    right: 1em;
}

nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
}

nav ul li {
    margin-left: 1em;
}

nav ul li a {
    color: var(--primary-font-color);
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s;
    fill: #FFF
}

nav ul li a:hover {
    color: #eb1b28; /* Change to your desired hover color */
}

nav ul li a.active {
    color: #eb1b28; /* Change to your desired active link color */
    fill: #eb1b28
}


.nav-svg {
    width: 50px;
    height: 50px;
    position: relative;
}

@media (max-width: 768px) {
    .nav-svg {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
    }
}

.nav-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}



/* Footer */
/* Footer Styling */
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: transparent;
    color: var(--secondary-font-color);
    padding: 1em;
    text-align: center;
    font-size: 10px;
    align-items: center;
}

/* Footer Container */
.footer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.footer-container > * {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Position the loading indicator */
.footer-container .loading {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
    margin: 0;
}

/* Style the footer content */
.footer-container .footer-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 18px;
}

/* Keep your existing footer media queries and other styles */
@media (max-width: 768px) {
    .footer-container .footer-content {
        font-size: 12px;
    }

    .footer-container {
        gap: 15px;
    }

    #autoplay-control,
    #sound-control,
    .footer-container a {
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
    }
}

/* Controls Styling */
.footer-container .controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .footer-container .controls {
        gap: 15px;
    }
}

#autoplay-control, #sound-control {
    cursor: pointer;
    padding: 5px 10px;
    background-color: transparent;
    border-radius: 0px;
    position: relative; /* For pseudo-element positioning */
    transition: color 0.3s ease, filter 0.3s ease;
}

/* Updated Hover Effect for Controls */
#autoplay-control:hover, #sound-control:hover {
    color: #eb1b28; /* Neon color on hover */
    filter: drop-shadow(0 1px 3px) blur(0.5px); /* Drop shadow and subtle blur effect */
}

/* Dot Animation */
#autoplay-control .dot1, #autoplay-control .dot2, #autoplay-control .dot3 {
    opacity: 0;
    animation: blink 1.4s infinite both;
}

#autoplay-control .dot1 {
    animation-delay: 0s;
}

#autoplay-control .dot2 {
    animation-delay: 0.2s;
}

#autoplay-control .dot3 {
    animation-delay: 0.4s;
}

@keyframes blink {
    0%, 20%, 50%, 80%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
}

/* Neon and Glitch Effect for Links */
.footer-container a {
    color: white; /* Default link color */
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease, filter 0.3s ease;
}

.footer-container a:hover {
    color: #eb1b28; /* Neon color on hover */
    filter: drop-shadow(0 1px 3px) blur(0.5px); /* Drop shadow and subtle blur effect */
}

.footer-container a::before,
.footer-container a::after {
    content: attr(data-text);
    position: absolute;
    width: 110%;
    z-index: -1;
}

.footer-container a::before {
    top: 10px;
    left: 15px;
    color: #e0287d;
}

.footer-container a::after {
    top: 5px;
    left: -10px;
    color: #1bc7fb;
}

.footer-container a:hover::before,
.footer-container a:hover::after {
    animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 7s step-end infinite, movement 8s step-end infinite;
}

@keyframes paths {
    0% {
        clip-path: polygon(0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
    }
    5% {
        clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%);
    }
    30% {
        clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%);
    }
    45% {
        clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
    }
    76% {
        clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
    }
    90% {
        clip-path: polygon(0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
    }
    1%, 7%, 33%, 47%, 78%, 93% {
        clip-path: none;
    }
}

@keyframes opacity {
    0% {
        opacity: 0.1;
    }
    5% {
        opacity: 0.7;
    }
    30% {
        opacity: 0.4;
    }
    45% {
        opacity: 0.6;
    }
    76% {
        opacity: 0.4;
    }
    90% {
        opacity: 0.8;
    }
    1%, 7%, 33%, 47%, 78%, 93% {
        opacity: 0;
    }
}

@keyframes font {
    0% {
        font-weight: 100;
        color: #e0287d;
        filter: blur(3px);
    }
    20% {
        font-weight: 500;
        color: #fff;
        filter: blur(0);
    }
    50% {
        font-weight: 300;
        color: #1bc7fb;
        filter: blur(2px);
    }
    60% {
        font-weight: 700;
        color: #fff;
        filter: blur(0);
    }
    90% {
        font-weight: 500;
        color: #e0287d;
        filter: blur(6px);
    }
}

@keyframes movement {
    0% {
        top: 0px;
        left: -20px;
    }
    15% {
        top: 10px;
        left: 10px;
    }
    60% {
        top: 5px;
        left: -10px;
    }
    75% {
        top: -5px;
        left: 20px;
    }
    100% {
        top: 10px;
        left: 5px;
    }
}

.hero-container {
    position: relative;
    padding: 200px 0;
    text-align: center;
}

.environment {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    filter: blur(5px);
    background: url('https://images.unsplash.com/photo-1602136773736-34d445b989cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80') center no-repeat;
    background-size: cover;
}


#desktop-content, #reels-content {
    display: none;
}

#reels-content.fade-in, #desktop-content.fade-in {
    display: block;
}

.nav-link.active {
    color: #eb1b28; /* Or any other styling you prefer for the active link */
}


.unselectable {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#desktop-content, #reels-content {
    display: none;
}

#reels-content.fade-in, #desktop-content.fade-in {
    display: block;
}

.viewport-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: calc(var(--vh, 1vh) * 100); /* Adjust height to account for header */
    position: relative;
    flex-direction: column;
}

/* Mobile Container */
.mobile-container {
    position: relative;
    width: 20vw; /* Default width for larger screens */
    height: calc(20vw * 1.98); /* Maintain aspect ratio */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide overflow */
    z-index: 1; /* Ensure phone container is below outer phone frame */
    border: 0.25px solid white;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.outer-phone-frame {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Centering */
    width: 22vw; /* Slightly larger than the phone container */
    height: calc(22vw * 2.08); /* Adjust aspect ratio to fit correctly */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide overflow */
    z-index: 0; /* Ensure outer phone frame is below phone container */
}

@media (max-width: 1200px) {
    .mobile-container {
        width: 35vh; /* Adjust width for medium screens */
        height: calc(35vh * 1.98);
    }

    .outer-phone-frame {
        width: 38vh; /* Slightly larger than the phone container */
        height: calc(38vh * 2.08); /* Adjust aspect ratio to fit correctly */
    }
}

@media (max-width: 768px) {
    .mobile-container {
        width: 32vh; /* Adjust width for small screens */
        height: calc(32vh * 1.98); /* Maintain aspect ratio */
    }

    .outer-phone-frame {
        width: 35vh; /* Slightly larger than the phone container */
        height: calc(35vh * 2.08); /* Adjust aspect ratio to fit correctly */
    }
}

.phone-frame {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.phone-loading-text {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-family: BladeRunner, sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;
    z-index: 3;
    animation: blink 1.4s infinite both;
}

@media (max-width: 768px) {
    .phone-loading-text {
        bottom: -30px;
        font-size: 10px;
    }
}

.phone-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phone-inner svg {
    width: 100%;
    height: 100%;
    user-select: none;  /* Prevent text selection */
    pointer-events: none;  /* Make the SVG non-interactive */
    outline: none;  /* Remove outline on click */
    object-fit: contain; /* Ensure the SVG fits within the container */
}

.phone-inner svg path {
    fill: white;
}

.outer-phone-frame svg {
    width: 100%;
    height: 100%;
    user-select: none;  /* Prevent text selection */
    pointer-events: none;  /* Make the SVG non-interactive */
    outline: none;  /* Remove outline on click */
    object-fit: contain; /* Ensure the SVG fits within the container */
}

.outer-phone-frame svg path {
    fill: white;
}

/* Desktop Container */
.desktop-container {
    position: relative;
    width: 45vw; /* Adjusted width for desktop */
    height: calc(45vw / 1.51); /* Maintain aspect ratio for 752x478 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Hide overflow */
    border: 0.25px solid white;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.monitor-frame {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2; /* Ensure monitor frame is above the video */
    pointer-events: none;
}

.desktop-top svg {
    width: 100%;
    height: auto;
    user-select: none;  /* Prevent text selection */
    pointer-events: none;  /* Make the SVG non-interactive */
    outline: none;  /* Remove outline on click */
}

.desktop-top svg path {
    fill: white;
}

.additional-image {
    width: 45vw; /* Adjust as needed */
    height: auto; /* Allow the height to adjust automatically */
    z-index: 1; /* Below monitor frame */
    margin-top: -2px; /* Slight adjustment to remove gap if necessary */
}

.desktop-bottom svg {
    width: 100%;
    height: auto;
    user-select: none;  /* Prevent text selection */
    pointer-events: none;  /* Make the SVG non-interactive */
    outline: none;  /* Remove outline on click */
}

.desktop-bottom svg path {
    fill: white;
}

/* Responsive styles */
@media (max-width: 1200px) {
    .desktop-container {
        width: 50vw; /* Adjusted width for desktop */
        height: calc(50vw / 1.5); /* Maintain aspect ratio for 752x478 */
    }

    .additional-image {
        width: 50vw; /* Same width as monitor */
        height: 100px;
        margin-top: -2px; /* Slight adjustment to remove gap if necessary */
    }
}

@media (max-width: 768px) {
    .desktop-container {
        width: 80vw; /* Adjusted width for desktop */
        height: calc(80vw / 1.5); /* Maintain aspect ratio for 752x478 */
    }

    .additional-image {
        width: 80vw; /* Same width as monitor */
        height: 100px;
        margin-top: -2px; /* Slight adjustment to remove gap if necessary */
    }
}

/* Video Wrapper */
.video-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease;
    z-index: 1;
    transform: translateZ(50px); /* This creates a slight depth effect */
}

.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0; /* Prevent shrinking */
}

.video-container video {
    transition: filter 0.3s ease-in-out; /* Adjust the duration as needed */
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
}

.video-container.blur video {
    filter: blur(12px);
    transition: filter 0.3s ease-in-out;
}


/* Old video-text styles - no longer needed with fixed info button
.video-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    background-color: transparent;
    padding: 5px;
    border-radius: 3px;
    font-size: 14px;
    font-family: BladeRunner, sans-serif;
    letter-spacing: 2px;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto;
}
*/

.fixed-info-button {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    background-color: transparent;
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-family: BladeRunner, sans-serif;
    letter-spacing: 2px;
    z-index: 1002; /* Above other elements */
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.fixed-info-button:hover {
    color: #eb1b28;
    filter: drop-shadow(0 1px 3px) blur(0.5px);
}

@media (max-width: 768px) {
    .fixed-info-button {
        bottom: 8px;
        left: 8px;
        font-size: 12px;
    }
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure video fits within the container */
    flex: none;
}

.overlay-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: none;
    flex-direction: column;
    align-items: left;
    padding: 20px;
    justify-content: flex-start;
    z-index: 3;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.overlay-content p {
    font-family: Arial, Helvetica, sans-serif;
}

.overlay-content.show {
    display: flex;
    visibility: visible;
}

.overlay-content.slide-up {
    transform: translateY(0);
}

.overlay-content.slide-down {
    transform: translateY(100%);
}


.close-overlay {
    align-self: flex-end;
    background-color: transparent;
    color: white;
    border: 1px solid white;
    margin-bottom: 20px;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 4;
    max-width: 100px;
    width: auto;
    text-align: center;
}


/* Add this to your main stylesheet (assets/css/styles.css) */
/* Custom cursor styles */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s, width 0.2s, height 0.2s;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: white;
}

.up-cursor,
.down-cursor {
    width: 0;
    height: 0;
    border-style: solid;
    border-radius: 0;
    background-color: transparent;
}

.up-cursor {
    border-width: 0 20px 30px 20px;
    border-color: transparent transparent #FFFFFF transparent;
}

.down-cursor {
    border-width: 30px 20px 0 20px;
    border-color: #FFFFFF transparent transparent transparent;
}

.link-hover {
    width: 50px;
    height: 50px;
    background-color: #FFFFFF;
    border-radius: 50%;
    border: none;
    transform: translate(-50%, -50%);
}

/* Ensure the cursor is hidden on mobile devices */
@media (max-width: 768px) {
    .custom-cursor {
        display: none;
    }
}


/* Retro loading animation with hipster colors */
@keyframes squareLoading {
    0%, 100% { background-color: #FF6B6B; }  /* Coral pink */
    25% { background-color: #4ECDC4; }       /* Turquoise */
    50% { background-color: #45B7D1; }       /* Ocean blue */
    75% { background-color: #96CEB4; }       /* Sage green */
}

.loading {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

.loading-text-indicator {
    color: white;
    font-family: BladeRunner, sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;
    animation: blink 1.4s infinite both;
}

/* Remove the old square loading styles */
@keyframes squareLoading {
    0%, 100% { background-color: #FF6B6B; }
    25% { background-color: #4ECDC4; }
    50% { background-color: #45B7D1; }
    75% { background-color: #96CEB4; }
}

.loading div:nth-child(2) {
    animation-delay: 0.33s;
}

.loading div:nth-child(3) {
    animation-delay: 0.66s;
}

/* View Details link */
.view-details {
    position: fixed;
    bottom: 80px; /* Adjust as needed to sit above the loading spinner */
    left: 20px;
    z-index: 1001; /* Ensure it's above other elements */
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border-radius: 0;
    border: 1px solid #FFF;
    text-align: center;
}

@media (min-width: 768px) {
    .view-details {
        border: none;
        background-color: transparent;
    }
}

.view-details a {
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
}

/* Info animation for swipe instructions */
.info-animation {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    font-size: 11px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.info-animation.visible {
    opacity: 1;
    visibility: visible;
}

.info-animation.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Show info animation only on mobile and tablet devices */
@media (max-width: 768px) {
    .info-animation {
        display: block;
    }
}

@media (min-width: 769px) {
    .info-animation {
        display: none;
    }
}

/* Blink animation for the info message */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.blink {
    animation: blink 1s infinite;
}

/* Hide custom cursor on mobile and tablet devices */
@media (max-width: 768px) {
    .custom-cursor {
        display: none;
    }
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .view-details {
        bottom: 20px; /* Move further down */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Center horizontally */
    }
}


/* Popup container */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: transparent;
    opacity: 0;
    transition: opacity 0.5s ease;
    font-family: Arial, Helvetica, sans-serif;
}

/* Show the popup */
.popup.show {
    display: block;
    opacity: 1;
    transition: opacity 0.5s ease; /* Ensure the fade-in effect is smooth */
}

/* Popup content */
.popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.8);
    padding: 20px;
    border: 1px solid #ffffff;
    width: 80%;
    max-width: 500px;
    overflow-y: auto;
    max-height: 70vh;
}
/* Close button */
.close-btn {
    color: #aaa;
    float: right;
    font-size: 38px;
    font-weight: 100; /* Add this line */
}

.close-btn:hover,
.close-btn:focus {
    color: #8000ff;
    text-decoration: none;
    cursor: pointer;
}

/* Inner content */
.popup-inner-content {
    padding: 20px;
}


.contact-info {
    line-height: 1.8; /* Further reduce line height for less vertical space */
    text-transform: uppercase; /* Make all text uppercase */
    font-size: 23px !important; /* Slightly increase the font size */
}


.contact-info p {
    margin: 3px 0; /* Further reduce space between paragraphs */
    font-size: 11px !important; /* Slightly increase the font size */
  color: white;

}

a {
    text-decoration: none;
    color: white; /* Default link color */
}

.instagram {
    animation: colorChange 2s infinite alternate;
}

@keyframes colorChange {
    from {
        color: white;
    }
    to {
        color: #eb1b28;
    }
}

.neon-light-top {
    position: fixed;
    top: 20px;
    left: 20px;
    transform: translate(0, 0);
    width: auto;
    display: block;
    justify-content: initial;
    align-items: initial;
    text-align: left;
}

.neon-light-top img {
    width: 250px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .neon-light-top {
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Offset by half width to truly center */
        text-align: center;
    }
    
    .neon-light-top img {
        width: 150px;
    }
}

/* Add this to your existing styles */
.help-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 15px 25px;
    border-radius: 5px;
    font-size: 13px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    text-align: center;
    font-family: BladeRunner, sans-serif;
}

.help-text.visible {
    opacity: 1;
    visibility: visible;
}

/* Hide on desktop */
@media (min-width: 769px) {
    .help-text {
        display: none;
    }
}

/* Update the popup heading and Panther & Cub link */
.popup-inner-content h2 {
    color: #45B7D1; /* Blue color for "Contact Us" */
}

.popup-inner-content a[href*="pantherandcub"] {
    color: #FFD700; /* Yellow color for Panther & Cub link */
    transition: color 0.3s ease;
}

.popup-inner-content a[href*="pantherandcub"]:hover {
    color: #FFA500; /* Slightly darker yellow/orange on hover */
}

/* Active state styling for interactive elements */
.active {
    color: #eb1b28 !important; /* Use your desired active color */
}

/* Reset color on hover for non-active state */
a:not(.active):hover,
.button-trigger:not(.active):hover,
#autoplay-control:not(.active):hover,
#sound-control:not(.active):hover {
    color: white;
}

/* Desktop only - ONLY hover effect, nothing else */
@media (min-width: 769px) {
    /* Remove or comment out this hover effect since it's not what we want */
    /*.video-container:hover video {
        filter: blur(12px);
    }*/
}


#autoplay-control:hover, #sound-control:hover, .footer-container a:hover{
    color: #ffeb78 !important;
}

/* Blur effect for info overlay */
.video-container.blur video {
    filter: blur(12px);
    transition: filter 0.3s ease-in-out;
}

/* Add this to your existing styles */
.credits {
    margin-top: 10px;
}

.credits p {
    animation: creditColorChange 8s infinite;
    opacity: 0.9;
}

/* Stagger the animation for each paragraph */
.credits p:nth-child(2) {
    animation-delay: 1s;
}

.credits p:nth-child(3) {
    animation-delay: 2s;
}

.credits p:nth-child(4) {
    animation-delay: 3s;
}

.credits p:nth-child(5) {
    animation-delay: 4s;
}

@keyframes creditColorChange {
    0% { color: #ffffff; } /* White */
    20% { color: #8ecae6; } /* Light blue */
    40% { color: #ffafcc; } /* Light pink */
    60% { color: #fff1af; } /* Light yellow */
    80% { color: #a8dadc; } /* Light cyan */
    100% { color: #ffffff; } /* Back to white */
}

/* Add new title animation */
.overlay-content h1 {
    animation: titleColorChange 10s infinite;
    opacity: 0.95;
}

@keyframes titleColorChange {
    0% { color: #ffffff; }     /* White */
    25% { color: #ff6b6b; }    /* Soft red */
    50% { color: #4ecdc4; }    /* Turquoise */
    75% { color: #ffe66d; }    /* Warm yellow */
    100% { color: #ffffff; }   /* Back to white */
}

/* Add these styles */
.mobile-container,
.desktop-container {
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.video-wrapper {
    transform: translateZ(20px);
    transform-style: preserve-3d;
}

/* Add a subtle shadow effect */
.mobile-container::after,
.desktop-container::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 30px rgba(0,0,0,0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-container:hover::after,
.desktop-container:hover::after {
    opacity: 1;
}

/* Ensure parent elements preserve 3D */
.viewport-wrapper {
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Optional: Add smooth transition for transform changes */
.video-container {
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

/* Ensure videos don't break the 3D effect */
.video-container video {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Update the 3D transform styles to target the correct containers */
#reels-content,
#desktop-content {
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);  /* Bouncy, smooth transition */
}

/* Ensure the child elements maintain the 3D space */
.viewport-wrapper {
    transform-style: preserve-3d;
}

.mobile-container,
.desktop-container {
    transform-style: preserve-3d;
    transform: translateZ(20px); /* Reduced back to original value for phone */
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.desktop-container {
    transform-style: preserve-3d;
    transform: translateZ(50px); /* Keep the increased depth for desktop */
    transition: transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Update shadow effect */
#reels-content::after,
#desktop-content::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: 0 0 30px rgba(0,0,0,0.15);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#reels-content:hover::after,
#desktop-content:hover::after {
    opacity: 1;
}

/* Ensure videos maintain proper 3D rendering */
.video-container {
    transform-style: preserve-3d;
}

.video-container video {
    transform: translateZ(0);
    backface-visibility: hidden;
}