@media (hover: hover) and (pointer: fine) {
  .image-stage {
    --home-light-x: -500px;
    --home-light-y: -500px;
    --home-light-strength: 0;
    isolation: isolate;
  }

  .hero-image {
    position: relative;
    z-index: 0;
  }

  .top-hotspots,
  .bottom-hotspots {
    position: absolute;
    inset: 0;
    z-index: 3;
  }

  .home-light-layer {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
  }

  .home-light-layer::before {
    position: absolute;
    inset: -10%;
    content: '';
    opacity: var(--home-light-strength);
    background:
      radial-gradient(36% 44% at var(--home-light-x) var(--home-light-y), rgba(237, 251, 255, 0.34), rgba(138, 184, 255, 0.12) 32%, rgba(92, 52, 167, 0.04) 54%, transparent 72%),
      radial-gradient(22% 28% at calc(var(--home-light-x) + 12%) calc(var(--home-light-y) + 12%), rgba(189, 119, 255, 0.14), transparent 70%);
    filter: blur(12px);
    transform: translateZ(0);
  }

  .home-light-layer::after {
    position: absolute;
    inset: 0;
    content: '';
    opacity: calc(var(--home-light-strength) * 0.34);
    background: radial-gradient(1.1% 1.5% at var(--home-light-x) var(--home-light-y), transparent 31%, rgba(238, 249, 255, 0.14) 32%, transparent 49%);
  }

  .home-light-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
  }

  .hotspot {
    overflow: visible;
    border: 0;
    border-radius: 14px;
    transform-origin: center;
    transition: box-shadow 360ms ease;
  }

  .hotspot::before,
  .hotspot-glint {
    position: absolute;
    pointer-events: none;
  }

  .hotspot::before {
    inset: -12px;
    content: '';
    opacity: 0;
    border-radius: 18px;
    background:
      linear-gradient(-45deg, transparent 56%, rgba(231, 246, 255, 0.22) 66%, transparent 76%),
      radial-gradient(110px circle at var(--link-light-x, 50%) var(--link-light-y, 50%), rgba(156, 195, 255, 0.13), rgba(185, 128, 255, 0.07) 42%, transparent 75%);
    background-position: -100% -100%, center;
    background-repeat: no-repeat;
    background-size: 250% 250%, 100% 100%;
    filter: blur(5px);
    mix-blend-mode: screen;
    transition: opacity 360ms ease;
  }

  .hotspot-glint {
    inset: -12px;
    z-index: 1;
    opacity: 0;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(231, 246, 255, 0.74);
    box-shadow: 0 0 20px rgba(187, 137, 255, 0.18);
    transform: scale(0.98);
  }

  .hotspot-glint::after {
    position: absolute;
    inset: 0;
    content: '';
    opacity: 0.72;
    background: linear-gradient(115deg, transparent 35%, rgba(187, 218, 255, 0.08) 48%, rgba(226, 190, 255, 0.16) 57%, transparent 70%);
    background-position: -150% 0;
    background-repeat: no-repeat;
    background-size: 220% 100%;
    mix-blend-mode: screen;
  }

  .hotspot:hover,
  .hotspot.is-lit,
  .hotspot:focus-visible {
    background: transparent;
    box-shadow: none;
  }

  .hotspot:hover::before,
  .hotspot.is-lit::before,
  .hotspot:focus-visible::before {
    opacity: 0.92;
    animation: hotspot-aura-flow 3.8s ease-in-out infinite;
  }

  .hotspot:hover .hotspot-glint::after,
  .hotspot.is-lit .hotspot-glint::after,
  .hotspot:focus-visible .hotspot-glint::after {
    animation: hotspot-glare-flow 3.8s ease-in-out infinite;
  }

  @keyframes hotspot-aura-flow {
    0%, 100% { background-position: -100% -100%, center; }
    50% { background-position: 100% 100%, center; }
  }

  @keyframes hotspot-glare-flow {
    0%, 100% { background-position: -150% 0; }
    50% { background-position: 150% 0; }
  }
}

.mobile-links a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 300ms ease, border-color 300ms ease, background-color 300ms ease;
}

.mobile-links a::after {
  position: absolute;
  inset: 0 -8%;
  z-index: -1;
  content: '';
  opacity: 0;
  background: radial-gradient(120% 210% at var(--link-light-x, 50%) var(--link-light-y, 50%), rgba(232, 248, 255, 0.17), rgba(181, 129, 255, 0.08) 46%, transparent 74%);
  transition: opacity 300ms ease;
}

.mobile-links a:hover,
.mobile-links a:focus-visible,
.mobile-links a.is-lit {
  color: #fff;
  border-color: rgba(225, 243, 255, 0.58);
}

.mobile-links a:hover::after,
.mobile-links a:focus-visible::after,
.mobile-links a.is-lit::after {
  opacity: 1;
}

.chengzhai-project,
.realworld-project,
.brutalism-project,
.marble-project,
.photography-project {
  background-image: url('https://714f2616.zhu-xiaotian-portfolio.pages.dev/assets/bg-smoke.jpg') !important;
}

@media (prefers-reduced-motion: no-preference) {
  #home .image-stage::before {
    position: absolute;
    top: 20%;
    left: 3.3%;
    z-index: 2;
    width: 39.5%;
    height: 26%;
    content: '';
    pointer-events: none;
    background: linear-gradient(90deg, #030303 0%, #030303 92%, transparent 100%);
    transform: scaleX(1);
    transform-origin: right center;
    animation: portfolio-title-reveal 1.7s cubic-bezier(0.16, 1, 0.3, 1) 360ms forwards;
    will-change: transform;
  }
}

@keyframes portfolio-title-reveal {
  to {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-light-layer {
    display: none !important;
  }

  .hotspot,
  .mobile-links a,
  .hotspot::before,
  .mobile-links a::after {
    transition-duration: 1ms !important;
  }
}

/* Cyber Walled City — dense, material-like point-cloud title and sequential studies. */
.cz-copy h1.cz-point-title {
  position: relative;
  min-height: 1.08em;
  color: transparent;
}

.cz-point-title .cz-point-cloud {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.42em;
  transform: translateY(-50%);
  pointer-events: none;
}

.cz-studies.cz-card-sequence { perspective: 1400px; }

.cz-studies.cz-card-sequence.is-card-armed article {
  transform-origin: left center;
  transform: rotateY(72deg) translateX(-4%);
  opacity: 0;
  filter: brightness(0.68);
  will-change: transform, opacity, filter;
}

.cz-studies.cz-card-sequence.is-card-armed.is-card-revealed article {
  animation: cz-card-unfold 780ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.cz-studies.cz-card-sequence.is-card-revealed article:nth-child(2) { animation-delay: 130ms; }
.cz-studies.cz-card-sequence.is-card-revealed article:nth-child(3) { animation-delay: 260ms; }
.cz-studies.cz-card-sequence.is-card-revealed article:nth-child(4) { animation-delay: 390ms; }

@keyframes cz-card-unfold {
  0% { transform: rotateY(72deg) translateX(-4%); opacity: 0; filter: brightness(0.68); }
  68% { transform: rotateY(-3deg) translateX(0); opacity: 1; filter: brightness(1.05); }
  100% { transform: rotateY(0) translateX(0); opacity: 1; filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cz-copy h1.cz-point-title { color: #eee; }
  .cz-point-title .cz-point-cloud { display: none; }
  .cz-studies.cz-card-sequence article { animation: none !important; transform: none; opacity: 1; filter: none; }
}