/*
Theme Name: Metronyx AI Landing
Theme URI: https://metronyxai.com
Author: Metronyx
Description: Single-page animated wordmark theme for Metronyx cold-outreach domains. No comments, no menus, no widgets — just the brand mark and the AEO God Mode plugin doing its thing in the background.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: metronyx-ai
*/

:root {
    --bg-0:        #0a0a0f;
    --bg-1:        #0f172a;
    --cyan-500:    #0ea5e9;
    --cyan-400:    #06b6d4;
    --cyan-300:    #34e2e4;
    --text:        #f1f5f9;
    --text-dim:    #64748b;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--bg-0);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif;
    overflow: hidden;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(14, 165, 233, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(6, 182, 212, 0.10) 0%, transparent 55%),
        var(--bg-0);
    user-select: none;
    cursor: default;
}

.mxai-stage {
    position: relative;
    text-align: center;
}

.mxai-mark {
    font-size: clamp(48px, 12vw, 184px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.95;
    margin: 0;

    background: linear-gradient(
        110deg,
        var(--cyan-500) 0%,
        var(--cyan-300) 40%,
        var(--cyan-400) 60%,
        var(--cyan-500) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    animation: mxai-sweep 4.5s ease-in-out infinite;
}

@keyframes mxai-sweep {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.mxai-mark .ai {
    font-weight: 300;
    letter-spacing: -0.02em;
    opacity: 0.92;
}

.mxai-cursor {
    display: inline-block;
    width: 0.06em;
    height: 0.85em;
    margin-left: 0.06em;
    background: var(--cyan-500);
    vertical-align: text-bottom;
    animation: mxai-blink 1.1s steps(2) infinite;
    box-shadow: 0 0 18px rgba(14, 165, 233, 0.55);
}

@keyframes mxai-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.mxai-tag {
    margin-top: 22px;
    font-size: 13px;
    letter-spacing: 0.42em;
    color: var(--text-dim);
    text-transform: uppercase;
    opacity: 0;
    animation: mxai-fade-in 0.9s 0.7s ease-out forwards;
}

@keyframes mxai-fade-in {
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .mxai-mark   { animation: none; background-position: 0 0; }
    .mxai-cursor { animation: none; opacity: 1; }
    .mxai-tag    { animation: none; opacity: 1; }
}

/* WP-required boilerplate so the theme passes the theme-check sniff. */
.wp-block-image, .alignwide, .alignfull { max-width: 100%; }