/*
 * ═══════════════════════════════════════════════════════════════════════════════
 *  BioScript — PHASE 3: DESIGN ENGINE FOUNDATION
 *  All motion uses GPU-composited properties only (opacity, transform, filter).
 *  No layout-triggering properties in animations to prevent CLS.
 * ═══════════════════════════════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 1 — EXTENDED CSS CUSTOM PROPERTIES
   Base layer of design tokens. Theme DNA body classes override these.
────────────────────────────────────────────────────────────────────────────── */
:root {
    /* Card Shape Engine */
    --card-radius: 16px;

    /* Depth System */
    --shadow-depth: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-depth-inner: none;
    --elevation-bg: transparent;

    /* Motion System */
    --motion-duration: 0.4s;
    --motion-distance: 8px;
    --motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --glow-intensity: 0.2;

    /* Accent Auto-Sync (derived from --button-bg at runtime via JS) */
    --accent-soft: rgba(99, 102, 241, 0.12);
    --accent-glow: rgba(99, 102, 241, 0.35);

    /* Typography Packs */
    --font-heading: var(--font-primary, 'Inter', sans-serif);
    --font-body: var(--font-primary, 'Inter', sans-serif);
}

/* Apply heading/body fonts */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

body {
    font-family: var(--font-body);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 2 — DUAL MOTION PROFILES
   Toggled via body class. All transitions target GPU-only properties.
────────────────────────────────────────────────────────────────────────────── */

/* — Luxury: slow dignified entrance — */
body.motion-luxury .bio-card,
body.motion-luxury .btn-primary,
body.motion-luxury .btn-secondary,
body.motion-luxury [class*="bio-btn"] {
    transition:
        opacity var(--motion-duration) var(--motion-easing),
        transform var(--motion-duration) var(--motion-easing),
        box-shadow var(--motion-duration) var(--motion-easing);
}

@keyframes enterLuxury {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance));
    }

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

body.motion-luxury .bio-card {
    animation: enterLuxury var(--motion-duration) var(--motion-easing) both;
}

/* — Creator: snappy scale + glow — */
body.motion-creator .bio-card,
body.motion-creator .btn-primary,
body.motion-creator .btn-secondary,
body.motion-creator [class*="bio-btn"] {
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        box-shadow 0.35s ease,
        filter 0.35s ease;
}

@keyframes enterCreator {
    from {
        opacity: 0;
        transform: scale(0.97);
        filter: brightness(0.95);
    }

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

body.motion-creator .bio-card {
    animation: enterCreator 0.35s ease both;
}

body.motion-creator .bio-card:hover {
    box-shadow: 0 0 20px var(--accent-glow);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 3 — MOTION INTENSITY LEVELS
   Scales duration + distance. Applied via body class.
────────────────────────────────────────────────────────────────────────────── */
body.motion-static {
    --motion-duration: 0s;
    --motion-distance: 0px;
    --glow-intensity: 0;
}

body.motion-subtle {
    --motion-duration: 0.4s;
    --motion-distance: 6px;
    --glow-intensity: 0.15;
}

body.motion-dynamic {
    --motion-duration: 0.25s;
    --motion-distance: 12px;
    --glow-intensity: 0.35;
}

/* Static: disable all non-essential animations */
body.motion-static .bio-card,
body.motion-static [class*="bio-btn"] {
    animation: none !important;
    transition: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 4 — DEPTH MODE SYSTEM
   Controls shadow elevation and card texture.
────────────────────────────────────────────────────────────────────────────── */

/* Flat — no shadows, no elevation */
body.depth-flat {
    --shadow-depth: none;
    --shadow-depth-inner: none;
    --elevation-bg: transparent;
}

body.depth-flat .bio-card {
    box-shadow: none !important;
}

/* Soft — subtle shadow, clean */
body.depth-soft {
    --shadow-depth: 0 4px 16px rgba(0, 0, 0, 0.2);
}

body.depth-soft .bio-card {
    box-shadow: var(--shadow-depth);
}

/* Layered — full elevation with accent glow and inner gradient */
body.depth-layered {
    --shadow-depth: 0 8px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

body.depth-layered .bio-card {
    box-shadow:
        var(--shadow-depth),
        0 0 30px var(--accent-glow);
    background-image: linear-gradient(to bottom right,
            rgba(255, 255, 255, 0.04),
            transparent 60%);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 5 — GLASS MODE
   Optional overlay class. Graceful degradation via @supports.
────────────────────────────────────────────────────────────────────────────── */
@supports (backdrop-filter: blur(1px)) {

    .glass-mode .bio-card,
    .glass-mode .card-base {
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {

    .glass-mode .bio-card,
    .glass-mode .card-base {
        background: rgba(15, 23, 42, 0.85) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 6 — CARD SHAPE ENGINE
   --card-radius controlled by body shape class.
   Applied to all card-like elements globally.
────────────────────────────────────────────────────────────────────────────── */
body.shape-rounded {
    --card-radius: 16px;
}

body.shape-sharp {
    --card-radius: 4px;
}

body.shape-pill {
    --card-radius: 999px;
}

body.shape-soft {
    --card-radius: 24px;
}

/* Apply the token globally */
.bio-card,
.card-base,
[class*="bio-btn"],
.btn-primary,
.btn-secondary {
    border-radius: var(--card-radius);
}

/* Buttons get a slightly smaller radius (half of card) */
.btn-primary,
.btn-secondary,
[class*="bio-btn"] {
    border-radius: calc(var(--card-radius) * 0.75);
}

/* Override btn-radius from ThemeRegistry if card shape is set */
body[class*="shape-"] .bio-card {
    border-radius: var(--card-radius) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 7 — ACCENT AUTO-SYNC ENGINE
   --accent-soft and --accent-glow must be overridden at :root when the
   theme DNA is applied via JS (see index.php script injection).
   These utility classes let any element consume the auto-synced accent.
────────────────────────────────────────────────────────────────────────────── */
.accent-glow-border {
    border-color: var(--accent-glow) !important;
    box-shadow: 0 0 12px var(--accent-glow);
}

.accent-soft-bg {
    background: var(--accent-soft) !important;
}

.accent-text {
    color: var(--button-bg);
}

/* Shadow tinting via accent */
body.depth-layered .bio-card,
body.depth-soft .bio-card:hover {
    box-shadow:
        var(--shadow-depth),
        0 0 calc(30px * var(--glow-intensity)) var(--accent-glow);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 8 — TYPOGRAPHY PACKS
   Body classes set --font-heading and --font-body CSS vars.
   Fonts are loaded conditionally in PHP (index.php).
────────────────────────────────────────────────────────────────────────────── */

/* luxury_serif: Playfair Display headings, Lato body */
body.typo-luxury_serif {
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Lato', 'Helvetica Neue', sans-serif;
}

body.typo-luxury_serif h1,
body.typo-luxury_serif h2,
body.typo-luxury_serif h3 {
    letter-spacing: -0.01em;
}

/* modern_grotesk: Plus Jakarta Sans headings, Inter body */
body.typo-modern_grotesk {
    --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
}

/* creator_bold: Space Grotesk headings, DM Sans body */
body.typo-creator_bold {
    --font-heading: 'Space Grotesk', 'Inter', sans-serif;
    --font-body: 'DM Sans', system-ui, sans-serif;
}

body.typo-creator_bold h1,
body.typo-creator_bold h2 {
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* mono_minimal: JetBrains Mono everywhere */
body.typo-mono_minimal {
    --font-heading: 'JetBrains Mono', 'Courier New', monospace;
    --font-body: 'JetBrains Mono', 'Courier New', monospace;
}

body.typo-mono_minimal h1,
body.typo-mono_minimal h2 {
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* elegant_pair: Cormorant Garamond headings, Nunito body */
body.typo-elegant_pair {
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Nunito', 'Helvetica', sans-serif;
}

body.typo-elegant_pair h1,
body.typo-elegant_pair h2 {
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION 9 — STAGGER ANIMATION UTILITY
   Optional: add data-enter-delay="1-5" to stagger child elements.
   GPU-safe: opacity + transform only.
────────────────────────────────────────────────────────────────────────────── */
body:not(.motion-static) [data-enter-delay="1"] {
    animation-delay: 0.05s !important;
}

body:not(.motion-static) [data-enter-delay="2"] {
    animation-delay: 0.10s !important;
}

body:not(.motion-static) [data-enter-delay="3"] {
    animation-delay: 0.15s !important;
}

body:not(.motion-static) [data-enter-delay="4"] {
    animation-delay: 0.20s !important;
}

body:not(.motion-static) [data-enter-delay="5"] {
    animation-delay: 0.25s !important;
}