/* =============================================================
   AnimeX — Base Styles
   CSS Variables · Typography · Scrollbar · Layout Overrides
   ============================================================= */

/* ── CSS Custom Properties (Rule #3) ───────────────────────── */
:root {
    --primary:      #E50914;
    --primary-dark: #b9090b;
    --secondary:    #111111;
    --bg-base:      #0c0d14;
    --bg-panel:     #131522;
    --bg-card:      #1a1c2d;
    --text-main:    #e5e7eb;
    --text-muted:   #9ca3af;
    --border-base:  #1f2937;
    --radius-sm:    8px;
    --radius-lg:    16px;
    --radius-xl:    24px;

    /* Override GeneratePress accent variables to avoid dual-system conflict */
    --accent:       #E50914;
    --contrast:     #e5e7eb;
}

/* ── Base Typography & Background ───────────────────────────── */
body {
    font-family: 'Outfit', 'Noto Sans Bengali', sans-serif;
    background-color: var(--bg-base);
    color: var(--text-main);

    /* Layout: flex column so main.flex-grow keeps footer at bottom (Rule #1, #5) */
    display: flex;
    flex-direction: column;
    min-height: 100vh;

    /*
     * overflow-x: clip prevents horizontal scroll WITHOUT creating
     * a new Block Formatting Context — so position:sticky still works.
     * (Replaces overflow-x: hidden which breaks sticky in Firefox/Safari)
     */
    overflow-x: clip;
}

/* ── Selection Color (Rule #5 — CSS, not PHP body_class) ────── */
::selection {
    background: var(--primary);
    color: #fff;
}

/* ── Aspect Ratio Utility ───────────────────────────────────── */
.aspect-portrait {
    aspect-ratio: 2 / 3;
}

/* ── Screen Reader Only Utility ─────────────────────────────── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ── Custom Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar             { width: 8px; height: 8px; }
::-webkit-scrollbar-track       { background: var(--bg-base); }
::-webkit-scrollbar-thumb       { background: #25283a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3b3f5c; }

/* ── Single Anime — Full Width Override (GeneratePress) ─────── */
body.single-anime .site.grid-container { max-width: 1400px; width: 100%; }
body.single-anime .site-content,
body.single-anime #primary,
body.single-anime #main       { width: 100%; }

/* ── Header — GPU Layer for Smooth Sticky Scroll ────────────── */
.animex-header {
    will-change: transform;
}

/* ── Anime Card — Semantic Link Reset & Accessibility ────────── */
.anime-card {
    display: block; /* article is block, keeps grid working */
}

.anime-card__link {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.anime-card__link:hover  { text-decoration: none; color: inherit; }

/* Keyboard focus ring for accessibility */
.anime-card__link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--radius-xl);
}

/* ── Lenis Smooth Scroll Base ───────────────────────────────── */
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* ── Scroll Animations (Rule #9) ────────────────────────────── */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}