/* ===== Tokens ===== */
:root{
  --bg:#000;
  --surface:#111;
  --text:#f5f5f5;
  --muted:#aaaaaa;
  --border:#232323;
  --accent:#ff4081;
  --accent2:#3b82f6;
  --radius:16px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); }
body{ font-family:"Space Grotesk",system-ui,sans-serif; line-height:1.6; }

/* ===== Background art ===== */
.bg-art{ position:fixed; inset:-30% -30% 0 -30%; pointer-events:none; z-index:-1; }
.bg-art::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40% 50% at 15% 10%, #ff4db5 0%, transparent 60%),
    radial-gradient(35% 45% at 80% 20%, #3b82f6 0%, transparent 60%),
    radial-gradient(45% 55% at 70% 75%, #8b5cf6 0%, transparent 60%),
    radial-gradient(35% 45% at 20% 80%, #22c55e 0%, transparent 60%);
  filter: blur(80px) saturate(140%);
  opacity:.35;
  animation: bgShift 20s ease-in-out infinite;
}

@keyframes bgShift {
  0%, 100% { opacity: .35; }
  50% { opacity: .25; }
}

/* ===== Subtle Glitch Effects ===== */
.glitch-text {
  position: relative;
  display: inline-block;
}

.glitch-text:hover {
  animation: glitch-subtle 0.3s ease;
}

@keyframes glitch-subtle {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(1px, 0); }
  100% { transform: translate(0); }
}

.glitch-text-hover {
  position: relative;
}

.glitch-text-hover::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -2px 0 #ff4081;
  top: 0;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: glitch-flicker 2s infinite linear alternate-reverse;
  opacity: 0;
}

.glitch-text-hover:hover::after {
  opacity: 0.8;
}

@keyframes glitch-flicker {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  5% { clip: rect(12px, 9999px, 59px, 0); }
  10% { clip: rect(48px, 9999px, 29px, 0); }
  15% { clip: rect(42px, 9999px, 73px, 0); }
  20% { clip: rect(63px, 9999px, 27px, 0); }
  25% { clip: rect(34px, 9999px, 55px, 0); }
  30% { clip: rect(86px, 9999px, 73px, 0); }
  35% { clip: rect(20px, 9999px, 20px, 0); }
  40% { clip: rect(26px, 9999px, 60px, 0); }
  45% { clip: rect(25px, 9999px, 66px, 0); }
  50% { clip: rect(57px, 9999px, 98px, 0); }
  55% { clip: rect(5px, 9999px, 46px, 0); }
  60% { clip: rect(82px, 9999px, 31px, 0); }
  65% { clip: rect(54px, 9999px, 27px, 0); }
  70% { clip: rect(28px, 9999px, 99px, 0); }
  75% { clip: rect(45px, 9999px, 69px, 0); }
  80% { clip: rect(23px, 9999px, 85px, 0); }
  85% { clip: rect(54px, 9999px, 84px, 0); }
  90% { clip: rect(45px, 9999px, 47px, 0); }
  95% { clip: rect(37px, 9999px, 20px, 0); }
  100% { clip: rect(4px, 9999px, 91px, 0); }
}

/* Subtle image distortion on hover */
.glitch-img {
  position: relative;
  display: block;
  transition: filter 0.3s ease;
}

.glitch-img:hover {
  filter: contrast(1.1) brightness(1.05);
  animation: glitch-img-shift 0.3s ease;
}

@keyframes glitch-img-shift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

.glitch-img-subtle {
  transition: filter 0.2s ease;
}

.glitch-img-subtle:hover {
  filter: hue-rotate(5deg) saturate(1.2);
}

/* Noise overlay effect */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card:hover::before {
  opacity: 1;
}

/* ===== Header / Nav ===== */
header{ position:sticky; top:0; background:rgba(17,17,17,.9); backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--border); z-index:100; }
nav{ max-width:1060px; margin:0 auto; padding:.85rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand{ color:var(--text); text-decoration:none; font-weight:500; letter-spacing:.02em; }
.nav-links a{ color:var(--text); opacity:.9; text-decoration:none; margin-left:1rem; transition: color 0.2s ease; }
.nav-links a:hover{ color:var(--accent); }

/* ===== Main ===== */
main{ max-width:1060px; margin:2rem auto; padding:0 1rem; }

/* Hero */
.kicker{ font: 400 12px/1 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.lede{ color:var(--muted); font-size: 1.1rem; }
.hero{ display:grid; grid-template-columns:1.3fr 1fr; gap:1.25rem; align-items:center; }
.hero h1{ font-weight:300; font-size:clamp(2rem,6vw,4.4rem); line-height:1.05; margin:.25rem 0 1rem; letter-spacing:-.01em; }

/* Card / Now playing */
.card{ position: relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; }
.playlist{ list-style:none; margin:.5rem 0 0; padding:0; display:flex; gap:.5rem; flex-wrap:wrap; }
.playlist li{ cursor:pointer; padding:.35rem .6rem; border:1px solid var(--border); border-radius:999px; font-size:.9rem; color:var(--muted); transition: all 0.2s ease; }
.playlist li.active, .playlist li:hover{ border-color:var(--accent); color:var(--text); }

/* Work grid */
.section-title{ font-weight:400; letter-spacing:-.01em; margin:.25rem 0 1rem; }
.work-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); }
.work-card{ position:relative; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:inherit; background:var(--surface); transition: all 0.3s ease; }
.work-card img{ width:100%; height:260px; object-fit:cover; display:block; transition: transform 0.3s ease; }
.work-card .meta{ padding:.75rem; display:flex; flex-direction:column; gap:.25rem; }
.work-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.work-card:hover img{ transform: scale(1.02); }
.card-desc{ font-size: 0.9rem; color: var(--muted); margin: 0.5rem 0 0; }

/* Footer */
footer{ border-top:1px solid var(--border); background:var(--surface); color:#888; margin-top:3rem; padding:1.25rem 1rem; text-align:center; }

/* Buttons */
.btn{ display:inline-block; padding:.65rem 1rem; border-radius:999px; border:1px solid var(--border); color:var(--text); text-decoration:none; transition: all 0.2s ease; }
.btn:hover{ border-color:var(--accent); color:var(--accent); transform: translateX(2px); }
.btn-secondary{ display:inline-block; padding:.65rem 1rem; border-radius:999px; background:var(--surface); color:var(--muted); text-decoration:none; transition: all 0.2s ease; }
.btn-secondary:hover{ color:var(--text); }

/* Social icons */
.social{ list-style:none; padding:0; display:flex; gap:.75rem; }
.social-icon svg{ stroke:var(--text); transition:stroke .25s ease; }
.social-icon:hover svg{ stroke:var(--accent); }

/* Images */
img{ max-width:100%; height:auto; }

/* Accessibility skip */
.skip{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip:focus{ position:static; width:auto; height:auto; padding:.5rem; background:#fff; color:#000; }

/* Reveal */
.reveal{ opacity:0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ===== Project Pages ===== */
.project-page{ max-width:860px; margin:2rem auto; padding:0 1rem; }

.project-hero{ margin-bottom:2rem; }
.project-hero h1{ font-size:clamp(2.5rem,8vw,5rem); font-weight:300; line-height:1.05; margin:.25rem 0 1rem; }

.project-image-hero{ margin:2rem 0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); }
.project-image-hero img{ width:100%; height:auto; display:block; }

.project-section{ margin:3rem 0; }
.project-section h2{ font-weight:400; margin-bottom:1rem; }
.project-section h3{ font-weight:400; font-size:1.3rem; margin:1.5rem 0 0.75rem; color:var(--accent); }
.project-section ul{ line-height:1.8; }
.project-section blockquote{ border-left:3px solid var(--accent); padding-left:1.5rem; margin:1.5rem 0; font-style:italic; color:var(--muted); }

.specs-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin:2rem 0; }
.spec-item{ padding:1rem; }
.spec-item h3{ margin:0 0 0.5rem; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent); }
.spec-item p{ margin:0; color:var(--muted); }

.audio-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); margin:2rem 0; }
.audio-item{ padding:1rem; }
.audio-item h3{ margin:0 0 0.75rem; font-size:1.1rem; }
.audio-item audio{ margin:0.75rem 0; }
.audio-desc{ font-size:0.9rem; color:var(--muted); margin:0.5rem 0 0; }

.audio-featured{ padding:1.5rem; margin:2rem 0; }
.audio-featured audio{ margin:1rem 0; }
.audio-meta{ margin-top:1rem; font-size:0.95rem; }
.audio-meta p{ margin:0.25rem 0; }

.photo-gallery{ display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); margin:2rem 0; }
.gallery-item img{ width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); }
.gallery-item p{ margin:0.5rem 0 0; font-size:0.9rem; color:var(--muted); text-align:center; }

.project-nav{ display:flex; gap:1rem; justify-content:center; margin:4rem 0 2rem; flex-wrap:wrap; }

/* Track List (SoundCloud page) */
.track-list{ display:flex; flex-direction:column; gap:1.5rem; }
.track-item{ padding:1.5rem; }
.track-item h3{ margin:0 0 0.75rem; }
.track-desc{ margin:0.75rem 0 0.25rem; color:var(--muted); }
.track-meta{ margin:0.5rem 0 0; }

/* ===== About Page ===== */
.about-page{ max-width:960px; }

.about-hero{ margin:2rem 0 3rem; }
.about-grid{ display:grid; grid-template-columns:300px 1fr; gap:2rem; align-items:start; }
.about-photo{ position:relative; }
.profile-img{ width:100%; height:auto; border-radius:var(--radius); border:1px solid var(--border); }
.about-copy h1{ margin:0.25rem 0 0.5rem; font-size:2.5rem; font-weight:300; }

.education-item{ margin:1.5rem 0; }
.education-item h3{ margin:0 0 0.25rem; font-weight:400; }
.education-item p{ margin:0.25rem 0; }

.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1rem; margin:2rem 0; }
.skill-category{ padding:1.5rem; }
.skill-category h3{ margin:0 0 0.75rem; font-size:1.1rem; color:var(--accent); }
.skill-category ul{ margin:0; padding:0 0 0 1.25rem; line-height:1.8; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .nav-links{ display:flex; gap:.75rem; flex-wrap:wrap; }
  .work-card img{ height:200px; }
  .about-grid{ grid-template-columns:1fr; }
  .about-photo{ max-width:300px; margin:0 auto; }
}

@media (max-width: 600px){
  .specs-grid{ grid-template-columns:1fr; }
  .audio-grid{ grid-template-columns:1fr; }
  .photo-gallery{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:1fr; }
}