/* =====================================================
   DGF TRIVELMORRA — hero.css
   Hero · Three.js Canvas · Strati Geo · Stats · Scroll
   ===================================================== */

#hero {
  position: relative; height: 100vh; min-height: 700px;
  overflow: hidden; display: flex; align-items: flex-end;
  background-image: url('/assets/img/comacchio.jpeg');
  background-size: cover; background-position: center 30%; background-attachment: scroll;
  background-repeat: no-repeat; background-color: #0A0A0A;
}
#hero::before {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35);
  z-index: 0;
}

/* Geological layers text */
.hero-geo-layers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.geo-layer {
  position: absolute; left: 0; right: 0;
  font-size: 9px; font-weight: 500; letter-spacing: 3px; padding: 0 80px;
  color: var(--sand);
}

/* Hero content */
.hero-content {
  position: relative; z-index: 10; padding: 0 80px 160px; max-width: 800px;
}
.hero-eyebrow {
  font-size: 11px; font-weight: 600; color: var(--orange); letter-spacing: 4px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); flex-shrink: 0; }
.hero-title {
  font-size: clamp(52px,8vw,96px); font-weight: 900;
  line-height: 1.0; letter-spacing: -3px; margin-bottom: 28px;
}
.hero-sub {
  font-size: 17px; line-height: 1.7; color: var(--text-dim);
  margin-bottom: 0; max-width: 540px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; }

/* Stats bar */
.hero-stats {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(20,20,20,.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  z-index: 20; height: 90px;
}
.stat-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 1px solid var(--border); padding: 0 20px;
}
.stat-item:last-child { border-right: none; }
.stat-num { font-size: 28px; font-weight: 900; color: var(--orange); letter-spacing: -1px; line-height: 1; }
.stat-label { font-size: 11px; font-weight: 400; color: var(--sand); letter-spacing: .5px; margin-top: 4px; opacity: .8; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute; bottom: 104px; right: 80px;
  writing-mode: vertical-rl; font-size: 10px; font-weight: 500;
  letter-spacing: 3px; color: var(--sand); opacity: .5; z-index: 10;
  display: flex; align-items: center; gap: 12px; transition: opacity .4s;
}
.scroll-indicator::after {
  content: ''; width: 1px; height: 60px;
  background: linear-gradient(var(--orange), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine { 0%,100%{opacity:.3;transform:scaleY(.6)} 50%{opacity:1;transform:scaleY(1)} }

/* Better full-image visibility across devices */
@media (max-width: 1024px) {
  #hero {
    min-height: 640px;
    background-position: center 20%;
  }
}

@media (max-width: 768px) {
  #hero {
    height: auto;
    min-height: 100svh;
    background-size: contain;
    background-position: center top;
  }
  #hero::before {
    background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
  }
}

@media (max-width: 480px) {
  #hero {
    background-size: contain;
    background-position: center top;
  }
}