/*
  hero.css — Hero section styles
  Depends on: global.css (vars)
*/
.hero {
  position: relative; width: 100%; height: 100vh;
  min-height: 600px; background: var(--navy);
  overflow: hidden; display: flex; align-items: center;
}
.hero-vid-wrap {
  position: absolute; inset: 65px 0 0 665px; z-index: 1;
}
.hero-vid-wrap video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-vid-wrap .hero-mask { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

.hero-content { position: relative; z-index: 3; padding-left: 80px; padding-top: var(--nav-h); max-width: 640px; }
.hero-title {
  font-size: clamp(52px,5.5vw,90px); font-weight: 700;
  line-height: 1.07; letter-spacing: -.025em;
  color: var(--accent); margin-bottom: 28px;
}
.mask       { display: block; overflow: hidden; }
.mask-child { display: block; transform: translateY(105%); opacity: 0; animation: lineReveal .8s cubic-bezier(.16,1,.3,1) forwards; }
.mask:nth-child(1) .mask-child { animation-delay: .05s; }
.mask:nth-child(2) .mask-child { animation-delay: .22s; }
@keyframes lineReveal { to { transform: translateY(0); opacity: 1; } }

.hero-desc  { font-size: 16px; line-height: 1.65; color: var(--page-secondary); max-width: 360px; margin-bottom: 40px; opacity: 0; animation: fadeUp .65s ease .45s forwards; }
.hero-ctas  { display: flex; gap: 12px; opacity: 0; animation: fadeUp .65s ease .6s forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.hero-scroll { position: absolute; bottom: 32px; left: 80px; z-index: 3; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.38); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.hero-scroll-line { width: 36px; height: 1px; background: rgba(255,255,255,.28); }