/* index.css — Codexar Landing Page */

:root {
    --bg:        #080810;
    --bg-card:   #0f0f18;
    --text:      #e8e8f0;
    --muted:     #5a6272;
    --cyan:      #00ffcc;
    --green:     #39ff14;
    --pink:      #ff3264;
    --gold:      #ffc828;
    --mono:      'JetBrains Mono', monospace;
    --body:      'Inter', sans-serif;
    --border:    rgba(255,255,255,0.06);
}

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

html, body {
    width:100%; height:100%;
    overflow:hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
}

/* Canvas */
#bgCanvas {
    position:fixed; inset:0;
    z-index:0; pointer-events:none;
}

/* Scanline overlay */
body::after {
    content:'';
    position:fixed; inset:0;
    z-index:3; pointer-events:none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.025) 0px,
        rgba(0,0,0,0.025) 1px,
        transparent 1px,
        transparent 4px
    );
}

/* ── Nav ── */
.lp-nav {
    position:fixed; top:0; left:0; right:0;
    z-index:100;
    height:56px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%;
    background: rgba(8,8,16,0.85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(16px);
}

.lp-brand {
    font-family: var(--mono);
    font-size:1.3rem; font-weight:800;
    color:#fff;
    letter-spacing:-0.5px;
    text-shadow: 0 0 20px rgba(0,255,204,0.25);
    cursor:pointer;
}
.lp-brand span { color:var(--cyan); }

.lp-nav-right { display:flex; align-items:center; gap:16px; }

.lp-nav-link {
    font-family:var(--mono); font-size:0.78rem;
    color:var(--muted); text-decoration:none;
    letter-spacing:0.5px;
    transition:color 0.2s;
}
.lp-nav-link:hover { color:var(--text); }

.lp-nav-btn {
    font-family:var(--mono); font-size:0.78rem; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    color:var(--cyan);
    background:rgba(0,255,204,0.08);
    border:1px solid rgba(0,255,204,0.25);
    border-radius:7px;
    padding:7px 18px;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    transition:all 0.2s;
}
.lp-nav-btn:hover {
    background:rgba(0,255,204,0.15);
    border-color:var(--cyan);
    box-shadow:0 0 16px rgba(0,255,204,0.15);
}
.lp-nav-arrow { transition:transform 0.2s; }
.lp-nav-btn:hover .lp-nav-arrow { transform:translateX(3px); }

/* ── Main layout ── */
.lp-layout {
    position:relative; z-index:10;
    display:grid;
    grid-template-columns:44fr 56fr;
    align-items:center;
    height:calc(100vh - 56px - 40px); /* minus nav and footer */
    margin-top:56px;
    padding:0 3% 0 5%;
    gap:36px;
}

/* ── Hero left ── */
.lp-hero {
    display:flex; flex-direction:column;
    gap:20px;
    animation:heroIn 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes heroIn {
    from { opacity:0; transform:translateX(-30px); }
    to   { opacity:1; transform:translateX(0); }
}

.lp-eyebrow {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:0.62rem;
    letter-spacing:2px; text-transform:uppercase;
    color:var(--cyan); opacity:0.7;
}
.lp-eyebrow-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--cyan);
    box-shadow:0 0 8px var(--cyan);
    animation:dotpulse 2s ease-in-out infinite;
    flex-shrink:0;
}
@keyframes dotpulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.3; transform:scale(0.7); }
}

.lp-title {
    font-family:var(--mono);
    font-size:clamp(3.2rem,5.5vw,5.5rem);
    font-weight:800;
    letter-spacing:-2px;
    color:#fff;
    line-height:1;
    text-shadow:0 0 80px rgba(0,255,204,0.1);
    animation:glitch 6s infinite;
}
.lp-accent { color:var(--cyan); }
.lp-cursor {
    color:var(--cyan);
    animation:blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

@keyframes glitch {
    0%,88%,100%  { transform:none; filter:none; }
    90%  { transform:translate(-2px,1px) skewX(-1deg); filter:none; }
    91%  { transform:translate(2px,-1px); color:#fff; }
    92%  { transform:none; filter:none; }
    94%  { transform:translate(-1px,0); color:var(--pink); text-shadow:2px 0 var(--cyan); }
    95%  { transform:none; color:#fff; text-shadow:none; }
}

.lp-taglines { display:flex; flex-direction:column; gap:4px; }

.lp-tagline {
    font-family:var(--mono);
    font-size:clamp(0.85rem,1.4vw,1.15rem);
    font-weight:600;
    color:var(--text);
    letter-spacing:0.3px;
    opacity:0;
    animation:fadeUp 0.6s ease forwards;
}
.lp-t2 { animation-delay:0.15s; color:rgba(232,232,240,0.75); }
.lp-t3 { animation-delay:0.3s;  color:rgba(232,232,240,0.5); }
@keyframes fadeUp {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* CTA */
.lp-cta {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}

.lp-btn-primary {
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-weight:700;
    font-size:0.88rem; letter-spacing:1px; text-transform:uppercase;
    color:#080810;
    background:var(--cyan);
    border:none; border-radius:8px;
    padding:13px 28px;
    text-decoration:none; cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
    box-shadow:0 0 30px rgba(0,255,204,0.35), 0 4px 16px rgba(0,0,0,0.4);
    position:relative; overflow:hidden;
}
.lp-btn-primary::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.18) 50%,transparent 70%);
    transform:translateX(-100%); transition:transform 0.5s;
}
.lp-btn-primary:hover::before { transform:translateX(100%); }
.lp-btn-primary:hover {
    transform:translateY(-2px);
    box-shadow:0 0 50px rgba(0,255,204,0.55), 0 8px 28px rgba(0,0,0,0.4);
}
.lp-btn-icon { font-size:1rem; transition:transform 0.2s; }
.lp-btn-primary:hover .lp-btn-icon { transform:translateX(3px); }

.lp-btn-secondary {
    display:inline-flex; align-items:center;
    font-family:var(--mono); font-weight:600;
    font-size:0.88rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--cyan);
    background:transparent;
    border:1px solid rgba(0,255,204,0.3); border-radius:8px;
    padding:12px 24px;
    text-decoration:none; cursor:pointer;
    transition:all 0.2s;
}
.lp-btn-secondary:hover {
    background:rgba(0,255,204,0.07);
    border-color:var(--cyan);
    transform:translateY(-2px);
}

/* Feature chips */
.lp-features {
    display:flex; gap:14px; flex-wrap:wrap;
}
.lp-feat {
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,0.025);
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 14px;
    transition:all 0.2s;
}
.lp-feat:hover {
    border-color:rgba(0,255,204,0.2);
    background:rgba(0,255,204,0.03);
    transform:translateY(-1px);
}
.lp-feat-icon {
    font-size:1rem;
    color:var(--cyan);
    opacity:0.7;
}
.lp-feat-title {
    font-family:var(--mono); font-size:0.78rem;
    font-weight:700; color:var(--text);
    letter-spacing:0.3px;
}
.lp-feat-desc {
    font-size:0.65rem; color:var(--muted);
    letter-spacing:0.3px;
    margin-top:1px;
}

/* ── Battle right ── */
.lp-battle {
    display:flex; flex-direction:column;
    gap:16px;
    animation:battleIn 0.8s 0.1s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes battleIn {
    from { opacity:0; transform:translateX(30px); }
    to   { opacity:1; transform:translateX(0); }
}

/* Battle Card */
.battle-card {
    background: var(--bg-card);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:14px;
    overflow:hidden;
    box-shadow:
        0 40px 100px rgba(0,0,0,0.7),
        0 0 0 1px rgba(0,255,204,0.04),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Battle header */
.bc-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 18px;
    background:rgba(0,0,0,0.3);
    border-bottom:1px solid var(--border);
}
.bc-live {
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono); font-size:0.65rem;
    font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--pink);
}
.bc-live-dot {
    width:6px; height:6px; border-radius:50%;
    background:var(--pink);
    box-shadow:0 0 7px var(--pink);
    animation:livedot 1.2s ease-in-out infinite;
}
@keyframes livedot {
    0%,100% { opacity:1; }
    50%      { opacity:0.2; }
}
.bc-timer {
    font-family:var(--mono); font-size:0.82rem;
    font-weight:700; color:var(--text);
    letter-spacing:2px;
}

/* Players row */
.bc-players {
    display:flex; align-items:center;
    padding:10px 18px;
    border-bottom:1px solid var(--border);
    gap:8px;
}
.bc-player {
    display:flex; align-items:center; gap:10px;
    flex:1; min-width:0;
}
.bc-p2 { justify-content:flex-end; }

.bc-pav {
    width:32px; height:32px; border-radius:50%;
    background:#1a1a28;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono); font-size:0.85rem; font-weight:800;
    color:var(--cyan);
    border:1px solid rgba(0,255,204,0.2);
    flex-shrink:0;
}
.bc-pinfo { min-width:0; }
.bc-pname {
    font-family:var(--mono); font-size:0.78rem;
    font-weight:700; color:var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bc-prank { font-size:0.62rem; color:var(--muted); margin-top:1px; }

.bc-plang {
    font-family:var(--mono); font-size:0.6rem; font-weight:700;
    letter-spacing:1px; text-transform:uppercase;
    padding:3px 8px; border-radius:4px;
    flex-shrink:0;
}
.bc-lang-py  { color:#3dc9b0; background:rgba(61,201,176,0.1); border:1px solid rgba(61,201,176,0.2); }
.bc-lang-cpp { color:#659dd8; background:rgba(101,157,216,0.1); border:1px solid rgba(101,157,216,0.2); }

.bc-vs-sep {
    font-family:var(--mono); font-size:0.7rem; font-weight:800;
    color:rgba(255,255,255,0.2);
    padding:0 6px;
    flex-shrink:0;
}

/* Editors */
.bc-editors {
    display:grid;
    grid-template-columns:1fr 1px 1fr;
    height:180px;
}
.bc-editor { display:flex; flex-direction:column; overflow:hidden; }
.bc-ed-header {
    display:flex; align-items:center; gap:6px;
    padding:7px 12px;
    background:rgba(0,0,0,0.2);
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}
.bc-ed-dot {
    width:8px; height:8px; border-radius:50%;
    flex-shrink:0;
}
.bc-ed-filename {
    font-family:var(--mono); font-size:0.6rem;
    color:var(--muted); margin-left:4px;
    letter-spacing:0.3px;
}
.bc-ed-body {
    flex:1; overflow:hidden;
    display:flex;
    padding:8px 0;
    font-family:var(--mono); font-size:0.68rem;
    line-height:1.65;
}
.bc-linenos {
    padding:0 10px;
    color:rgba(255,255,255,0.12);
    text-align:right;
    user-select:none;
    white-space:pre;
    flex-shrink:0;
    font-size:0.62rem;
}
.bc-code {
    flex:1;
    padding:0 12px 0 4px;
    color:rgba(232,232,240,0.75);
    white-space:pre;
    overflow:hidden;
    font-size:0.68rem;
    line-height:1.65;
}

.bc-editor-divider {
    background:var(--border);
    width:1px;
}

/* Progress */
.bc-progress-section {
    padding:10px 18px 12px;
    display:flex; flex-direction:column; gap:7px;
    border-top:1px solid var(--border);
    background:rgba(0,0,0,0.15);
}
.bc-prog-row {
    display:flex; align-items:center; gap:10px;
}
.bc-prog-name {
    font-family:var(--mono); font-size:0.6rem;
    color:var(--muted); width:64px; flex-shrink:0;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bc-prog-bar {
    flex:1; height:4px;
    background:rgba(255,255,255,0.05);
    border-radius:2px; overflow:hidden;
}
.bc-prog-fill {
    height:100%; width:0%; border-radius:2px;
    transition:width 0.4s ease;
}
.bc-prog-left  { background:linear-gradient(90deg, var(--cyan), rgba(0,255,204,0.6)); box-shadow:0 0 6px rgba(0,255,204,0.4); }
.bc-prog-right { background:linear-gradient(90deg, var(--pink), rgba(255,50,100,0.6)); box-shadow:0 0 6px rgba(255,50,100,0.3); }
.bc-prog-pct {
    font-family:var(--mono); font-size:0.6rem;
    font-weight:700; color:var(--muted);
    width:26px; text-align:right; flex-shrink:0;
}

/* Stats row */
.lp-stats {
    display:flex; align-items:center;
    justify-content:center;
    gap:16px; flex-wrap:wrap;
}
.lp-stat {
    display:flex; flex-direction:column;
    align-items:center; gap:2px;
}
.lp-stat-num {
    font-family:var(--mono); font-size:1.5rem;
    font-weight:800; color:var(--text); line-height:1;
}
.lp-stat-label {
    font-size:0.62rem; color:var(--muted);
    letter-spacing:1px; text-transform:uppercase;
}
.lp-stat-sep { color:rgba(255,255,255,0.12); font-size:1.2rem; }

/* ── Footer ── */
.lp-footer {
    position:fixed; bottom:0; left:0; right:0;
    z-index:20; height:40px;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 5%;
    background:rgba(8,8,16,0.8);
    border-top:1px solid var(--border);
    backdrop-filter:blur(12px);
}
.lp-footer-brand { font-family:var(--mono); font-weight:700; font-size:0.82rem; color:var(--text); }
.lp-footer-brand span { color:var(--cyan); }
.lp-footer-langs { display:flex; gap:9px; font-family:var(--mono); font-size:0.68rem; color:var(--muted); }
.sep { opacity:0.25; }
.lp-footer-label { font-family:var(--mono); font-size:0.65rem; color:rgba(0,255,204,0.35); letter-spacing:2px; text-transform:uppercase; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .lp-layout { grid-template-columns:1fr; padding:10px 5%; gap:16px; }
    .lp-battle { display:none; }
    .lp-hero   { gap:16px; }
}
@media (max-height: 700px) {
    .lp-features { display:none; }
    .lp-taglines .lp-t3 { display:none; }
    .battle-card .bc-editors { height:130px; }
}