/* ==========================================================================
   LAWELIYA HERO SECTION — hero.css (REBUILT)

   All selectors now match front-page.php exactly.
   Class mapping from old hero.css → new hp- classes:

     .hero-section        → .hp-hero
     .hero-background     → .hp-hero-media
     .hero-video          → .hp-hero-video
     .hero-overlay        → .hp-hero-overlay
     .hero-content        → .hp-hero-content
     .hero-badge          → .hp-hero-badge
     .badge-dot           → .hp-hero-badge-dot
     .hero-title          → .hp-hero-title
     .title-highlight     → .hp-hero-em
     .hero-subtitle       → .hp-hero-sub
     .hero-actions        → .hp-hero-actions
     .hero-stats          → .hp-hero-stats
     .stat-item           → .hp-stat
     .stat-number         → .hp-stat-n
     .stat-label          → .hp-stat-l
     .scroll-indicator    → .hp-scroll-cue
     .scroll-line         → .hp-scroll-line
   ========================================================================== */


/* ── SECTION SHELL ── */

.hp-hero {
    position: relative;
    height: 100vh;
    min-height: 720px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #080806;
    isolation: isolate;
}


/* ── VIDEO BACKGROUND ── */

.hp-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden; /* clip the scale(1.05) bleed */
}

.hp-hero-video {
    position: absolute; /* critical — without this video sits in normal flow */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;           /* removes inline-block gap */
    transform: scale(1.05);  /* slight oversize so no edge gaps on animate */
    filter: brightness(.65);
    /* Hardware acceleration */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.hp-hero-video-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0d0c0a 0%, #1a1510 50%, #0a0d08 100%);
    /* Visible only when video fails / hasn't loaded */
}

.hp-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,  rgba(8,8,6,.9) 0%, rgba(8,8,6,.55) 55%, rgba(8,8,6,.2) 100%),
        linear-gradient(180deg, rgba(8,8,6,.3) 0%, transparent 40%,    rgba(8,8,6,.7) 100%);
    z-index: 1;
}


/* ── GOLD GLOW EFFECT (from old hero.css) ── */

.hp-hero::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle,
        rgba(200,164,110,.18) 0%,
        transparent 70%);
    top: -20%;
    right: -10%;
    z-index: 2;
    animation: hpHeroGlow 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes hpHeroGlow {
    0%, 100% { transform: scale(1);    opacity: .6; }
    50%       { transform: scale(1.15); opacity: 1;  }
}


/* ── HERO CONTENT ── */

.hp-hero-content {
    position: relative;
    z-index: 3;
    padding: 0 4rem 0 5vw;
    max-width: 680px;
}


/* ── BADGE ── */

.hp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 2rem;
    padding: .5rem 1.1rem;
    background: rgba(200,164,110,.1);
    border: 1px solid rgba(200,164,110,.25);
    border-radius: 24px;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #c8a46e;
    animation: hpFadeUp 1s cubic-bezier(.16,1,.3,1) both;
}

.hp-hero-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c8a46e;
    box-shadow: 0 0 12px #c8a46e;
    animation: hpPulseDot 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes hpPulseDot {
    0%, 100% { transform: scale(1);   }
    50%       { transform: scale(1.6); }
}


/* ── TITLE ── */

.hp-hero-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 300;
    line-height: .95;
    letter-spacing: -.02em;
    color: #f0ead8;
    margin-bottom: 1.5rem;
    animation: hpFadeUp 1s cubic-bezier(.16,1,.3,1) .08s both;
}

/* <em class="hp-hero-em"> — the gold italic lines */
.hp-hero-em {
    display: block;
    color: #c8a46e;
    font-style: italic;
    background: linear-gradient(135deg, #f6e27a 0%, #c8a46e 40%, #d4b483 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ── SUBTITLE ── */

.hp-hero-sub {
    font-size: 1rem;
    font-weight: 300;
    color: rgba(240,234,216,.7);
    line-height: 1.8;
    margin-bottom: 2.5rem;
    animation: hpFadeUp 1s cubic-bezier(.16,1,.3,1) .16s both;
}


/* ── BUTTONS — hero section overrides ── */

.hp-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    animation: hpFadeUp 1s cubic-bezier(.16,1,.3,1) .24s both;
}


/* ── STATS ROW ── */

.hp-hero-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    animation: hpFadeUp 1s cubic-bezier(.16,1,.3,1) .32s both;
}

.hp-stat {
    padding: 0 1.5rem;
    text-align: center;
}

.hp-stat:first-child { padding-left: 0; }

.hp-stat-n {
    display: block;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    color: #c8a46e;
    font-weight: 300;
    line-height: 1;
}

.hp-stat-l {
    display: block;
    font-size: .62rem;
    color: #7a7468;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: .3rem;
}

.hp-stat-div {
    width: 1px;
    height: 30px;
    background: rgba(200,164,110,.1);
    flex-shrink: 0;
}


/* ── SCROLL CUE ── */

.hp-scroll-cue {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-size: .58rem;
    color: #7a7468;
    letter-spacing: .2em;
    text-transform: uppercase;
    pointer-events: none;
    animation: hpScrollBob 2.2s ease-in-out infinite;
}

.hp-scroll-line {
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, #c8a46e 0%, transparent 100%);
}

@keyframes hpScrollBob {
    0%, 100% { transform: translateX(-50%) translateY(0);   }
    50%       { transform: translateX(-50%) translateY(6px); }
}


/* ── SHARED ANIMATIONS ── */

@keyframes hpFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ── RESPONSIVE ── */

@media (max-width: 1024px) {
    .hp-hero-content {
        padding: 0 2rem 0 3rem;
        max-width: 560px;
    }
}

@media (max-width: 768px) {
    .hp-hero {
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        padding-bottom: 2rem;
    }

    .hp-hero-content {
        padding: 0 1.5rem;
        max-width: none;
    }

    .hp-hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .hp-hero-actions .hp-btn-gold,
    .hp-hero-actions .hp-btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .hp-hero-stats {
        gap: 0;
    }

    .hp-hero-sub {
        font-size: .9rem;
    }

    .hp-scroll-cue {
        display: none;
    }
}
/* ── iOS 100vh fix ── */
@supports (-webkit-touch-callout: none) {
  .hp-hero { min-height: -webkit-fill-available; }
}

/* ── Prevent content from going under fixed header (80px tall) ── */
@media (max-width: 768px) {
  .hp-hero-content {
    padding-top: 80px;
  }
  .hp-hero {
    justify-content: flex-end;
    padding-bottom: 40px;
  }
}