/* ============================================================
   COOPER LABS — styles.css  v4.0
   ============================================================ */

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

:root {
    --bg:      #04060f;
    --surface: rgba(8,12,28,0.6);
    --border:  rgba(80,140,255,0.1);
    --text:    #c0d0f0;
    --muted:   #3d5580;
    --accent:  #4da8ff;
    --mono:    'JetBrains Mono', monospace;
    --display: 'Syne', sans-serif;
    --sys: min(860px, 92vmin);
}

/* ============================================================ BASE */
html { scroll-behavior: smooth; }
body {
    background: var(--bg);
    font-family: var(--display);
    color: var(--text);
    overflow-x: hidden;
    cursor: none;
}

/* ============================================================ CUSTOM CURSOR */
#cursor-dot {
    position: fixed; top:0; left:0;
    width:6px; height:6px; border-radius:50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent), 0 0 20px rgba(77,168,255,.4);
    pointer-events: none; z-index:9999;
    transform: translate(-50%,-50%);
    transition: width .15s, height .15s, opacity .15s;
    will-change: transform;
}
#cursor-ring {
    position: fixed; top:0; left:0;
    width:32px; height:32px; border-radius:50%;
    border: 1px solid rgba(77,168,255,.5);
    pointer-events: none; z-index:9998;
    transform: translate(-50%,-50%);
    transition: width .2s, height .2s, border-color .2s, opacity .2s;
    will-change: transform;
}
body.cursor-hover #cursor-dot  { width:10px; height:10px; }
body.cursor-hover #cursor-ring { width:48px; height:48px; border-color:rgba(77,168,255,.8); }

@media (hover:none) {
    #cursor-dot, #cursor-ring { display:none; }
    body { cursor:auto; }
    a, button { cursor:pointer; }
}

/* ============================================================ BACKGROUND */
#starfield { position:fixed; inset:0; z-index:0; pointer-events:none; }

.nebula {
    position:fixed; border-radius:50%;
    filter:blur(90px); pointer-events:none; z-index:0;
}
.nebula-1 { width:700px;height:500px;top:-120px;left:-220px;background:radial-gradient(ellipse,rgba(20,50,160,.18),transparent 70%); }
.nebula-2 { width:600px;height:600px;bottom:5%;right:-180px;background:radial-gradient(ellipse,rgba(70,10,130,.13),transparent 70%); }
.nebula-3 { width:450px;height:350px;top:45%;left:25%;background:radial-gradient(ellipse,rgba(0,50,110,.1),transparent 70%); }

.particle {
    position:fixed; border-radius:50%; opacity:0;
    animation:floatParticle linear infinite;
    pointer-events:none; z-index:0;
}
@keyframes floatParticle {
    0%   { transform:translateY(100vh) rotate(0deg);   opacity:0; }
    10%  { opacity:1; }
    90%  { opacity:1; }
    100% { transform:translateY(-15vh) rotate(360deg); opacity:0; }
}

/* ============================================================ HEADER */
header {
    position:fixed; top:0;left:0;right:0; z-index:200;
    display:flex; justify-content:space-between; align-items:flex-end;
    padding:1rem 2.5rem .9rem;
    background:rgba(4,6,15,.9);
    backdrop-filter:blur(24px);
    border-bottom:1px solid var(--border);
    gap:1rem;
}
.brand h1 {
    font-family:var(--mono);
    font-size:1.55rem; font-weight:700; letter-spacing:-1px;
    background:linear-gradient(135deg,#fff,var(--accent));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    line-height:1;
}
.brand-sub {
    font-family:var(--mono); font-size:.62rem;
    color:#3d5580; letter-spacing:1.5px; margin-top:.2rem;
}
.header-tele {
    font-family:var(--mono); text-align:right;
    display:flex; flex-direction:column; gap:.15rem;
}
.tele-line {
    font-size:.7rem; color:rgba(192,208,240,.4);
    letter-spacing:.5px; white-space:nowrap;
}
.tele-val      { color:rgba(192,208,240,.7); }
.tele-val.cyan { color:var(--accent); font-weight:600; }
.live-status {
    color:#22c55e; display:inline-flex; align-items:center; gap:3px;
    animation:breathe 2s ease-in-out infinite;
}
@keyframes breathe {
    0%,100% { opacity:1; text-shadow:0 0 4px #22c55e; }
    50%     { opacity:.5; text-shadow:none; }
}

/* ============================================================ PAGE */
.page {
    position:relative; z-index:1;
    max-width:1200px; margin:0 auto; padding:0 2rem;
}

/* ============================================================ HERO */
.hero {
    position:relative; z-index:1;
    min-height:100vh;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding-top:4.5rem;
    overflow:hidden;
}

/* --- Solar system --- */
.solar-system {
    position:relative;
    width:var(--sys); height:var(--sys);
    flex-shrink:0;
}

/* Orbital rings (decorative) */
.ring-visual {
    position:absolute; top:50%; left:50%;
    width:calc(var(--r)*2); height:calc(var(--r)*2);
    border-radius:50%;
    border:1px solid rgba(77,168,255,.06);
    transform:translate(-50%,-50%);
    pointer-events:none;
    transition:border-color .4s;
}
.ring-visual.active { border-color:rgba(77,168,255,.22); }

/* --- Nucleus --- */
.sys-nucleus {
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:clamp(80px,11vmin,110px); height:clamp(80px,11vmin,110px);
    border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#1a3a80,#050a1a);
    box-shadow:
        0 0 0 1px rgba(77,168,255,.3),
        0 0 50px rgba(77,168,255,.55),
        0 0 120px rgba(77,168,255,.18),
        inset 0 0 24px rgba(77,168,255,.08);
    animation:coreGlow 4s ease-in-out infinite;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden; padding:18px; z-index:10;
}
.nucleus-logo {
    width:100%; height:100%;
    object-fit:contain;
    filter:brightness(1.1) drop-shadow(0 0 6px rgba(77,168,255,.6));
}
@keyframes coreGlow {
    0%,100% { box-shadow:0 0 0 1px rgba(77,168,255,.3),0 0 50px rgba(77,168,255,.55),0 0 120px rgba(77,168,255,.18); }
    50%     { box-shadow:0 0 0 1px rgba(77,168,255,.5),0 0 80px rgba(77,168,255,.75),0 0 180px rgba(77,168,255,.28); }
}

/* --- Planet orbit --- */
@keyframes orbit {
    from { transform:translate(-50%,-50%) rotate(0deg)   translateX(var(--r)) rotate(0deg); }
    to   { transform:translate(-50%,-50%) rotate(360deg) translateX(var(--r)) rotate(-360deg); }
}

.planet {
    position:absolute; top:50%; left:50%;
    text-decoration:none; color:inherit;
    animation:orbit linear infinite;
    animation-duration:var(--dur,20s);
    animation-delay:var(--delay,0s);
    z-index:5;
    transition:filter .3s;
}
.planet:hover { animation-play-state:paused; z-index:20; }

/* Planet sphere — now contains the favicon */
.p-sphere {
    width:var(--sz,44px); height:var(--sz,44px);
    border-radius:50%;
    background:radial-gradient(circle at 33% 28%,var(--cc),color-mix(in srgb,var(--cc) 15%,#010510) 80%);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.07),
        0 0 18px var(--cg,rgba(77,168,255,.3)),
        0 0 45px var(--cg,rgba(77,168,255,.08));
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.9,.4,1.3), box-shadow .3s;
}

/* Favicon inside sphere */
.p-logo {
    width:60%; height:60%;
    object-fit:contain;
    filter:brightness(1.2) drop-shadow(0 0 4px rgba(255,255,255,.4));
    transition:filter .3s, transform .3s;
}

/* ── WOW: sonar pulse ring on hover ── */
.p-sphere::before {
    content:'';
    position:absolute; inset:-3px;
    border-radius:50%;
    border:2px solid var(--cc);
    opacity:0;
    transition:opacity .2s;
}
/* Pulsing sonar animation on hover */
.planet:hover .p-sphere::before { opacity:.35; animation:sonarPing .9s ease-out infinite; }

@keyframes sonarPing {
    0%   { transform:scale(1);   opacity:.35; }
    70%  { transform:scale(1.6); opacity:0; }
    100% { transform:scale(1.6); opacity:0; }
}

/* ── Planet hover: scale + intense glow ── */
.planet:hover .p-sphere {
    transform:scale(1.22);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.15),
        0 0 35px var(--cg,rgba(77,168,255,.65)),
        0 0 80px var(--cg,rgba(77,168,255,.25));
}
.planet:hover .p-logo {
    filter:brightness(1.5) drop-shadow(0 0 7px rgba(255,255,255,.6));
    transform:scale(1.08);
}

/* Paused planet */
.planet.is-paused { filter:saturate(.3) brightness(.65); }
.planet.is-paused:hover { filter:saturate(.5) brightness(.85); }

/* ── Tooltip card ── */
.p-card {
    position:absolute;
    left:calc(var(--sz,44px) + 14px); top:50%;
    transform:translateY(-50%) translateX(-8px);
    width:205px;
    background:rgba(3,6,20,.96);
    border:1px solid var(--cc);
    border-radius:12px; padding:.8rem 1rem;
    opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s;
    backdrop-filter:blur(20px);
    box-shadow:0 8px 32px rgba(0,0,0,.65), 0 0 18px var(--cg,rgba(77,168,255,.12));
}
.planet:hover .p-card { opacity:1; transform:translateY(-50%) translateX(0); }

.p-card-name {
    font-family:var(--display);
    font-size:.85rem; font-weight:700;
    color:#ddeeff; margin-bottom:.3rem; letter-spacing:-.3px;
    display:flex; align-items:center; justify-content:space-between;
}
.p-card-desc {
    font-size:.7rem; color:#8aaed0;
    line-height:1.55; margin-bottom:.55rem;
}
.p-card-cta {
    font-family:var(--mono);
    font-size:.55rem; letter-spacing:2px;
    color:var(--cc); display:flex; align-items:center; gap:.4rem;
}
.p-card-badge {
    font-family:var(--mono); font-size:.47rem; letter-spacing:1.5px;
    padding:.17rem .4rem; border-radius:3px;
    background:rgba(34,197,94,.08); color:#22c55e;
    border:1px solid rgba(34,197,94,.2);
}
.p-card-badge.paused {
    background:rgba(250,204,21,.08); color:#facc15;
    border-color:rgba(250,204,21,.2);
}

/* --- Hero text --- */
.hero-text {
    text-align:center; padding:1.5rem 1rem 0;
    position:relative; z-index:2;
}
.hero-eyebrow {
    font-family:var(--mono);
    font-size:.6rem; letter-spacing:5px; color:var(--muted);
    margin-bottom:.5rem;
}
.hero-title {
    font-family:'Orbitron',sans-serif;
    font-size:clamp(1.6rem,4.5vw,3.4rem); font-weight:900;
    letter-spacing:.18em; line-height:1.1;
    background:linear-gradient(140deg,#fff 0%,#c8e0ff 45%,var(--accent) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:.8rem;
    filter:drop-shadow(0 0 22px rgba(77,168,255,.35));
}
.hero-desc {
    font-size:.9rem; color:#8aaed0;
    max-width:380px; margin:0 auto 1.5rem;
    line-height:1.7; font-weight:400;
}
.hero-desc em { color:#b0d0f0; font-style:normal; }

/* Boot log */
.boot-log {
    font-family:var(--mono);
    font-size:.65rem; color:rgba(77,168,255,.55);
    letter-spacing:1px; line-height:1.9;
    margin-bottom:1.2rem; min-height:3.5em;
    text-align:left; display:inline-block;
}
.boot-line { display:block; }
.boot-line::before { content:'> '; color:var(--muted); }
.boot-cursor {
    display:inline-block; width:7px; height:1em;
    background:var(--accent); opacity:.8;
    vertical-align:text-bottom;
    animation:blinkCursor .8s step-end infinite;
}
@keyframes blinkCursor { 0%,100% { opacity:.8; } 50% { opacity:0; } }

/* ============================================================ SECTION LABEL */
.section-eyebrow {
    font-family:var(--mono);
    font-size:.6rem; letter-spacing:4px; color:var(--muted);
    display:flex; align-items:center; gap:1rem; margin-bottom:2rem;
}
.section-eyebrow::after {
    content:''; flex:1; height:1px;
    background:linear-gradient(to right,var(--border),transparent);
}

/* ============================================================ MOBILE CARDS */
.mobile-grid { display:none; grid-template-columns:1fr; gap:1rem; margin-bottom:4rem; }

@keyframes cardIn { to { opacity:1; transform:translateY(0); } }
.card {
    opacity:0; transform:translateY(20px);
    animation:cardIn .5s ease forwards;
    background:var(--surface); border:1px solid var(--border);
    border-radius:18px; padding:1.4rem;
    text-decoration:none; color:inherit;
    display:flex; flex-direction:column; gap:.8rem;
    position:relative; overflow:hidden;
    transition:transform .35s cubic-bezier(.2,.9,.4,1.1), border-color .3s, box-shadow .3s;
    backdrop-filter:blur(12px);
}
.card::before {
    content:''; position:absolute; top:0;left:1.5rem;right:1.5rem;height:1.5px;
    background:var(--cc,var(--accent)); opacity:.5;
    border-radius:0 0 4px 4px;
    transition:opacity .3s,left .3s,right .3s;
}
.card:hover { transform:translateY(-4px); border-color:rgba(100,160,255,.25); }
.card:hover::before { opacity:1; left:0; right:0; border-radius:0; }
.card:nth-child(1){animation-delay:.05s} .card:nth-child(2){animation-delay:.10s}
.card:nth-child(3){animation-delay:.15s} .card:nth-child(4){animation-delay:.20s}
.card:nth-child(5){animation-delay:.25s} .card:nth-child(6){animation-delay:.30s}
.card.is-paused { filter:saturate(.3) brightness(.75); }
.card.is-paused:hover { filter:saturate(.5) brightness(.9); }
.card-top { display:flex; justify-content:space-between; align-items:center; }
.card-icon { width:32px; height:32px; object-fit:contain; filter:drop-shadow(0 0 5px var(--cc,var(--accent))); }
.badge {
    font-family:var(--mono); font-size:.52rem; letter-spacing:1.5px;
    padding:.2rem .5rem; border-radius:4px;
    background:rgba(34,197,94,.08); color:#22c55e; border:1px solid rgba(34,197,94,.2);
}
.badge.paused { background:rgba(250,204,21,.08); color:#facc15; border-color:rgba(250,204,21,.2); }
.card-name { font-size:1rem; font-weight:700; letter-spacing:-.5px; color:#ddeeff; }
.card-desc { font-size:.8rem; color:#9ab5d5; line-height:1.6; flex:1; }
.card-row {
    display:flex; justify-content:space-between; align-items:center;
    padding-top:.7rem; border-top:1px solid var(--border);
    font-family:var(--mono); font-size:.56rem; color:#7090b8;
}
.card-arrow { color:var(--cc,var(--accent)); font-size:1rem; transition:transform .2s; }
.card:hover .card-arrow { transform:translateX(5px); }

/* ============================================================ TELEMETRY */
.tele-panel {
    background:rgba(8,12,28,.35);
    border:1px solid rgba(80,140,255,.07);
    border-radius:12px; padding:1rem 1.6rem;
    margin-bottom:2rem; backdrop-filter:blur(8px); position:relative;
}
.tele-panel::before {
    content:''; position:absolute; top:0; left:2rem; right:2rem; height:1px;
    background:linear-gradient(to right,transparent,rgba(77,168,255,.15),transparent);
}
.tele-panel-hdr {
    font-family:var(--mono); font-size:.52rem; letter-spacing:3px;
    color:rgba(61,85,128,.7); margin-bottom:.9rem;
    display:flex; align-items:center; gap:.5rem;
}
.tele-stats { display:flex; flex-wrap:wrap; gap:2.5rem; }
.tele-stat  { display:flex; flex-direction:column; gap:.2rem; }
.ts-label   { font-family:var(--mono); font-size:.5rem; letter-spacing:2px; color:rgba(61,85,128,.7); }
.ts-value   { font-family:var(--mono); font-size:.88rem; font-weight:600; color:rgba(77,168,255,.75); }

/* UX Portfolio link — subtle */
.ux-link {
    display:inline-flex; align-items:center; gap:.5rem;
    font-family:var(--mono); font-size:.55rem; letter-spacing:2px;
    color:var(--muted); text-decoration:none;
    padding:.5rem 0; margin-top:.6rem;
    transition:color .2s;
    border:none; background:none;
}
.ux-link:hover { color:var(--accent); }

/* ============================================================ FOOTER */
footer {
    position:relative; z-index:1;
    border-top:1px solid var(--border);
    padding:2.5rem 0; text-align:center;
    font-family:var(--mono);
}
.footer-sig  { font-size:.65rem; letter-spacing:3px; color:#2a3a50; margin-bottom:1.2rem; }
.footer-links {
    display:flex; justify-content:center; gap:2.5rem; margin-bottom:1.2rem; flex-wrap:wrap;
}
.footer-links a {
    font-size:.58rem; letter-spacing:2px; color:#7090b8;
    text-decoration:none; transition:color .2s;
}
.footer-links a:hover { color:var(--accent); }
.footer-copy { font-size:.55rem; color:#1a2535; letter-spacing:1px; }

/* ============================================================ REDUCED MOTION */
@media (prefers-reduced-motion:reduce) {
    .planet, .ring-visual, .live-status, .sys-nucleus, .particle, .boot-cursor {
        animation:none !important;
    }
    #starfield { display:none; }
    .planet { opacity:1; }
    .card { animation:none !important; opacity:1; transform:none; }
}

/* ============================================================ RESPONSIVE */
@media (max-width:900px) { :root { --sys:min(680px,90vmin); } }

@media (max-width:700px) {
    .solar-system { display:none; }
    .mobile-grid  { display:grid; }

    header { padding:.85rem 1.2rem .8rem; align-items:flex-start; }
    .brand h1  { font-size:1.1rem; }
    .brand-sub { font-size:.55rem; }
    .tele-line { font-size:.62rem; }

    .page { padding:0 1.2rem; }
    .hero { padding-top:5rem; min-height:auto; }
    .hero-title  { font-size:1.5rem; letter-spacing:.1em; }
    .hero-desc   { font-size:.85rem; }
    .boot-log    { font-size:.6rem; }

    .tele-panel  { padding:1rem 1.2rem; }
    .tele-stats  { gap:1.2rem; }
    .footer-links { gap:1.5rem; }
}
@media (max-width:420px) {
    .brand h1   { font-size:.9rem; }
    .hero-title { font-size:1.2rem; }
}