/* ==========================================================================
   hero.css — the 3D-parallax mountain scene used on the homepage
   ========================================================================== */

.scene{
  position:relative;
  height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg, #0a1518 0%, var(--night) 55%, var(--teal) 100%);
  perspective:1px;
  perspective-origin:center bottom;
  transform-style:preserve-3d;
}

.scene-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.scene-layer svg{
  width:100%;
  height:auto;
}

/* base depth via translateZ + inverse scale; script.js adds scroll translateY on top */
.depth-1{ transform: translateZ(-3px) scale(4); }
.depth-2{ transform: translateZ(-2px) scale(3); }
.depth-3{ transform: translateZ(-1.2px) scale(2.2); }
.depth-4{ transform: translateZ(-0.4px) scale(1.4); }

.glow{
  position:absolute;
  bottom:-10%;
  left:50%;
  transform:translateX(-50%);
  width:120vw;
  height:60vh;
  background:radial-gradient(ellipse at center, rgba(201,162,75,0.35) 0%, rgba(201,162,75,0.08) 40%, transparent 70%);
  pointer-events:none;
}

.hero-copy{
  position:absolute;
  left:6vw;
  bottom:14vh;
  max-width:640px;
  color:var(--cream);
  z-index:5;
}
.hero-eyebrow{
  font-size:0.85rem;
  letter-spacing:0.04em;
  color:var(--gold-soft);
  margin-bottom:18px;
}
.hero-copy h1{
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.02;
  color:#fff;
}
.hero-copy p{
  margin-top:22px;
  font-size:1.05rem;
  line-height:1.6;
  color:rgba(237,230,214,0.82);
  max-width:480px;
}
.hero-actions{
  margin-top:34px;
  display:flex;
  gap:16px;
}

.hero-scroll-hint{
  position:absolute;
  right:6vw;
  bottom:8vh;
  color:rgba(237,230,214,0.6);
  font-size:0.8rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  z-index:5;
}
.hero-scroll-hint .line{
  width:1px;
  height:46px;
  background:linear-gradient(to bottom, rgba(237,230,214,0.8), transparent);
  animation:pulseLine 2.2s ease-in-out infinite;
}
@keyframes pulseLine{
  0%,100%{opacity:0.3;}
  50%{opacity:1;}
}