/*
 * Enjezly Bio marketing page — production identity alignment.
 * The original layout remains in bio_landing.html during gradual migration.
 */

:root[data-ej-theme="dark"] {
    --primary: var(--ej-action-primary);
    --primary-dark: var(--ej-action-primary-hover);
    --primary-light: var(--ej-primary-soft);
    --accent: var(--ej-accent);
    --accent-dark: var(--ej-action-accent-hover);
    --dark: var(--ej-page);
    --dark2: var(--ej-page-raised);
    --surface: var(--ej-surface);
    --surface2: var(--ej-surface-subtle);
    --text: var(--ej-text);
    --text-muted: var(--ej-text-muted);
    --white: var(--ej-color-neutral-0);
    --green: var(--ej-success);
    --border: var(--ej-border);
    --radius: var(--ej-radius-lg);
    --radius-sm: var(--ej-radius-md);
    --radius-lg: var(--ej-radius-xl);
}

/* Shared public shell. */
.main-header {
    background: var(--ej-header-bg);
    border-color: var(--ej-border);
    box-shadow: none;
    backdrop-filter: blur(14px);
}
.nav-links a:not(.login-button) { color: var(--ej-text-muted); }
.nav-links a:not(.login-button):hover { color: var(--ej-primary); }
.login-button,
.btn-primary-bio,
.btn-accent {
    background: var(--ej-action-primary);
    color: var(--ej-action-primary-text) !important;
    box-shadow: none;
    transition: background var(--ej-duration-fast) var(--ej-ease),
                transform var(--ej-duration-fast) var(--ej-ease);
}
.login-button:hover,
.btn-primary-bio:hover,
.btn-accent:hover {
    background: var(--ej-action-primary-hover);
    box-shadow: none;
    transform: translateY(-1px);
}
.main-footer { background: var(--ej-page-raised); border-color: var(--ej-border); }

/* Keep the hero composition, remove glow and autonomous movement. */
.bio-hero { background: var(--ej-page); }
.bio-hero::before,
.bio-hero::after,
.showcase-img-glow,
.bio-explainer::before { display: none; }
.bio-hero-badge,
.bio-hero-badge .dot,
.bio-hero-text h1,
.bio-hero-desc,
.bio-hero-ctas,
.bio-hero-note,
.bio-hero-visual,
.mock-phone,
.float-stat { animation: none; }
.bio-hero-text h1 em,
.section-label { color: var(--ej-primary); }
.bio-hero-badge {
    background: color-mix(in srgb, var(--ej-success) 12%, transparent);
    border-color: color-mix(in srgb, var(--ej-success) 32%, transparent);
    color: var(--ej-success);
}
.mock-phone {
    border-color: var(--ej-border);
    box-shadow: var(--ej-shadow-md);
}
.float-stat { box-shadow: var(--ej-shadow-sm); }
.theme-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    appearance: none;
}
.theme-dot.active { background: var(--ej-primary); transform: none; }

/* Calm section and card hierarchy. */
.stats-bar,
.themes-section,
.bio-showcase.alt,
.what-is-section { background: var(--ej-page-raised); }
#bio-features,
.bio-showcase,
.steps-section,
.faq-section { background: var(--ej-page); }
.feat-card,
.bio-explainer {
    background: var(--ej-surface);
    border-color: var(--ej-border);
}
.feat-card::before { display: none; }
.feat-card,
.theme-card {
    transition: border-color var(--ej-duration-fast) var(--ej-ease),
                box-shadow var(--ej-duration-fast) var(--ej-ease),
                transform var(--ej-duration-fast) var(--ej-ease);
}
.feat-card:hover,
.theme-card:hover {
    border-color: var(--ej-border-brand);
    box-shadow: var(--ej-shadow-sm);
    transform: translateY(-2px);
}
.feat-icon {
    background: var(--ej-primary-soft);
    color: var(--ej-primary);
}
.feat-icon svg { stroke: currentColor; }
.showcase-img img {
    border: 1px solid var(--ej-border);
    box-shadow: var(--ej-shadow-md);
}
.steps-grid { border-color: var(--ej-border); }
.step-num { color: var(--ej-border-brand); }

/* Reveal content immediately; scrolling is no longer an animation trigger. */
.reveal,
.reveal.visible {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Final CTA is a calm surface; the primary action carries the brand color. */
.final-cta {
    background: var(--ej-page-raised);
    border-color: var(--ej-border);
}
.final-cta::before { display: none; }

/* Keyboard focus and reduced motion are platform rules. */
.login-button:focus-visible,
.bio-hero a:focus-visible,
.theme-dot:focus-visible,
.faq-item summary:focus-visible,
.final-cta a:focus-visible {
    outline: 3px solid var(--ej-focus);
    outline-offset: 3px;
}

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