/* ============================================================
   index.css — Home page only.
   nav.js loads at bottom of body so no padding-top fight.
   ============================================================ */


/* ============================================================
   HERO — full viewport, content centred (same as SceneFour)
   ============================================================ */
.hero {
  position:        relative;
  height:          100svh;
  min-height:      600px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  overflow:        hidden;
  padding:         0 48px;
}


/* ============================================================
   HERO BACKGROUND IMAGE
   ============================================================ */
.hero-bg {
  position:            absolute;
  inset:               0;
  background-image:    url('images/home.jpg');
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  background-attachment: fixed;
}


/* ============================================================
   HERO OVERLAY
   Gradient darkens image so text is always readable.
   Fades to solid black at the bottom.
   ============================================================ */
.hero-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(5,5,5,0.5)  0%,
    rgba(5,5,5,0.25) 40%,
    rgba(5,5,5,0.75) 85%,
    rgba(5,5,5,1)    100%
  );
  pointer-events: none;
}


/* ============================================================
   HERO TEXT CONTENT
   padding-top: nav-height pushes content below the nav bar.
   This is the correct way — hero fills 100svh and content
   starts below the floating nav.
   ============================================================ */
.hero-content {
  position:    relative;
  z-index:     2;
  max-width:   760px;
  /* push content down so it clears the floating nav */
  padding-top: var(--nav-height);
  opacity:     0;
  transform:   translateY(24px);
  animation:   heroFadeIn 1.1s ease 0.3s forwards;
}

@keyframes heroFadeIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  font-family:    'Orbitron', sans-serif;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 5px;
  text-transform: uppercase;
  color:          var(--gold);
  margin-bottom:  20px;
}

.hero-title {
  font-family:    'Orbitron', sans-serif;
  font-size:      clamp(36px, 7vw, 88px);
  font-weight:    900;
  line-height:    1.0;
  letter-spacing: -1px;
  text-transform: uppercase;
  color:          var(--white);
  margin-bottom:  24px;
}

.hero-sub {
  font-family:  'EB Garamond', serif;
  font-size:    clamp(16px, 2vw, 20px);
  font-style:   italic;
  color:        rgba(240, 237, 232, 0.7);
  margin:       0 auto 40px;
  max-width:    560px;
  line-height:  1.7;
}

.hero-buttons {
  display:         flex;
  gap:             16px;
  justify-content: center;
  flex-wrap:       wrap;
}


/* ============================================================
   VIDEO SECTION
   section rule in shared.css adds padding-top: nav-height
   so this section clears the nav correctly.
   ============================================================ */
.intro-section {
  background: var(--mid);
  padding-bottom: 60px;
}

/* full-width video — outside .container */
.home-video-wrapper {
  position:       relative;
  width:          100%;
  padding-bottom: 56.25%;
  height:         0;
  overflow:       hidden;
  background:     #000;
  margin-top:     36px;
}

.home-video-wrapper iframe {
  position: absolute;
  top:      0;
  left:     0;
  width:    100%;
  height:   100%;
  border:   none;
}


/* ============================================================
   ART / CONTENT SECTION
   ============================================================ */
.home-content-section {
  background: var(--darker);
  padding:    80px 0;
}

.home-content-img-wrap {
  width:    100%;
  overflow: hidden;
  border:   1px solid rgba(201, 168, 76, 0.15);
}

.home-content-img {
  width:        100%;
  aspect-ratio: 16 / 7;
  object-fit:   cover;
  display:      block;
  transition:   transform 0.6s ease;
}
.home-content-img-wrap:hover .home-content-img { transform: scale(1.02); }

.home-content-text {
  margin-top: 48px;
  max-width:  720px;
}