/**
 * Global Styles — Timelapse
 *
 * Typography, containers, utilities, scrollbar, animations.
 */

/* ── Base ── */
html {
    overflow-x: hidden;
}

body {
    font-family: var(--tl-font-primary);
    font-size: var(--tl-text-body);
    font-weight: var(--tl-weight-regular);
    color: var(--tl-white);
    background-color: var(--tl-bg-base);
    overflow-x: hidden;
}

/* ── Selection ── */
::selection {
    background-color: var(--tl-neon);
    color: var(--tl-black);
}

/* ── Links ── */
a {
    transition: var(--tl-transition-fast);
}

a:hover {
    color: var(--tl-neon);
}

/* ── Headings ── */
h1, .tl-h1 {
    font-size: var(--tl-text-h1);
    font-weight: var(--tl-weight-black);
    line-height: var(--tl-leading-tight);
    letter-spacing: var(--tl-tracking-tight);
    text-transform: uppercase;
}

h2, .tl-h2 {
    font-size: var(--tl-text-h2);
    font-weight: var(--tl-weight-extrabold);
    line-height: var(--tl-leading-snug);
    letter-spacing: var(--tl-tracking-tight);
    text-transform: uppercase;
}

h3, .tl-h3 {
    font-size: var(--tl-text-h3);
    font-weight: var(--tl-weight-bold);
    line-height: var(--tl-leading-snug);
}

h4, .tl-h4 {
    font-size: var(--tl-text-h4);
    font-weight: var(--tl-weight-semibold);
    line-height: var(--tl-leading-snug);
}

/* ── Container ── */
.tl-container {
    width: 100%;
    max-width: var(--tl-container-max);
    margin: 0 auto;
    padding: 0 var(--tl-container-padding);
}

.tl-container-narrow {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--tl-container-padding);
}

.tl-container-wide {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 var(--tl-container-padding);
}

/* ── Main Content (fixed header offset + divider) ── */
.tl-main {
    padding-top: 67px;
}

/* ── Sections ── */
.tl-section {
    padding: var(--tl-space-4xl) 0;
}

.tl-section-sm {
    padding: var(--tl-space-2xl) 0;
}

/* ── Divider ── */
.tl-divider {
    width: 100%;
    height: 1px;
    background: var(--tl-divider);
    border: none;
}

/* ── Buttons ── */
.tl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tl-space-sm);
    padding: 14px 32px;
    font-family: var(--tl-font-primary);
    font-size: var(--tl-text-small);
    font-weight: var(--tl-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--tl-tracking-wide);
    border-radius: var(--tl-radius-pill);
    transition: var(--tl-transition-default);
    white-space: nowrap;
    cursor: pointer;
}

.tl-btn-primary {
    background: var(--tl-neon);
    color: var(--tl-black);
    border: 2px solid var(--tl-neon);
}

.tl-btn-primary:hover {
    background: transparent;
    color: var(--tl-neon);
    box-shadow: var(--tl-shadow-neon-btn);
}

.tl-btn-secondary {
    background: transparent;
    color: var(--tl-white);
    border: 1px solid var(--tl-glass-border);
}

.tl-btn-secondary:hover {
    background: var(--tl-hover-bg-strong);
    border-color: var(--tl-white);
}

.tl-btn-ghost {
    background: var(--tl-hover-bg);
    color: var(--tl-white);
    border: 1px solid var(--tl-glass-border-subtle);
    backdrop-filter: blur(20px);
}

.tl-btn-ghost:hover {
    background: var(--tl-white);
    color: var(--tl-black);
    border-color: var(--tl-white);
}

/* Button with kicker text */
.tl-btn-with-kicker {
    flex-direction: column;
    gap: 2px;
}

.tl-btn-kicker {
    font-size: var(--tl-text-xxs);
    font-weight: var(--tl-weight-medium);
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: var(--tl-tracking-wider);
}

/* ── Tags ── */
.tl-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: var(--tl-text-xxs);
    font-weight: var(--tl-weight-extrabold);
    text-transform: uppercase;
    border-radius: var(--tl-radius-sm);
    letter-spacing: var(--tl-tracking-wide);
}

.tl-tag-neon {
    background: var(--tl-green-tag-bg);
    color: var(--tl-green-tag);
}

.tl-tag-gold {
    background: rgba(255, 215, 0, 0.15);
    color: var(--tl-gold);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

/* ── Utility Classes ── */
.tl-text-neon { color: var(--tl-neon); }
.tl-text-gold { color: var(--tl-gold); }
.tl-text-muted { color: var(--tl-gray-500); }
.tl-text-center { text-align: center; }
.tl-text-upper { text-transform: uppercase; }

.tl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tl-hidden { display: none; }

/* ── Keyframe Animations ── */
@keyframes tlFadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tlFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes tlSlideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@keyframes tlShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

@keyframes tlLoadingAnim {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Skeleton loader */
.tl-skeleton {
    background: linear-gradient(90deg, var(--tl-gray-900), var(--tl-gray-800), var(--tl-gray-900));
    background-size: 200% 100%;
    animation: tlLoadingAnim 1.5s linear infinite;
    border-radius: var(--tl-radius-md);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    :root {
        --tl-container-padding: 16px;
    }

    .tl-main {
        padding-top: 58px;
    }

    .tl-section {
        padding: var(--tl-space-2xl) 0;
    }

    .tl-mobile-hide {
        display: none;
    }
}

@media (min-width: 769px) {
    .tl-desktop-hide {
        display: none;
    }
}