/* ═══════════════════════════════════════════════════════════════
   base.css — Foundation & Layout (Obsidian Kinetic)
   Reset, typography, page container, ambient backdrop
   ═══════════════════════════════════════════════════════════════ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    font-family: var(--font);
}

body {
    background: var(--bg);
    font-family: var(--font);
    font-size: var(--text-body, 14px);
    line-height: 1.5;
    letter-spacing: -0.14px;
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    transition: background-color var(--dur-2) ease, color var(--dur-2) ease;
}

/* Persian: Vazirmatn everywhere — generous line-height for joined scripts,
   no negative tracking (it distorts Arabic-script letterforms) */
[lang="fa"],
[dir="rtl"] body,
body.rtl {
    font-family: var(--font-fa);
    line-height: 1.75;
    letter-spacing: 0;
}

/* Tracking pulls joined letters apart, and Vazirmatn ships only 400–600,
   so 700+ would be faux-bolded — use the real 600 face instead. */
:root:is([lang="fa"], [dir="rtl"]) * {
    letter-spacing: 0 !important;
    font-synthesis-weight: none;
}

[lang="fa"] ::selection,
[dir="rtl"] ::selection {
    background: rgba(86, 131, 218, 0.32);
}

::selection {
    background: rgba(86, 131, 218, 0.28);
    color: #ffffff;
}

[data-theme="light"] ::selection {
    background: rgba(86, 131, 218, 0.2);
    color: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    letter-spacing: inherit;
}

img {
    display: block;
    max-width: 100%;
}

/* ── Page container — wide fluid enterprise layout ──
   One shared container: navbar, hero, and every section align to it. */
.page {
    position: relative;
    z-index: 1;
    width: calc(100% - 48px);
    max-width: 1720px;
    margin: 0 auto;
    padding: 16px 0 32px;
}

@media (max-width: 768px) {
    .page {
        width: calc(100% - 24px);
        padding: 12px 0 24px;
    }
}

/* Phase 7: <480px small mobile - compress the shell gutters so the four
   footer columns (already collapsed to one) and the resource cards keep
   their breathing room. I2: this only shrinks width, never introduces
   overflow. */
@media (max-width: 480px) {
    .page {
        width: calc(100% - 16px);
        padding: 10px 0 20px;
    }
}

/* ── Ambient backdrop — Obsidian Kinetic ──────────────────────────────
   Pure CSS only, and fully static: no shader, no animation, no script (D5).
   Layer order: body void -> .aura-base (wash + vignette)
   -> .aura-glow-1 (amber bloom, top-right) -> .aura-glow-2 (indigo bloom,
   bottom-left). All sit behind .page (z-index 1) and behind .nav (z-index 50).
   Colours come from --color-ember-pulse / --color-electric-iris via
   color-mix(), with a literal rgba() declared first as a fallback for
   engines without color-mix support. */
.aura-backdrop {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* Base wash + peripheral vignette (depth without an extra element). */
.aura-base {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120% 95% at 50% 45%,
            transparent 0%,
            transparent 45%,
            var(--bg) 100%);
}

.aura-glow-1 {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 80vw;
    height: 80vw;
    border-radius: 50%;
    background: radial-gradient(circle at center,
            rgba(255, 184, 0, 0.10) 0%,
            rgba(255, 184, 0, 0.04) 40%,
            transparent 70%);
    background: radial-gradient(circle at center,
            color-mix(in srgb, var(--color-ember-pulse) 10%, transparent) 0%,
            color-mix(in srgb, var(--color-ember-pulse) 4%, transparent) 40%,
            transparent 70%);
    filter: blur(80px);
    opacity: 0.6;
    pointer-events: none;
}

.aura-glow-2 {
    position: absolute;
    bottom: -15%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    border-radius: 50%;
    background: radial-gradient(circle at center,
            rgba(195, 192, 255, 0.07) 0%,
            transparent 65%);
    background: radial-gradient(circle at center,
            color-mix(in srgb, var(--color-electric-iris) 7%, transparent) 0%,
            transparent 65%);
    filter: blur(100px);
    opacity: 0.4;
    pointer-events: none;
}

/* No matching element exists in the markup; rule retained unchanged. */
.aura-vignette {
    display: none;
}

[data-theme="dark"] .aura-glow-1 {
    background: radial-gradient(circle at center,
            rgba(255, 184, 0, 0.10) 0%,
            rgba(255, 184, 0, 0.04) 40%,
            transparent 70%);
    background: radial-gradient(circle at center,
            color-mix(in srgb, var(--color-ember-pulse) 10%, transparent) 0%,
            color-mix(in srgb, var(--color-ember-pulse) 4%, transparent) 40%,
            transparent 70%);
}

[data-theme="dark"] .aura-glow-2 {
    background: radial-gradient(circle at center,
            rgba(195, 192, 255, 0.07) 0%,
            transparent 65%);
    background: radial-gradient(circle at center,
            color-mix(in srgb, var(--color-electric-iris) 7%, transparent) 0%,
            transparent 65%);
}

/* Light theme: the obsidian aesthetic is dark-primary, so the backdrop is
   barely perceptible — a faint warm tint only. */
[data-theme="light"] .aura-glow-1 {
    opacity: 0.08;
}

[data-theme="light"] .aura-glow-2 {
    opacity: 0.05;
}

[data-theme="light"] .aura-base {
    background: radial-gradient(ellipse 120% 95% at 50% 45%,
            transparent 0%,
            transparent 55%,
            var(--bg) 100%);
}

/* ── Animations (reduced-motion aware) ── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translateX(100%)
    }
}

.anim-fade-up {
    animation: fadeUp 220ms var(--ease) both;
}

.stagger>* {
    animation: fadeUp 220ms var(--ease) both;
}

.stagger>*:nth-child(1) {
    animation-delay: 0
}

.stagger>*:nth-child(2) {
    animation-delay: 40ms
}

.stagger>*:nth-child(3) {
    animation-delay: 80ms
}

.stagger>*:nth-child(4) {
    animation-delay: 120ms
}

.stagger>*:nth-child(5) {
    animation-delay: 160ms
}

.stagger>*:nth-child(6) {
    animation-delay: 200ms
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Phase 7: the Enterprise Footer and the Phase 4 resource cards both
       animate on hover. The 0.01ms duration above already collapses the
       transition, but the transform itself is motion - neutralise it so
       nothing shifts spatially for reduced-motion users. */
    .footer a,
    .social-icon-btn,
    .copyright-text {
        transition: none !important;
    }

    .resource-card:hover {
        transform: none !important;
    }

    .resource-card:hover .resource-arrow {
        transform: none !important;
    }
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--n-5);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--n-6);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #4a4b50;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #6b6c6d;
}

:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}