/*
Theme Name: Saalaar Portfolio
Author: Salar Shams
Description: Minimal one-page visual artist portfolio.
Version: 1.0
*/

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:#0e0e0e;
  color:#f4f2ee;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  overflow-x:hidden;
}

a { color:inherit; text-decoration:none; }

.nav {
  position:fixed;
  top:0; left:0; right:0;
  display:flex;
  justify-content:flex-end;
  gap:2rem;
  padding:2rem 3rem;
  z-index:10;
  mix-blend-mode:difference;
}

.nav-link {
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  opacity:0.8;
  transition:opacity .3s;
}
.nav-link:hover { opacity:1; }

.hero {
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 3rem;
  overflow:hidden;
}

.marker-canvas {
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:1;
  touch-action:none;
}

.hero-text {
  position:relative;
  z-index:2;
  pointer-events:none;
}

.scroll-cue {
  position:absolute;
  bottom:2.5rem;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.5rem;
  pointer-events:none;
  opacity:0.6;
}
.scroll-cue span {
  width:1px;
  height:32px;
  background:linear-gradient(to bottom, transparent, #f4f2ee);
  animation:scrollPulse 1.8s ease-in-out infinite;
}
.scroll-cue small {
  font-size:0.7rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
}
@keyframes scrollPulse {
  0%, 100% { transform:scaleY(0.4); opacity:0.4; }
  50% { transform:scaleY(1); opacity:1; }
}

.hero h1 {
  font-size:clamp(3rem, 9vw, 8rem);
  font-weight:600;
  line-height:0.95;
}

.hero h2 {
  font-size:clamp(1.5rem, 4vw, 3rem);
  font-weight:400;
  opacity:0.85;
  margin-top:0.5rem;
}

.tagline {
  margin-top:1.5rem;
  font-size:1rem;
  opacity:0.6;
  letter-spacing:0.05em;
}

.section-label {
  font-size:0.85rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  opacity:0.5;
  margin-bottom:2rem;
}

.work {
  padding:6rem 3rem;
}

.work-list { list-style:none; }

.work-item {
  display:block;
  font-size:clamp(1.8rem, 5vw, 4rem);
  font-weight:500;
  padding:1rem 0;
  border-bottom:1px solid rgba(244,242,238,0.15);
  transition:opacity .3s, padding-left .3s;
}
.work-item:hover {
  opacity:0.6;
  padding-left:1rem;
}

.info {
  padding:6rem 3rem;
  max-width:700px;
}
.info p {
  font-size:1.1rem;
  line-height:1.6;
  opacity:0.85;
}

.contact {
  padding:4rem 3rem 3rem;
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  align-items:center;
  border-top:1px solid rgba(244,242,238,0.15);
}

.contact a, .copyright {
  font-size:0.9rem;
  opacity:0.7;
}
.contact a:hover { opacity:1; }

@media (max-width:600px){
  .nav { padding:1.5rem; gap:1.2rem; }
  .hero, .work, .info, .contact { padding-left:1.5rem; padding-right:1.5rem; }
}

/* Cursor follower */
@media (hover:hover) and (pointer:fine){
  body { cursor:none; }
  a, .work-item { cursor:none; }

  .cursor-dot,
  .cursor-ring {
    position:fixed;
    top:0; left:0;
    pointer-events:none;
    border-radius:50%;
    z-index:9999;
    transform:translate(-50%,-50%);
  }

  .cursor-dot {
    width:6px;
    height:6px;
    background:#f4f2ee;
  }

  .cursor-ring {
    width:36px;
    height:36px;
    border:1px solid rgba(244,242,238,0.6);
    transition:width .25s, height .25s, border-color .25s, background-color .25s;
  }

  .cursor-ring.is-hovering {
    width:70px;
    height:70px;
    background:rgba(244,242,238,0.08);
    border-color:rgba(244,242,238,0.9);
  }
}

@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring { display:none; }
}

/* Marquee */
.marquee {
  overflow:hidden;
  white-space:nowrap;
  border-top:1px solid rgba(244,242,238,0.15);
  padding:1.5rem 0;
}
.marquee-track {
  display:inline-flex;
  width:max-content;
  animation:marqueeScroll 18s linear infinite;
}
.marquee-track span {
  font-size:clamp(2.5rem, 8vw, 6rem);
  font-weight:700;
  letter-spacing:-0.02em;
}
@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to { transform:translateX(-50%); }
}

/* Work detail overlay (opens like a folder over the page) */
.work-overlay {
  position:fixed;
  inset:0;
  background:#0e0e0e;
  z-index:200;
  padding:4rem 3rem;
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.work-overlay.is-open { transform:translateY(0); }

.work-overlay-close {
  position:absolute;
  top:2rem;
  right:2rem;
  background:none;
  border:none;
  color:#f4f2ee;
  font-size:2.5rem;
  cursor:pointer;
  line-height:1;
}

.work-overlay-title {
  font-size:clamp(2rem, 6vw, 4.5rem);
  margin-bottom:1.5rem;
}

.work-overlay-description {
  max-width:640px;
  opacity:0.8;
  line-height:1.6;
  margin-bottom:2.5rem;
}

.work-overlay-images {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:1.5rem;
}
.work-overlay-images img {
  width:100%;
  display:block;
  border-radius:2px;
}

/* Info dots (typewriter blink) + extend */
.info-dots {
  display:flex;
  gap:0.4rem;
  margin-top:1.5rem;
  background:none;
  border:none;
  cursor:pointer;
  padding:0.5rem 0;
}
.info-dots span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f4f2ee;
  opacity:0.4;
}
.info-dots span:nth-child(2) {
  animation:dotBlink 1.4s ease-in-out infinite;
}
@keyframes dotBlink {
  0%, 100% { opacity:0.3; }
  50% { opacity:1; }
}

.info-extended {
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .6s ease, opacity .5s ease;
  margin-top:1.5rem;
  max-width:700px;
}
.info-extended.is-open {
  max-height:600px;
  opacity:1;
}
.info-extended p {
  line-height:1.6;
  opacity:0.8;
}