/* ============================================
   Tronavo — Coming Soon
   Palette: #0A0D14 (void) / #151B2C (panel) / #FF6A1A (signal) /
            #FFB454 (amber) / #F4F1EA (paper) / #8B93A6 (slate)
   Display: Space Grotesk · Body: Inter · Data: JetBrains Mono
   ============================================ */

   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --void: #0a0d14;
    --panel: #151b2c;
    --signal: #ff6a1a;
    --signal-dim: rgba(255, 106, 26, 0.35);
    --amber: #ffb454;
    --paper: #f4f1ea;
    --slate: #8b93a6;
}

body {
    font-family: 'Inter', sans-serif;
    background: radial-gradient(ellipse 80% 60% at 50% 35%, #1b2238 0%, var(--void) 55%, #07090f 100%);
    background-attachment: fixed;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    color: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- Grid + vignette ---------- */

.grid {
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 106, 26, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 106, 26, 0.06) 1px, transparent 1px);
    background-size: 56px 56px;
    animation: gridMove 24s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes gridMove {
    0% { background-position: 0 0; }
    100% { background-position: 0 56px; }
}

.vignette {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, var(--void) 100%);
    pointer-events: none;
    z-index: 1;
}

/* ---------- Container ---------- */

.container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------- Status eyebrow ---------- */

.status-line {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.65rem, 1.6vw, 0.8rem);
    letter-spacing: 0.18em;
    color: var(--amber);
    margin-bottom: 2.5rem;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(255, 180, 84, 0.25);
    border-radius: 999px;
    background: rgba(255, 106, 26, 0.05);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 8px 2px var(--signal-dim);
    animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}

/* ---------- Signature element: the mark ---------- */

.mark {
    position: relative;
    width: clamp(180px, 32vw, 260px);
    height: clamp(180px, 32vw, 260px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.logo-image {
    position: relative;
    z-index: 3;
    width: 40%;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(255, 106, 26, 0.5));
}

.vortex-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid transparent;
}

/* Each ring is a conic-gradient arc that spins */
.ring-outer {
    inset: 0;
    background: conic-gradient(from 0deg, transparent 0%, var(--signal-dim) 15%, transparent 35%, transparent 60%, rgba(255,180,84,0.3) 75%, transparent 95%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    animation: spin 14s linear infinite;
}

.ring-mid {
    inset: 16%;
    background: conic-gradient(from 90deg, transparent 0%, rgba(255,180,84,0.5) 10%, transparent 30%, transparent 65%, var(--signal-dim) 80%, transparent 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    animation: spin 9s linear infinite reverse;
}

.ring-inner {
    inset: 32%;
    background: conic-gradient(from 200deg, transparent 0%, var(--signal) 8%, transparent 25%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
    animation: spin 6s linear infinite;
    filter: drop-shadow(0 0 6px var(--signal));
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---------- Wordmark + copy ---------- */

.logo {
    font-family: 'Audiowide', 'Space Grotesk', sans-serif;
    font-size: clamp(2.2rem, 6.6vw, 3.4rem);
    font-weight: 400;
    color: var(--paper);
    letter-spacing: clamp(1px, 0.6vw, 3px);
    margin-bottom: 0.85rem;
    text-shadow: 0 0 24px rgba(255, 106, 26, 0.45);
}

.logo-soft {
    color: var(--amber);
    opacity: 0.92;
}

.tagline {
    font-size: clamp(0.85rem, 2.4vw, 1.05rem);
    color: var(--slate);
    letter-spacing: 0.04em;
    margin-bottom: 3rem;
    max-width: 32ch;
}

.coming-soon {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.3rem, 4.2vw, 2rem);
    color: var(--paper);
    font-weight: 500;
    letter-spacing: clamp(1px, 0.6vw, 3px);
    margin-bottom: 1.6rem;
}

.dots::after {
    content: '';
    display: inline-block;
    width: 1.4em;
    text-align: left;
    animation: dots 1.6s steps(4, end) infinite;
}

@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
    100% { content: ''; }
}

/* ---------- Progress indicator ---------- */
/* Thematic choice for an automation company: not a generic loading bar,
   but a "build" line — finite-feeling rather than an endless shimmer. */

.progress-track {
    width: clamp(160px, 30vw, 220px);
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, var(--signal), var(--amber));
    border-radius: 999px;
    animation: build 3.2s ease-in-out infinite;
    box-shadow: 0 0 10px var(--signal-dim);
}

@keyframes build {
    0% { width: 8%; margin-left: 0%; }
    45% { width: 60%; margin-left: 5%; }
    100% { width: 8%; margin-left: 92%; }
}

/* ---------- Circuit lines ---------- */

.circuit-line {
    position: fixed;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--signal-dim), transparent);
    pointer-events: none;
    z-index: 0;
}

.circuit-line.horizontal {
    width: 320px;
    animation: slideHorizontal 9s linear infinite;
}

.circuit-line.vertical {
    width: 1px;
    height: 320px;
    background: linear-gradient(180deg, transparent, var(--signal-dim), transparent);
    animation: slideVertical 11s linear infinite;
}

.line1 { top: 22%; left: -320px; animation-delay: 0s; }
.line2 { top: 78%; left: -320px; animation-delay: 4.5s; }
.line3 { left: 18%; top: -320px; animation-delay: 2s; }
.line4 { right: 22%; top: -320px; animation-delay: 6.5s; }

@keyframes slideHorizontal {
    0% { left: -320px; }
    100% { left: 100%; }
}

@keyframes slideVertical {
    0% { top: -320px; }
    100% { top: 100%; }
}

/* ---------- Ambient particles ---------- */

.particle {
    position: fixed;
    width: 3px;
    height: 3px;
    background: var(--amber);
    border-radius: 50%;
    pointer-events: none;
    animation: particle 16s linear infinite;
    z-index: 0;
    box-shadow: 0 0 4px rgba(255, 180, 84, 0.7);
}

@keyframes particle {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.8; }
    100% { transform: translate(90vw, 95vh); opacity: 0; }
}

.particle:nth-child(1) { top: 8%; left: 4%; animation-delay: 0s; }
.particle:nth-child(2) { top: 28%; left: 14%; animation-delay: 3s; }
.particle:nth-child(3) { top: 48%; left: 24%; animation-delay: 6s; }
.particle:nth-child(4) { top: 68%; left: 9%; animation-delay: 9s; }
.particle:nth-child(5) { top: 18%; left: 32%; animation-delay: 12s; }
.particle:nth-child(6) { top: 60%; left: 36%; animation-delay: 14s; }

/* ---------- Focus visibility (a11y floor) ---------- */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
}

/* ---------- Small screens ---------- */

@media (max-width: 420px) {
    .status-text { letter-spacing: 0.1em; }
    .tagline { max-width: 26ch; }
}