/* ============================================================
   Fancy 3D Text-Shadow Title (no Sass needed)
   Usage in HTML:
     <h1 class="font" style="font-size:66px;">P4<span>ADM</span></h1>
   ============================================================ */

/* Tune these two if you want different colours */
:root {
    --shadow-base: #E0E0E0; /* matches your light bg tone */
    --shadow-accent: salmon; /* accent for the <span> */
}

.theme-dark {
    --shadow-base: #d8d8d8; /* slightly dimmer in dark mode */
    --shadow-accent: salmon;
}

/* do not let the generic h1 color overwrite our effect */
.login-right h1.font {
    color: var(--shadow-base);
}

/* smooth animation */
.login-right .font,
.login-right .font span {
    transition: transform 1.2s ease, text-shadow 1.2s ease, color 1.2s ease;
}

.login-right .font {
    cursor: pointer;
    /* Base color of the main text */
    color: var(--shadow-base);
    /* Multi-layer text-shadow (compressed version of the CodePen mixin) */
    text-shadow: -1px 1px 0 rgba(0,0,0,0.10), 1px -1px 0 rgba(255,255,255,0.10), 1px -1px 25px rgba(255,255,255,0.65), -1px 1.9px 1px rgba(0,0,0,0.20), -2px 3.8px 2px rgba(0,0,0,0.18), -3px 5.7px 3px rgba(0,0,0,0.16), -4px 7.6px 4px rgba(0,0,0,0.15), -5px 9.5px 5px rgba(0,0,0,0.14), -6px 11.4px 6px rgba(0,0,0,0.13), -7px 13.3px 7px rgba(0,0,0,0.12), -8px 15.2px 8px rgba(0,0,0,0.11), -9px 17.1px 9px rgba(0,0,0,0.10), -10px 19.0px 10px rgba(0,0,0,0.09), -11px 20.9px 11px rgba(0,0,0,0.08), -12px 22.8px 12px rgba(0,0,0,0.07);
}

    .login-right .font span {
        color: var(--shadow-accent);
        text-shadow: -1px 1px 0 rgba(0,0,0,0.10), 1px -1px 0 rgba(255,255,255,0.12), 1px -1px 25px rgba(255,255,255,0.65), -1px 1.9px 1px rgba(128,0,0,0.20), -2px 3.8px 2px rgba(128,0,0,0.18), -3px 5.7px 3px rgba(128,0,0,0.16), -4px 7.6px 4px rgba(128,0,0,0.15), -5px 9.5px 5px rgba(128,0,0,0.14), -6px 11.4px 6px rgba(128,0,0,0.13), -7px 13.3px 7px rgba(128,0,0,0.12), -8px 15.2px 8px rgba(128,0,0,0.11), -9px 17.1px 9px rgba(128,0,0,0.10), -10px 19.0px 10px rgba(128,0,0,0.09), -11px 20.9px 11px rgba(128,0,0,0.08), -12px 22.8px 12px rgba(128,0,0,0.07);
    }

    /* Hover state roughly mimics the alternate mixin (reverses direction) */
    .login-right .font:hover {
        transform: translate3d(0, 12px, 0) rotate(-2deg);
        text-shadow: -1px -1px 0 rgba(0,0,0,0.10), 1px 1px 0 rgba(255,255,255,0.10), 1px -1px 25px rgba(255,255,255,0.65), -1px -1.9px 1px rgba(0,0,0,0.20), -2px -3.8px 2px rgba(0,0,0,0.18), -3px -5.7px 3px rgba(0,0,0,0.16), -4px -7.6px 4px rgba(0,0,0,0.15), -5px -9.5px 5px rgba(0,0,0,0.14), -6px -11.4px 6px rgba(0,0,0,0.13), -7px -13.3px 7px rgba(0,0,0,0.12), -8px -15.2px 8px rgba(0,0,0,0.11), -9px -17.1px 9px rgba(0,0,0,0.10), -10px -19.0px 10px rgba(0,0,0,0.09), -11px -20.9px 11px rgba(0,0,0,0.08), -12px -22.8px 12px rgba(0,0,0,0.07);
    }

        .login-right .font:hover span {
            text-shadow: -1px -1px 0 rgba(0,0,0,0.10), 1px 1px 0 rgba(255,255,255,0.12), 1px -1px 25px rgba(255,255,255,0.65), -1px -1.9px 1px rgba(128,0,0,0.20), -2px -3.8px 2px rgba(128,0,0,0.18), -3px -5.7px 3px rgba(128,0,0,0.16), -4px -7.6px 4px rgba(128,0,0,0.15), -5px -9.5px 5px rgba(128,0,0,0.14), -6px -11.4px 6px rgba(128,0,0,0.13), -7px -13.3px 7px rgba(128,0,0,0.12), -8px -15.2px 8px rgba(128,0,0,0.11), -9px -17.1px 9px rgba(128,0,0,0.10), -10px -19.0px 10px rgba(128,0,0,0.09), -11px -20.9px 11px rgba(128,0,0,0.08), -12px -22.8px 12px rgba(128,0,0,0.07);
        }



/* WORKFLOW  do not let the generic h1 color overwrite our effect */
.p4-title .fancy3d h1.font {
    color: var(--shadow-base);
}

/* smooth animation */
.p4-title .fancy3d .font,
.p4-title .fancy3d .font span {
    transition: transform 1.2s ease, text-shadow 1.2s ease, color 1.2s ease;
}

.p4-title .fancy3d .font {
    cursor: pointer;
    /* Base color of the main text */
    color: var(--shadow-base);
    /* Multi-layer text-shadow (compressed version of the CodePen mixin) */
    text-shadow: -1px 1px 0 rgba(0,0,0,0.10), 1px -1px 0 rgba(255,255,255,0.10), 1px -1px 25px rgba(255,255,255,0.65), -1px 1.9px 1px rgba(0,0,0,0.20), -2px 3.8px 2px rgba(0,0,0,0.18), -3px 5.7px 3px rgba(0,0,0,0.16), -4px 7.6px 4px rgba(0,0,0,0.15), -5px 9.5px 5px rgba(0,0,0,0.14), -6px 11.4px 6px rgba(0,0,0,0.13), -7px 13.3px 7px rgba(0,0,0,0.12), -8px 15.2px 8px rgba(0,0,0,0.11), -9px 17.1px 9px rgba(0,0,0,0.10), -10px 19.0px 10px rgba(0,0,0,0.09), -11px 20.9px 11px rgba(0,0,0,0.08), -12px 22.8px 12px rgba(0,0,0,0.07);
}

    .p4-title .fancy3d .font span {
        color: var(--shadow-accent);
        text-shadow: -1px 1px 0 rgba(0,0,0,0.10), 1px -1px 0 rgba(255,255,255,0.12), 1px -1px 25px rgba(255,255,255,0.65), -1px 1.9px 1px rgba(128,0,0,0.20), -2px 3.8px 2px rgba(128,0,0,0.18), -3px 5.7px 3px rgba(128,0,0,0.16), -4px 7.6px 4px rgba(128,0,0,0.15), -5px 9.5px 5px rgba(128,0,0,0.14), -6px 11.4px 6px rgba(128,0,0,0.13), -7px 13.3px 7px rgba(128,0,0,0.12), -8px 15.2px 8px rgba(128,0,0,0.11), -9px 17.1px 9px rgba(128,0,0,0.10), -10px 19.0px 10px rgba(128,0,0,0.09), -11px 20.9px 11px rgba(128,0,0,0.08), -12px 22.8px 12px rgba(128,0,0,0.07);
    }

    /* Hover state roughly mimics the alternate mixin (reverses direction) */
    .p4-title .fancy3d .font:hover {
        transform: translate3d(0, 12px, 0) rotate(-2deg);
        text-shadow: -1px -1px 0 rgba(0,0,0,0.10), 1px 1px 0 rgba(255,255,255,0.10), 1px -1px 25px rgba(255,255,255,0.65), -1px -1.9px 1px rgba(0,0,0,0.20), -2px -3.8px 2px rgba(0,0,0,0.18), -3px -5.7px 3px rgba(0,0,0,0.16), -4px -7.6px 4px rgba(0,0,0,0.15), -5px -9.5px 5px rgba(0,0,0,0.14), -6px -11.4px 6px rgba(0,0,0,0.13), -7px -13.3px 7px rgba(0,0,0,0.12), -8px -15.2px 8px rgba(0,0,0,0.11), -9px -17.1px 9px rgba(0,0,0,0.10), -10px -19.0px 10px rgba(0,0,0,0.09), -11px -20.9px 11px rgba(0,0,0,0.08), -12px -22.8px 12px rgba(0,0,0,0.07);
    }

        .p4-title .fancy3d .font:hover span {
            text-shadow: -1px -1px 0 rgba(0,0,0,0.10), 1px 1px 0 rgba(255,255,255,0.12), 1px -1px 25px rgba(255,255,255,0.65), -1px -1.9px 1px rgba(128,0,0,0.20), -2px -3.8px 2px rgba(128,0,0,0.18), -3px -5.7px 3px rgba(128,0,0,0.16), -4px -7.6px 4px rgba(128,0,0,0.15), -5px -9.5px 5px rgba(128,0,0,0.14), -6px -11.4px 6px rgba(128,0,0,0.13), -7px -13.3px 7px rgba(128,0,0,0.12), -8px -15.2px 8px rgba(128,0,0,0.11), -9px -17.1px 9px rgba(128,0,0,0.10), -10px -19.0px 10px rgba(128,0,0,0.09), -11px -20.9px 11px rgba(128,0,0,0.08), -12px -22.8px 12px rgba(128,0,0,0.07);
        }