.nb3d-hero {
position: relative;
min-height: 100svh;
overflow: hidden;
background: #012622;
color: #fff;
isolation: isolate;
}
.nb3d-hero::after {
content: "";
position: absolute;
z-index: 8;
left: -4%;
right: -4%;
bottom: -6.5vw;
height: 10vw;
min-height: 70px;
background: #fff;
clip-path: polygon(0 42%, 23% 4%, 42% 54%, 67% 0, 100% 51%, 100% 100%, 0 100%);
}
.nb3d-canvas {
position: absolute;
z-index: 1;
inset: 0;
}
.nb3d-canvas canvas {
display: block;
width: 100%;
height: 100%;
}
.nb3d-vignette {
position: absolute;
z-index: 3;
inset: 0;
pointer-events: none;
background: radial-gradient(ellipse at center, transparent 18%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .86) 100%);
}
.nb3d-title-wrap {
position: absolute;
z-index: 5;
left: 50%;
top: 54%;
width: min(720px, 90vw);
transform: translate(-50%, -50%);
text-align: center;
pointer-events: none;
transition: opacity .35s ease;
}
.nb3d-model-loaded .nb3d-title-wrap { opacity: 0; }
.nb3d-title-wrap h1 {
margin: 0;
color: #fff;
font: 950 clamp(52px, 6.6vw, 90px) / .85 Montserrat, Arial, sans-serif;
letter-spacing: -.055em;
text-transform: uppercase;
text-shadow: 0 2px 0 #b0b0b0, 0 5px 0 #333, 0 8px 0 #000, 0 13px 24px rgba(0, 0, 0, .9);
}
.nb3d-title-wrap p {
margin: 24px 0 0;
color: #00a87c;
font: 900 clamp(16px, 1.8vw, 25px) / 1.15 Montserrat, Arial, sans-serif;
letter-spacing: .12em;
text-transform: uppercase;
text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.nb3d-scroll {
position: absolute;
z-index: 12;
left: 50%;
bottom: 78px;
width: 54px;
height: 54px;
transform: translateX(-50%);
}
.nb3d-scroll span {
position: absolute;
left: 15px;
top: 12px;
width: 25px;
height: 25px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(45deg);
animation: nb3d-arrow 2.2s ease-in-out infinite;
}
@keyframes nb3d-arrow {
50% { transform: translateY(8px) rotate(45deg); opacity: .45; }
}
@media (max-width: 850px) {
.nb3d-title-wrap { top: 52%; }
}
@media (max-width: 560px) {
.nb3d-title-wrap h1 { font-size: 46px; }
.nb3d-title-wrap p { font-size: 14px; }
.nb3d-scroll { bottom: 55px; }
}
@media (prefers-reduced-motion: reduce) {
.nb3d-scroll span { animation: none; }
}