/* Hallmark · macrostructure: inherited site canvas · tone: dark professional technical · anchor hue: ViriHub teal
 * Live scope: global layout density + progressive media + approved project-title treatment
 * Pre-emit critique: P5 H5 E5 S5 R5 V4
 */

:root {
  --vh-canvas-max: 1536px;
  --vh-media-soft-opacity: 0.72;
  --vh-media-scale: 1.018;
  --vh-media-duration: 520ms;
  --vh-media-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --vh-nav-active: #00bfa5;
  --vh-title-glow-near: color-mix(in srgb, var(--vh-nav-active), transparent 38%);
  --vh-title-glow-far: color-mix(in srgb, var(--vh-nav-active), transparent 66%);
}

html,
body {
  overflow-x: clip;
}

html.vh-project-surface-pending #root main {
  visibility: hidden;
}

html.vh-project-surface-pending body::after {
  content: "";
  position: fixed;
  z-index: 1;
  top: clamp(7rem, 14vh, 10rem);
  right: clamp(1rem, 5vw, 5rem);
  left: clamp(1rem, 5vw, 5rem);
  height: min(24rem, 58vh);
  border: 1px solid color-mix(in srgb, var(--vh-nav-active), transparent 72%);
  border-radius: 1rem;
  background:
    linear-gradient(110deg, transparent 20%, rgb(255 255 255 / 6%) 38%, transparent 56%) 0 0 / 220% 100%,
    linear-gradient(180deg, rgb(0 191 165 / 8%), rgb(255 255 255 / 2%));
  animation: vh-project-surface-shimmer 1.4s linear infinite;
  pointer-events: none;
}

.vh-project-surface-fallback {
  max-width: 48rem;
  margin: 6rem auto;
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--vh-nav-active), transparent 55%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
}

.vh-project-surface-fallback h1 {
  margin: 0;
  color: var(--vh-nav-active);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.vh-project-surface-fallback p {
  margin: 1rem 0;
  color: rgb(255 255 255 / 72%);
}

.vh-project-surface-fallback button {
  min-height: 44px;
  padding: 0 1.25rem;
  border: 1px solid var(--vh-nav-active);
  border-radius: 999px;
  background: var(--vh-nav-active);
  color: #071513;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

@keyframes vh-project-surface-shimmer {
  to { background-position: -220% 0, 0 0; }
}

main img.vh-progressive-image {
  opacity: var(--vh-media-soft-opacity);
  transform: scale(var(--vh-media-scale));
  transition:
    opacity var(--vh-media-duration) var(--vh-media-ease-out),
    transform var(--vh-media-duration) var(--vh-media-ease-out);
}

main img.vh-progressive-image.is-sharp {
  opacity: 1;
  transform: scale(1);
}

.vh-active-projects-nav {
  color: var(--vh-nav-active) !important;
}

.vh-project-library .vh-library-head h1,
.vh-achievements h1 {
  color: var(--vh-nav-active);
  font-size: 2.25rem !important;
  font-style: normal;
  text-shadow: 0 0 .16em var(--vh-title-glow-near), 0 0 .52em var(--vh-title-glow-far);
}

html.vh-language-zh .vh-achievements__eyebrow,
html.vh-language-zh .vh-project-library .vh-library-head > div > p {
  display: none;
}

@media (min-width: 40rem) {
  .vh-project-library .vh-library-head h1,
  .vh-achievements h1 {
    font-size: 3rem !important;
  }
}

@media (min-width: 64rem) {
  html {
    font-size: 90%;
  }

  body .max-w-7xl {
    max-width: min(94vw, var(--vh-canvas-max));
  }
}

@media (min-width: 120rem) {
  body .max-w-7xl {
    max-width: min(92vw, var(--vh-canvas-max));
  }
}

@media (prefers-reduced-motion: reduce) {
  html.vh-project-surface-pending body::after {
    animation: none;
  }

  main img.vh-progressive-image {
    opacity: 1;
    transform: none;
    transition-duration: 50ms;
  }
}