:root{
  --black:#000000;
  --white:#f2f2f2;
  --muted:#a8a8a8;
  --accent:#5fd8ff;
  --font:'Space Grotesk', 'JetBrains Mono', 'Menlo', monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  background:var(--black);
  color:var(--white);
  overflow-x:hidden;
  min-height:100vh;
  cursor:none;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;}

@media (hover:none){ body{cursor:auto;} }

/* ---------- Custom cursor ---------- */
.cursor-blur{
  position:fixed;
  top:0;left:0;
  width:36px;height:36px;
  border-radius:50%;
  background:var(--accent);
  filter:blur(6px);
  opacity:.85;
  pointer-events:none;
  z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .3s ease, height .3s ease, opacity .25s ease, filter .3s ease;
}
.cursor-blur.hovering{
  width:64px;height:64px;
  filter:blur(10px);
  opacity:1;
}
@media (hover:none){ .cursor-blur{display:none;} }

/* ---------- Header / Nav ---------- */
header{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1.8rem 3rem;
  z-index:200;
  font-size:1rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:transparent;
}
header .logo a{
  color:var(--white);
  font-weight:700;
  font-size:1.9rem;
  letter-spacing:.04em;
  transition:color .25s ease;
}
header .logo a:hover{
  color:var(--accent);
}
header nav{display:flex;gap:2.4rem;}
header nav a{
  color:var(--white);
  opacity:.35;
  filter:blur(2px);
  transition:opacity .3s ease, filter .3s ease, color .3s ease;
}
header nav a:hover{
  opacity:1;
  filter:blur(0px);
  color:var(--accent);
}
header nav a.active{
  opacity:.75;
  filter:blur(0px);
}
header nav a.active:hover{color:var(--accent);}

/* ---------- Hero (Landing) ---------- */
.hero{
  height:100vh;
  width:100%;
  background:var(--black);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-video-bg{
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate(-50%,-50%);
  z-index:1;
  pointer-events:none;
}
.flashlight{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:radial-gradient(
    circle 620px at var(--mx, 50%) var(--my, 50%),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.08) 35%,
    rgba(0,0,0,0.55) 70%,
    rgba(0,0,0,0.92) 100%
  );
}

/* ---------- Fixed Science/Blueprint Line Overlay ---------- */
.sketch-overlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:9990;
  pointer-events:none;
  opacity:0.6;
}
.sketch-overlay svg{
  display:block;
  width:100%;
  height:100%;
}
.sk-line{
  fill:none;
  stroke:var(--accent);
  vector-effect:non-scaling-stroke;
}
.sk-w2{ stroke-width:0.45; }
.sk-w1{ stroke-width:0.25; }
.sk-w05{ stroke-width:0.14; opacity:0.75; }
.sk-dashed{ stroke-dasharray:2 1.5; }
.sk-sparse{ opacity:0.4; }
.track-square{ opacity:0.5; }

@media (max-width:900px){
  .sketch-overlay{ opacity:0.85; }
  .sk-w2{ stroke-width:0.7; }
  .sk-w1{ stroke-width:0.45; }
  .sk-w05{ stroke-width:0.28; }
  .sk-dashed{ stroke-dasharray:3 2; }
}

/* ---------- Projects page ---------- */
body.projects-page{
  background:var(--black);
  color:var(--white);
}
.project-list{
  padding:8rem 3rem 6rem;
  min-height:100vh;
  max-width:1400px;
  margin:0 auto;
}
.project-row{
  display:flex;
  align-items:baseline;
  gap:.8rem;
  padding:1rem 0;
  transition:background .2s ease, padding-left .3s ease;
  flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.project-row:hover{
  background:rgba(255,255,255,.04);
  padding-left:1rem;
}
.project-row .title{
  font-size:1.4rem;
  font-weight:700;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:.02em;
}
.project-row .meta{
  font-size:.9rem;
  font-weight:400;
  color:var(--muted);
}
.project-row .meta em{font-style:italic;}

/* ---------- Hover preview ---------- */
#hover-preview{
  position:fixed;
  top:0;left:0;
  width:340px;
  height:340px;
  z-index:500;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  transform:translate(60%,-50%) scale(.94);
  transition:opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow:0 16px 40px rgba(0,0,0,.5);
  background:#000;
}
#hover-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
#hover-preview.visible{opacity:1;transform:translate(60%,-50%) scale(1);}

/* ---------- Inner pages ---------- */
body.inner-page{
  background:var(--black);
  color:var(--white);
}

/* About */
.about-content{
  min-height:100vh;
  padding:9rem 4rem 6rem;
  max-width:1400px;
  margin:0 auto;
}
.about-content h1{
  font-size:3.2rem;
  margin-bottom:2rem;
  color:var(--white);
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.about-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  margin-bottom:4rem;
}
.about-intro p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--white);
}
.birth-line{
  font-size:.95rem;
  color:var(--white);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:3rem;
  padding-top:3rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.cv-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:3rem;
  margin-top:1.2rem;
}
.cv-block h2{
  font-size:1.2rem;
  color:var(--white);
  margin-bottom:1rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.cv-block p{
  font-size:.95rem;
  line-height:1.7;
  color:var(--white);
  margin-bottom:.5rem;
}

/* Contact */
.contact-center{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1.8rem;
  padding:6rem 2rem;
  text-align:center;
}
.contact-center a{
  font-size:2.4rem;
  font-weight:600;
  color:var(--white);
  letter-spacing:-.01em;
  transition:color .25s ease, transform .25s ease;
}
.contact-center a:hover{
  color:var(--accent);
  transform:translateY(-2px);
}

/* ---------- Single artwork ---------- */
.work-content{
  min-height:100vh;
  padding:9rem 4rem 6rem;
  max-width:1400px;
  margin:0 auto;
}
.back-link{
  display:inline-block;
  margin-bottom:2.5rem;
  font-size:.9rem;
  color:var(--muted);
  transition:color .2s ease;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.back-link:hover{color:var(--accent);}

.work-layout{
  display:grid;
  grid-template-columns:1.9fr 1fr;
  gap:4rem;
  align-items:start;
}
.work-text h1{
  font-size:2.4rem;
  margin-bottom:.6rem;
  color:var(--white);
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.work-meta{
  display:block;
  font-size:.85rem;
  color:var(--accent);
  margin-bottom:1.6rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.work-text p{
  font-size:1.05rem;
  line-height:1.8;
  color:var(--muted);
}

/* ---------- Slider ---------- */
.slider-wrap{
  position:relative;
  padding:0 60px;
}
.slider{
  position:relative;
  width:100%;
  height:72vh;
  overflow:hidden;
  background:#000;
}
.slider-track{
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -webkit-user-select:none;
  user-select:none;
}
.slider-track::-webkit-scrollbar{display:none;}
.slider-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  cursor:none;
}
.slider-slide img,
.slider-slide video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}
.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  background:transparent;
  color:var(--white);
  border:none;
  cursor:none;
  font-size:2.8rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  padding:0;
  transition:color .2s ease, transform .2s ease;
}
.slider-btn:hover{
  color:var(--accent);
  transform:translateY(-50%) scale(1.15);
}
.slider-btn.prev{left:0;}
.slider-btn.next{right:0;}
.slider-dots{
  display:flex;
  justify-content:center;
  gap:.5rem;
  margin-top:1rem;
}
.slider-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
  transition:background .2s ease, transform .2s ease;
  cursor:none;
}
.slider-dot.active{
  background:var(--accent);
  transform:scale(1.3);
}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:3rem;
}
.lightbox.open{display:flex;}
.lightbox img,
.lightbox video{
  max-width:95vw;
  max-height:92vh;
  object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.lightbox-close{
  position:absolute;
  top:1.5rem;
  right:2rem;
  font-size:2rem;
  color:var(--white);
  background:transparent;
  border:none;
  cursor:none;
  transition:color .2s ease, transform .2s ease;
}
.lightbox-close:hover{color:var(--accent);transform:scale(1.15);}

/* ---------- Back home ---------- */
.back-home{
  position:fixed;
  bottom:2rem;
  left:3rem;
  font-size:.85rem;
  color:var(--muted);
  z-index:150;
  transition:color .2s ease;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.back-home:hover{color:var(--accent);}

/* ---------- Model CTA ---------- */
.model-cta{
  position:fixed;
  bottom:80px;
  right:40px;
  z-index:9995;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-end;
  gap:0.8rem;
  text-decoration:none;
  color:var(--white);
  cursor:none;
}
.model-stage{
  width:230px;
  height:230px;
  pointer-events:auto;
  overflow:hidden;
  position:relative;
  z-index:2;
  transform:translateX(-100px);
  margin-bottom:-40px;
  filter:drop-shadow(0 0 24px rgba(95,216,255,.12));
  transition:filter .4s ease, transform .4s ease;
}
.model-cta:hover .model-stage{
  filter:drop-shadow(0 0 36px rgba(95,216,255,.35));
  transform:translateX(-100px) translateY(-4px);
}
#modelCanvas{
  display:block;
  width:100%;
  height:100%;
}
.model-label-wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:14px 24px;
  transform:translateX(-100px);
}
.tracking-frame{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.tracking-frame::before,
.tracking-frame::after{
  content:'';
  position:absolute;
  width:14px;
  height:14px;
  border:1px solid var(--accent);
  opacity:0.7;
}
.tracking-frame::before{
  top:0;
  left:0;
  border-right:none;
  border-bottom:none;
}
.tracking-frame::after{
  bottom:0;
  right:0;
  border-left:none;
  border-top:none;
}
.model-label{
  position:relative;
  font-family:var(--font);
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--white);
  opacity:.85;
  transition:color .25s ease, opacity .25s ease, letter-spacing .3s ease;
  pointer-events:auto;
  max-width:260px;
  text-align:right;
}
.model-cta:hover .model-label{
  color:var(--accent);
  opacity:1;
  letter-spacing:.16em;
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  header{padding:1.2rem 1.4rem;}
  header nav{gap:1.2rem;font-size:.75rem;}
  header .logo a{font-size:1.2rem;}
  header nav a{opacity:.6;filter:blur(0px);}
  .project-list{padding:6.5rem 1.4rem 4rem;}
  .project-row .title{font-size:1.1rem;}
  #hover-preview{display:none;}
  .about-content{padding:6.5rem 1.4rem 4rem;}
  .about-content h1{font-size:2rem;}
  .about-intro{grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.5rem;}
  .birth-line{margin-top:2rem;padding-top:2rem;}
  .cv-grid{grid-template-columns:1fr;gap:2rem;margin-top:1rem;}
  .work-content{padding:6.5rem 1.4rem 4rem;}
  .work-layout{grid-template-columns:1fr;gap:1.5rem;}
  .work-text h1{font-size:1.6rem;}
  .contact-center a{font-size:1.5rem;}
  .cursor-blur{display:none;}
  body{cursor:auto;}
  .back-home{left:1.4rem;bottom:1.4rem;}

  .slider-btn{
    display:none;
  }

  .slider-wrap{
    padding:0;
    margin:0 -1.4rem;
    width:100vw;
  }

  .slider{
    height:auto;
    aspect-ratio:1/1;
  }

  .slider-slide img,
  .slider-slide video{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .slider-dots{
    margin-top:.8rem;
    padding:0 1.4rem;
  }

  .model-cta{
    bottom:56px;
    right:20px;
  }
  .model-stage{
    width:150px;
    height:150px;
    transform:translateX(-50px);
    margin-bottom:-24px;
  }
  .model-cta:hover .model-stage{
    transform:translateX(-50px) translateY(-4px);
  }
  .model-label-wrap{
    transform:translateX(-50px);
    padding:10px 16px;
  }
  .model-label{
    font-size:.85rem;
    letter-spacing:.08em;
    max-width:180px;
    text-align:right;
  }
  .tracking-frame::before,
  .tracking-frame::after{
    width:10px;
    height:10px;
  }
}