/* ============================================================================
   AnimeFeet — Shared Design System
   A cohesive dark theme with a fluid, responsive, non-overlapping navigation.
   Loaded on every page. Page-specific styles layer on top of these tokens.
   ============================================================================ */

:root {
    /* ---- Palette ---- */
    --bg:            #07070c;
    --bg-1:          #0b0b12;
    --bg-2:          #101019;
    --surface:       rgba(255,255,255,.035);
    --surface-2:     rgba(255,255,255,.06);
    --surface-3:     rgba(255,255,255,.09);
    --border:        rgba(255,255,255,.08);
    --border-strong: rgba(255,255,255,.16);

    --text:          #f4f4f8;
    --text-dim:      rgba(255,255,255,.62);
    --text-faint:    rgba(255,255,255,.38);

    --brand:         #8b5cf6;
    --brand-2:       #22d3ee;
    --brand-3:       #f0abfc;
    --grad:          linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
    --grad-warm:     linear-gradient(135deg, #c084fc 0%, #f0abfc 45%, #a78bfa 80%);
    --accent-cyan:   #67e8f9;
    --accent-gold:   #fde68a;

    --ring:          0 0 0 3px rgba(139,92,246,.35);
    --shadow-sm:     0 4px 16px rgba(0,0,0,.35);
    --shadow-md:     0 12px 34px rgba(0,0,0,.42);
    --shadow-lg:     0 24px 60px rgba(0,0,0,.5);
    --shadow-brand:  0 16px 44px rgba(139,92,246,.28);

    /* ---- Layout ---- */
    --nav-h:         68px;
    --container:     1600px;
    --radius-sm:     10px;
    --radius:        14px;
    --radius-lg:     20px;
    --radius-pill:   999px;

    --ease:          cubic-bezier(.4, 0, .2, 1);
    --ease-out:      cubic-bezier(.16, 1, .3, 1);

    /* ---- Fluid type scale (clamped so nothing blows up or collapses) ---- */
    --fs-xs:   clamp(.68rem, .64rem + .2vw, .78rem);
    --fs-sm:   clamp(.78rem, .74rem + .2vw, .88rem);
    --fs-base: clamp(.9rem, .86rem + .25vw, 1rem);
    --fs-md:   clamp(1rem, .94rem + .4vw, 1.15rem);
    --fs-lg:   clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
    --fs-xl:   clamp(1.9rem, 1.4rem + 2.6vw, 3.4rem);
    --fs-2xl:  clamp(2.4rem, 1.6rem + 3.8vw, 4.6rem);
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
}

/* Ambient page glow — subtle, sits behind everything */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 18% -5%, rgba(139,92,246,.16), transparent 70%),
        radial-gradient(55% 45% at 90% 0%, rgba(34,211,238,.10), transparent 70%);
}

a { color: inherit; }
img, video { max-width: 100%; }

::selection { background: rgba(139,92,246,.35); color: #fff; }

/* ---- Focus visibility (a11y) ---- */
:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: 8px;
}

/* ---- Scrollbar ---- */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.28); background-clip: padding-box; }

/* ============================================================================
   NAVIGATION — unified, glassy, and fully responsive (never overlaps)
   Structure:
   <header class="af-nav">
     <div class="af-nav__inner">
       <a class="af-brand">logo + name</a>
       <nav class="af-tabs">media tabs…</nav>
       <div class="af-actions">page controls…</div>
     </div>
   </header>
   ============================================================================ */

.af-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: color-mix(in srgb, var(--bg-1) 78%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--border);
}

.af-nav__inner {
    max-width: var(--container);
    margin: 0 auto;
    min-height: var(--nav-h);
    display: flex;
    align-items: center;
    gap: clamp(10px, 2vw, 28px);
    padding: 8px clamp(14px, 3vw, 32px);
}

/* Brand ---------------------------------------------------------------- */
.af-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex: 0 0 auto;
    font-weight: 800;
}
.af-brand img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    object-position: left center;
    display: block;
}
.af-brand span {
    display: none;
    font-size: var(--fs-md);
    letter-spacing: -.01em;
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}

/* Media tabs ----------------------------------------------------------- */
.af-tabs {
    display: flex;
    align-items: center;
    gap: clamp(4px, .8vw, 10px);
    flex: 0 1 300px;
    min-width: 0;
}
.af-tab {
    --tab-w: clamp(116px, 13vw, 154px);
    position: relative;
    display: block;
    width: var(--tab-w);
    aspect-ratio: 40 / 17;
    border-radius: 11px;
    overflow: hidden;
    text-decoration: none;
    flex: 0 1 var(--tab-w);
    min-width: 68px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: transform .25s var(--ease-out), border-color .2s, box-shadow .25s, filter .25s;
    filter: saturate(.7) brightness(.6);
}
.af-tab .nav-tab-image,
.af-tab .nav-tab-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.af-tab .nav-tab-video { display: none; }
.af-tab.playing .nav-tab-image { display: none; }
.af-tab.playing .nav-tab-video { display: block; }

/* Label overlay so tabs read as navigation, not just images */
.af-tab::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(.6rem, .48rem + .5vw, .78rem);
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 10px rgba(0,0,0,.95), 0 0 26px rgba(0,0,0,.85);
    background: linear-gradient(180deg, rgba(6,6,12,.42), rgba(6,6,12,.72));
    transition: background .25s;
    pointer-events: none;
}
.af-tab:hover {
    transform: translateY(-2px);
    filter: saturate(1) brightness(1);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.af-tab:hover::after { background: linear-gradient(180deg, rgba(6,6,12,.15), rgba(6,6,12,.5)); }
.af-tab.active {
    filter: saturate(1) brightness(.95);
    border-color: rgba(139,92,246,.7);
    box-shadow: 0 0 0 1px rgba(139,92,246,.35), 0 8px 22px rgba(139,92,246,.28);
}
.af-tab.active::after {
    background: linear-gradient(180deg, rgba(139,92,246,.14), rgba(6,6,12,.5));
    color: #fff;
}

/* Actions (right side) ------------------------------------------------- */
.af-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
    min-width: 0;
}

.af-nav-link {
    color: var(--text-dim);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.af-nav-link:hover,
.af-nav-link.active { color: #fff; }

.af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface-2);
    color: var(--text-dim);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s var(--ease);
}
.af-btn:hover { color: #fff; background: var(--surface-3); border-color: var(--border-strong); transform: translateY(-1px); }
.af-btn--primary {
    background: var(--grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(139,92,246,.32);
}
.af-btn--primary:hover { filter: brightness(1.08); color: #fff; }
.af-btn--icon { width: 40px; padding: 0; font-size: 1.05rem; }

/* Spacer so fixed nav never covers page content */
.af-nav-spacer { height: var(--nav-h); }

/* Responsive nav ------------------------------------------------------- */
@media (max-width: 720px) {
    .af-brand span { display: none; }
    .af-brand img { width: 38px; height: 38px; }
    .af-tabs { flex: 1 1 auto; justify-content: center; }
    .af-tab { --tab-w: clamp(92px, 30vw, 132px); }
    .af-btn { height: 38px; padding: 0 12px; }
    .af-btn--icon { width: 38px; }
}
@media (max-width: 600px) {
    .af-brand { display: none; }
    .af-tabs { justify-content: flex-start; }
    .af-actions { gap: 6px; }
}
@media (max-width: 460px) {
    .af-nav__inner { gap: 8px; padding: 7px 12px; }
    .af-tab { --tab-w: clamp(72px, 21vw, 92px); min-width: 0; }
    .af-tab::after { font-size: .58rem; }
    .af-nav-link { font-size: .7rem; }
}

/* ============================================================================
   Reusable primitives (buttons, chips, cards, states)
   ============================================================================ */

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(14px, 3vw, 32px); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    transition: all .2s var(--ease);
}
.chip:hover { color: #fff; border-color: rgba(139,92,246,.45); background: var(--surface-2); }
.chip.active { background: rgba(139,92,246,.2); border-color: var(--brand); color: #fff; }

/* Loading spinner */
.af-spin {
    width: 34px; height: 34px;
    border: 3px solid rgba(255,255,255,.1);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: af-spin .7s linear infinite;
}
@keyframes af-spin { to { transform: rotate(360deg); } }

/* Skeleton shimmer */
@keyframes af-shimmer { 100% { background-position: -200% 0; } }
.af-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 37%, rgba(255,255,255,.04) 63%);
    background-size: 200% 100%;
    animation: af-shimmer 1.4s ease-in-out infinite;
}

/* Entrance animation utility */
@keyframes af-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.af-fade-up { animation: af-fade-up .5s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}