/* Base Variables */
:root {
    /* Colors */
    --fortnite-purple: #9d4dbb;
    --fortnite-blue: #2b6eff;
    --fortnite-pink: #ff3c89;
    --fortnite-orange: #ff8f2c;
    --fortnite-dark: #271924;
    --fortnite-light: #f0f0f0;

    /* Gradients */
    --gradient-primary: linear-gradient(45deg, rgba(21, 78, 200, 0.1), rgba(157, 77, 187, 0.1));
    --gradient-hover: linear-gradient(45deg, rgba(43, 110, 255, 0.2), rgba(157, 77, 187, 0.2));
    --gradient-nav: linear-gradient(45deg, rgba(36, 88, 200, 0.2), rgba(104, 11, 138, 0.2));
    --gradient-about: linear-gradient(135deg, var(--fortnite-dark), var(--fortnite-purple));

    /* Common Properties */
    --transition-speed: 0.3s;
    --shadow-default: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.2);
    --text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Global  */
body {
    padding-top: 56px;
    background: linear-gradient(115deg, var(--fortnite-blue), var(--fortnite-pink));
    color: var(--fortnite-light);
}

/* Navigation */
.navbar {
    background: var(--gradient-nav);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-default);
}

.navbar-brand {
    font-weight: bold;
    text-transform: uppercase;
}

.nav-link {
    color: var(--fortnite-light) !important;
    transition: color var(--transition-speed) ease;

    &:hover {
        color: var(--fortnite-orange) !important;
    }
}

/* Card Components */
.card {
    background: var(--gradient-primary);
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
    color: var(--fortnite-light);
    transition: all var(--transition-speed) ease;
    box-shadow: var(--shadow-default);

    &:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
        background: var(--gradient-hover);
    }
}

.card-title {
    color: var(--fortnite-orange);
}

.card-text {
    color: var(--fortnite-light);
    line-height: 1.6;
    margin-top: 1rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(20, 9, 52, 0.5);
        z-index: 1;
    }

    h1 {
        color: var(--fortnite-light);
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: bold;
        text-transform: uppercase;
        text-shadow: var(--text-shadow);
    }

    .lead {
        color: var(--fortnite-orange);
        font-size: 1.5rem;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    }
}

/* Video Container */
.video-container {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.parallax-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About Section */
#about {
    background: var(--gradient-about);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;

    h2 {
        background: linear-gradient(90deg, var(--fortnite-pink), var(--fortnite-orange));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 2.5rem;
        font-weight: bold;
        text-transform: uppercase;
        margin-bottom: 2rem;
    }

    .card {
        animation: borderAnimation 4s infinite;
    }
}

/* Animations */
@keyframes borderAnimation {
    0%, 100% {
        border-image-source: linear-gradient(45deg, var(--fortnite-pink), var(--fortnite-blue));
    }
    50% {
        border-image-source: linear-gradient(45deg, var(--fortnite-orange), var(--fortnite-purple));
    }
}