:root {
    --background: #05060a;
    --surface: rgba(15, 17, 25, 0.72);
    --surface-hover: rgba(22, 25, 35, 0.9);

    --text: #f5f7fb;
    --muted: #8d94a5;

    --blue: #536dff;
    --purple: #8b5cf6;
    --cyan: #00d9ff;
    --red: #ff4057;

    --border: rgba(255, 255, 255, 0.09);
}


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


html {
    min-height: 100%;
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background: var(--background);

    color: var(--text);

    font-family: "Inter", sans-serif;

    overflow-x: hidden;
}


/* =========================================
   BACKGROUND
========================================= */

.background {
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -1;
}


.gradient {
    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    filter: blur(150px);

    opacity: 0.18;

    transition: transform 1s ease;
}


.gradient-blue {
    top: -300px;
    left: -250px;

    background: var(--blue);
}


.gradient-purple {
    right: -300px;
    bottom: -300px;

    background: var(--purple);
}


.grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 50px 50px;

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 90%
    );

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        transparent 90%
    );
}


#particles {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.noise {
    position: absolute;

    inset: -50%;

    opacity: 0.025;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");

    pointer-events: none;
}


/* =========================================
   CONTAINER
========================================= */

.container {
    width: min(560px, calc(100% - 28px));

    margin: 0 auto;

    padding: 55px 0 35px;
}


/* =========================================
   PROFILE
========================================= */

.profile {
    text-align: center;

    animation: fadeUp 0.8s ease both;
}


.avatar-wrapper {
    position: relative;

    width: 122px;
    height: 122px;

    margin: 0 auto 20px;
}


.avatar-glow {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        var(--cyan),
        var(--purple)
    );

    filter: blur(25px);

    opacity: 0.25;
}


.avatar-ring {
    position: absolute;

    inset: -6px;

    border-radius: 50%;

    background: conic-gradient(
        var(--cyan),
        var(--blue),
        var(--purple),
        var(--cyan)
    );

    animation: rotate 7s linear infinite;
}


.avatar {
    position: absolute;

    inset: 4px;

    overflow: hidden;

    border-radius: 50%;

    background: #090a10;

    border: 4px solid var(--background);
}


.avatar img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.online-dot {
    position: absolute;

    right: 3px;
    bottom: 4px;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #25e98b;

    border: 4px solid var(--background);

    box-shadow: 0 0 15px rgba(37, 233, 139, 0.8);
}


.profile h1 {
    font-size: 38px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;
}


.verified {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    margin-left: 4px;

    border-radius: 50%;

    background: var(--blue);

    color: white;

    font-size: 11px;

    vertical-align: middle;
}


.username {
    margin-top: 6px;

    color: var(--muted);

    font-size: 13px;
}


.description {
    margin-top: 12px;

    color: #b5bbc8;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================
   VIDEO CARD
========================================= */

.video-card {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    margin-top: 32px;

    overflow: hidden;

    border-radius: 24px;

    border: 1px solid rgba(255, 255, 255, 0.13);

    background: #10121a;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.4);

    isolation: isolate;

    animation:
        fadeUp 0.8s 0.1s ease both;
}


/* IMAGEN */

.video-thumbnail {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    z-index: -2;

    transition:
        transform 0.8s ease;
}


.video-card:hover .video-thumbnail {
    transform: scale(1.03);
}


/* OSCURECIMIENTO 60% */

.video-overlay {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.60);

    z-index: -1;
}


/* DEGRADADO INFERIOR */

.video-overlay::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.95) 0%,
            rgba(0, 0, 0, 0.65) 40%,
            rgba(0, 0, 0, 0.15) 75%,
            rgba(0, 0, 0, 0.05) 100%
        );
}


/* CONTENIDO */

.video-content {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding: 20px;
}


/* PARTE SUPERIOR */

.video-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.video-badge,
.video-duration {
    padding: 7px 10px;

    border-radius: 7px;

    background: rgba(0, 0, 0, 0.55);

    border: 1px solid rgba(255, 255, 255, 0.13);

    backdrop-filter: blur(10px);

    color: white;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


.video-duration {
    letter-spacing: 0;
}


/* PARTE INFERIOR */

.video-bottom {
    max-width: 460px;
}


.video-category {
    display: block;

    color: #b9c1ff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.video-content h2 {
    margin-top: 6px;

    color: white;

    font-size: 28px;

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -1.3px;
}


.video-description {
    margin-top: 7px;

    color: rgba(255, 255, 255, 0.75);

    font-size: 11px;

    line-height: 1.5;
}


/* BOTÓN */

.video-button {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: 15px;

    padding: 11px 15px;

    border-radius: 10px;

    background: white;

    color: #080910;

    text-decoration: none;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.5px;

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


.video-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(255, 255, 255, 0.2);
}

/* =========================================
   LIVE
========================================= */

.live-card {
    display: flex;

    align-items: center;

    gap: 15px;

    min-height: 78px;

    margin-top: 14px;

    padding: 14px 17px;

    border-radius: 18px;

    border: 1px solid var(--border);

    background: var(--surface);

    backdrop-filter: blur(15px);

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


.live-card:hover {
    transform: translateY(-3px);

    border-color: rgba(255, 255, 255, 0.18);

    background: var(--surface-hover);
}


.live-indicator {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

    min-width: 48px;

    color: #777e8f;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.8px;
}


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

    border-radius: 50%;

    background: #555b69;
}


.live-info {
    display: flex;

    flex-direction: column;

    gap: 3px;

    flex: 1;
}


.live-info strong {
    font-size: 14px;
}


.live-info span {
    color: var(--muted);

    font-size: 11px;
}


.live-arrow {
    color: #646b7b;

    font-size: 18px;

    transition: 0.25s;
}


.live-card:hover .live-arrow {
    color: white;

    transform: translate(3px, -3px);
}


/* =========================================
   SOCIAL LINKS
========================================= */

.links {
    display: flex;

    flex-direction: column;

    gap: 11px;

    margin-top: 14px;
}


.link-card {
    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 70px;

    padding: 11px 16px;

    border-radius: 17px;

    border: 1px solid var(--border);

    background: var(--surface);

    backdrop-filter: blur(15px);

    color: white;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;

    animation:
        fadeUp 0.8s 0.25s ease both;
}


.link-card:hover {
    transform: translateY(-3px);

    background: var(--surface-hover);
}


.link-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 45px;
    height: 45px;

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.06);

    color: white;

    font-size: 12px;

    font-weight: 900;
}


.link-info {
    display: flex;

    flex-direction: column;

    gap: 3px;

    flex: 1;
}


.link-info strong {
    font-size: 14px;
}


.link-info span {
    color: var(--muted);

    font-size: 11px;
}


.arrow {
    color: #606777;

    font-size: 18px;

    transition: 0.25s;
}


.link-card:hover .arrow {
    color: white;

    transform: translate(3px, -3px);
}


.twitch:hover {
    border-color: rgba(145, 70, 255, 0.5);
}


.youtube:hover {
    border-color: rgba(255, 50, 50, 0.45);
}


.instagram:hover {
    border-color: rgba(220, 80, 150, 0.45);
}


.tiktok:hover {
    border-color: rgba(0, 220, 240, 0.45);
}


.discord:hover {
    border-color: rgba(100, 120, 255, 0.45);
}


/* =========================================
   SOCIAL ICONS
========================================= */

.socials {
    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 30px;
}


.socials a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid var(--border);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.035);

    color: #a6adbc;

    text-decoration: none;

    font-size: 15px;

    transition: 0.25s;
}


.socials a:hover {
    color: white;

    background: rgba(255, 255, 255, 0.08);

    transform: translateY(-3px);
}


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

footer {
    display: flex;

    justify-content: center;

    gap: 9px;

    margin-top: 30px;

    color: #4e5564;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes fadeUp {
    from {
        opacity: 0;

        transform: translateY(20px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


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

@media (max-width: 600px) {

    .container {
        width: calc(100% - 22px);

        padding-top: 40px;
    }


    .profile h1 {
        font-size: 34px;
    }


    .video-card {
        height: 290px;
    }


    .video-content h2 {
        font-size: 25px;
    }


    .video-description {
        font-size: 10px;
    }

}