/* =================================================================
 * OVO Academy Logo — drop-in stylesheet
 * =================================================================
 *
 * Single-file logo system. Self-hosted Boska 700 italic + 5 sizes +
 * dark/light/mark-only variants. Zero external font dependency.
 *
 * Usage:
 *   <link rel="preload" as="font" type="font/woff2"
 *         href="/brand/boska-bold-italic.woff2" crossorigin>
 *   <link rel="stylesheet" href="/brand/ovo-logo.css">
 *
 *   <span class="ovo-logo">ovo<span class="ovo-logo__academy">academy</span><span class="ovo-logo__dot">.</span></span>
 *
 * Doc:  docs/brand/ovo-logo.md
 * SVG fallback (emails / PDFs):  /brand/ovo-academy-logo.svg
 * =================================================================
 */

/* --- Self-hosted Boska (no external CDN, no CSP fight, ~33KB) --- */
@font-face {
    font-family: 'Boska';
    src: url('/brand/boska-bold-italic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* --- Mark base. Cream "ovo" + red "academy" + glowing cream dot. --- */
.ovo-logo {
    font-family: 'Boska', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
    text-transform: lowercase;
    color: #f5f1e8;
    letter-spacing: -0.06em;
    font-size: 24px;
    display: inline-block;
    user-select: none;
    text-decoration: none;
}
.ovo-logo__academy {
    color: #FF0031;
    margin-left: 0.04em;
}
.ovo-logo__dot {
    color: #f5f1e8;
    margin-left: 0.04em;
    display: inline-block;
    text-shadow:
        0 0 12px rgba(255, 0, 49, 0.6),
        0 0 28px rgba(255, 0, 49, 0.3);
}

/* --- Sizes -------------------------------------------------------- */
.ovo-logo--xs { font-size: 14px; }
.ovo-logo--sm { font-size: 18px; }
.ovo-logo--md { font-size: 24px; }   /* default */
.ovo-logo--lg { font-size: 40px; }
.ovo-logo--xl { font-size: 64px; }
.ovo-logo--xxl { font-size: 96px; }

/* --- Variants ----------------------------------------------------- */

/* Mark only — "ovo." without "academy". Use in tight UI (nav, favicon-
   adjacent slot). */
.ovo-logo--mark .ovo-logo__academy { display: none; }
.ovo-logo--mark .ovo-logo__dot { margin-left: 0.02em; }

/* Mono — one solid color, no glow. For very subtle placements or where
   contrast against bg matters more than brand color. Apply
   `style="color: #xxx"` to override the cream. */
.ovo-logo--mono .ovo-logo__academy { color: inherit; }
.ovo-logo--mono .ovo-logo__dot {
    color: inherit;
    text-shadow: none;
}

/* Light — for use on cream / white / light backgrounds. Same brand
   colors but the dot's glow drops out (would smear on light bg) and
   the cream "ovo" + dot swap to OVO black. */
.ovo-logo--light { color: #1A1210; }
.ovo-logo--light .ovo-logo__dot {
    color: #1A1210;
    text-shadow: none;
}

/* Inverted — red "ovo", cream "academy", cream dot. Alternative
   creative direction; same mark, different weight. */
.ovo-logo--inverted { color: #FF0031; }
.ovo-logo--inverted .ovo-logo__academy { color: #f5f1e8; }

/* --- Optional pulse animation on the dot ------------------------- */
.ovo-logo--pulse .ovo-logo__dot {
    animation: ovo-logo-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes ovo-logo-dot-pulse {
    0%, 100% {
        text-shadow:
            0 0 12px rgba(255, 0, 49, 0.6),
            0 0 28px rgba(255, 0, 49, 0.3);
    }
    50% {
        text-shadow:
            0 0 20px rgba(255, 0, 49, 0.9),
            0 0 44px rgba(255, 0, 49, 0.55);
    }
}

/* --- Accessibility ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ovo-logo--pulse .ovo-logo__dot {
        animation: none;
    }
}