/* =========================================================
   TRAGEDY // MAIN SITE
   Cleaned stylesheet
   Core theme: black / white / purple
   ========================================================= */

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

html {
scroll-behavior: smooth;
}

body {
background: #080808;
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
}

/* =========================
NAVIGATION
========================= */

.navbar {
position: fixed;
top: 0;
left: 0;

width: 100%;
height: 80px;

display: flex;
align-items: center;
justify-content: space-between;

padding: 0 7%;

background: rgba(8, 8, 8, 0.8);

backdrop-filter: blur(10px);

z-index: 1000;

}

.logo {
color: white;
text-decoration: none;

font-size: 22px;
font-weight: 900;
letter-spacing: 2px;

}

.logo span {
color: #a855f7;
}

.navbar nav {
display: flex;
gap: 35px;
}

.navbar nav a {
color: #aaa;
text-decoration: none;

font-size: 14px;
font-weight: bold;

text-transform: uppercase;

transition: 0.3s;

}

.navbar nav a:hover{
color: #a855f7;
}

/* =========================
HERO
========================= */

.hero {
min-height: 100vh;

display: flex;
align-items: center;

padding: 120px 10%;

position: relative;

overflow: hidden;

}

/* Background glow */

.hero::before {
content: "";

position: absolute;

width: 750px;
height: 750px;

background: #8b228b;

filter: blur(160px);

opacity: 0.35;

top: 5%;
right: -150px;

animation: glowMove 7s ease-in-out infinite alternate;

pointer-events: none;

}
@keyframes glowMove {
from { 
    transform: translate(0, 0) scale(0.8);
    opacity: 0.2;
}

50% { 
    transform: translate(-80px, 40px) scale(1.15);
    opacity: 0.4;
}
100% { 
    transform: translate(-150px, 80px) scale(1.55);
    opacity: 0.55;
}

}


.hero-content {
position: relative;
z-index: 1;
}

.eyebrow {
color: #a855f7;

font-size: 13px;
font-weight: bold;

letter-spacing: 4px;

margin-bottom: 20px;

}

.hero h1 {
font-size: clamp(70px, 12vw, 170px);

line-height: 0.85;

font-weight: 900;

letter-spacing: -6px;

}

.hero h1 span {
color: #a855f7;
}

.hero-description {
margin-top: 35px;

color: #aaa;

font-size: 18px;

line-height: 1.7;

}

/* =========================
BUTTONS
========================= */

.hero-buttons {
display: flex;

gap: 15px;

margin-top: 40px;

}

.button {
display: inline-block;

padding: 16px 28px;

text-decoration: none;

font-size: 13px;
font-weight: bold;

letter-spacing: 1px;

transition: 0.3s;

}

.button.primary {
border: 1px solid #a855f7;
background: transparent;
color: #9146ff

}

.button.primary:hover {
background: #c084fc;
color: white;
box-shadow: 0 0 25px rgba(133, 1, 133, 0.6);
transform: translateY(-3px);
}

.button.secondary {
border: 1px solid #444;
color: white;
background: transparent;
}

.button.secondary:hover {
border-color: #a855f7;
color: #a855f7;
box-shadow: 0 0 25px rgba(133, 1, 133, 0.6);
transform: translateY(-3px);
}

.button.twitch {
    border: 1px solid #9146ff;
    color: #9146ff;
}
.button.twitch:hover {
   background: #9146ff;
   color: white;
   box-shadow: 0 0 25px rgba(145, 70, 255, 0.6);
}

.button:hover {
    transform: translateY(-4px);
}

/*Spotify Connect BUtton*/

.button.spotify {
    border: 1px solid #1db954;
    color: #1db954;
}
.button.spotify:hover {
    background: #1db954;
    color: white;
    box-shadow: 0 0 25px rgba(29, 185, 84, 0.6);
    transform: translateY(-4px);
}

/* =========================
SECTIONS
========================= */

.projects,
.about {
padding: 140px 10%;
}

.section-heading {
margin-bottom: 60px;
}

.section-heading h2 {
font-size: clamp(45px, 7vw, 90px);

line-height: 1;

font-weight: 900;

letter-spacing: -3px;

}

/* =========================
PROJECT CARDS
========================= */

.project-grid {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 20px;

}

.project-card {
min-height: 320px;

padding: 35px;

background: #111;

border: 1px solid #222;

position: relative;

transition: 0.3s;

}

.project-card:hover {
transform: translateY(-8px);

border-color: #a855f7;

}

.project-number {
color: #555;

font-size: 14px;

margin-bottom: 70px;

}

.project-card h3 {
font-size: 28px;

margin-bottom: 15px;

}

.project-card p {
color: #888;

line-height: 1.6;

margin-bottom: 30px;

}

.project-card a {
color: #a855f7;

text-decoration: none;

font-size: 13px;

font-weight: bold;

}

/* =========================
ABOUT
========================= */

.about {
background: #0d0d0d;
}

.about-text {
max-width: 800px;

font-size: clamp(25px, 4vw, 45px);

line-height: 1.3;

color: #ccc;

}

/* =========================
FOOTER
========================= */

footer {
padding: 40px 10%;

border-top: 1px solid #222;

color: #555;

font-size: 13px;

}

/* =========================
MOBILE
========================= */

@media (max-width: 800px) {

.navbar {
    padding: 0 5%;
}

.navbar nav {
    gap: 15px;
}

.navbar nav a {
    font-size: 11px;
}

.hero {
    padding: 120px 7%;
}

.hero h1 {
    letter-spacing: -3px;
}

.project-grid {
    grid-template-columns: 1fr;
}

.projects,
.about {
    padding: 100px 7%;
}

.hero-buttons {
    flex-direction: column;

    width: 200px;
}


}
/* =========================
   HERO ANIMATIONS
========================= */

.hero-content {
    animation: heroFadeIn 1s ease-out forwards;
}

@keyframes heroFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.now-playing:hover {
    transform: translateY(-5px);

    border-color: #1db954;

    box-shadow: 0 15px 50px rgba(29, 185, 84, 0.12);
}


/* =========================
   SPOTIFY
========================= */

.spotify-section {
    padding: 140px 10%;
}

.now-playing {
    max-width: 850px;

    padding: 30px;

    background: #111;

    border: 1px solid #222;

    transition: 0.3s;
}

.now-playing:hover {
    border-color: #1db954;
    box-shadow: 0 0 35px rgba(29, 185, 84, 0.12);
}


/* Spotify status */

.spotify-status {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #1db954;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 1px;

    margin-bottom: 25px;
}

.status-dot {
    width: 8px;
    height: 8px;

    background: #1db954;

    border-radius: 50%;

    animation: spotifyPulse 1.5s infinite;
}

@keyframes spotifyPulse {

    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.3;
        transform: scale(0.7);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}


/* Song information */

.spotify-content {
    display: flex;

    align-items: center;

    gap: 30px;
}

.spotify-content img {
    width: 200px;
    height: 200px;

    object-fit: cover;

    flex-shrink: 0;

    background: #222;
}

.song-info {
    flex: 1;
}

.song-info h3 {
    font-size: clamp(28px, 4vw, 45px);

    line-height: 1.1;

    margin-bottom: 10px;
}

.song-info p {
    color: #888;
    font-size: 18px;
}
/* Spotify Progress Bar */

.song-progress {
    margin-top: 25px;
    max-width: 450px;
}

.progress-bar {
    width: 100%;
    height: 5px;

    background: #333;
    border-radius: 10px;

    overflow: hidden;
}

.progress-fill {
    width: 0%;
    height: 100%;

    background: #1db954;
    border-radius: 10px;

    box-shadow: 0 0 10px rgba(29, 185, 84, 0.6);

    transition: width 1s linear;
}

.progress-times {
    display: flex;
    justify-content: space-between;

    margin-top: 8px;

    color: #777;

    font-size: 11px;
    font-weight: bold;
}


/* Spotify link */

.spotify-link {
    display: inline-block;

    margin-top: 25px;

    padding: 12px 20px;

    background: #1db954;

    color: white;

    text-decoration: none;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 1px;

    transition: 0.3s;
}

.spotify-link:hover {
    background: #1ed760;

    transform: translateY(-3px);
}


/* Mobile */

@media (max-width: 800px) {

    .spotify-content {
        flex-direction: column;

        align-items: flex-start;
    }

    .spotify-content img {
        width: 100%;
        max-width: 350px;
        height: auto;
    }

}


/* League profile */
.league-section { padding: 140px 10%; scroll-margin-top: 80px; }
.league-profile { max-width: 1000px; padding: 32px; background: #111; border: 1px solid #352044; }
.league-account, .league-champion { display: flex; align-items: center; gap: 20px; }
.league-account h3 { font-size: clamp(24px, 4vw, 40px); overflow-wrap: anywhere; }
.league-icon { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
.league-muted { color: #aaa; line-height: 1.6; margin-top: 6px; }
.league-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 30px 0; }
.league-rank { padding: 24px; background: #17121d; border: 1px solid #352044; }
.league-rank .eyebrow { letter-spacing: 2px; margin-bottom: 12px; }
.league-rank h4 { font-size: 24px; }
.league-subheading { letter-spacing: 2px; margin-bottom: 20px; }
.league-champions { display: grid; gap: 18px; }
.league-champion .league-icon { width: 56px; height: 56px; }
.league-updated, .riot-notice { color: #999; font-size: 12px; line-height: 1.6; margin-top: 24px; }
@media (max-width: 800px) {
    .league-section { padding: 100px 7%; }
    .league-ranks { grid-template-columns: 1fr; }
    .league-profile { padding: 20px; }
    .navbar nav { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
    .navbar { gap: 15px; }
}


/* Embedded Twitch stream */
.watch-section { padding: 120px 10%; scroll-margin-top: 100px; }
.watch-card { max-width: 1100px; border: 1px solid #352044; background: #111; }
.twitch-player-mount { width: 100%; }
.twitch-player { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 300px; border: 0; }
.watch-details { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 24px; }
.watch-details p, .watch-fallback { color: #aaa; line-height: 1.6; }
.watch-fallback { padding: 40px 24px; }
.watch-link { color: #c084fc; font-size: 12px; font-weight: bold; letter-spacing: 1px; text-decoration: none; }
.watch-link:hover { color: #e9d5ff; text-decoration: underline; }
@media (max-width: 800px) {
    .watch-section { padding: 100px 7%; }
    .watch-details { padding: 20px; }
}
/* =========================
   FOOTER
========================= */

.site-footer {
    margin-top: 100px;
    padding: 35px 6%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    color: #555;
    font-size: 11px;
    letter-spacing: 2px;
}

.footer-links {
    display: flex;
    gap: 25px;
}

.footer-links a {
    color: #777;
    text-decoration: none;
    letter-spacing: 2px;

    transition: 0.2s ease;
}

.footer-links a:hover {
    color: #fff;
}

@media (max-width: 600px) {
    .site-footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}
/* ========================================
   TRAGEDY // NAVIGATION V2
======================================== */

/* Main navbar layout */

.navbar {
    padding: 0 5%;

    gap: 45px;

    justify-content: flex-start;
}


/* ========================================
   LOGO
======================================== */

.navbar .logo {
    flex-shrink: 0;

    font-size: 18px;

    letter-spacing: 3px;

    color: #fff;
}


/* ========================================
   MAIN NAVIGATION
======================================== */

.navbar .nav-links {
    display: flex;
    align-items: center;

    gap: 30px;

    flex: 1;

    height: 100%;
}

.navbar .nav-links > a {
    color: #aaa;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 0.5px;

    text-decoration: none;

    white-space: nowrap;

    transition: color 0.2s ease;
}

.navbar .nav-links > a:hover {
    color: #a855f7;
}


/* ========================================
   DROPDOWNS
======================================== */

.nav-dropdown {
    position: relative;

    display: flex;
    align-items: center;

    height: 100%;
}

.dropdown-button {
    display: flex;
    align-items: center;

    gap: 7px;

    height: 100%;

    padding: 0;

    background: transparent;

    border: none;

    color: #aaa;

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.5px;

    cursor: pointer;

    transition: color 0.2s ease;
}

.dropdown-button:hover {
    color: #a855f7;
}

.dropdown-arrow {
    color: #a855f7;

    font-size: 9px;

    transition: transform 0.2s ease;
}


/* Dropdown panel */

.dropdown-menu {
    position: absolute;

    top: 65px;
    left: -18px;

    width: 175px;

    padding: 8px;

    background: rgba(8, 8, 8, 0.98);

    border: 1px solid #292929;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.7);

    opacity: 0;

    visibility: hidden;

    transform: translateY(-6px);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

    z-index: 2000;
}


/* Dropdown links */

.navbar .dropdown-menu a {
    display: block;

    padding: 12px 14px;

    color: #777;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        padding-left 0.2s ease;
}

.navbar .dropdown-menu a:hover {
    color: #fff;

    background: rgba(168, 85, 247, 0.12);

    padding-left: 18px;
}


/* Open dropdown */

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

.nav-dropdown:hover .dropdown-arrow,
.nav-dropdown:focus-within .dropdown-arrow {
    transform: rotate(180deg);
}


/* ========================================
   ACCOUNT
======================================== */

.nav-auth {
    display: flex;
    align-items: center;

    gap: 18px;

    flex-shrink: 0;

    margin-left: auto;
}

.navbar .login-nav {
    color: #aaa;

    font-size: 11px;

    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;

    transition: color 0.2s ease;
}

.navbar .login-nav:hover {
    color: #fff;
}

.navbar .signup-nav {
    padding: 10px 18px;

    color: #ddd;

    border: 1px solid #8f0000;

    background: rgba(120, 0, 0, 0.12);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.5px;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.navbar .signup-nav:hover {
    color: #fff;

    background: #950000;

    border-color: #c00000;

    box-shadow:
        0 0 20px rgba(200, 0, 0, 0.22);
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1000px) {

    .navbar {
        gap: 25px;

        padding: 0 3%;
    }

    .navbar .nav-links {
        gap: 20px;
    }

    .navbar .logo {
        font-size: 16px;
    }

}


/* Mobile */

@media (max-width: 750px) {

    .navbar {
        height: auto;

        min-height: 70px;

        padding: 18px 5%;

        flex-wrap: wrap;
    }

    .navbar .nav-links {
        order: 3;

        width: 100%;
        height: auto;

        gap: 20px;

        padding-top: 15px;

        border-top: 1px solid #1c1c1c;
    }

    .nav-dropdown {
        height: auto;
    }

    .dropdown-button {
        height: auto;
    }

    .dropdown-menu {
        top: 30px;
    }

}
/* ========================================
   LOGGED-IN ACCOUNT MENU
======================================== */

.logged-out-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}

.user-menu {
    position: relative;
}

.user-menu[hidden] {
    display: none;
}

.user-menu-button {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    background: transparent;

    border: 1px solid #292929;

    color: #aaa;

    font-family: inherit;
    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1px;

    cursor: pointer;
}

.user-menu-button:hover {
    color: #fff;
    border-color: #a855f7;
}


/* Dropdown */

.user-dropdown {
    position: absolute;

    top: calc(100% + 10px);
    right: 0;

    min-width: 180px;

    padding: 8px;

    background: #090909;

    border: 1px solid #292929;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.7);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;

    z-index: 2000;
}


/* Open */

.user-menu:hover .user-dropdown,
.user-menu:focus-within .user-dropdown {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Links + logout */

.user-dropdown a,
.user-dropdown button {
    display: block;

    width: 100%;

    padding: 12px 14px;

    background: transparent;

    border: none;

    color: #777;

    font-family: inherit;
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;

    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.user-dropdown a:hover {
    color: #fff;

    background: rgba(168, 85, 247, 0.12);
}

.user-dropdown button {
    margin-top: 5px;

    border-top: 1px solid #222;

    color: #a44;
}

.user-dropdown button:hover {
    color: #ff4444;

    background: rgba(150, 0, 0, 0.12);
}
/* ========================================
   AUTH VISIBILITY FIX
======================================== */

.logged-out-nav[hidden] {
    display: none !important;
}

.user-menu[hidden] {
    display: none !important;
}

/* ========================================
   PROJECTS // DARK PURPLE
======================================== */

.projects {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 30%,
            rgba(168, 85, 247, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(95, 30, 150, 0.06),
            transparent 25%
        ),
        #080709;

    color: #f5f5f5;

    border-top: 1px solid #19151d;
    border-bottom: 1px solid #19151d;
}


/* Giant background typography */
.projects::before {
    content: "PROJECTS";

    position: absolute;

    right: -30px;
    bottom: -25px;
    top: auto;

    font-size: clamp(120px, 18vw, 300px);
    font-weight: 900;

    line-height: 0.8;
    letter-spacing: -12px;

    color: rgba(168, 85, 247, 0.025);

    pointer-events: none;
    user-select: none;
}

.projects > * {
    position: relative;
    z-index: 1;
}


/* ========================================
   HEADING
======================================== */

.projects .section-heading .eyebrow {
    color: #a855f7;
}

.projects .section-heading h2 {
    color: #f5f5f5;
}

.projects .section-heading::after {
    content: "";

    display: block;

    width: 45px;
    height: 1px;

    margin-top: 20px;

    background: #a855f7;

    box-shadow:
        15px 4px 0 rgba(168, 85, 247, 0.25);
}


/* ========================================
   CARDS
======================================== */

.projects .project-card {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(20, 17, 23, 0.92),
            rgba(10, 9, 11, 0.96)
        );

    border: 1px solid #27222c;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.projects .project-card:hover {
    transform: translateY(-5px);

    border-color: #66318f;

    box-shadow:
        0 20px 55px rgba(80, 25, 120, 0.12);
}


/* Purple top accent */

.projects .project-card::before {
    content: "";

    position: absolute;

    top: -1px;
    left: -1px;

    width: 35px;
    height: 2px;

    background: #a855f7;

    transition: width 0.25s ease;
}

.projects .project-card:hover::before {
    width: 80px;
}


/* ========================================
   CARD CONTENT
======================================== */

.projects .project-number {
    color: #8141b5;
}

.projects .project-card h3 {
    color: #f5f5f5;
}

.projects .project-card p {
    color: #77727b;
}

.projects .project-card a {
    color: #a855f7;

    transition:
        color 0.2s ease,
        letter-spacing 0.2s ease;
}

.projects .project-card a:hover {
    color: #c084fc;
    letter-spacing: 1px;
}

/* ========================================
   WATCH // DARK PURPLE
======================================== */

.watch-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(145, 70, 232, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(90, 35, 130, 0.07),
            transparent 25%
        ),
        #060607;

    border-top: 1px solid #18141c;
    border-bottom: 1px solid #18141c;
}

/* Faint WATCH background text */

.watch-section::before {
    content: "WATCH";

    position: absolute;
    right: -25px;
    top: 30px;

    font-size: clamp(140px, 20vw, 330px);
    font-weight: 900;
    line-height: 0.8;

    letter-spacing: -12px;

    color: rgba(168, 85, 247, 0.025);

    pointer-events: none;
}

.watch-section > * {
    position: relative;
    z-index: 1;
}

.watch-section .eyebrow {
    color: #a855f7;
}

/* Twitch player container */

.watch-card {
    background:
        linear-gradient(
            145deg,
            rgba(18, 15, 21, 0.96),
            rgba(7, 7, 8, 0.98)
        );

    border: 1px solid #29232f;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);
}

.watch-card:hover {
    border-color: #4d2a68;
}

.watch-link {
    color: #a855f7;
}

.watch-link:hover {
    color: #c084fc;
}


/* ========================================
   SPOTIFY // PURPLE ATMOSPHERE
======================================== */

.spotify-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(168, 85, 247, 0.14),
            transparent 32%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(90, 35, 130, 0.07),
            transparent 25%
        ),
        #09070b;

    border-top: 1px solid #1d1821;
    border-bottom: 1px solid #1d1821;
}


/* Giant MUSIC background text */

.spotify-section::before {
    content: "MUSIC";

    position: absolute;
    left: -25px;
    bottom: 20px;

    font-size: clamp(140px, 21vw, 340px);
    font-weight: 900;

    line-height: 0.8;
    letter-spacing: -14px;

    color: rgba(168, 85, 247, 0.025);

    pointer-events: none;
}

.spotify-section > * {
    position: relative;
    z-index: 1;
}

.spotify-section .eyebrow {
    color: #a855f7;
}


/* ========================================
   NOW PLAYING CARD
======================================== */

.spotify-section .now-playing {
    position: relative;

    background:
        linear-gradient(
            135deg,
            rgba(22, 17, 26, 0.96),
            rgba(9, 8, 10, 0.98)
        );

    border: 1px solid #2d2533;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.spotify-section .now-playing:hover {
    transform: translateY(-3px);

    border-color: #5c3476;

    box-shadow:
        0 35px 90px rgba(55, 15, 80, 0.18);
}


/* Purple top detail */

.spotify-section .now-playing::before {
    content: "";

    position: absolute;

    top: -1px;
    left: -1px;

    width: 70px;
    height: 2px;

    background: #a855f7;

    box-shadow:
        25px 0 30px rgba(168, 85, 247, 0.35);
}

/* =========================================================
   LEAGUE // VOID PURPLE
   ========================================================= */

.league-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(168, 85, 247, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 75%,
            rgba(95, 45, 140, 0.06),
            transparent 24%
        ),
        #060607;

    border-top: 1px solid #18141c;
    border-bottom: 1px solid #18141c;
}

.league-section::before {
    content: "RIFT";

    position: absolute;

    right: -25px;
    top: -25px;
    bottom: auto;

    z-index: -1;

    color: rgba(168, 85, 247, 0.025);

    font-size: clamp(140px, 21vw, 340px);
    font-weight: 900;

    line-height: 0.8;
    letter-spacing: -14px;

    pointer-events: none;
    user-select: none;
}



.league-section .eyebrow {
    color: #a855f7;
}

.league-profile {
    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(18, 15, 21, 0.96),
            rgba(7, 7, 8, 0.98)
        );

    border: 1px solid #29232f;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.30);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.league-profile::before {
    content: "";

    position: absolute;
    top: -1px;
    left: -1px;

    width: 65px;
    height: 2px;

    background: #a855f7;

    box-shadow:
        25px 0 30px rgba(168, 85, 247, 0.22);
}

.league-profile:hover {
    transform: translateY(-3px);

    border-color: #56336d;

    box-shadow:
        0 32px 80px rgba(65, 20, 90, 0.14);
}

.league-profile h3 {
    color: #f5f5f5;
}

.league-muted,
.riot-notice {
    color: #6f6974;
}

.riot-notice {
    max-width: 900px;
    margin-top: 18px;

    font-size: 9px;
    line-height: 1.6;
    letter-spacing: 0.35px;
}


/* =========================================================
   ABOUT // PURPLE ATMOSPHERE
   ========================================================= */

.about {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(168, 85, 247, 0.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 20% 90%,
            rgba(75, 25, 110, 0.07),
            transparent 26%
        ),
        #09070b;

    border-top: 1px solid #1c1720;
    border-bottom: 1px solid #1c1720;
}

.about::before {
    content: "TRAGEDY";

    position: absolute;
    left: -35px;
    top: -30px;
    bottom: auto;   

    z-index: -1;

    color: rgba(168, 85, 247, 0.028);

    font-size: clamp(130px, 20vw, 330px);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -14px;

    pointer-events: none;
    user-select: none;
}

.about::after {
    content: "//";

    position: absolute;
    right: 7%;
    top: 55px;

    color: rgba(168, 85, 247, 0.35);

    font-size: 18px;
    font-weight: 900;
    letter-spacing: 8px;

    pointer-events: none;
}

.about .eyebrow {
    color: #a855f7;
}

.about .section-heading::after {
    content: "";

    display: block;

    width: 45px;
    height: 1px;

    margin-top: 20px;

    background: #a855f7;

    box-shadow:
        15px 4px 0 rgba(168, 85, 247, 0.24);
}

.about-text {
    position: relative;

    max-width: 760px;

    padding: 28px 30px;

    background:
        linear-gradient(
            135deg,
            rgba(18, 15, 21, 0.74),
            rgba(8, 8, 9, 0.72)
        );

    border: 1px solid #28222d;
    border-left: 2px solid #7e3caf;

    color: #a49da8;

    line-height: 1.8;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.22);
}

.about-text::before {
    content: "WELCOME TO THE CHAOS";

    display: block;

    margin-bottom: 15px;

    color: #a855f7;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
}


/* =========================================================
   LEAGUE + ABOUT // MOBILE
   ========================================================= */

@media (max-width: 700px) {
    .league-section::before,
    .about::before {
        font-size: 120px;
        letter-spacing: -7px;
    }

    .about::after {
        top: 35px;
        right: 5%;
    }

    .about-text {
        padding: 22px 20px;
    }
}

/* ========================================
   BACKGROUND WORDS // TOP EDGE
======================================== */

.watch-section::before,
.spotify-section::before,
.league-section::before,
.projects::before,
.about::before {
    top: -30px;
    bottom: auto;
}

/* ========================================
   SECTION // DETAILS
======================================== */



/* Slightly different placement per section */

.watch-section::after {
    right: 7%;
    bottom: 55px;
}

.spotify-section::after {
    left: 7%;
    bottom: 55px;
}


.projects::after {
    left: 7%;
    bottom: 55px;
}

.about::after {
    right: 7%;
    top: 55px;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    /* Navigation */
    nav {
        padding: 15px 20px;
    }

    /* Main sections */
    section {
        padding: 70px 20px;
    }

    /* Hero */
    .hero {
        min-height: 100svh;
        padding: 100px 20px 50px;
    }

    .hero h1 {
        font-size: clamp(3rem, 15vw, 5rem);
        line-height: 0.9;
    }

    .hero p {
        font-size: 1rem;
        max-width: 100%;
    }

    /* Buttons */
    .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .hero-buttons a {
        width: 100%;
        text-align: center;
    }

    /* Projects/cards */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Huge background words */
    .background-text {
        font-size: clamp(4rem, 25vw, 9rem);
        white-space: nowrap;
    }

    /* Spotify / Twitch sections */
    .spotify-container,
    .twitch-container {
        width: 100%;
        padding: 20px;
    }

    img,
    video,
    iframe {
        max-width: 100%;
        height: auto;
    }
}