/* Scroll-led typography: every section assembles as it reaches the reading line. */
.scroll-kinetic {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition: opacity 620ms cubic-bezier(.22, .8, .24, 1), transform 760ms cubic-bezier(.22, .8, .24, 1), filter 620ms ease;
}

.scroll-kinetic--up {
  transform: translate3d(0, 2.8rem, 0) scale(.965);
  filter: blur(7px);
}

.scroll-kinetic--left {
  transform: translate3d(-3.5rem, 0, 0);
  filter: blur(6px);
}

.scroll-kinetic--right {
  transform: translate3d(3.5rem, 0, 0);
  filter: blur(6px);
}

.scroll-kinetic--scale {
  transform: scale(.9);
  filter: blur(8px);
}

.scroll-kinetic.is-entered {
  opacity: 1;
  transform: none;
  filter: none;
  transition-delay: var(--kinetic-delay, 0ms);
}

/* The final viewport has no room to cross the normal observer threshold. */
.scroll-kinetic.is-bottom-complete {
  transition-delay: 0ms !important;
  transition-duration: 220ms, 260ms, 220ms;
}

.project-wall .project.scroll-kinetic { pointer-events: none; }
.project-wall .project.scroll-kinetic.is-entered { pointer-events: auto; }

/* A quiet optical cursor: the dot follows precisely while the broken ring has a soft lag. */
body.has-custom-cursor,
body.has-custom-cursor * { cursor: none !important; }

.cursor-lens,
.cursor-dot,
.cursor-ring,
.cursor-tail {
  position: fixed;
  left: var(--cursor-x, -100px);
  top: var(--cursor-y, -100px);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 180ms ease;
}

.cursor-lens.is-visible,
.cursor-dot.is-visible,
.cursor-ring.is-visible,
.cursor-tail.is-visible { opacity: .7; }

.cursor-lens {
  z-index: 20;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  /* Fully white core with only transparent falloff—no red halo and no hard edge. */
  box-shadow: 0 0 8px 3px rgba(255,255,252,1), 0 0 18px 8px rgba(255,255,252,.68), 0 0 44px 20px rgba(255,255,252,.22);
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease;
}

.cursor-dot {
  z-index: 22;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #101412;
  box-shadow: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: normal;
}

/* Three red arcs orbit the exact cursor centre as one compact instrument. */
.cursor-ring {
  z-index: 21;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(from 12deg, #e14848 0 25deg, transparent 25deg 120deg, #e14848 120deg 145deg, transparent 145deg 240deg, #e14848 240deg 265deg, transparent 265deg);
  -webkit-mask: radial-gradient(transparent 64%, #000 65% 69%, transparent 70%);
  mask: radial-gradient(transparent 64%, #000 65% 69%, transparent 70%);
  filter: drop-shadow(0 0 2px rgba(229, 66, 67, .38));
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation: cursor-ring-spin 7s linear infinite;
  transition: opacity 180ms ease;
}

/* Consecutive delayed white points create a compact, soft-edged tadpole tail. */
.cursor-tail {
  z-index: 19;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,252,1);
  box-shadow: 0 0 7px 3px rgba(255,255,252,.78), 0 0 17px 6px rgba(255,255,252,.24);
  transform: translate(-50%, -50%);
  transition: opacity 220ms ease;
}
.cursor-tail--1 { width: 10px; height: 10px; }
.cursor-tail--2 { width: 9px; height: 9px; }
.cursor-tail--3 { width: 8px; height: 8px; }
.cursor-tail--4 { width: 7px; height: 7px; }
.cursor-tail--5 { width: 6px; height: 6px; }
.cursor-tail--6 { width: 5px; height: 5px; }
.cursor-tail--7 { width: 4px; height: 4px; }
.cursor-tail--8 { width: 4px; height: 4px; }
.cursor-tail--9 { width: 3px; height: 3px; }
.cursor-tail.is-visible { opacity: .7; }

@keyframes cursor-ring-spin { to { transform: translate(-50%, -50%) rotate(1turn); } }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-lens,
  .cursor-dot,
  .cursor-ring,
  .cursor-tail { display: none !important; }
  body.has-custom-cursor,
  body.has-custom-cursor * { cursor: auto !important; }
  .scroll-kinetic { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}