#net {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 18% 48%, rgba(5,8,6,.78) 0%, rgba(5,8,6,.2) 58%, transparent 78%),
    linear-gradient(90deg, rgba(5,8,6,.55) 0%, transparent 52%);
}

.site-stage {
  position: relative;
  z-index: 2;
}

.page-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  visibility: hidden;
  background:
    radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), rgba(98,250,129,.28) 0%, rgba(24,176,55,.12) 22%, #050806 58%);
  clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%));
}

.page-veil.active {
  visibility: visible;
  pointer-events: auto;
}

html.cupisplay-js:not(.page-ready) .site-stage {
  visibility: hidden;
}

html.cupisplay-trans .page-veil {
  visibility: visible;
  clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%));
}

html.cupisplay-trans .site-stage {
  visibility: hidden;
}

.page-veil.covering {
  animation: veil-cover .26s cubic-bezier(.22, 1, .36, 1) forwards;
}

.page-veil.revealing {
  animation: veil-reveal .38s cubic-bezier(.16, 1, .3, 1) forwards;
}

@keyframes veil-cover {
  from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); }
  to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); }
}

@keyframes veil-reveal {
  from { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 50%)); }
  to { clip-path: circle(0 at var(--vx, 50%) var(--vy, 50%)); }
}

html.page-ready .site-stage {
  visibility: visible;
  animation: stage-in .8s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes stage-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Catalog pages: show chrome immediately, skip expensive blur on the tile grid. */
html.cupisplay-catalog.cupisplay-js:not(.page-ready):not(.cupisplay-trans) .site-stage {
  visibility: visible;
}

html.cupisplay-catalog.page-ready .site-stage {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  html.cupisplay-js:not(.page-ready) .site-stage,
  html.cupisplay-trans .site-stage { visibility: visible; }
  html.cupisplay-trans .page-veil,
  .page-veil,
  .page-veil.covering,
  .page-veil.revealing {
    animation: none;
    visibility: hidden;
    pointer-events: none;
  }
  html.page-ready .site-stage { animation: none; }
}