/* The brand (T-96, the owner's animated brand, 2026-09-13): one component, .mm-logo, built by ds/brand.js and painted here on every
   surface that shows the product as a mark - the sign-in page, the loading screen, the mail top bar, the account heading, the boot-failure
   cards, the console, the public pages. It is (1) the MARK: a planet in the active palette's accent with a moon in its second accent, a
   conic glow orbiting behind the planet (6 s), a thin ring with a satellite orbiting the other way (9 s), the planet breathing (3.4 s), a
   light sheen sweeping its surface (4.6 s), the moon orbiting in front (7 s) with its shading kept upright; (2) the WORDMARK "UAE.com" in
   Outfit 800 with a periodic accent light-sweep and a gradient underline that draws in and out; (3) the MASCOT in place of the word
   "Email": an envelope in the accent with blinking, glancing eyes and moon-coloured hands, changing its activity every minute on a
   five-minute loop (a wave, thinking, reading, coding, sleeping - the wave is the resting state). The pill around them is the glass
   (var(--glass) fill, 1 px var(--glass-border), radius 999px) and glows on hover - except on the sign-in header, where it is the
   header's own stronger glass under a backdrop blur (the rule below .mm-logo: the header sits over the page's sky scene).
   Sizing: the mark size S is --mm-logo-s (set inline by the builder, or inherited from the host so a screen can size it by CSS); the
   wordmark is 0.6 S, the mascot 1.62 em x 1.36 em of the wordmark and 0.2 em after it (the owner's export, in all six instances; T-104 adopted it from
   0.45 em); the smallest S in use is 28 px. Under 340 px the sign-in header shows the mark and the wordmark without the mascot (the rule under the
   sign-in host's): the mascot is aria-hidden, so the brand still reads "UAE.com Email" there.
   Colour: --lp / --lm (the design's planet and moon) are the app's --color-accent / --color-accent-2, so the mark is the chosen palette's
   in both themes; the design's 30 s palette cycling (its @keyframes mm-palette) is not ported - a mark that changes colour beside a
   fixed-palette interface reads as a glitch. Every other animation runs, all of them CSS (no script drives the motion, the activity
   change included), and every one stops under prefers-reduced-motion and the app's own motion switch (html[data-motion="off"]). */
.mm-logo { --s: var(--mm-logo-s, 36px); --lp: var(--color-accent); --lm: var(--color-accent-2); position: relative; display: inline-flex; align-items: center; gap: 11px; padding: 5px 16px 5px 5px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-border); box-sizing: border-box; flex: none; min-width: 0; color: var(--color-text); text-decoration: none; transition: box-shadow 0.25s; }
/* the sign-in header (the host data-mm-logo-host="signin"): the header floats over the page's sky scene, and the dark theme paints that
   scene bright from the moment the address is typed (the morning and afternoon clouds behind the address-typed, password and
   password-typed steps) - the default pill's var(--glass) (rgba(255,255,255,.055), flat) left the wordmark's light ink on the raw sky
   there at 1.07:1. On that host the pill takes the header's own glass, the domain pill's beside it: var(--glass-strong) under a
   22 px backdrop blur, the header's shadow - the ground the old brand block had, which read 8.5:1 on the same frames (both themes,
   every step; the hover glow below still wins on hover: the same specificity, later) */
[data-mm-logo-host="signin"] .mm-logo { background: var(--glass-strong); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); box-shadow: var(--shadow-sm); }
/* the narrowest phones (T-104): the address step's header row is the brand pill, the domain pill (30 px at least: its lock icon in its padding), the Sign up icon and the
   theme toggle (44 px each) with the header's 12 px sides and its gaps - 328 px with the mascot at S 28, 297 without it - so under 340 px the sign-in host drops the
   mascot (aria-hidden already: the brand's name and its wordmark stay) and a 320 px phone keeps every pill whole. S stays 28 and the wordmark stays: the T-96 rule */
@media (max-width: 339px) { [data-mm-logo-host="signin"] .mm-logo-mascot { display: none; } }
.mm-logo:hover { box-shadow: 0 0 28px -8px var(--neon-glow), inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.mm-logo-bare, .mm-logo-bare:hover { padding: 0; background: transparent; border-color: transparent; box-shadow: none; } /* a heading's mark: no pill, the text runs on */
/* the mark */
.mm-logo-mark { position: relative; width: var(--s); height: var(--s); flex: none; user-select: none; -webkit-user-select: none; }
.mm-logo-mark > span { position: absolute; border-radius: 50%; }
.mm-logo-glow { inset: -5px; background: conic-gradient(from 0deg, var(--lp), var(--lm), var(--lp)); filter: blur(9px); opacity: 0.65; animation: mm-logo-orbit 6s linear infinite; }
.mm-logo-ring { inset: -2px; border: 1.5px solid color-mix(in srgb, var(--lm) 55%, transparent); animation: mm-logo-orbit 9s linear infinite reverse; }
.mm-logo-sat { position: absolute; left: 50%; top: -3px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--lm); box-shadow: 0 0 10px var(--lm); }
.mm-logo-planet { inset: 0; overflow: hidden; background-color: var(--lp); background-image: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lp) 70%, white), var(--lp) 60%, color-mix(in srgb, var(--lp) 62%, black)); box-shadow: inset 0 -4px 8px color-mix(in srgb, black 35%, transparent), 0 0 18px -2px color-mix(in srgb, var(--lp) 65%, transparent); animation: mm-logo-breathe 3.4s ease-in-out infinite; }
.mm-logo-sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 48%, transparent 62%); background-size: 240% 100%; animation: mm-logo-sheen 4.6s ease-in-out infinite; mix-blend-mode: screen; }
.mm-logo-orbit { inset: 0; animation: mm-logo-orbit 7s linear infinite; }
.mm-logo-moon { position: absolute; left: 50%; top: -8%; width: 40%; height: 40%; margin-left: -20%; border-radius: 50%; background-color: var(--lm); background-image: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--lm) 70%, white), var(--lm) 65%, color-mix(in srgb, var(--lm) 70%, black)); box-shadow: 0 0 12px color-mix(in srgb, var(--lm) 65%, transparent), inset -2px -2px 4px color-mix(in srgb, black 25%, transparent); animation: mm-logo-spin 7s linear infinite; }
/* the wordmark: Outfit 800 at 0.6 S; the text is real text (a heading keeps it for copy and selection), the sweep paints it through
   background-clip; " Email" follows it for the clipboard and text readers of the markup, clipped from view (the mascot is the word) */
.mm-logo-word { position: relative; display: inline-block; font-family: Outfit, var(--font-body, system-ui, sans-serif); font-weight: 800; font-size: calc(var(--s) * 0.6); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: var(--color-text); }
.mm-logo-text { background: linear-gradient(90deg, var(--color-text) 0%, var(--color-text) 40%, var(--lp) 50%, var(--color-text) 60%, var(--color-text) 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mm-logo-word 5.5s ease-in-out infinite; }
.mm-logo-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm-logo-mascot { width: 1.62em; height: 1.36em; vertical-align: -0.34em; margin-left: 0.2em; overflow: visible; flex: none; }
.mm-logo-line { position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lp), var(--lm)); transform-origin: left; animation: mm-logo-line 5.5s ease-in-out infinite; }
/* the mascot's parts (the classes the builder writes; the fixed inks - the eyes, the pupils, the paper, the laptop - are the design's own) */
.mml-body { animation: mm-logo-bob 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mml-env { fill: var(--lp); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--lp) 55%, transparent)); }
.mml-flap { fill: none; stroke: color-mix(in srgb, var(--lp) 55%, black); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.mml-eyes { animation: mm-logo-blink 4.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mml-look { animation: mm-logo-look 6s ease-in-out infinite; }
.mml-lp { fill: var(--lp); }
.mml-lm { fill: var(--lm); }
.mml-hand { fill: var(--lm); stroke: color-mix(in srgb, var(--lm) 55%, black); stroke-width: 1.2; }
.mml-arm { fill: none; stroke: var(--lm); stroke-width: 3.4; stroke-linecap: round; }
.mml-glyph { fill: none; stroke: var(--lm); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; } /* the design's little words (bye!, z z z, the code) drawn as strokes, so the mascot carries no text of its own */
.mml-code { fill: none; stroke: var(--lm); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.mml-slot { transform-box: fill-box; transform-origin: center; }
.mml-s0 { opacity: 1; } .mml-s1, .mml-s2, .mml-s3, .mml-s4 { opacity: 0; } /* the rest state: the wave alone, until the loop moves on */
.mml-s0 { animation: mm-logo-slot0 300s linear infinite; } .mml-s1 { animation: mm-logo-slot1 300s linear infinite; } .mml-s2 { animation: mm-logo-slot2 300s linear infinite; } .mml-s3 { animation: mm-logo-slot3 300s linear infinite; } .mml-s4 { animation: mm-logo-slot4 300s linear infinite; }
.mml-wave { animation: mm-logo-wave 0.8s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 66px 50px; }
.mml-float { animation: mm-logo-float 2.2s ease-in-out infinite; }
.mml-float2 { animation: mm-logo-float 2.6s ease-in-out infinite; }
.mml-float3 { animation: mm-logo-float 2.4s ease-in-out infinite; }
.mml-dot { fill: #171a2b; animation: mm-logo-dot 1.2s ease-in-out infinite; } .mml-dot + .mml-dot { animation-delay: 0.2s; } .mml-dot + .mml-dot + .mml-dot { animation-delay: 0.4s; }
.mml-paper { animation: mm-logo-paper 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mml-cursor { animation: mm-logo-cursor 1s steps(1) infinite; }
.mml-tap { animation: mm-logo-tap 0.36s ease-in-out infinite alternate; } .mml-tap2 { animation-delay: 0.18s; }
.mml-z { animation: mm-logo-zzz 2.4s ease-out infinite; } .mml-z2 { animation-delay: 0.8s; } .mml-z3 { animation-delay: 1.6s; }
/* motion off: the OS setting, or the app's own switch; the mascot rests on its wave (the first activity, visible without the loop) */
@media (prefers-reduced-motion: reduce) { .mm-logo, .mm-logo * { animation: none !important; } }
html[data-motion="off"] .mm-logo, html[data-motion="off"] .mm-logo * { animation: none !important; }
@keyframes mm-logo-orbit { to { transform: rotate(360deg); } }
@keyframes mm-logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes mm-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes mm-logo-sheen { 0%, 60%, 100% { background-position: 120% 0; } 30% { background-position: -120% 0; } }
@keyframes mm-logo-word { 0%, 55%, 100% { background-position: 130% 0; } 25% { background-position: -130% 0; } }
@keyframes mm-logo-line { 0%, 10% { transform: scaleX(0); opacity: 0; } 30%, 60% { transform: scaleX(1); opacity: 1; } 80%, 100% { transform: scaleX(0); transform-origin: right; opacity: 0; } }
@keyframes mm-logo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes mm-logo-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
@keyframes mm-logo-look { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(1.6px); } 60% { transform: translateX(-1.6px); } }
@keyframes mm-logo-wave { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }
@keyframes mm-logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mm-logo-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes mm-logo-paper { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes mm-logo-tap { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes mm-logo-cursor { 50% { opacity: 0; } }
@keyframes mm-logo-zzz { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-9px); opacity: 0; } }
@keyframes mm-logo-slot0 { 0%, 19.6% { opacity: 1; transform: scale(1); } 20%, 99.6% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mm-logo-slot1 { 0%, 19.6% { opacity: 0; transform: scale(0.85); } 20%, 39.6% { opacity: 1; transform: scale(1); } 40%, 100% { opacity: 0; transform: scale(0.85); } }
@keyframes mm-logo-slot2 { 0%, 39.6% { opacity: 0; transform: scale(0.85); } 40%, 59.6% { opacity: 1; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(0.85); } }
@keyframes mm-logo-slot3 { 0%, 59.6% { opacity: 0; transform: scale(0.85); } 60%, 79.6% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(0.85); } }
@keyframes mm-logo-slot4 { 0%, 79.6% { opacity: 0; transform: scale(0.85); } 80%, 99.6% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.85); } }