/* hero3d.css - real-time 3D hero layer (see hero3d.js) */

/* Full-bleed canvas behind the hero text; main{overflow-x:clip} keeps 100vw from scrolling */
.hero-wrapper > .hero3d {
  position: absolute;
  z-index: 0;
  top: -84px;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(.2, .7, .2, 1);
  contain: strict;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 84%, transparent 100%);
}

.hero-wrapper > .hero3d.is-ready { opacity: 1; }

.hero3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Edge blending into the page (the readability veil behind the text is drawn in WebGL) */
.hero3d::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgb(11 10 8 / 0.55) 0%, rgb(11 10 8 / 0) 18%, rgb(11 10 8 / 0) 88%, rgb(11 10 8 / 0.5) 100%);
}

/* The SVG crest stays in the DOM (fallback) and keeps the layout box;
   it is hidden only after WebGL has drawn the finished 3D crest. */
.hero-art.h3d-on .hero-crest {
  visibility: hidden;
  animation: none;
}
.hero-art.h3d-on::before { opacity: 0.35; }

/* Stacked layout: crest above the text; the 3D scene covers the crest zone and fades out */
@media (max-width: 960px) {
  .hero-wrapper > .hero3d {
    top: -40px;
    bottom: auto;
    height: clamp(520px, 62vw + 300px, 800px);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 60%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 60%, transparent 100%);
  }
  .hero3d::after { background: none; }
}