/* Motion layer. Everything here is decorative: the page reads the same without it. */

/* ── Scroll progress line ─────────────────────────────────────────── */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: var(--accent);
  transform-origin: right center;
  transform: scaleX(0);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes progress {
  to {
    transform: scaleX(1);
  }
}

/* ── Word-by-word headings (scroll driven, visible by default) ───── */
.words .w {
  display: inline-block;
}
@supports (animation-timeline: view()) {
  .words .w {
    animation: word linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--i) * 6%) entry calc(45% + var(--i) * 6%);
  }
}
@keyframes word {
  from {
    opacity: 0;
    transform: translateY(0.45em) rotate(-4deg);
    filter: blur(6px);
  }
}

/* ── Custom cursor ring (desktop pointers only) ───────────────────── */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: width 0.3s var(--ease), height 0.3s var(--ease), margin 0.3s var(--ease), background 0.3s, opacity 0.3s;
}
.cursor span {
  font: 600 13px/1 var(--font-body);
  color: var(--accent-ink);
  opacity: 0;
  transition: opacity 0.2s;
}
.cursor.is-on {
  opacity: 1;
}
.cursor.is-link {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: rgba(198, 244, 50, 0.12);
}
.cursor.is-card {
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  background: var(--accent);
}
.cursor.is-card span {
  opacity: 1;
}
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 81;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  opacity: 0;
}
.cursor-dot.is-on {
  opacity: 1;
}

/* ── Card tilt + inner parallax ───────────────────────────────────── */
.cards {
  perspective: 1200px;
}
.thumb {
  --rx: 0deg;
  --ry: 0deg;
  --px: 0px;
  --py: 0px;
  transform-style: preserve-3d;
}
.card-btn:hover .thumb,
.card-btn:focus-visible .thumb {
  transform: translateY(-8px) rotateX(var(--rx)) rotateY(var(--ry));
}
.card-btn:hover .thumb img {
  transform: scale(1.08) translate(var(--px), var(--py));
}
.thumb.is-tilting {
  transition: border-color 0.35s; /* follow the pointer without lag */
}
.thumb .glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.18), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
}
.card-btn:hover .glare {
  opacity: 1;
}

/* Cards re-enter with a staggered clip when the filter changes. */
.card.is-entering {
  animation: card-in 0.6s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes card-in {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0 round 18px);
    transform: translateY(30px);
  }
  to {
    clip-path: inset(0 0 0 0 round 18px);
  }
}

/* ── Magnetic elements ────────────────────────────────────────────── */
.magnetic {
  transition: transform 0.35s var(--ease), background 0.25s, color 0.25s, border-color 0.25s;
}

/* ── Project window: image morph (View Transitions) ───────────────── */
::view-transition-group(project-image) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
}

/* ── Hero orbit follows the pointer ───────────────────────────────── */
.orbit {
  transition: transform 0.6s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .cursor,
  .cursor-dot,
  .progress {
    display: none;
  }
  .words .w {
    animation: none;
  }
}