/* ── HERO.CSS — hero section layout and character orbit ── */

#hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: 64px;
  position: relative; overflow: hidden;
}

.hero-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 60px; align-items: center; width: 100%;
}

.hero-content { position:relative; z-index:2; }

.hero-tag {
  font-family:'VT323',monospace; font-size:22px;
  color:var(--green); letter-spacing:4px; margin-bottom:16px;
  opacity:0; animation:fup .6s .3s forwards;
}
.hero-tag::before { content:'[ '; color:var(--glow); }
.hero-tag::after  { content:' ]'; color:var(--glow); }

.hero-name {
  font-family:'Press Start 2P',monospace;
  font-size:clamp(18px,3.2vw,40px); line-height:1.5;
  color:var(--text); text-shadow:0 0 40px rgba(0,212,255,.3);
  opacity:0; animation:fup .6s .5s forwards; margin-bottom:12px;
}
.hero-name .a { color:var(--accent); }
.hero-name .b { color:var(--accent2); }

.hero-subtitle {
  font-family:'Rajdhani',sans-serif; font-weight:600;
  font-size:19px; color:var(--dim); letter-spacing:4px;
  text-transform:uppercase; margin-bottom:28px;
  opacity:0; animation:fup .6s .7s forwards;
}

/* TYPEWRITER */
.tw-wrap {
  position:relative; height:44px;
  margin-bottom:36px;
  opacity:0; animation:fup .6s .9s forwards;
}
.tw {
  font-family:'VT323',monospace; font-size:27px; color:var(--accent);
  position:absolute; top:0; left:0;
  white-space:nowrap; line-height:44px;
}
.tw::after { content:'▮'; animation:blink 1s step-end infinite; color:var(--accent2); }

/* STAT CARDS */
.stat-cards {
  display:flex; gap:12px; flex-wrap:nowrap;
  margin-bottom:36px;
  opacity:0; animation:fup .6s 1.1s forwards;
}
.stat-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:8px; padding:13px 18px;
  position:relative; overflow:hidden;
  transition:transform .2s, border-color .2s;
  flex:0 0 auto; width:140px; cursor:none;
}
.stat-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.sc-l { font-family:'VT323',monospace; font-size:13px; color:var(--dim); letter-spacing:2px; text-transform:uppercase; margin-bottom:3px; }
.sc-v { font-family:'Press Start 2P',monospace; font-size:17px; color:var(--gold); text-shadow:0 0 12px rgba(255,215,0,.45); }
.sc-v--small { font-size:12px; }
.sc-v--accent { color:var(--accent); }
.sc-v--green { color:var(--green); }
.sc-s { font-family:'Rajdhani',sans-serif; font-size:12px; color:var(--dim); margin-top:2px; }

/* BUTTONS */
.hero-btns { display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:fup .6s 1.3s forwards; }
.btn {
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:14px;
  letter-spacing:3px; text-transform:uppercase; text-decoration:none;
  padding:12px 26px; border-radius:4px;
  display:inline-flex; align-items:center; gap:8px;
  cursor:none; transition:all .2s; position:relative; overflow:hidden;
}
.btn-p {
  background:var(--accent); color:#000; border:2px solid var(--accent);
  box-shadow:0 0 28px rgba(0,212,255,.28);
}
.btn-p:hover {
  background:transparent; color:var(--accent);
  box-shadow:0 0 48px rgba(0,212,255,.45); transform:translateY(-2px);
}
.btn-s { background:transparent; color:var(--text); border:2px solid var(--border); }
.btn-s:hover {
  border-color:var(--accent2); color:var(--accent2);
  box-shadow:0 0 28px rgba(255,107,53,.22); transform:translateY(-2px);
}

/* ── ORBITAL DISPLAY (right column) ── */
.hero-orbit {
  position:relative; display:flex; align-items:center;
  justify-content:center; height:360px;
  opacity:0; animation:fup .8s 1s forwards;
}
.ring {
  position:absolute; border-radius:50%; border:1px solid;
  animation:spin linear infinite; will-change:transform;
}
.ring.r1 { width:270px; height:270px; border-color:rgba(0,212,255,.14); animation-duration:20s; }
.ring.r2 { width:210px; height:210px; border-color:rgba(168,85,247,.11); animation-duration:14s; animation-direction:reverse; }
.ring.r3 { width:330px; height:330px; border-color:rgba(255,107,53,.07); animation-duration:30s; border-style:dashed; }
.ring .rdot {
  position:absolute; width:8px; height:8px; border-radius:50%;
  top:-4px; left:50%; transform:translateX(-50%);
}
.ring.r1 .rdot { background:var(--accent); box-shadow:0 0 10px var(--accent); }
.ring.r2 .rdot { background:var(--accent3); box-shadow:0 0 10px var(--accent3); }

/* Floating code tags */
.ftag {
  position:absolute; font-family:'VT323',monospace; font-size:14px;
  padding:4px 10px; border-radius:4px; white-space:nowrap;
  animation:ftg 4s ease-in-out infinite; pointer-events:none;
}
.ftag.t1 { top:8%;   left:0;    color:var(--accent);  border:1px solid rgba(0,212,255,.28);  background:rgba(0,212,255,.07);  animation-delay:0s; }
.ftag.t2 { bottom:18%; right:0;  color:var(--accent3); border:1px solid rgba(168,85,247,.28); background:rgba(168,85,247,.07); animation-delay:-1.5s; }
.ftag.t3 { top:55%;  left:-10px; color:var(--green);   border:1px solid rgba(0,255,136,.28);  background:rgba(0,255,136,.07);  animation-delay:-3s; }
.ftag.t4 { top:18%;  right:10px; color:var(--gold);    border:1px solid rgba(255,215,0,.28);   background:rgba(255,215,0,.07);  animation-delay:-2s; }