:root {
    --md-text-font: "Franklin Gothic", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 300;

    /* Primary Color: Rose 500 */
    --md-primary-fg-color: #f43f5e;
    --md-primary-fg-color--light: #fb7185;
    --md-primary-fg-color--dark: #e11d48;

    /* Accent Color: Sky 500 */
    --md-accent-fg-color: #0ea5e9;
    --md-accent-fg-color--transparent: rgba(14, 165, 233, 0.1);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__topic {
    font-family: "Franklin Gothic Heavy", "Franklin Gothic", sans-serif;
    font-weight: 700;
    /* Ensure the browser picks the heaviest variant */
    text-transform: uppercase;
    /* Optional: gives it that industrial/engineering look */
    /* letter-spacing: -0.02em; */
    /* Optional: tightens up the 'Heavy' look */
}

/* Light Mode Sync */
[data-md-color-scheme="default"] {
    --md-default-bg-color: #e2e8f0;
    /* Slate-200 */
    --md-default-fg-color: #1e293b;
    /* Slate-800 */
    --md-footer-bg-color: #cbd5e1;
    /* Slate-300 (Nav Bar) */
    --md-footer-bg-color--dark: #e2e8f0;
    /* Slate-200 (Meta Bar) */
}

/* Dark Mode Sync */
[data-md-color-scheme="slate"] {
    --md-default-bg-color: #0f172a;
    /* Slate-900 */
    --md-default-fg-color: #f1f5f9;
    /* Slate-100 */
    --md-card-bg-color: #1e293b;
    /* Slate-800 */
    --md-header-bg-color: #0f172a;
    /* Slate-900 */
    --md-footer-bg-color: #020617;
    /* Slate-950 (Nav Bar) */
    --md-footer-bg-color--dark: #0f172a;
    /* Slate-900 (Meta Bar) */
}

.md-header__button.md-logo img {
    height: 2rem;
    width: auto;
    border-radius: 4px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.3s ease-in-out;
}

.md-header__button.md-logo:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px #0ea5e9) drop-shadow(0 0 12px #0ea5e9);
}

/* Ensure the figure doesn't collapse or overlap */
.splash,
.fade-in {
    display: block;
    width: 100%;
    margin: 2rem 0;
    text-align: center;
    overflow: visible;
}

/* 2. Target the IMAGE for animation, transition, and height */
.splash img,
.fade-in img {
    height: 10.0em;
    width: auto;
    display: block;
    margin: 0 auto;

    /* Animation */
    opacity: 0;
    animation-name: mojoFadeIn;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;

    /* Transition - MUST be on the img for the scale to work */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.splash img:hover,
.fade-in img:hover {
    transform: scale(1.05);
}

/* Optional: Add a fade-in animation for that "Splash" feel */
@keyframes mojoFadeIn {
    from {
        opacity: 0;
        transform: translateY(0px);
    }

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

.fade-in {
    width: 50%;
    height: auto;
}