/* Shared UI animations for the static site (index + /work/*.html). */

#page-load-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: var(--bg, #ffffff);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-load-sheen {
  width: min(560px, 82%);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--accent-2, #7BA496) 40%, transparent 100%);
  transform-origin: center;
  animation: page-load-sheen 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
  opacity: 0.9;
}

.page-load-bar {
  position: absolute;
  bottom: 22vh;
  left: 50%;
  width: min(520px, 80%);
  height: 8px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent, #59FFC9) 80%, transparent);
  transform: translateX(-50%) scaleX(0.1);
  animation: page-load-bar 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms both;
  opacity: 0.75;
}

html.is-loaded #page-load-overlay {
  opacity: 0;
  transition: opacity 500ms ease;
}

@keyframes page-load-sheen {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  30% {
    opacity: 0.95;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}

@keyframes page-load-bar {
  0% {
    transform: translateX(-50%) scaleX(0.1);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
  }
}

/* Touch overscroll “rubber band” (subtle). */
#overscroll-effect {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
}

#overscroll-effect::before,
#overscroll-effect::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}

#overscroll-effect::before {
  top: 0;
  background: radial-gradient(circle at 50% 0%, rgba(89, 255, 201, 0.22), transparent 65%);
  transform: translateY(calc(var(--site-overscroll-abs, 0px) * 0.08));
}

#overscroll-effect::after {
  bottom: 0;
  background: radial-gradient(circle at 50% 100%, rgba(89, 255, 201, 0.18), transparent 65%);
  transform: translateY(calc(var(--site-overscroll-abs, 0px) * -0.08));
}

/* JS sets these vars: 0..1 for opacity + px for abs. */
#overscroll-effect[data-top='true']::before {
  opacity: var(--site-overscroll-top, 0);
}

#overscroll-effect[data-bottom='true']::after {
  opacity: var(--site-overscroll-bottom, 0);
}

@media (prefers-reduced-motion: reduce) {
  #page-load-overlay,
  #overscroll-effect {
    display: none;
  }
}