/* =========================================================
   西ノ原 希空 — Portfolio
   Theme: NOC console — deep navy base, amber + cyan accents
   ========================================================= */

:root{
  --bg:        #0d1420;   /* deep navy, not pure black */
  --bg-2:      #111b2b;
  --panel:     #16223550;
  --panel-solid:#152033;
  --line:      #243349;
  --line-soft: #1b2839;
  --ink:       #d7e3f2;   /* primary text */
  --ink-dim:   #8aa0bd;   /* secondary */
  --ink-faint: #56708f;   /* faint */
  --amber:     #f2b257;   /* prompt / hostname accent */
  --amber-soft:#f2b25722;
  --cyan:      #4fd1c7;   /* link / cmd accent */
  --cyan-soft: #4fd1c722;
  --green:     #8bd450;   /* status: live */
  --violet:    #9d8cff;   /* status: build */
  --maxw: 1080px;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* subtle grid + glow backdrop */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 500px at 80% -10%, #1a2b45 0%, transparent 60%),
    radial-gradient(700px 600px at 0% 100%, #131d2e 0%, transparent 55%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;opacity:.35;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
          mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 75%);
}
.scanline{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(180deg, #fff 0 1px, transparent 1px 3px);
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.muted{color:var(--ink-faint)}
strong{color:#eaf2ff;font-weight:600}
a{color:inherit;text-decoration:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(13,20,32,.72);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font-family:var(--mono);font-weight:700;font-size:.95rem;letter-spacing:.02em}
.brand-prompt{color:var(--amber)}
.brand-sep{color:var(--ink-faint)}
.brand-path{color:var(--cyan)}
.brand-cursor{color:var(--ink);margin-left:2px}
.nav{display:flex;gap:22px;font-family:var(--mono);font-size:.85rem}
.nav a{color:var(--ink-dim);position:relative;padding:4px 0;transition:color .18s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;background:var(--cyan);transition:width .22s}
.nav a:hover{color:var(--ink)}
.nav a:hover::after{width:100%}

/* ---------- hero ---------- */
.hero{padding:84px 0 56px}
.term{
  background:linear-gradient(180deg,#101a29,#0e1726);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 30px 80px -40px #000, inset 0 1px 0 #ffffff0a;
  overflow:hidden;
  max-width:760px;
}
.term-bar{
  display:flex;align-items:center;gap:8px;
  padding:11px 16px;border-bottom:1px solid var(--line-soft);
  background:#0c1521;
}
.term-bar .dot{width:11px;height:11px;border-radius:50%;background:#2a3a52}
.term-bar .dot:nth-child(1){background:#e06c63}
.term-bar .dot:nth-child(2){background:#e0b54f}
.term-bar .dot:nth-child(3){background:#5bbf6a}
.term-title{margin-left:10px;font-family:var(--mono);font-size:.76rem;color:var(--ink-faint)}
.term-body{padding:22px 22px 24px;font-family:var(--mono);font-size:.95rem}
.term-body .line{color:var(--ink);white-space:pre-wrap}
.ps1{color:var(--amber)}
.typed,.typed2{color:var(--ink)}
.out{margin:2px 0 16px;font-family:var(--mono)}
.out.name{font-size:1.5rem;font-weight:800;color:#f2f7ff;margin-top:6px;letter-spacing:.01em}
.out.role{font-size:1.05rem;color:var(--cyan);font-weight:600}
.out.role .aspiring{color:var(--ink-faint);font-weight:400;font-size:.85em}
.out.tagline{font-family:var(--sans);color:var(--ink-dim);font-size:.92rem;line-height:1.8;margin-bottom:14px}
.blinkline{margin-top:4px}
.caret{color:var(--amber);animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.hero-meta{display:flex;align-items:center;gap:26px;margin-top:30px;flex-wrap:wrap}
.cta{
  font-family:var(--mono);font-weight:700;font-size:.9rem;
  color:var(--bg);background:var(--amber);
  padding:12px 20px;border-radius:8px;
  transition:transform .15s, box-shadow .15s;
  box-shadow:0 10px 30px -12px var(--amber);
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px var(--amber)}
.asn{display:flex;flex-direction:column;gap:2px;font-family:var(--mono)}
.asn-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint)}
.asn-val{font-size:.86rem;color:var(--cyan)}

/* ---------- sections ---------- */
.section{padding:64px 0;border-top:1px solid var(--line-soft)}
.sec-head{
  font-family:var(--mono);font-size:1.15rem;font-weight:700;
  color:var(--ink);margin-bottom:8px;letter-spacing:.01em;
}
.sec-cmd{color:var(--cyan)}
.sec-note{color:var(--ink-dim);font-size:.9rem;margin-bottom:30px}
.sec-note .mono{color:var(--amber)}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;margin-top:26px}
.about-text p{margin-bottom:16px;color:var(--ink-dim)}
.about-text p:last-child{margin-bottom:0}
.about-card{
  background:var(--panel-solid);border:1px solid var(--line);
  border-radius:10px;padding:18px 20px;align-self:start;
  font-family:var(--mono);font-size:.85rem;
}
.card-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line-soft)}
.card-row:last-child{border-bottom:none}
.card-row .k{color:var(--ink-faint)}
.card-row .v{color:var(--ink);text-align:right}

/* ---------- works ---------- */
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work{
  display:flex;flex-direction:column;
  background:var(--panel-solid);
  border:1px solid var(--line);
  border-radius:12px;padding:20px;
  transition:transform .18s, border-color .18s, box-shadow .18s;
  position:relative;overflow:hidden;
}
.work::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .28s;
}
.work:hover{transform:translateY(-4px);border-color:#33506e;box-shadow:0 24px 50px -30px #000}
.work:hover::before{transform:scaleX(1)}
.work-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.work-idx{font-family:var(--mono);font-size:1.05rem;font-weight:800;color:var(--ink-faint)}
.work-tag{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;padding:3px 9px;border-radius:20px}
.tag-live{color:var(--green);background:#8bd45016;border:1px solid #8bd45040}
.tag-infra{color:var(--cyan);background:var(--cyan-soft);border:1px solid #4fd1c740}
.tag-build{color:var(--violet);background:#9d8cff16;border:1px solid #9d8cff40}
.work-title{font-size:1.08rem;font-weight:700;color:#eaf2ff;margin-bottom:5px;display:flex;justify-content:space-between;align-items:center}
.work-title .arrow{color:var(--cyan);transition:transform .18s}
.work:hover .work-title .arrow{transform:translateX(4px)}
.work-sub{font-family:var(--mono);font-size:.76rem;color:var(--amber);margin-bottom:12px}
.work-desc{font-size:.88rem;color:var(--ink-dim);line-height:1.7;flex:1}
.work-stack{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.work-stack span{font-family:var(--mono);font-size:.68rem;color:var(--ink-dim);background:#0e1828;border:1px solid var(--line-soft);padding:3px 8px;border-radius:5px}

/* ---------- skills ---------- */
.skills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.skill-col{background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;padding:18px}
.skill-h{font-family:var(--mono);font-size:.82rem;color:var(--cyan);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft);letter-spacing:.04em}
.skill-col ul{list-style:none}
.skill-col li{font-size:.84rem;color:var(--ink-dim);padding:5px 0;padding-left:16px;position:relative}
.skill-col li::before{content:"›";position:absolute;left:0;color:var(--amber)}

/* ---------- contact ---------- */
.contact-lead{color:var(--ink-dim);margin:18px 0 26px;font-size:.95rem}
.contact-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.clink{
  display:flex;flex-direction:column;gap:4px;
  background:var(--panel-solid);border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;font-family:var(--mono);
  transition:border-color .18s, transform .18s, background .18s;
}
.clink:hover{border-color:var(--cyan);transform:translateY(-3px);background:#16273b}
.clink-k{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint)}
.clink-v{font-size:.9rem;color:var(--ink)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:26px 0;margin-top:20px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.8rem}
.foot-prompt{color:var(--amber)}
.foot-copy{color:var(--ink-faint)}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .about-grid{grid-template-columns:1fr}
  .works{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .contact-links{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nav{gap:14px;font-size:.78rem}
  .hero{padding:52px 0 40px}
  .term-body{font-size:.84rem;padding:18px}
  .out.name{font-size:1.25rem}
  .skills-grid{grid-template-columns:1fr}
  .header-inner{height:54px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}