/* ============================================================
   site.css — loaded last, owns the scrolling shell, the fixed
   background video, the social icons and the widget sections.
   ============================================================ */

/* ---------- Scrolling shell ------------------------------- */
/* global.css locks the body to 100vh with overflow:hidden, which
   was fine for a single centred card. The scrollable sections
   need the page to actually scroll. */
html {
    scroll-behavior: smooth;
}

html,
body {
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* users.css centres the old single card with `body { display:flex }`,
   which would lay the scroll sections out side by side. Each section
   handles its own centring now. */
body {
    display: block;
}

@media only screen and (min-width: 1921px) {
    body {
        display: block;
    }
}

body.is-locked {
    overflow: hidden;
}

/* ---------- Background video ------------------------------ */
/* These rules were missing entirely: .video-container and
   .placeholder had no styling, so the poster never covered the
   viewport and the video sat in normal flow. */
.video-container {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
    background-color: #0d0d0d;
}

.video-container .placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: opacity 0.6s ease;
}

/* Once the video is confirmed playing we fade the poster out. */
.video-container.video-ready .placeholder {
    opacity: 0;
}

.background {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    pointer-events: none;
}

/* Dim layer so text stays readable over bright frames. */
.video-scrim {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- Section layout -------------------------------- */
.page-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    box-sizing: border-box;
}

#section-profile {
    padding-top: 0;
    /* Leaves clearance for the scroll cue below the player. */
    padding-bottom: 92px;
}

/* .content used to be position:fixed; it now flows inside the
   first scroll section. */
#section-profile .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    max-width: 900px;
}

.section-head {
    text-align: center;
    margin-bottom: 34px;
}

.section-head h2 {
    font-family: 'Chillax', sans-serif;
    font-size: 34px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
    margin: 0;
}

.section-head p {
    margin: 6px 0 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}

/* ---------- Widget grid ----------------------------------- */
.widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 900px;
}

.widget {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px;
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.07);
    border: 2px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    color: #fff;
    text-align: left;
    text-decoration: none;
    transition: transform 0.28s cubic-bezier(0.03, 0.98, 0.52, 0.99),
        background-color 0.28s ease,
        border-color 0.28s ease;
}

a.widget:hover {
    transform: translateY(-4px);
    background-color: rgba(255, 255, 255, 0.11);
    border-color: rgba(255, 255, 255, 0.16);
}

.widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
}

.widget-title .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #fff);
    box-shadow: 0 0 8px var(--accent, #fff);
    flex-shrink: 0;
}

.widget-text {
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.68);
}

.widget-value {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.widget-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
}

.widget-row span:last-child {
    color: #fff;
    font-weight: 600;
}

.widget-media {
    display: flex;
    align-items: center;
    gap: 12px;
}

.widget-media img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.widget-media .meta {
    overflow: hidden;
}

.widget-media .meta strong {
    display: block;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-media .meta small {
    display: block;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget-empty {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

/* ---------- Scroll cue ------------------------------------ */
.scroll-cue {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: none;
    border: none;
    animation: cueFloat 1.8s ease-in-out infinite;
    z-index: 3;
}

.scroll-cue svg {
    width: 20px;
    height: 20px;
}

@keyframes cueFloat {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 0.55;
    }

    50% {
        transform: translate(-50%, 6px);
        opacity: 1;
    }
}

/* ---------- Social icons ---------------------------------- */
/* Image-based socials (Radar Systems / Excusty) sit alongside the
   inline-SVG ones and get the same white glow treatment. */
/* .linkedAccounts already applies drop-shadow(0 0 0.9px #fff) to the
   whole row, so these logos only need a light touch on top. Anything
   heavier bleeds into their transparent cut-outs and flattens them
   into white blobs next to the inline SVGs. */
.linkedAccounts .social-img {
    width: 1.8em;
    height: 1.8em;
    object-fit: contain;
    display: block;
    /* No glow of its own. .linkedAccounts already applies
       drop-shadow(0 0 0.9px #fff) to the whole row, and these logos
       are solid filled shapes, so they pick up far more halo from it
       than the thin inline SVGs do. Any extra on top reads as a
       blown-out blob next to them. */
    filter: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.linkedAccounts a:hover .social-img {
    /* Scale alone is the hover feedback. Adding a filter back here
       would reintroduce exactly the per-icon glow removed above. */
    transform: scale(1.12);
}

/* Shown only if the real logo file is missing, so the row never
   collapses into a broken-image icon. */
.linkedAccounts .social-fallback {
    width: 1.8em;
    height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    font-family: 'Chillax', sans-serif;
    font-size: 0.9em;
    font-weight: 600;
    color: #fff;
    filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
    transition: transform 0.3s ease;
}

.linkedAccounts a:hover .social-fallback {
    transform: scale(1.12);
}

/* ---------- Discord presence ------------------------------ */
.discordUserBadges img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.presence-activity {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
    max-width: 230px;
}

.presence-activity img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.presence-activity .pa-text {
    overflow: hidden;
    text-align: left;
}

.presence-activity .pa-text strong {
    display: block;
    color: #fff;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.presence-activity .pa-text span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Misc ------------------------------------------ */
.profileStats {
    filter: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    justify-content: center;
    margin-top: 18px;
}

.separator {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.25);
    margin: 0 4px;
}

.profileViews,
.profileLocation {
    display: flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 768px) {
    .page-section {
        padding: 60px 16px;
    }

    .section-head h2 {
        font-size: 27px;
    }

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

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .scroll-cue {
        animation: none;
    }
}

/* ---------- Scrub bar thumb ------------------------------- */
/* Previously injected at runtime by title.js; owned by
   player.js behaviour now, so the styles live here. */
.timeline {
    overflow: visible;
    transition: height 0.2s ease;
}

.timeline-thumb {
    position: absolute;
    top: 50%;
    right: -8px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 10;
}

.timeline:hover .timeline-thumb,
.timeline-thumb.dragging {
    transform: translateY(-50%) scale(1);
}

.timeline-thumb.dragging {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ---------- Cycling Discord badges ------------------------ */
.discordUserBadges.cycling {
    transition: opacity 0.22s ease;
}

.discordUserBadges.cycling.fading {
    opacity: 0;
}