/* Basic Styles */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent vertical scrolling */
    /* Background color is controlled by Bootstrap theme */
}

#page-container {
    display: flex;
    width: 300%; /* Width for three sections */
    height: 100%;
    transition: transform 0.8s ease-in-out; /* Smooth transition for scrolling */
}

.fullpage-section {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--bs-body-color); /* Get text color from Bootstrap variables */
}

.bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: filter 0.3s ease-in-out; /* Transition for brightness change */
}

.content-overlay {
    position: relative;
    z-index: 1;
    padding: 5rem 1rem;
}

/* Text Content Styling */
.content-overlay h1 {
    /* font-size: 4rem; */ /* Replaced with clamp */
    font-size: clamp(3rem, 10vw, 9rem); /* Responsive font size: min 3rem, preferred 10vw, max 9rem */
    line-height: 1.1; /* Adjust line height for larger fonts */
    /* Text shadow adjusted based on theme */
    /* The .col-md-8 class in HTML still limits the container width on medium+ screens */
    /* If H1 should span ~90% viewport width regardless of column, remove .col-md-8 or override width */
}

.content-overlay p {
     /* Text shadow adjusted based on theme */
}

.content-overlay .btn {
    border-width: 2px;
    position: relative; /* Important for pseudo-elements */
    overflow: hidden; /* Prevents the effect from overflowing */
    transition: color 0.4s ease-out, border-color 0.4s ease-out; /* Default transition for button */
}

/* Top Navigation */
.navbar {
    z-index: 10;
    transition: background-color 0.3s ease-in-out;
}

.navbar-brand img {
    margin-right: 10px;
}

.navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
    text-transform: uppercase;
    font-weight: 500;
}

/* Bottom Navigation (Controls) */
.navigation-controls {
    z-index: 10;
    transition: background-color 0.3s ease-in-out;
}

.navigation-controls .btn i {
    font-size: 2rem;
}

.progress-indicator {
    font-size: 1.2rem;
    font-weight: bold;
}

/* --- Dark Mode (Default) --- */
[data-bs-theme="dark"] {
    --bs-body-color: #dee2e6; /* Light text for dark background */
    --bs-body-bg: #212529; /* Dark background */
    --rave-laser-color: #00ffff; /* Cyan for Dark Mode */
    --rave-glow-color: rgba(0, 255, 255, 0.6);
}

[data-bs-theme="dark"] .bg-video {
    filter: brightness(0.6); /* Darken the video */
}

[data-bs-theme="dark"] .content-overlay h1,
[data-bs-theme="dark"] .content-overlay p {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Dark shadow for light text */
}

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navigation-controls {
    background-color: rgba(0, 0, 0, 0.4); /* Darker transparent background */
}

[data-bs-theme="dark"] .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .btn-outline-light {
    /* Standard Bootstrap style is okay */
}

[data-bs-theme="dark"] .navigation-controls .btn,
[data-bs-theme="dark"] .progress-indicator,
[data-bs-theme="dark"] .navbar .nav-link {
     color: #fff; /* Ensure text/icons are white */
}


/* --- Light Mode --- */
[data-bs-theme="light"] {
    --bs-body-color: #212529; /* Dark text for light background */
    --bs-body-bg: #f8f9fa; /* Light background */
    --rave-laser-color: #ff00ff; /* Magenta for Light Mode */
    --rave-glow-color: rgba(255, 0, 255, 0.5);
}

[data-bs-theme="light"] .bg-video {
    filter: brightness(0.9); /* Lighten the video, but not too much */
}

[data-bs-theme="light"] .content-overlay h1,
[data-bs-theme="light"] .content-overlay p {
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.5); /* Light shadow for dark text */
}

[data-bs-theme="light"] .navbar,
[data-bs-theme="light"] .navigation-controls {
    background-color: rgba(248, 249, 250, 0.6); /* Lighter transparent background */
}

[data-bs-theme="light"] .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Adjust buttons and links in Light Mode */
[data-bs-theme="light"] .btn-outline-light {
    --bs-btn-color: #212529;
    --bs-btn-border-color: #dee2e6;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #6c757d;
    --bs-btn-hover-border-color: #6c757d;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #5c636a;
    --bs-btn-active-border-color: #565e64;
    border-color: #6c757d; /* Slightly darker border for contrast */
    color: #212529; /* Dark text */
}

[data-bs-theme="light"] .navigation-controls .btn,
[data-bs-theme="light"] .progress-indicator,
[data-bs-theme="light"] .navbar .nav-link {
     color: #212529; /* Ensure text/icons are dark */
}

[data-bs-theme="light"] .navbar .nav-link.active {
    color: #000; /* Highlight active link */
}

/* --- Rave Button Animation --- */
.btn-rave::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Starts outside left */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--rave-glow-color), transparent);
    transition: transform 0.5s ease-out;
    transform: skewX(-25deg); /* Skewed effect */
    opacity: 0.8;
    z-index: 0; /* Behind the text */
}

.btn-rave:hover::before {
    transform: skewX(-25deg) translateX(200%); /* Moves right across the button */
}

/* Text must be above the effect */
.btn-rave span {
    position: relative;
    z-index: 1;
}

/* Optional: Additional glow effect for the border */
.btn-rave:hover {
    box-shadow: 0 0 10px var(--rave-glow-color), 0 0 20px var(--rave-glow-color);
    border-color: var(--rave-laser-color);
    /* Optionally override Bootstrap hover background in Light Mode */
    /* background-color: transparent !important; */
    /* color: var(--rave-laser-color) !important; */ /* Change text color? */
}

/* Adjustments for Light Mode Hover */
[data-bs-theme="light"] .btn-rave.btn-outline-light:hover {
     background-color: var(--bs-btn-hover-bg); /* Keep or adjust standard Bootstrap hover */
     color: var(--bs-btn-hover-color);
     border-color: var(--rave-laser-color); /* Adjust border color */
}


/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .content-overlay h1 {
        /* Adjust clamp values for smaller screens if needed, or rely on the base clamp */
         font-size: clamp(2.5rem, 12vw, 6rem); /* Example adjustment for mobile */
    }
    .content-overlay {
        padding: 3rem 1rem;
    }
    /* Adjust mobile navigation background */
    [data-bs-theme="dark"] .navbar-collapse {
        background-color: rgba(0, 0, 0, 0.9);
        padding: 1rem;
    }
     [data-bs-theme="light"] .navbar-collapse {
        background-color: rgba(248, 249, 250, 0.95);
        padding: 1rem;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 0.375rem;
    }
}