body {
    font-family: Arial, sans-serif;
    margin:0;

    background: linear-gradient(270deg, 
        #230303, 
        #000000, 
        #2c1d1d, 
        #1d0000, 
        #250101
    );
    background-size: 600% 600%;
    animation: lavenderRGB 4s ease infinite;

    color:#fff;
}

header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 40px;

    background: linear-gradient(270deg, #8b0000, #ff0000, #b30000, #8b0000);
    background-size: 600% 600%;
    animation: redRGB 8s ease infinite;

    color:#fff;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4);
}

header .logo { font-size:20px; font-weight:bold; }
header nav a { color:#fff; margin-left:20px; text-decoration:none; font-weight:bold; }
header nav a:hover { text-decoration:underline; }

.gallery-container {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    padding:20px;
}

.card {
    width:200px;
    cursor:pointer;
    text-align:center;
    background:#07043cc5;
    border-radius:10px;
    overflow:hidden;
    transition:0.3s;
}

.card:hover { transform:scale(1.05); }
.card img { width:100%; height:260px; object-fit:cover; }
.card p { padding:10px; font-weight:bold; font-size: 19px; }

.video-wrapper {
    display:none;
    width:100%;
    text-align:center;
    padding:20px;

    background: linear-gradient(270deg,
        #460505,
        #340202,
        #540303,
        #552121,
        #1a1024
    );
    background-size: 600% 600%;
    animation: lavenderRGB 20s ease infinite;
}

#videoPlayer {
    width:100%;
    max-width:1400px;
    height:80vh;
    border-radius:12px;
    background:black;
}

.video-description {
    max-width:900px;
    margin:20px auto 40px;
    font-size:18px;
    line-height:1.5;
    text-align:left;
}

.about-container {
    display:flex;
    justify-content:center;
    gap:50px;
    padding:40px;
    color:#fff;
}

.about-left img {
    width:500px;  
    border-radius:12px;
}

.about-right {
    max-width:600px;
}

.fade-in { animation: fadeIn 0.5s forwards; }
.fade-out { animation: fadeOut 0.5s forwards; }

@keyframes fadeIn { from {opacity:0; transform:translateY(20px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeOut { from {opacity:1;} to {opacity:0;} }


@keyframes redRGB {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes lavenderRGB {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body::before {
    content: "";
    position: fixed;
    inset: -100px;
    background: radial-gradient(circle at 20% 30%, rgba(66, 11, 11, 0.35), transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(54, 1, 1, 0.35), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(107, 5, 8, 0.25), transparent 60%);
    z-index: -1;
    animation: purpleGlowMove 14s ease infinite alternate;
}
@keyframes lavenderGlowMove {
    0% {
        transform: scale(1) rotate(0deg);
    }
    100% {
        transform: scale(1.2) rotate(10deg);
    }
}
.inline-logo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 8px;
}