.cursor-glow {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle 260px at var(--glow-x, 50%) var(--glow-y, 50%), rgba(245, 245, 240, 0.045) 0%, rgba(91, 207, 198, 0.018) 34%, transparent 72%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 300ms ease;
  opacity: 0;
}

.cursor-glow.visible {
  opacity: 1;
}

.ripple-target {
  position: relative;
  overflow: hidden;
}

.ripple-target::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(245, 245, 240, 0.15) 0%, transparent 60%);
  opacity: 0;
  transform: scale(0);
  transition: opacity 300ms ease, transform 300ms ease;
  pointer-events: none;
}

.ripple-target:active::after {
  opacity: 1;
  transform: scale(2.5);
}

.nav-indicator {
  position: absolute;
  bottom: 6px;
  height: 2px;
  background: var(--fg);
  border-radius: 1px;
  transition: left 350ms cubic-bezier(0.16, 1, 0.3, 1), width 350ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.page-hint {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

.page-hint.visible {
  opacity: 1;
}

.gsap-motion-lock {
  transition-property: color, background, background-color, border-color, box-shadow !important;
}

.projects.grid-mode .project-card.is-focused,
.projects.grid-mode .project-card.focus-motion-settling,
.projects.grid-mode.is-focus .project-card:not(.is-focused):not(.is-matched),
.projects.grid-mode.focus-dim-release .project-card.is-focus-dim-release,
.projects.grid-mode.focus-dim-restoring .project-card.is-focus-dim-restoring {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.projects.grid-mode.focus-dim-release .project-card.is-focus-dim-release {
  opacity: 0.36;
  filter: none;
  transform: translate3d(0, 0, calc(var(--z, 0px) - 95px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(calc(var(--s, 1) * 0.9));
}

.projects.grid-mode.focus-dim-release .room-wall .project-card.is-focus-dim-release {
  opacity: 0.34;
  filter: none;
  pointer-events: auto;
  transform: none;
  transform-style: flat;
}

.projects.grid-mode.focus-dim-restoring .project-card.is-focus-dim-restoring {
  transition:
    background 1200ms var(--ease),
    transform 2400ms var(--ease),
    translate 2400ms var(--ease),
    scale 2400ms var(--ease),
    rotate 2400ms var(--ease),
    border-color 1200ms var(--ease),
    opacity 2400ms var(--ease),
    filter 2400ms var(--ease),
    box-shadow 1200ms var(--ease);
}

.projects.grid-mode.focus-dim-restoring .room-wall .project-card.is-focus-dim-restoring {
  transform-style: flat;
}

.projects.grid-mode .project-card.focus-motion-settling,
.projects.grid-mode .project-card.focus-motion-settling .cover,
.projects.grid-mode .project-card.focus-motion-settling .cover img {
  transition-property: background, border-color, box-shadow !important;
}

.route-transition-layer {
  position: fixed; inset: 0;
  z-index: 78;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 52%, rgba(248, 244, 244, 0.14), transparent 34%),
    radial-gradient(ellipse at 30% 28%, rgba(255, 211, 238, 0.12), transparent 42%),
    radial-gradient(ellipse at 72% 66%, rgba(153, 231, 255, 0.1), transparent 44%);
  opacity: 0;
  contain: paint;
  will-change: opacity;
}

.route-transition-layer::before,
.route-transition-layer::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
}

.route-transition-layer::before {
  opacity: 0.34;
  background:
    radial-gradient(circle at 20% 36%, rgba(255, 245, 250, 0.2), transparent 24%),
    radial-gradient(circle at 58% 18%, rgba(154, 218, 255, 0.14), transparent 28%),
    radial-gradient(circle at 80% 76%, rgba(255, 197, 232, 0.16), transparent 26%);
  transform: scale(1.08);
}

.route-transition-layer::after {
  opacity: 0.2;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(248, 246, 242, 0.2), rgba(248, 226, 240, 0.07) 34%, transparent 68%),
    radial-gradient(circle at 46% 48%, rgba(168, 228, 255, 0.08), transparent 58%);
}

.route-transition-veil,
.route-transition-rgb,
.route-transition-dream-field {
  position: absolute;
  pointer-events: none;
}

.route-transition-veil {
  inset: 0;
  background: #020202;
  opacity: 0;
  will-change: opacity;
}

.route-transition-dream-field {
  inset: -16%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(248, 246, 242, 0.42), rgba(246, 214, 236, 0.16) 34%, transparent 70%),
    radial-gradient(circle at 32% 38%, rgba(255, 192, 226, 0.18), transparent 34%),
    radial-gradient(circle at 66% 60%, rgba(151, 223, 255, 0.14), transparent 36%);
  transform-origin: center;
  will-change: transform, opacity;
}

.route-transition-rgb {
  inset: -12%;
  opacity: 0;
  display: none;
  transform-origin: center;
  background: none;
}

.route-transition-rgb[data-channel="red"] {
  background: none;
}

.route-transition-rgb[data-channel="green"] {
  background: none;
}

.route-transition-rgb[data-channel="blue"] {
  background: none;
}

.is-rgb-dispersing {
  filter: none;
  text-shadow: none;
}

.intro-loader.is-rgb-dispersing .intro-signature-ink,
.intro-handwrite.is-rgb-dispersing .intro-signature-ink,
.page-view.is-rgb-dispersing .section-title,
.page-view.is-rgb-dispersing .about-title,
.page-view.is-rgb-dispersing .contact-title {
  text-shadow: none;
}

.page-hint::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-right: 1.5px solid rgba(245, 245, 240, 0.35);
  border-bottom: 1.5px solid rgba(245, 245, 240, 0.35);
  transform: rotate(45deg);
  animation: hintBounce 1.5s ease-in-out infinite;
}

@keyframes hintBounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(5px); }
}

@media (hover: hover) and (pointer: fine) {
  .projects {
    --lens-x: 50%;
    --lens-y: 50%;
    --lens-w: 560px;
    --lens-h: 440px;
    --lens-scene-drift-x: 0px;
    --lens-scene-drift-y: 0px;
    --camera-pan-x: 0px;
    --camera-pan-y: 0px;
    --camera-zoom: 1;
    --camera-tilt-x: 0deg;
    --camera-tilt-y: 0deg;
    --camera-origin-x: 50%;
    --camera-origin-y: 50%;
    --lens-scale: 1;
  }

  .projects.grid-mode.room-mode .room-scene {
    perspective-origin: var(--camera-origin-x) var(--camera-origin-y);
    transform:
      translate3d(var(--camera-pan-x), var(--camera-pan-y), 0)
      scale(var(--camera-zoom))
      rotateX(var(--camera-tilt-x))
      rotateY(var(--camera-tilt-y));
    transform-origin: var(--camera-origin-x) var(--camera-origin-y);
    transition: transform 420ms var(--ease), filter 520ms var(--ease);
    will-change: auto;
  }

  .projects.grid-mode.room-mode.has-hover-focus .room-scene {
    filter: saturate(1.06) brightness(1.03);
    will-change: transform, filter;
  }

  .hover-lens-layer {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 58;
    width: 660px;
    height: 510px;
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform:
      translate3d(var(--lens-x), var(--lens-y), 0)
      translate(-50%, -50%)
      translate3d(var(--lens-scene-drift-x), var(--lens-scene-drift-y), 0)
      scale(calc(var(--lens-scale) * 0.72));
    transform-origin: 50% 50%;
    mix-blend-mode: screen;
    filter: blur(6px);
    transition: opacity 400ms var(--ease), transform 760ms var(--ease), filter 480ms var(--ease);
    will-change: transform, opacity;
  }

  .hover-lens-layer::before,
  .hover-lens-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }

  .hover-lens-layer::before {
    background:
      radial-gradient(ellipse 60% 55% at 48% 45%, rgba(245, 245, 240, 0.15), rgba(91, 207, 198, 0.052) 40%, transparent 72%);
  }

  .hover-lens-layer::after {
    inset: 12%;
    background:
      radial-gradient(circle at 38% 32%, rgba(245, 245, 240, 0.085), transparent 45%),
      repeating-radial-gradient(circle at 50% 50%, rgba(245, 245, 240, 0.016) 0 1px, transparent 1px 8px);
  }

  .projects.has-hover-focus .hover-lens-layer {
    opacity: 1;
    filter: blur(4px);
    transform:
      translate3d(var(--lens-x), var(--lens-y), 0)
      translate(-50%, -50%)
      translate3d(var(--lens-scene-drift-x), var(--lens-scene-drift-y), 0)
      scale(var(--lens-scale));
  }

  .project-card {
    --focus-tilt-x: 0deg;
    --focus-tilt-y: 0deg;
    --dof-blur: 0px;
    --dof-scale: 1;
    --dof-z: 0px;
  }

  .project-card > :not(.card-dot),
  .project-card .cover,
  .project-card .project-title,
  .project-card .project-meta,
  .project-card .project-top {
    position: relative;
  }

  .project-card > :not(.card-dot) {
    z-index: 1;
  }

  .projects.has-hover-focus .project-card::before,
  .projects.has-hover-focus .project-card::after {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  .cover {
    transform-style: preserve-3d;
    transition: border-color 260ms var(--ease), transform 360ms var(--ease);
  }

  .cover::after {
    z-index: 3;
  }

  .cover-label {
    z-index: 4;
  }

  .play-badge {
    z-index: 5;
  }

  .project-card.is-hover-focus .cover,
  .project-card:hover .cover,
  .project-card:focus-within .cover {
    border-color: rgba(245, 245, 240, 0.56);
  }

  .projects.grid-mode .project-card.is-hover-focus .cover {
    transform: translateZ(96px) rotateX(var(--focus-tilt-x)) rotateY(var(--focus-tilt-y));
  }

  .projects.grid-mode .room-wall .project-card.is-hover-focus .cover {
    transform: none;
  }

  .projects:not(.grid-mode) .project-card.is-hover-focus .cover {
    transform: perspective(760px) rotateX(var(--focus-tilt-x)) rotateY(var(--focus-tilt-y)) translateZ(46px);
  }

  .projects.has-hover-focus:not(.is-focus) .project-card:not(.is-hover-focus) {
    opacity: 0.42;
    filter: blur(var(--dof-blur)) saturate(0.66) brightness(0.72);
  }

  .projects.grid-mode.has-hover-focus:not(.is-focus) .project-card.is-hover-near:not(.is-hover-focus):not(.is-stack-occluding) {
    opacity: 0.62;
    filter: blur(1.1px) saturate(0.78) brightness(0.82);
    transform: translate3d(0, -2px, calc(var(--z, 0px) - 58px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(calc(var(--s, 1) * 0.93));
  }

  .projects.grid-mode.has-hover-focus:not(.is-focus) .project-card.is-hover-far:not(.is-hover-focus):not(.is-stack-occluding) {
    opacity: 0.26;
    filter: blur(3.8px) saturate(0.5) brightness(0.54);
    transform: translate3d(0, 6px, calc(var(--z, 0px) - 180px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--rz, 0deg)) scale(calc(var(--s, 1) * 0.78));
  }

  .projects.hover-dim-restoring .project-card.is-hover-dim-restoring {
    transition:
      background 1200ms var(--ease),
      transform 2400ms var(--ease),
      translate 2400ms var(--ease),
      scale 2400ms var(--ease),
      rotate 2400ms var(--ease),
      border-color 1200ms var(--ease),
      opacity 2400ms var(--ease),
      filter 2400ms var(--ease),
      box-shadow 1200ms var(--ease);
    will-change: transform, opacity, filter;
  }

  .projects.grid-mode.has-hover-focus:not(.is-focus) .project-card.is-hover-focus {
    filter: blur(0) saturate(1.16) brightness(1.1);
    transform: translate3d(0, -8px, var(--z, 0px)) rotateX(0deg) rotateY(0deg) rotateZ(var(--rz, 0deg)) scale(calc(var(--s, 1) + 0.035));
  }

  .projects.grid-mode.has-hover-focus:not(.is-focus) .room-wall .project-card.is-hover-focus {
    translate: 0 -10px;
    scale: 1.025;
    transform: translateY(-10px) rotateZ(0deg) scale(1.025);
  }

  .projects.grid-mode.has-hover-focus:not(.is-focus) .project-card.is-stack-occluding {
    opacity: 1;
    filter: none;
  }

  .project-card.is-hover-focus .cover img {
    filter: saturate(1.2) contrast(1.22) brightness(1.1);
    transform: translate3d(0, var(--cover-parallax-y), 0) scale(1.2);
  }

  .projects.grid-mode .room-wall .project-card.is-hover-focus .cover img {
    filter: saturate(1.12) contrast(1.14) brightness(1.04);
    transform: translate3d(0, var(--cover-parallax-y), 0) scale(1.2);
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .hero-slice-stage,
  .hero-slice-field,
  .hero-slice-index,
  .hero-actions,
  .hero-main,
  .kicker,
  .hero-char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-slice-field { transform: translateX(-50%) !important; }

  .hero-slice {
    --slice-tilt-x: 0deg !important;
    --slice-tilt-y: 0deg !important;
    --slice-depth-x: 0px !important;
    --slice-depth-y: 0px !important;
    --slice-depth-z: 0px !important;
    --slice-align-x: 0px !important;
    --slice-align-y: 0px !important;
    --slice-align-rotation: 0deg !important;
    --slice-image-x: 0px !important;
    --slice-image-y: 0px !important;
  }

  .hero-slice-field {
    --hero-camera-x: 0deg !important;
    --hero-camera-y: 0deg !important;
    --hero-camera-z: 0px !important;
    --hero-align-progress: 0 !important;
    --hero-view-glow: 0 !important;
    --restored-image-x: 0px !important;
    --restored-image-y: 0px !important;
    --restored-scroll-y: 0px !important;
    --restored-overlay-opacity: 0 !important;
  }

  .hero-slice img,
  .hero-slice:hover img {
    transform: translate3d(0, 0, 0) scale(1.035) !important;
    transition: none !important;
  }

  .hero-slice-stage.is-restored .hero-slice img {
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  .route-transition-layer { display: none !important; }

  .is-rgb-dispersing { filter: none !important; text-shadow: none !important; }

  .clue-link {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }

  .clue-link.clue-flow { display: none !important; }

  .projects.grid-mode .project-card,
  .projects.grid-mode.is-focus .project-card {
    animation: none !important;
    transition: none !important;
    rotate: 0deg !important;
  }

  .project-card::before {
    display: none !important;
  }

  .clue-link,
  .projects.grid-mode::before,
  .projects.grid-mode::after {
    animation: none !important;
  }

  .page-view.inactive {
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .page-view:not(.inactive) {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .reveal-block {
    opacity: 1 !important;
    transform: none !important;
  }

  .site {
    opacity: 1 !important;
  }

  .intro-loader {
    display: none !important;
  }

  .route-transition-layer {
    display: none !important;
  }

  .cursor-glow,
  .hover-lens-layer {
    display: none !important;
  }

  .cover img {
    --cover-parallax-y: 0px !important;
  }
}

@media (max-width: 980px) {
  .projects.grid-mode.focus-dim-release .project-card.is-focus-dim-release {
    opacity: 0.44 !important;
    filter: none !important;
    transform: none;
  }
}