*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#0b0b0b;
    color:var(--fg);
}

:root{
    --bg:#0b0b0b;
    --panel:#111;
    --muted:#1b1b1b;
    --accent:#ffd400;
    --fg:#f5f5f5;
    --glass:rgba(255,255,255,0.04);
}

/* NAVBAR */

header{
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    background:linear-gradient(180deg, rgba(0,0,0,0.85), rgba(0,0,0,0.6));
    border-bottom:2px solid var(--accent);
    backdrop-filter: blur(6px);
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 8%;
}

.logo img{
    height:60px;
}

nav ul{
    display:flex;
    list-style:none;
    gap:30px;
}

nav a{
    color:var(--fg);
    text-decoration:none;
    font-weight:700;
    position:relative;
    transition:color .25s ease, transform .25s ease;
}

nav a:hover{
    color:var(--accent);
    transform:translateY(-3px);
}

nav a::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-6px;
    height:3px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .28s cubic-bezier(.2,.9,.2,1);
}

nav a:hover::after{transform:scaleX(1)}

/* HERO */

.hero{
    height:100vh;
    background:url("https://lh3.googleusercontent.com/pw/AP1GczPpZy47r9bmluEui0ZHmukb7hw8tvuhC0_O90WHlogeLXszVtm8w-fRGVcSwNGUwFR8RReCvxY2bHrtfZ7_RrLlW1A6fDx8xOR16JY_ex9w8QyhXzaA3EXCuJQW07vxC_C-rN9D3MVR76nMYMXQj3T7=w2261-h1272-s-no-gm?authuser=0")
    center center/cover;
    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.hero::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:60px;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(11,11,11,0.98) 55%, rgba(11,11,11,1) 100%);
    pointer-events:none;
    z-index:3;
}

.overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.75)), radial-gradient(circle at 10% 20%, rgba(255,212,64,0.06), transparent 10%);
    animation:overlayShift 8s ease-in-out infinite alternate;
}

@keyframes overlayShift{
    from {filter: hue-rotate(0deg) saturate(1)}
    to {filter: hue-rotate(20deg) saturate(1.08) blur(0.6px)}
}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    padding:20px;
}

.hero-content h1{
    font-size:5rem;
    color:var(--accent);
    margin-bottom:20px;
    opacity:0;
    transform:translateY(18px) scale(.99);
    animation:heroEntrance .9s cubic-bezier(.2,.9,.3,1) .2s forwards;
}

@keyframes heroEntrance{
    to {opacity:1; transform:none}
}

.hero-content p{
    font-size:1.4rem;
    margin-bottom:30px;
}

.btn{
    display:inline-block;
    padding:15px 35px;
    background:var(--accent);
    color:black;
    text-decoration:none;
    font-weight:bold;
    border-radius:50px;
    transition:0.3s;
}

.btn:hover{
    transform:translateY(-3px);
}

/* Social buttons in hero */
.socials{display:flex;gap:18px;justify-content:center;margin-top:20px}
.social-btn{display:inline-flex;align-items:center;gap:14px;padding:14px 26px;border-radius:999px;background:transparent;border:2px solid var(--fg);color:var(--fg);text-decoration:none;font-weight:800;font-size:1rem;backdrop-filter:blur(4px);transition:transform .18s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;min-width:160px;justify-content:center}
.social-btn .icon{width:32px;height:32px;display:inline-block;flex-shrink:0}
.social-btn span{font-size:1.05rem}
.social-btn.yt:hover{background:#FF0000;border-color:#FF0000;color:white;transform:translateY(-5px);box-shadow:0 0 20px rgba(255,0,0,0.6), 0 18px 50px rgba(255,0,0,0.3)}
.social-btn.sc:hover{background:#ff7700;border-color:#ff7700;color:white;transform:translateY(-5px);box-shadow:0 0 20px rgba(255,119,0,0.6), 0 18px 50px rgba(255,119,0,0.3)}
.social-btn.sp:hover{background:#1DB954;border-color:#1DB954;color:white;transform:translateY(-5px);box-shadow:0 0 20px rgba(29,185,84,0.6), 0 18px 50px rgba(29,185,84,0.3)}

@media(max-width:768px){
    .socials{gap:12px}
}

@media(max-width:480px){
    .socials{flex-direction:column;align-items:center}
    .social-btn{min-width:220px;padding:12px 20px}
}

/* CONTENT */

.section{
    padding:100px 10%;
    text-align:center;
}

.section h2{
    font-size:3rem;
    color:var(--accent);
    margin-bottom:30px;
    position:relative;
    z-index:2;
}

.section p{
    max-width:900px;
    margin:auto;
    line-height:1.8;
}

.dark{
    background:rgba(27,27,27,0.45) url('logos/BoardBoys.png') center/cover no-repeat;
    background-blend-mode:overlay;
    position:relative;
    overflow:hidden;
}

.dark::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.20) 35%, rgba(0,0,0,0.55) 100%);
    pointer-events:none;
}

.dark::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:60px;
    background:linear-gradient(180deg, rgba(11,11,11,1), rgba(11,11,11,0));
    pointer-events:none;
}

/* ARTISTS */

.cards{
    display:flex;
    gap:30px;
    justify-content:center;
    flex-wrap:wrap;
}

.card{
    width:300px;
    background:rgba(17,17,17,0.38);
    border:2px solid var(--accent);
    border-radius:15px;
    padding:30px;
    transition:transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
    transform-origin:center;
    box-shadow:0 6px 22px rgba(0,0,0,0.35);
}

.card{position:relative;overflow:hidden}
.card > *{position:relative;z-index:2}
.card::before{content:'';position:absolute;inset:0;background-size:cover;background-position:center;opacity:.45;transform:scale(1.02);transition:opacity .45s ease, transform .45s ease;z-index:1}
.card:hover::before{opacity:.75;transform:scale(1)}

.card.c0lt::before{background-image:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url('logos/colt.png');}
.card.jarvis::before{background-image:linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url('logos/jarvis.png');}
.card.c7ctus::before{background-image:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('logos/c7ctus.png');}
.card.clip9::before{background-image:linear-gradient(rgba(0,0,0,0.55),rgba(0,0,0,0.55)), url('logos/clip9.png');}

.card p + p{opacity:0;max-height:0;overflow:hidden;transition:opacity .35s ease,max-height .35s ease;margin-top:12px}
.card:hover p + p{opacity:1;max-height:120px}

/* artist spotify button inside cards */
.artist-spotify{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:transparent;border:2px solid var(--fg);color:var(--fg);text-decoration:none;font-weight:700;margin-top:14px;box-shadow:none;transition:transform .18s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease, color .28s ease}
.artist-spotify .icon{width:18px;height:18px}
.artist-spotify:hover{background:#1DB954;border-color:#1DB954;color:white;transform:translateY(-3px);box-shadow:0 0 16px rgba(29,185,84,0.6), 0 12px 30px rgba(29,185,84,0.3)}

/* generic artist action buttons (YouTube, SoundCloud, etc.) */
.artist-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;align-items:center;justify-content:center}
.artist-actions a, .artist-spotify{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;color:var(--fg) !important;text-decoration:none !important;font-weight:700;background:transparent;border:2px solid var(--fg);box-shadow:none;flex-shrink:0;transition:transform .18s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease, color .28s ease}
.artist-actions a .icon, .artist-spotify .icon{width:18px;height:18px;flex-shrink:0}
.artist-btn.yt:hover{background:#ff0000;border-color:#ff0000;color:white !important;transform:translateY(-3px);box-shadow:0 0 16px rgba(255,0,0,0.6), 0 12px 30px rgba(255,0,0,0.3)}
.artist-btn.sc:hover{background:#ff7700;border-color:#ff7700;color:white !important;transform:translateY(-3px);box-shadow:0 0 16px rgba(255,119,0,0.6), 0 12px 30px rgba(255,119,0,0.3)}
.artist-spotify:hover{background:#1DB954;border-color:#1DB954;color:white !important;transform:translateY(-3px);box-shadow:0 0 16px rgba(29,185,84,0.6), 0 12px 30px rgba(29,185,84,0.3)}

.card h3{
    color:var(--accent);
    margin-bottom:10px;
}

.card:hover{transform:translateY(-10px) rotateZ(-0.5deg); box-shadow:0 18px 40px rgba(0,0,0,0.55)}

/* MUSIC BARS */
.music-card .bars{display:flex;gap:6px;align-items:end;height:70px}
.music-card .bar{width:8px;background:linear-gradient(180deg,var(--accent),#fff);border-radius:4px;animation:bar 1s infinite ease-in-out}
.music-card .bar:nth-child(2){animation-duration:1.15s}
.music-card .bar:nth-child(3){animation-duration:0.9s}
.music-card .bar:nth-child(4){animation-duration:1.25s}
.music-card .bar:nth-child(5){animation-duration:0.8s}

@keyframes bar{
    0%{height:20%}
    50%{height:90%}
    100%{height:30%}
}

/* subtle floating animation for small accents */
.floaty{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}

/* MUSIC */

.music-grid{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:30px;
}

.music-card{
    width:280px;
    background:#1b1b1b;
    border-left:5px solid #ffd400;
    padding:25px;
    text-align:left;
}

/* FOOTER */

footer{
    background:black;
    text-align:center;
    padding:25px;
    border-top:2px solid var(--accent);
}

/* MOBILE */

@media(max-width:768px){

    nav{
        flex-direction:column;
        gap:15px;
    }

    nav ul{
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero-content h1{
        font-size:3rem;
    }

    .section h2{
        font-size:2rem;
    }
}

/* small utility */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* YouTube latest video section — ATB black/yellow theme */
.youtube-latest{
    position:relative;
    background:linear-gradient(135deg, #000 0%, #0b0b0b 50%, #000 100%);
    color:#fff;
    padding:60px 16px;
    text-align:center;
    overflow:hidden;
}
.youtube-latest h2{
    font-size:2rem;
    margin:0 0 12px;
    color:var(--accent);
}
.youtube-latest h2, .youtube-latest .video-wrap{
    position:relative;
    z-index:2;
}
.youtube-latest::before{
    content:'';
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:radial-gradient(circle at 15% 50%, rgba(255,212,64,0.08), transparent 15%), radial-gradient(circle at 85% 45%, rgba(255,212,64,0.05), transparent 12%);
    mix-blend-mode:screen;
    filter:blur(30px);
    animation:atbGlow 8s ease-in-out infinite;
}
.video-wrap{
    max-width:1100px;
    margin:0 auto;
}
.video-inner{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 12px 32px rgba(0,0,0,0.5), 0 4px 24px rgba(255,212,64,0.05);
    z-index:2;
}
.video-inner iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
}
@keyframes atbGlow{
    0%{transform:translateY(0) scale(1); opacity:0.85}
    50%{transform:translateY(-8px) scale(1.08); opacity:1}
    100%{transform:translateY(0) scale(1); opacity:0.85}
}
@media (max-width:600px){
    .youtube-latest{padding:40px 12px}
    .youtube-latest h2{font-size:1.4rem}
    .video-wrap{padding:0 8px}
}