/* =========================================================================
   HEET7 Studio — homepage opening-video showcase
   The intro clip now lives as a normal section at the top of the homepage,
   in the position the hero carousel used to occupy. The carousel sits
   directly below it. The premium splash/preloader that plays on open lives
   in partials/header.ejs + premium.css (see #preloader).
   ========================================================================= */

/* ---- video showcase section ------------------------------------------ */
.video_hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #0b0706;
}
.video_hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.035);
  transition: transform 1.6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.video_hero.is-ready .video_hero__video { transform: scale(1); }

/* legibility wash + soft rise into the carousel below */
.video_hero__shade {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,5,4,.30), transparent 26%, transparent 60%, rgba(8,5,4,.55) 100%),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(8,5,4,.25) 100%);
}
.video_hero__rise {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 140px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cream));
}

/* ---- CTA buttons (mirror the video's own options) --------------------- */
.video_hero__cta {
  position: absolute; left: 50%; bottom: 7.5%; z-index: 2;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  width: min(92vw, 720px);
}
.heet7-btn {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  padding: 15px 36px;
  border-radius: 60px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease;
  opacity: 0;
  transform: translateY(16px);
  animation: h7-cta-in .7s cubic-bezier(.22, 1, .36, 1) forwards .5s;
}
.heet7-btn:hover { transform: translateY(-3px); text-decoration: none; }
.heet7-btn:focus-visible { outline: 2px solid rgba(230, 200, 145, .7); outline-offset: 3px; }

.heet7-btn:nth-child(2) { animation-delay: .66s; }

.heet7-btn--gold {
  background: linear-gradient(135deg, #a87b3c, #c9a05f 40%, #e6c891 60%, #c9a05f);
  background-size: 200% auto;
  color: #140d12 !important;
  box-shadow: 0 14px 34px -12px rgba(20, 13, 18, .6), 0 0 42px rgba(230, 200, 145, .35);
}
.heet7-btn--gold:hover { background-position: right center; box-shadow: 0 22px 46px -14px rgba(198, 150, 82, .8); }

.heet7-btn--ghost {
  background: rgba(20, 13, 18, .34);
  color: #f3e8d3 !important;
  border: 2px solid rgba(230, 200, 145, .85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.heet7-btn--ghost:hover { background: rgba(230, 200, 145, .16); }

@keyframes h7-cta-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- sound toggle ------------------------------------------------------ */
.video_hero__snd {
  position: absolute; top: 92px; right: 18px; z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #f3e8d3;
  background: rgba(20, 13, 18, .45);
  border: 1px solid rgba(230, 200, 145, .45);
  border-radius: 40px;
  padding: 9px 16px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .3s ease, border-color .3s ease;
}
.video_hero__snd:hover { background: rgba(20, 13, 18, .7); border-color: rgba(230, 200, 145, .85); }
.video_hero__snd:focus-visible { outline: 2px solid rgba(230, 200, 145, .7); outline-offset: 2px; }

/* volume icon swap */
.video_hero__snd .fa-volume-up { display: none; }
.video_hero__snd.active .fa-volume-off { display: none; }
.video_hero__snd.active .fa-volume-up { display: inline-block; }

/* ---- small screens ----------------------------------------------------- */
@media (max-width: 767.98px) {
  .video_hero { aspect-ratio: auto; min-height: 0; overflow: hidden; }
  .video_hero__video { position: relative; inset: auto; display: block; width: 100%; height: auto; transform: none; }
  .video_hero.is-ready .video_hero__video { transform: none; }
  .video_hero__shade { display: none; }
  .video_hero__rise { display: none; }
  .video_hero__cta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    width: 100%; max-width: none;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 32px 10px 14px;
    background: linear-gradient(to top, rgba(11, 7, 6, .9), rgba(11, 7, 6, 0));
  }
  .heet7-btn { padding: 10px 16px; font-size: 11.5px; letter-spacing: 1.2px; }
  .video_hero__snd { top: 118px; right: 12px; padding: 8px 14px; font-size: 11.5px; }
}
@media (max-width: 575.98px) {
  .video_hero__cta { padding: 28px 10px 12px; }
  .heet7-btn { padding: 8px 13px; font-size: 11px; }
}