/**
 * Hero — GeneratePress Luxe
 *
 * Full-width homepage hero section styling.
 * Supports both video and image backgrounds.
 * Applied to a WPBakery row (or any block) given the class "luxe-hero".
 *
 * Usage in WPBakery: Add "luxe-hero" to the row's Extra CSS class field.
 *
 * @package GP_Luxe
 */

/* =========================================================================
   1. Hero container
   ========================================================================= */

.luxe-hero {
  position: relative;
  width: 100%;
  min-height: 100svh;   /* full viewport — svh accounts for mobile browser chrome */
  min-height: 100vh;    /* fallback for browsers without svh support */
  display: flex;
  align-items: flex-end; /* content anchored near bottom — fashion editorial convention */
  overflow: hidden;
  background-color: var(--luxe-black);
}

/* Shorter hero variant — e.g. for collection chapter pages */
.luxe-hero--short {
  min-height: 65vh;
  align-items: center;
}

/* Medium hero — story pages */
.luxe-hero--medium {
  min-height: 80vh;
}

/* =========================================================================
   2. Background image
   ========================================================================= */

.luxe-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  /* Subtle scale-in on load — sophisticated, not jarring */
  transform: scale(1.04);
  transition: transform 2.4s var(--luxe-ease-out);
}

.luxe-hero.is-loaded .luxe-hero__bg {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .luxe-hero__bg {
    transform: scale(1);
    transition: none;
  }
}

/* =========================================================================
   3. Background video
   ========================================================================= */

.luxe-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* =========================================================================
   4. Overlay — for text legibility over dark/mixed imagery
   ========================================================================= */

.luxe-hero::after {
  content: '';
  position: absolute;
  inset: 0;

  /* Gradient: darkest at bottom where text sits, transparent at top */
  background: linear-gradient(
    to top,
    rgba(49, 22, 3, 0.70) 0%,
    rgba(49, 22, 3, 0.28) 50%,
    rgba(49, 22, 3, 0.06) 100%
  );
  z-index: 1;
}

/* Light overlay variant — for very dark imagery */
.luxe-hero--light-overlay::after {
  background: linear-gradient(
    to top,
    rgba(49, 22, 3, 0.40) 0%,
    rgba(49, 22, 3, 0.10) 60%,
    transparent 100%
  );
}

/* =========================================================================
   5. Hero content
   ========================================================================= */

.luxe-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--luxe-max-width);
  margin: 0 auto;
  padding: 0 var(--luxe-space-6) var(--luxe-space-16);
  color: var(--luxe-off-white);
  text-align: center;
}

/* =========================================================================
   6. Hero typography
   ========================================================================= */

.luxe-hero__eyebrow {
  display: block;
  font-family: var(--luxe-font-sans);
  font-size: var(--luxe-text-xs);
  font-weight: 400;
  letter-spacing: var(--luxe-tracking-widest);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--luxe-space-4);

  /* Staggered reveal animation */
  opacity: 0;
  transform: translateY(12px);
  animation: heroReveal var(--luxe-duration-slow) var(--luxe-ease-out) 0.6s forwards;
}

.luxe-hero__title {
  display: block;
  font-family: var(--luxe-font-serif);
  font-size: clamp(var(--luxe-text-3xl), 8vw, var(--luxe-text-4xl));
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--luxe-off-white);
  margin-bottom: var(--luxe-space-5);
  text-shadow: 0 2px 20px rgba(49, 22, 3, 0.25);
  opacity: 0;
  transform: translateY(14px);
  animation: heroReveal var(--luxe-duration-slow) var(--luxe-ease-out) 0.85s forwards;
}

.luxe-hero__subtitle {
  display: block;
  font-size: clamp(var(--luxe-text-xl), 4vw, var(--luxe-text-2xl));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--luxe-off-white);
  margin-bottom: var(--luxe-space-8);
  opacity: 0;
  transform: translateY(12px);
  animation: heroReveal var(--luxe-duration-slow) var(--luxe-ease-out) 1.1s forwards;
}

.luxe-hero__cta {
  opacity: 0;
  transform: translateY(10px);
  animation: heroReveal var(--luxe-duration-slow) var(--luxe-ease-out) 1.3s forwards;
  margin-top: 20px;
}

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

/* Override intro delay — hero animates only after overlay has exited */
body.luxe-intro-active .luxe-hero__eyebrow,
body.luxe-intro-active .luxe-hero__title,
body.luxe-intro-active .luxe-hero__subtitle,
body.luxe-intro-active .luxe-hero__cta {
  animation-play-state: paused;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .luxe-hero__eyebrow,
  .luxe-hero__title,
  .luxe-hero__subtitle,
  .luxe-hero__cta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .luxe-hero__bg {
    transform: scale(1);
    transition: none;
  }
}

/* =========================================================================
   7. Hero scroll indicator
   ========================================================================= */

.luxe-hero__scroll-hint {
  position: absolute;
  bottom: var(--luxe-space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--luxe-space-2);
  color: rgba(255, 255, 255, 0.45);
  font-size: var(--luxe-text-xs);
  letter-spacing: var(--luxe-tracking-widest);
  text-transform: uppercase;
  animation: scrollHintFade 2.4s var(--luxe-ease-out) 2s forwards;
  opacity: 0;
}

.luxe-hero__scroll-hint-line {
  display: block;
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.35);
  animation: scrollLinePulse 2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollHintFade {
  to { opacity: 1; }
}

@keyframes scrollLinePulse {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50%       { transform: scaleY(0.5); opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  .luxe-hero__scroll-hint,
  .luxe-hero__scroll-hint-line {
    animation: none;
    opacity: 0.4;
  }
}

/* =========================================================================
   8. WPBakery-specific hero row resets
   ========================================================================= */

/* When WPBakery row has luxe-hero class, remove its default padding */
.vc_row.luxe-hero {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* WPBakery places content inside .vc_column-inner */
.luxe-hero .vc_column-inner {
  padding: 0 !important;
}

/* =========================================================================
   9. Responsive hero
   ========================================================================= */

@media (max-width: 1024px) {
  .luxe-hero__content {
    padding: 0 var(--luxe-space-8) var(--luxe-space-16) var(--luxe-space-8);
  }
}

@media (max-width: 768px) {
  .luxe-hero {
    min-height: 92svh;
    min-height: 92vh;
    align-items: flex-end;
  }

  .luxe-hero--short {
    min-height: 55vh;
  }

  .luxe-hero__content {
    padding: 0 var(--luxe-space-5) var(--luxe-space-12) var(--luxe-space-5);
  }

  .luxe-hero__title {
    font-size: clamp(var(--luxe-text-2xl), 9vw, var(--luxe-text-3xl));
  }
}

@media (max-width: 480px) {
  .luxe-hero__content {
    padding: 0 var(--luxe-space-4) var(--luxe-space-10) var(--luxe-space-4);
  }
}