/* Native canvas adaptation of an ASCII glass-tile field for the static Showcase. */
.hero {
  isolation: isolate;
  min-height: 100svh;
  min-height: 100dvh;
  overflow: visible;
  --ascii-bridge: clamp(260px, 38svh, 420px);
}

.ascii-tiles {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100% + var(--ascii-bridge));
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--ascii-bridge)), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - var(--ascii-bridge)), transparent 100%);
}

.ascii-tiles::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at 24% 48%, #05071a00 0 24%, #05071a26 64%, #05071a68 100%),
    linear-gradient(90deg, #03061742 0%, #0306170d 52%, #03061736 100%);
  pointer-events: none;
}

.ascii-tiles canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero > .hero-layout { position: relative; z-index: 1; }

.work-chapter { border-top-color: transparent; }
.work-chapter .featured-projects .feature-project {
  border-color: #a9d9ff34;
  background: linear-gradient(150deg, #102958b8 0%, #28100fb0 54%, #120709c7 100%);
}

@media (max-width: 720px) {
  .hero { --ascii-bridge: clamp(210px, 32svh, 320px); }
}

.ghost-fibers-page {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #090617;
}

.ghost-fibers-page canvas { display: block; width: 100%; height: 100%; }
.cursor-glow { z-index: -1; }

@media (prefers-reduced-motion: reduce) {
  .ascii-tiles::after { background-color: #02061138; }
  .ghost-fibers-page { display: none; }
}