/* ═══════════════════════════════════════════════
   style.css — avzane portfolio
   ═══════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────── */
:root {
  --bg:        #080808;
  --surface:   rgba(255,255,255,0.03);
  --border:    rgba(255,255,255,0.07);
  --accent:    #a8c5da;
  --accent2:   #c9b8e8;
  --accent3:   #b8dac9;
  --text:      #e8e4df;
  --soft:      rgba(232,228,223,0.58);
  --muted:     #5a5a62;
  --pad:       60px;

  --f-body:    'Barlow', sans-serif;
  --f-serif:   'DM Serif Display', serif;
  --f-mono:    'Space Mono', monospace;
  --ease:      cubic-bezier(0.16,1,0.3,1);
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
ul { list-style:none; }
a  { text-decoration:none; color:inherit; }
button { background:none; border:none; font:inherit; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-weight: 300;
  overflow-x: hidden;
  cursor: none;
}

/* ── Cursor ────────────────────────────────────── */
.cursor {
  position: fixed;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%,-50%);
  transition: transform .12s ease;
  mix-blend-mode: screen;
}
.cursor.big { transform: translate(-50%,-50%) scale(2.8); }
.cursor-ring {
  position: fixed;
  width: 34px; height: 34px;
  border: 1px solid rgba(168,197,218,.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%,-50%);
  transition: border-color .3s, transform .3s;
  mix-blend-mode: screen;
}
.cursor-ring.big {
  transform: translate(-50%,-50%) scale(1.5);
  border-color: rgba(168,197,218,.8);
}
@media (pointer:coarse) { .cursor,.cursor-ring { display:none; } body { cursor:auto; } }

/* ── Background fx ─────────────────────────────── */
#particles-js { position:fixed; inset:0; z-index:0; pointer-events:none; }
.glow { position:fixed; border-radius:50%; filter:blur(130px); pointer-events:none; z-index:0; }
.glow-a {
  width:700px; height:700px;
  background: radial-gradient(circle,rgba(168,197,218,.045) 0%,transparent 70%);
  top:-200px; right:-80px;
  animation: floatA 22s ease-in-out infinite;
}
.glow-b {
  width:500px; height:500px;
  background: radial-gradient(circle,rgba(201,184,232,.035) 0%,transparent 70%);
  bottom:20%; left:-140px;
  animation: floatB 26s ease-in-out infinite;
}
@keyframes floatA { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-55px,75px)} }
@keyframes floatB { 0%,100%{transform:translate(0,0)} 50%{transform:translate(65px,-55px)} }

/* ── Layout helpers ────────────────────────────── */
section { position:relative; z-index:1; padding:110px var(--pad); }
.divider {
  position:relative; z-index:1;
  margin:0 var(--pad); height:1px;
  background:linear-gradient(90deg,transparent,var(--border),transparent);
}
.label {
  font-family:var(--f-mono); font-size:.66rem;
  color:var(--accent); letter-spacing:.26em;
  text-transform:uppercase; margin-bottom:18px;
}
h2 {
  font-family:var(--f-serif);
  font-size:clamp(2rem,4vw,3.2rem);
  line-height:1.12;
}
h2 em { font-style:italic; color:var(--accent2); }
.btn {
  display:inline-flex; align-items:center;
  padding:13px 32px;
  font-family:var(--f-body); font-size:.78rem;
  font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; border-radius:2px;
  transition:all .3s; cursor:none;
}
.btn.primary { background:var(--accent); color:var(--bg); border:1px solid var(--accent); }
.btn.primary:hover { background:transparent; color:var(--accent); }
.btn.ghost  { background:transparent; color:var(--muted); border:1px solid var(--border); }
.btn.ghost:hover  { border-color:var(--accent); color:var(--accent); }

/* ── Nav ───────────────────────────────────────── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:28px var(--pad);
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(to bottom,rgba(8,8,8,.96),transparent);
  transition:padding .4s, background .4s;
}
nav.scrolled {
  padding:17px var(--pad);
  background:rgba(8,8,8,.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.logo {
  font-family:var(--f-serif); font-size:1.3rem;
  letter-spacing:.02em; position:relative; z-index:101;
}
.logo span { color:var(--accent); }
.nav-links { display:flex; gap:44px; }
.nav-links a {
  font-size:.74rem; font-weight:400;
  color:var(--muted); letter-spacing:.16em;
  text-transform:uppercase;
  transition:color .3s;
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-3px; left:0; width:0; height:1px;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav-links a:hover { color:var(--accent); }
.nav-links a:hover::after { width:100%; }

/* ── Hero ──────────────────────────────────────── */
#hero {
  min-height:100vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:140px;
}
.eyebrow {
  font-family:var(--f-mono); font-size:.7rem;
  color:var(--accent); letter-spacing:.28em;
  text-transform:uppercase; margin-bottom:26px;
  opacity:0; animation:fadeUp .8s var(--ease) .3s forwards;
}
#hero h1 {
  font-family:var(--f-serif);
  font-size:clamp(3.8rem,9vw,8rem);
  line-height:1; color:var(--text);
  opacity:0; animation:fadeUp .9s var(--ease) .5s forwards;
}
#hero h1 em { font-style:italic; color:var(--accent2); }
.hero-sub {
  margin-top:26px;
  font-size:clamp(.95rem,1.6vw,1.18rem); font-weight:300;
  color:var(--soft); line-height:1.85;
  opacity:0; animation:fadeUp .9s var(--ease) .72s forwards;
}
.typewriter-wrap {
  margin-top:20px;
  font-family:var(--f-mono); font-size:.86rem;
  color:var(--accent3); height:26px;
  display:flex; align-items:center; gap:2px;
  opacity:0; animation:fadeUp .9s var(--ease) .95s forwards;
}
.tcursor { color:var(--accent); animation:blink .75s step-end infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-cta {
  margin-top:50px; display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; animation:fadeUp .9s var(--ease) 1.15s forwards;
}


/* ── About ─────────────────────────────────────── */
#about { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; }
.body-text { font-size:1rem; color:var(--soft); line-height:1.92; margin-top:22px; }
.body-text p+p { margin-top:16px; }
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.stat-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:3px; padding:28px 22px;
  position:relative; overflow:hidden;
  transition:border-color .3s,transform .35s var(--ease);
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0; transition:opacity .3s;
}
.stat-card:hover { border-color:rgba(168,197,218,.22); transform:translateY(-4px); }
.stat-card:hover::before { opacity:1; }
.stat-n { font-family:'Lora',serif; font-size:2.8rem; color:var(--accent); line-height:1; }
.stat-l { font-size:.74rem; color:var(--muted); margin-top:6px; letter-spacing:.06em; }

/* ── Skills ────────────────────────────────────── */
.section-head { margin-bottom:54px; }
.skills-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:4px; overflow:hidden;
}
.skill-card {
  background:var(--bg); padding:40px 34px;
  transition:background .3s;
}
.skill-card:hover { background:rgba(255,255,255,.018); }
.skill-idx { font-family:var(--f-mono); font-size:.63rem; color:var(--accent); letter-spacing:.15em; }
.skill-card h3 { font-family:var(--f-serif); font-size:1.5rem; margin:14px 0 10px; }
.skill-card p  { font-size:.85rem; color:var(--muted); line-height:1.75; }
.bar-wrap { margin-top:20px; height:2px; background:var(--border); border-radius:2px; overflow:hidden; }
.bar {
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:2px; transition:width 1.3s var(--ease);
}

/* ── Projects ──────────────────────────────────── */
.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.project-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:4px; padding:38px 36px;
  transition:border-color .35s,transform .35s var(--ease);
  cursor:none; position:relative; overflow:hidden;
}
.project-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(168,197,218,.055),transparent 55%);
  opacity:0; transition:opacity .3s;
}
.project-card:hover { border-color:rgba(168,197,218,.22); transform:translateY(-5px); }
.project-card:hover::after { opacity:1; }
.tag {
  display:inline-block; font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); background:rgba(168,197,218,.07);
  border:1px solid rgba(168,197,218,.15);
  padding:4px 10px; border-radius:2px; margin-bottom:16px;
}
.project-card h3 { font-family:var(--f-serif); font-size:1.7rem; margin-bottom:12px; line-height:1.2; }
.project-card p  { font-size:.87rem; color:var(--soft); line-height:1.8; }
.pills { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.pills span {
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.1em;
  color:var(--accent3); background:rgba(184,218,201,.07);
  border:1px solid rgba(184,218,201,.12); padding:4px 9px; border-radius:2px;
}
.plinks { display:flex; gap:22px; margin-top:24px; align-items:center; }
.plink { font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); transition:letter-spacing .25s; }
.plink:hover { letter-spacing:.16em; }
.plink.muted { color:var(--muted); }
.plink.muted:hover { color:var(--text); }

/* ── Journey ───────────────────────────────────── */
.timeline { position:relative; margin-top:56px; padding-left:34px; }
.timeline::before {
  content:''; position:absolute; left:0; top:10px; bottom:0; width:1px;
  background:linear-gradient(to bottom,var(--accent),var(--accent2) 55%,transparent);
}
.titem { position:relative; padding-bottom:52px; }
.titem:last-child { padding-bottom:0; }
.tdot {
  position:absolute; left:-39px; top:7px;
  width:10px; height:10px; border-radius:50%;
  background:var(--bg); border:1px solid var(--accent);
  transition:background .3s;
}
.tdot.active { background:var(--accent); box-shadow:0 0 20px rgba(168,197,218,.5); }
.titem:hover .tdot { background:var(--accent); }
.tyear { font-family:var(--f-mono); font-size:.62rem; color:var(--accent); letter-spacing:.22em; margin-bottom:8px; }
.titem h3 { font-family:var(--f-serif); font-size:1.38rem; margin-bottom:8px; }
.titem p  { font-size:.88rem; color:var(--muted); line-height:1.82; max-width:620px; }

/* ── Contact ───────────────────────────────────── */
#contact { text-align:center; padding-bottom:150px; }
.contact-inner { max-width:660px; margin:0 auto; }
#contact h2 { font-size:clamp(2.4rem,5vw,4.3rem); margin-top:20px; margin-bottom:22px; }
.contact-sub { font-size:.98rem; color:var(--muted); line-height:1.88; margin-bottom:46px; }
.contact-btns { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }

/* ── Footer ────────────────────────────────────── */
footer {
  position:relative; z-index:1;
  padding:26px var(--pad);
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
footer span { font-family:var(--f-mono); font-size:.6rem; color:var(--muted); letter-spacing:.1em; }

/* ── Music player ──────────────────────────────── */
#music-player {
  position:fixed; bottom:26px; right:26px; z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:9px;
}
.now-playing {
  background:rgba(10,10,10,.93); border:1px solid var(--border);
  border-radius:8px; padding:13px 17px;
  display:flex; align-items:center; gap:13px;
  backdrop-filter:blur(20px); min-width:248px;
  opacity:0; transform:translateY(12px) scale(.96); pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.now-playing.show { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.vinyl {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(from 0deg,#0e0e1a,#1a1a2e,#0f1535,#1e1230,#0e0e1a);
  display:flex; align-items:center; justify-content:center;
}
.vinyl.spin { animation:spin 4s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.vinyl-c { width:11px; height:11px; border-radius:50%; background:var(--bg); border:1px solid rgba(255,255,255,.07); }
.track-info { flex:1; min-width:0; }
.np-label { font-family:var(--f-mono); font-size:.5rem; color:var(--accent); letter-spacing:.2em; text-transform:uppercase; margin-bottom:2px; }
.track-name { font-size:.82rem; font-weight:400; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-artist { font-size:.7rem; color:var(--muted); margin-top:2px; }
.wave { display:flex; align-items:center; gap:3px; height:18px; flex-shrink:0; }
.wave span { display:block; width:3px; border-radius:2px; background:var(--accent); animation:wv 1.3s ease-in-out infinite; }
.wave span:nth-child(1){height:5px; animation-delay:0s}
.wave span:nth-child(2){height:12px;animation-delay:.15s}
.wave span:nth-child(3){height:7px; animation-delay:.3s}
.wave span:nth-child(4){height:14px;animation-delay:.45s}
.wave span:nth-child(5){height:5px; animation-delay:.6s}
.wave.paused span { animation-play-state:paused; height:3px!important; }
@keyframes wv { 0%,100%{transform:scaleY(.5);opacity:.5} 50%{transform:scaleY(1.6);opacity:1} }
.player-controls { display:flex; gap:7px; align-items:center; }
.pbtn {
  width:40px; height:40px; border-radius:50%;
  background:rgba(10,10,10,.93); border:1px solid var(--border);
  color:var(--muted); font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:none; transition:all .3s; backdrop-filter:blur(20px);
}
.pbtn:hover { border-color:var(--accent); color:var(--accent); }
.pbtn.play { width:46px; height:46px; font-size:1.2rem; }
.pbtn.play.on { border-color:var(--accent); color:var(--accent); box-shadow:0 0 22px rgba(168,197,218,.12); }

/* ── Scroll reveal ─────────────────────────────── */
.reveal { opacity:1; transform:none; transition:opacity .85s var(--ease),transform .85s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.titem { opacity:1; transform:none; transition:opacity .7s var(--ease),transform .7s var(--ease); }
.titem.in { opacity:1; transform:none; }

/* ── Keyframes ─────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

/* ── Responsive ────────────────────────────────── */
@media (max-width:1100px) { .skills-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) {
  :root { --pad:28px; }
  section { padding:80px var(--pad); }
  .nav-links { display:none; }
  #about { grid-template-columns:1fr; gap:56px; }
  .skills-grid { grid-template-columns:1fr; }
  .projects-grid { grid-template-columns:1fr; }
  footer { flex-direction:column; gap:8px; text-align:center; }
  .hero-sub br { display:none; }
}