/* Contact cloaking — see static/js/modules/contactCloak.js
   The address is never in the markup; these styles cover the masked, clickable
   placeholder (an animated skeleton line) and the revealed link. Colours use
   currentColor / theme tokens so a cloak sits naturally in any context. */

:root {
    --cloak-skel-base: #e5e8ec;
    --cloak-skel-shine: #f4f6f9;
}
@media (prefers-color-scheme: dark) {
    :root {
        --cloak-skel-base: rgba(255, 255, 255, 0.09);
        --cloak-skel-shine: rgba(255, 255, 255, 0.2);
    }
}
/* The site + résumé page both drive dark mode via html[data-view-mode]; let it
   win over the OS media query in both directions. */
html[data-view-mode="dark"] {
    --cloak-skel-base: rgba(255, 255, 255, 0.09);
    --cloak-skel-shine: rgba(255, 255, 255, 0.2);
}
html[data-view-mode="light"] {
    --cloak-skel-base: #e5e8ec;
    --cloak-skel-shine: #f4f6f9;
}

.cloak-mail {
    cursor: pointer;
    font: inherit;
    color: inherit;
}

/* Reveal-in-place cloaks are <button>s; strip the native chrome so they read
   as part of the surrounding text. */
button.cloak-mail {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-align: left;
    vertical-align: middle;
}

.cloak-mail:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 4px;
}

.cloak-seen {
    font: inherit;
}

/* the redaction placeholder — a shimmering skeleton line covering the address */
.cloak-bar {
    display: inline-block;
    height: 0.95em;
    width: 9em;
    border-radius: 4px;
    vertical-align: middle;
    background-color: var(--cloak-skel-base);
    background-image: linear-gradient(
        100deg,
        var(--cloak-skel-base) 30%,
        var(--cloak-skel-shine) 50%,
        var(--cloak-skel-base) 70%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: cloak-shimmer 1.5s linear infinite;
}

@keyframes cloak-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cloak-inline {
    white-space: nowrap;
}

.cloak-revealed {
    color: inherit;
}

.cloak-mail[data-cloak-error]::after {
    content: " · unavailable, please retry";
    opacity: 0.7;
    font-size: 0.85em;
}

@media (prefers-reduced-motion: reduce) {
    .cloak-bar { animation: none; }
}