@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@200;300;400;600&family=Archivo+Black&display=swap");

:root{
  --bg-color:#000;

  /* Title top placement (param) */
  --title-top-y: 64px;

  /* Timeline */
  --tl-width: 34px;
  --tl-height: 600px;
  --tl-track-height: 520px;
  --tl-label-gap: 30px;

  --tl-glass-blur: 14px;
  --tl-glass-opacity: 0.18;
  --tl-glass-radius: 999px;
  --tl-glass-border: 0.22;
}

html, body{
  margin:0; padding:0;
  width:100%; height:100%;
  background:var(--bg-color);
  overflow:hidden;
  cursor:none !important;
}
*{ cursor:none !important; box-sizing:border-box; }

#bg{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:0;
}

#scene{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  z-index:2;
}

#gridCanvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index:1;

  opacity:0;
  transition: opacity 650ms ease;
  transform: translateZ(0);
}

#noiseCanvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  pointer-events:none;
  z-index:8;
  mix-blend-mode: overlay;
}

/* =========================
   CHAPTER TITLE (CENTERED -> TOP sticky)
   ========================= */
#chapterTitle{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:6;
  pointer-events:none;
  white-space:nowrap;

  opacity:0;
  filter:blur(22px);
  transition: opacity 260ms linear, filter 260ms linear;
  will-change: transform, opacity, filter;
}
#chapterTitle.is-top{
  top: var(--title-top-y);
}
#chapterTitle .ct-a{
  font-family:"Archivo Black", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:min(120px, 10vw);
  line-height:1;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.98);
  margin-right:0.22em;
}
#chapterTitle .ct-b{
  font-family:"Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:200;
  font-size:min(120px, 10vw);
  line-height:1;
  letter-spacing:0.12em;
  color:rgba(255,255,255,0.92);
}

/* =========================
   TIMELINE
   ========================= */
#muonsTimeline{
  position:fixed;
  left:36px;
  top:50%;
  transform:translateY(-50%);
  width: var(--tl-width);
  height: var(--tl-height);
  pointer-events:auto;
  z-index:9;
}
#muonsTimeline .tl-glass{
  position:absolute;
  inset:0;
  border-radius:var(--tl-glass-radius);
  background:rgba(255,255,255,var(--tl-glass-opacity));
  border:1px solid rgba(255,255,255,var(--tl-glass-border));
  backdrop-filter: blur(var(--tl-glass-blur));
  -webkit-backdrop-filter: blur(var(--tl-glass-blur));

  opacity:0;
  filter: blur(22px);
  transform: scale(0.985);
  transition: opacity 650ms ease, filter 850ms ease, transform 650ms ease;
}
#muonsTimeline.glass-in .tl-glass{
  opacity:1;
  filter: blur(0px);
  transform: scale(1);
}

#muonsTimeline .tl-track{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:1px;
  height:var(--tl-track-height);

  opacity:0;
  filter: blur(10px);
  transition: opacity 420ms ease, filter 520ms ease;
}
#muonsTimeline.track-in .tl-track{
  opacity:1;
  filter: blur(0px);
}

#muonsTimeline .tl-line{
  position:absolute; inset:0;
  width:1px; height:100%;
  background:rgba(255,255,255,0.22);
  transform-origin:top;
  transform:scaleY(0);
}
#muonsTimeline.ready .tl-line{
  transform:scaleY(1);
  transition: transform 900ms ease;
}

#muonsTimeline .tl-fill{
  position:absolute; left:0; top:0;
  width:1px; height:100%;
  background:rgba(255,255,255,0.85);
  transform-origin:top;
  transform:scaleY(0);
  transition: transform 220ms ease;
}

@keyframes tlBlink {
  0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.85); }
  50%      { opacity: 1.0;  transform: translate(-50%, -50%) scale(1.0); }
}
#muonsTimeline.pre #tlTraveler{ animation: tlBlink 520ms ease-in-out infinite; }

#tlMarkers{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:100%;
  overflow:visible;
}

.tl-marker{
  position:absolute;
  left:0px;
  transform:translate(-50%,-50%);
  opacity:0;
  transition: opacity 280ms ease;
  pointer-events:auto;
}
.tl-marker.show{ opacity:1; }

/* DOT markers */
.tl-marker.dot{
  width:18px; height:18px;
  border-radius:50%;
}
.tl-marker.dot::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:5px; height:5px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,0.45);
  transition: transform 160ms ease, background 160ms ease;
}

/* TICK markers */
.tl-marker.tick{
  width:18px; height:18px;
}
.tl-marker.tick::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:12px; height:1px;
  transform:translate(-50%,-50%);
  background:rgba(255,255,255,0.32);
  transition: transform 160ms ease, background 160ms ease;
}

/* Labels: ONLY on hover, slide out */
.tl-marker .tl-label{
  position:absolute;
  left: calc(16px + var(--tl-label-gap));
  top:50%;
  transform:translateY(-50%) translateX(-18px);
  opacity:0;

  font: 600 10px/1 "Archivo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing:0.14em;
  color:rgba(255,255,255,0.72);
  white-space:nowrap;
  user-select:none;

  transition: opacity 240ms ease, transform 240ms ease, color 240ms ease;
}
#muonsTimeline:hover .tl-marker.dot.show .tl-label{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.tl-marker.dot.active::before{
  transform:translate(-50%,-50%) scale(1.9);
  background:rgba(255,255,255,0.95);
  box-shadow:0 0 12px rgba(255,255,255,0.35);
}
.tl-marker.dot.active .tl-label{
  color:rgba(255,255,255,0.95);
}
.tl-marker.tick.active::before{
  background:rgba(255,255,255,0.70);
  transform:translate(-50%,-50%) scaleX(1.1);
}

#tlTraveler{
  position:absolute;
  left:0px;
  top:0px;
  width:12px; height:12px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  transform:translate(-50%,-50%);
  box-shadow:0 0 14px rgba(255,255,255,0.28);
}

/* Cursor custom */
#muonsCursorDot, #muonsCursorRing{
  position:fixed; left:0; top:0;
  pointer-events:none;
  z-index:10;
  transform:translate(-999px,-999px);
}
#muonsCursorDot{
  width:var(--cursor-dot-size,4px);
  height:var(--cursor-dot-size,4px);
  border-radius:50%;
  background:rgba(var(--cursor-dot-color,255,255,255), var(--cursor-dot-opacity,0.95));
}
#muonsCursorRing{
  width:var(--cursor-ring-size,40px);
  height:var(--cursor-ring-size,40px);
  border-radius:50%;
  border: var(--cursor-ring-stroke,1px) solid rgba(var(--cursor-ring-color,255,255,255), var(--cursor-ring-opacity,0.35));
}

#scroll-spacer{
  height:260vh;
}