/* 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.
   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; the smallest S in use is 28 px.
   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; }
.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.45em; 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); } }