/* ============================================
   WEYLAND-YUTANI — Minimalist Alien UI
   ============================================ */
:root {
    --bg: #0a0a0a;
    --bg-card: #111111;
    --bg-hover: #1a1a1a;
    --accent: #4a9eff;
    --accent-dim: #2a6bbf;
    --accent-glow: rgba(74,158,255,.12);
    --amber: #ffaa00;
    --amber-dim: #996600;
    --red: #ff3344;
    --text: #f0f0f0;
    --text2: #a0a0a0;
    --text3: #666666;
    --border: rgba(255,255,255,.08);
    --border2: rgba(255,255,255,.15);
    --mono: 'Jost', 'Courier New', Consolas, monospace;
    --header-h: 50px;
    --footer-h: 36px;
    --nav-h: 58px;
}

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

html, body { height:100%; overflow:hidden; }

body {
    font-family: var(--mono);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--accent-dim); color:var(--bg); }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--text3); border-radius:2px; }

/* ============================================
   LOADING
   ============================================ */
.loading-screen {
    position:fixed; inset:0; z-index:9999;
    background:var(--bg);
    display:flex; align-items:center; justify-content:center;
    transition: opacity .6s, visibility .6s;
}
.loading-screen.hidden { opacity:0; visibility:hidden; pointer-events:none; }
.loading-content { text-align:center; }

.weyland-logo { position:relative; width:100px; height:100px; margin:0 auto 30px; }
.logo-ring {
    position:absolute; inset:0;
    border:2px solid var(--accent-dim); border-radius:50%;
    animation: spin 4s linear infinite;
}
.logo-ring.ring-2 { inset:8px; border-color:var(--accent); animation-duration:3s; animation-direction:reverse; }
.logo-ring.ring-3 { inset:16px; border-color:var(--accent); animation-duration:2s; }
.logo-core {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-size:30px; font-weight:bold; color:var(--accent);
    text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent-glow);
}
@keyframes spin { to { transform:rotate(360deg); } }

.loading-bar-container { width:240px; height:2px; background:var(--border); margin:0 auto 16px; overflow:hidden; }
.loading-bar { height:100%; width:0; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); box-shadow:0 0 8px var(--accent); transition:width .3s; }
.loading-text { font-size:11px; letter-spacing:4px; color:var(--text3); animation:flicker 1.5s step-end infinite; }
@keyframes flicker { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ============================================
   CRT + HEX
   ============================================ */
.crt-overlay { position:fixed; inset:0; pointer-events:none; z-index:9000; }
.scanlines {
    position:absolute; inset:0;
    background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.05) 2px,rgba(0,0,0,.05) 4px);
    animation: drift 10s linear infinite;
}
@keyframes drift { to { transform:translateY(4px); } }
.vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.5)); }

.hex-grid-bg {
    position:fixed; inset:0; z-index:-1; opacity:.03;
    background-image:
        linear-gradient(30deg,var(--text3) 12%,transparent 12.5%,transparent 87%,var(--text3) 87.5%),
        linear-gradient(150deg,var(--text3) 12%,transparent 12.5%,transparent 87%,var(--text3) 87.5%),
        linear-gradient(30deg,var(--text3) 12%,transparent 12.5%,transparent 87%,var(--text3) 87.5%),
        linear-gradient(150deg,var(--text3) 12%,transparent 12.5%,transparent 87%,var(--text3) 87.5%),
        linear-gradient(60deg,rgba(102,102,102,.3) 25%,transparent 25.5%,transparent 75%,rgba(102,102,102,.3) 75%),
        linear-gradient(60deg,rgba(102,102,102,.3) 25%,transparent 25.5%,transparent 75%,rgba(102,102,102,.3) 75%);
    background-size:80px 140px;
    background-position:0 0,0 0,40px 70px,40px 70px,0 0,40px 70px;
}

/* ============================================
   INTERFACE LAYOUT
   ============================================ */
.interface {
    display:flex; flex-direction:column; height:100vh;
    opacity:0; transition:opacity .8s;
}
.interface.visible { opacity:1; }

/* ============================================
   HEADER
   ============================================ */
.sys-header {
    flex:0 0 var(--header-h);
    display:flex; justify-content:space-between; align-items:center;
    padding:0 20px;
    border-bottom:1px solid var(--border);
    z-index:100;
}
.header-brand { display:flex; align-items:center; gap:8px; cursor:pointer; }
.brand-hex {
    width:14px; height:16px; background:var(--text);
    clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.brand-text { font-size:12px; font-weight:bold; letter-spacing:3px; color:var(--text); }
.header-status { display:flex; align-items:center; gap:8px; font-size:13px; }
.status-dot {
    width:5px; height:5px; border-radius:50%; background:var(--text);
    box-shadow:0 0 6px var(--text); animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.8)} }
.header-date { color:var(--text2); font-variant-numeric:tabular-nums; }

/* ============================================
   SCREENS
   ============================================ */
.screens-wrapper { flex:1; position:relative; overflow:hidden; }

.screen {
    position:absolute; inset:0;
    display:none;
    transition: opacity .3s ease, transform .3s ease;
}
.screen.active { display:block; opacity:1; transform:translateX(0); }

/* Slide transitions */
.screen.slide-out-left { display:block; opacity:0; transform:translateX(-40px); pointer-events:none; }
.screen.slide-out-right { display:block; opacity:0; transform:translateX(40px); pointer-events:none; }
.screen.slide-in-left { display:block; animation: slideInLeft .35s ease forwards; }
.screen.slide-in-right { display:block; animation: slideInRight .35s ease forwards; }

@keyframes slideInLeft {
    from { opacity:0; transform:translateX(-40px); }
    to { opacity:1; transform:translateX(0); }
}
@keyframes slideInRight {
    from { opacity:0; transform:translateX(40px); }
    to { opacity:1; transform:translateX(0); }
}

.screen-center {
    height:100%; width:100%; display:flex; align-items:center; justify-content:center;
    padding:24px 20px;
}

.screen-scroll {
    height:100%; overflow-y:auto; overflow-x:hidden;
    padding:24px 20px calc(var(--nav-h) + 24px);
    max-width:1040px;
    margin:0 auto;
}

/* ============================================
    HERO
    ============================================ */
.hero-layout {
    display:flex; align-items:center; gap:60px;
    max-width:1000px; width:100%;
    justify-content:center;
    margin:3rem;
}

.hero-text { flex:1; min-width:0; }

.hero-tag {
    font-size:13px; letter-spacing:4px; color:var(--text3);
    margin-bottom:12px;
}

.hero-name { margin-bottom:16px; }

.name-line {
    display:block;
    font-size:clamp(32px,5.5vw,64px);
    font-weight:300; line-height:1.1; letter-spacing:6px;
    color:var(--text);
    opacity:0; transform:translateY(16px);
    animation: reveal .7s ease forwards;
}
.name-accent {
    font-weight:600;
    color:var(--text);
    animation-delay:.2s;
}
@keyframes reveal { to{opacity:1;transform:translateY(0)} }

.hero-role {
    font-size:14px; color:var(--text3);
    letter-spacing:3px; text-transform:uppercase;
    margin-bottom:28px; min-height:26px;
}

.hero-meta { display:flex; flex-direction:column; gap:8px; margin-bottom:28px; }
.meta-row { display:flex; align-items:center; gap:12px; font-size:15px; }
.meta-label { color:var(--text3); letter-spacing:2px; min-width:120px; }
.meta-value { color:var(--text2); }
.meta-active { color:var(--text); display:flex; align-items:center; gap:6px; }
.pulse-dot {
    width:5px; height:5px; border-radius:50%; background:var(--text);
    animation:pulse 1.5s ease-in-out infinite;
}

/* ============================================
    SECTION TITLE BAR
    ============================================ */
.section-title-bar {
    display:flex; align-items:center; gap:12px;
    margin-bottom:24px;
    padding-bottom:12px;
    border-bottom:1px solid var(--border);
}
.section-name { font-size:14px; font-weight:bold; letter-spacing:4px; color:var(--text); }
.section-rule { flex:1; height:1px; background:linear-gradient(90deg,var(--border),transparent); }
.section-tag { font-size:10px; letter-spacing:2px; color:var(--text3); }

/* ============================================
   MANIFEST
   ============================================ */
.manifest-content {
    display:flex; gap:30px; align-items:start;
}

.manifest-avatar { text-align:center; flex-shrink:0; }

.avatar-box {
    position:relative;
    width:120px; height:120px;
    border:1px solid var(--border2);
    background:var(--bg-card);
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
}
.avatar-glyph { font-size:36px; color:var(--accent-dim); }
.avatar-scan {
    position:absolute; top:0; left:0; right:0; height:2px;
    background:var(--accent); opacity:.3;
    animation:scan 3s linear infinite;
}
@keyframes scan { from{top:-2px} to{top:100%} }

.avatar-id { display:block; margin-top:8px; font-size:9px; letter-spacing:2px; color:var(--text3); }

.manifest-text { flex:1; min-width:0; }

.bio-text {
    font-size:16px; line-height:1.8; color:var(--text2);
    margin-bottom:20px; min-height:52px;
}
.bio-text::after { content:'█'; animation:blink .8s step-end infinite; color:var(--accent); margin-left:2px; }

.bio-details { display:flex; flex-direction:column; gap:5px; }
.detail { font-size:14px; }
.dk { color:var(--text3); }
.dv { color:var(--text2); }
.dv-accent { color:var(--accent); }

/* ============================================
   DIAGNOSTICS
   ============================================ */
.diag-list { display:flex; flex-direction:column; gap:14px; }

.diag-row {
    display:grid;
    grid-template-columns:130px 42px 1fr 65px;
    gap:10px; align-items:center;
    font-size:14px;
    opacity:0; transform:translateX(-10px);
    transition: opacity .4s, transform .4s;
}
.diag-row.visible { opacity:1; transform:translateX(0); }

.dn { color:var(--text2); letter-spacing:1px; }
.dp { color:var(--text); font-weight:bold; text-align:right; }
.db {
    height:3px; background:var(--bg-card);
    border:1px solid var(--border); overflow:hidden;
}
.df {
    height:100%; width:0;
    background:linear-gradient(90deg,var(--accent-dim),var(--accent));
    transition: width 1.2s cubic-bezier(.25,.46,.45,.94);
}
.df.animated { width:var(--fw); }
.ds { font-size:10px; letter-spacing:1px; color:var(--text3); }

/* ============================================
   PROJECTS
   ============================================ */
.project-filters {
    display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;
}
.pf-item {
    font-size:11px; letter-spacing:2px; padding:6px 12px;
    background:none; border:1px solid var(--border);
    color:var(--text3); cursor:pointer;
    transition:all .2s;
}
.pf-item:hover { border-color:var(--accent-dim); color:var(--text2); }
.pf-item.active { border-color:var(--accent); color:var(--accent); background:rgba(74,158,255,.06); }

.project-card.hidden { display:none; }

.projects-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:12px;
}

.project-card {
    padding:14px;
    border:1px solid var(--border);
    background:var(--bg-card);
    transition:all .25s;
    position:relative;
}
.project-card:hover {
    border-color:var(--accent-dim);
    background:var(--bg-hover);
    transform:translateY(-1px);
}

.pc-badge {
    position:absolute; top:0; right:0;
    font-size:9px; letter-spacing:1px; padding:3px 8px;
    background:rgba(74,158,255,.1);
    border:1px solid var(--border);
    border-left:1px solid var(--border);
    border-bottom:1px solid var(--border);
    color:var(--accent-dim);
}

.pc-top { display:flex; justify-content:space-between; margin-bottom:6px; font-size:11px; }
.pc-id { color:var(--text3); }
.pc-status { color:var(--text); }
.pc-status.warn { color:var(--amber); }

.pc-name { font-size:16px; color:var(--text); margin-bottom:5px; letter-spacing:1px; }
.pc-desc { font-size:14px; color:var(--text2); margin-bottom:8px; line-height:1.5; }

.pc-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.pc-tags span {
    font-size:10px; padding:2px 6px;
    background:rgba(74,158,255,.06);
    border:1px solid var(--border);
    color:var(--text3);
}

.pc-link { font-size:11px; color:var(--accent); display:inline-block; transition:all .2s; }
.pc-link:hover { text-decoration:underline; text-underline-offset:3px; text-shadow:0 0 8px var(--accent-glow); }

.pc-links { display:flex; gap:12px; }

/* ============================================
   CONTACT
   ============================================ */
.contact-wrap { width:100%; max-width:1040px; margin:0 auto; }

.contact-cards { display:flex; flex-direction:column; gap:10px; }

.ccard {
    display:flex; align-items:center; gap:14px;
    padding:16px 18px;
    border:1px solid var(--border);
    background:var(--bg-card);
    transition:all .25s;
}
.ccard:hover {
    border-color:var(--accent-dim);
    background:var(--bg-hover);
    transform:translateX(4px);
}
.ccard:hover .ccard-arrow { opacity:1; color:var(--accent); }

.ccard-icon { font-size:18px; color:var(--text3); transition:color .2s; }
.ccard:hover .ccard-icon { color:var(--accent); }
.ccard-body { flex:1; }
.ccard-label { display:block; font-size:10px; letter-spacing:2px; color:var(--text3); margin-bottom:2px; }
.ccard-value { font-size:15px; color:var(--text2); }
.ccard-arrow { font-size:14px; color:var(--text3); opacity:.3; transition:all .2s; }

/* ============================================
   BOTTOM NAV
   ============================================ */
.bottom-nav {
    position:fixed; bottom:var(--footer-h); left:0; right:0;
    height:var(--nav-h);
    display:flex; justify-content:center; align-items:center; gap:4px;
    background:rgba(10,10,10,.95);
    border-top:1px solid var(--border);
    z-index:8000;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.bn-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:8px 16px;
    background:none; border:none;
    color:var(--text3);
    font-size:12px; letter-spacing:2px;
    transition:all .2s;
    border-radius:2px;
}
.bn-item:hover { color:var(--text2); background:rgba(74,158,255,.04); }
.bn-item.active { color:var(--accent); }
.bn-item.active .bn-icon { text-shadow:0 0 8px var(--accent-glow); }

.bn-icon { font-size:18px; }
.bn-text { font-size:10px; letter-spacing:2px; }

/* ============================================
   FOOTER
   ============================================ */
.sys-footer {
    flex:0 0 var(--footer-h);
    display:flex; justify-content:center; align-items:center; gap:12px;
    font-size:12px; letter-spacing:2px; color:var(--text3);
    border-top:1px solid var(--border);
}
.footer-sep { color:var(--border); }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 768px) {
    .hero-layout {
        flex-direction:column;
        gap:24px;
        text-align:center;
    }

    .hero-meta { align-items:center; }
    .meta-row { justify-content:center; }
    .meta-label { min-width:auto; }

    .manifest-content { flex-direction:column; align-items:center; }
    .manifest-text { min-width:0; width:100%; }

    .diag-row {
        grid-template-columns:90px 36px 1fr 54px;
        font-size:12px;
        gap:6px;
    }

    .diag-list { gap:8px; }

    .section-title-bar { margin-top:0; margin-bottom:12px; }

    .manifest-content { gap:16px; }

    .bio-text { font-size:14px; margin-bottom:12px; }

    .avatar-box { width:90px; height:90px; }
    .avatar-glyph { font-size:28px; }

    .projects-grid {
        grid-template-columns:1fr;
    }

    .contact-cards { gap:8px; }

    .bn-item { padding:6px 10px; }

    .sys-footer { display:none; }

    .bottom-nav { bottom:0; }
}

@media (max-width: 480px) {
    :root {
        --nav-h: 48px;
    }

    .sys-header { padding:0 12px; }
    .brand-text { font-size:10px; letter-spacing:2px; }
    .header-date { font-size:10px; }

    .screen-scroll { padding:16px 12px calc(var(--nav-h) + 16px); }
    .screen-center { padding:16px 12px; }

    .section-title-bar { margin-bottom:16px; }
    .section-name { font-size:12px; }
}