/* Subtle depth: grain, grid, ambient light */

html{
  background:var(--bg,#f7f7f5);
}

body{
  position:relative;
  isolation:isolate;
  background:var(--bg,#f7f7f5);
}

/* Fine grain overlay */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:none;
  opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* Dot grid, neutral tint, fades toward edges */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(0,0,0,0.12) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 20%,#000 20%,transparent 75%);
  opacity:0.35;
}

.hero,.cs-hero,.page-header{
  position:relative;
  overflow:hidden;
}

.hero::before,.cs-hero::before,.page-header::before{
  content:'';
  position:absolute;
  width:min(520px,70vw);
  height:min(520px,70vw);
  top:-30%;
  right:-12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,0.05) 0%,transparent 68%);
  pointer-events:none;
  z-index:0;
  animation:ambient-drift 22s ease-in-out infinite alternate;
}

.hero::after,.cs-hero::after,.page-header::after{
  content:'';
  position:absolute;
  width:min(360px,50vw);
  height:min(360px,50vw);
  bottom:-35%;
  left:-8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,0.04) 0%,transparent 70%);
  pointer-events:none;
  z-index:0;
  animation:ambient-drift-alt 28s ease-in-out infinite alternate;
}

@keyframes ambient-drift{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(-24px,18px) scale(1.06)}
}

@keyframes ambient-drift-alt{
  from{transform:translate(0,0) scale(1)}
  to{transform:translate(20px,-14px) scale(1.04)}
}

.ambient-canvas,#hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:0.85;
}

.hero-left,.hero-right,.cs-hero > .cs-back,.cs-hero-inner,.page-header > *{
  position:relative;
  z-index:1;
}

nav{
  box-shadow:0 1px 0 rgba(0,0,0,0.04),0 2px 12px rgba(0,0,0,0.05);
}

a.work-row:hover,a.project-card:hover{
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,0.06),
    0 2px 6px rgba(0,0,0,0.05),
    0 8px 24px rgba(0,0,0,0.1),
    0 16px 48px rgba(0,0,0,0.06);
}

a.project-card{
  box-shadow:var(--shadow-sm);
}

a.project-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.55) 0%,transparent 55%);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}

a.project-card:hover::after{opacity:1}

img[data-lightbox]{
  border:1px solid var(--border);
  background:#fafafa;
  box-shadow:var(--shadow-sm);
}

.nav-links a:hover,.nav-links a.active{
  color:var(--accent,#171717);
}

a.work-row:hover .work-arrow{
  color:var(--accent,#171717);
}

footer{
  box-shadow:0 -1px 0 rgba(0,0,0,0.04),0 -4px 16px rgba(0,0,0,0.03);
}

.hero{
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0.04);
}

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after,.cs-hero::before,.cs-hero::after,.page-header::before,.page-header::after{
    animation:none;
  }
  .ambient-canvas,#hero-canvas{display:none}
}