/* ==========================================================================
   NASIR SAJAD — Raw Editorial Mono
   ========================================================================== */

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

:root {
  --bg:           #ffffff;
  --text:         #080808;
  --text-dim:     #4a4a4a;
  --text-muted:   #aaaaaa;
  --font:         'Syne', sans-serif;
  --mono:         'JetBrains Mono', monospace;
}

body[data-theme="dark"] {
  --bg:           #080808;
  --text:         #f2f2f2;
  --text-dim:     #888888;
  --text-muted:   #444444;
}

html { -webkit-text-size-adjust: 100%; }

body {
  font-family:            var(--font);
  background:             var(--bg);
  color:                  var(--text);
  font-size:              16px;
  line-height:            1.65;
  -webkit-font-smoothing: antialiased;
  cursor:                 none;
  transition:             background 0.45s ease, color 0.45s ease;
}

/* —— Custom minimal cursor —— */
#cursor {
  position:        fixed;
  width:           5px;
  height:          5px;
  background:      var(--text);
  border-radius:   50%;
  pointer-events:  none;
  z-index:         9999;
  top:             0;
  left:            0;
  transform:       translate(-50%, -50%);
  will-change:     left, top, width, height;
  transition:      background 0.4s ease, width 0.2s ease, height 0.2s ease;
}

#cursor.big {
  width:  20px;
  height: 20px;
  background: var(--text);
  opacity: 0.25;
}

/* Glass lens — Apple material + chromatic aberration */
#lens {
  position:        fixed;
  pointer-events:  none;
  z-index:         9996;
  width:           52px;
  height:          52px;
  border-radius:   50%;
  top:             0;
  left:            0;
  transform:       translate(-50%, -50%);
  will-change:     left, top;
  opacity:         0;
  transition:      opacity 0.4s ease;
  overflow:        hidden;

  /* Apple glass material — blur + saturation boost = frosted glass */
  backdrop-filter:         blur(14px) saturate(1.9) brightness(1.08);
  -webkit-backdrop-filter: blur(14px) saturate(1.9) brightness(1.08);
  background:              rgba(255, 255, 255, 0.45);

  /* Glass rim — razor thin */
  border: 0.5px solid rgba(255, 255, 255, 0.9);

  /* Chromatic aberration: red fringe + blue fringe + inner glow */
  box-shadow:
    0 0 0 0.5px rgba(220, 60,  40,  0.22),
    0 0 0 1.0px rgba(40,  60,  220, 0.14),
    inset 0  1.5px 5px rgba(255, 255, 255, 0.75),
    inset 0 -1px  3px rgba(0,   0,   0,   0.05),
    0 4px 18px rgba(0, 0, 0, 0.06);
}

/* Animated prismatic light diffraction — light bending inside the glass */
#lens::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg at 38% 32%,
    rgba(255, 160, 130, 0.16),
    rgba(180, 130, 255, 0.10),
    rgba(120, 180, 255, 0.13),
    rgba(130, 255, 190, 0.08),
    rgba(255, 240, 120, 0.10),
    rgba(255, 160, 130, 0.16)
  );
  animation: lens-prism 5s linear infinite;
  filter:    blur(3px);
  mix-blend-mode: overlay;
}

/* Top-left specular highlight — convex glass catch-light */
#lens::after {
  content: '';
  position: absolute;
  width:  15px;
  height: 10px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  top:    6px;
  left:   8px;
  filter: blur(2.5px);
  transform: rotate(-20deg);
}

@keyframes lens-prism {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Dark mode glass */
body[data-theme="dark"] #lens {
  background:              rgba(18, 18, 18, 0.5);
  border-color:            rgba(255, 255, 255, 0.18);
  backdrop-filter:         blur(14px) saturate(1.6) brightness(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(1.5);
  box-shadow:
    0 0 0 0.5px rgba(220, 60,  40,  0.2),
    0 0 0 1.0px rgba(40,  60,  220, 0.15),
    inset 0  1.5px 5px rgba(255, 255, 255, 0.12),
    inset 0 -1px  3px rgba(0,   0,   0,   0.3),
    0 4px 18px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] #lens::after {
  background: rgba(255, 255, 255, 0.35);
}

/* —— Layout —— */
.wrap {
  max-width: 560px;
  margin:    0 auto;
  padding:   5.5rem 2rem 7rem;
}

/* —— Hero —— */
.hero {
  margin-bottom: 4.5rem;
}

#name {
  display:        inline-block;
  font-size:      clamp(3.2rem, 8.5vw, 5.8rem);
  font-weight:    800;
  letter-spacing: -0.045em;
  line-height:    0.93;
  color:          var(--text);
  cursor:         pointer;
  user-select:    none;
  will-change:    filter;
  filter:         url(#fluid);
  /* idle letter-spacing breath */
  animation:      ls-breath 9s ease-in-out infinite;
}

@keyframes ls-breath {
  0%, 100% { letter-spacing: -0.045em; }
  50%       { letter-spacing: -0.032em; }
}

#name.fluid-active {
  animation-play-state: paused;
}

.sub {
  font-family:    var(--mono);
  font-size:      0.7rem;
  letter-spacing: 0.08em;
  color:          var(--text-muted);
  margin-top:     1.1rem;
}

/* —— Bio —— */
.bio {
  margin-bottom: 4.5rem;
}

.bio p {
  font-size:     0.96rem;
  color:         var(--text-dim);
  line-height:   1.75;
  margin-bottom: 0.8rem;
  max-width:     46ch;
}

.bio p:last-of-type { margin-bottom: 0; }

/* —— Social links —— */
.links {
  display:    flex;
  gap:        1.75rem;
  margin-top: 2rem;
  flex-wrap:  wrap;
}

.links a,
.link-item {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  font-family:     var(--mono);
  font-size:       0.68rem;
  letter-spacing:  0.07em;
  text-decoration: none;
  color:           var(--text-muted);
  position:        relative;
  transition:      color 0.2s ease;
}

.links a svg,
.link-item svg {
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.links a::after,
.link-item::after {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     -2px;
  width:      0%;
  height:     1px;
  background: var(--text);
  transition: width 0.25s ease;
}

.links a:hover,
.link-item:hover         { color: var(--text); }
.links a:hover svg,
.link-item:hover svg     { opacity: 1; }
.links a:hover::after,
.link-item:hover::after  { width: 100%; }

/* —— Work — no lines, no boxes, just space —— */
.work {
  display:        flex;
  flex-direction: column;
  gap:            2.75rem;
}

.work-item {}

/* rose — italicised title to feel distinct without any chrome */
.work-item--rose .work-title {
  font-style: italic;
  color:      var(--text);
}

.work-title {
  display:        block;
  font-size:      1.05rem;
  font-weight:    600;
  letter-spacing: -0.015em;
  color:          var(--text);
  text-decoration: none;
  margin-bottom:  0.35rem;
  transition:     opacity 0.2s ease;
}

.work-title--link:hover { opacity: 0.45; }

.work-desc {
  font-size:   0.88rem;
  color:       var(--text-dim);
  line-height: 1.7;
  max-width:   44ch;
}

/* —— Scroll reveal —— */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity:    0;
    transform:  translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .reveal.in {
    opacity:   1;
    transform: none;
  }
  .reveal.delay-1 { transition-delay: 0.08s; }
  .reveal.delay-2 { transition-delay: 0.16s; }
  .reveal.delay-3 { transition-delay: 0.24s; }
}

/* —— Mobile —— */
@media (max-width: 600px) {
  body   { cursor: auto; }
  #cursor, #lens { display: none; }

  .wrap {
    padding: 3.5rem 1.5rem 5rem;
  }
  .hero {
    margin-bottom: 3.5rem;
  }
  #name {
    font-size: clamp(2.8rem, 13vw, 3.6rem);
  }
  .bio p, .work-desc {
    max-width: none;
    font-size: 0.9rem;
  }
  .work { gap: 2.25rem; }
}