/**
 * Hero Video - library styles.
 *
 * Full-viewport hero with looping background video, overlay, headline
 * with metallic-gradient strong text (luxury feel), CTA with price tag.
 *
 * CSS variables a site can override:
 *   --hero-video-bg           fallback bg while/when video absent (default: dark gradient)
 *   --hero-video-overlay      overlay gradient over video (default: dark vignette)
 *   --hero-video-opacity      desktop video opacity 0-1 (default: .55)
 *   --hero-video-opacity-mobile  mobile video opacity (default: .35)
 *   --hero-accent             label + accent color (default: #d4b896 soft gold)
 *   --hero-title-gradient     <strong> text gradient (default: beige→gold→bronze)
 *   --hero-cta-bg             CTA button background (default: #b08d6e warm brown)
 *   --hero-cta-bg-hover       CTA hover background
 *   --hero-title-color        base title color (default: #fff)
 */

.hero-video {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hero-title-color, #fff);
    text-align: center;
    padding: 96px 24px 72px;
    overflow: hidden;
    background: var(--hero-video-bg, linear-gradient(135deg, #0a0a0f 0%, #1a1520 50%, #0f0a0a 100%));
}

.hero-video-media {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    opacity: var(--hero-video-opacity, 1);
    /* Screen blend - dark pixels in the video disappear into the dark bg,
       bright pixels (ljusglimtar) punch through. Keeps the atmospheric
       dark base while letting highlights pop. */
    mix-blend-mode: var(--hero-video-blend, screen);
    z-index: 0;
    pointer-events: none;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-video-overlay,
        linear-gradient(180deg,
            rgba(10,10,15,0.32) 0%,
            rgba(10,10,15,0.48) 45%,
            rgba(10,10,15,0.75) 100%));
    z-index: 1;
    pointer-events: none;
}

.hero-video-inner {
    position: relative;
    z-index: 2;
    max-width: 780px;
    margin: 0 auto;
}

.hero-video-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--hero-accent, #d4b896);
    margin: 0 0 22px;
    opacity: .9;
}

.hero-video-title {
    font-size: clamp(2.1rem, 5.5vw, 4rem);
    font-weight: 200;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0 0 26px;

    /* Four-phase headline reveal - loops forever:
         1) L→R gold shine sweep on white text (letters stay white after)
         2) R→L gold fill wave turns letters gold permanently
         3) R→L subtle white reflection glides over gold text
         4) L→R un-fill wave turns letters back to white
         Then loops back to Phase 1. The iteration reset is invisible because
         all three bright layers are parked off-screen at both the final and
         initial keyframes.

       Controlled via CSS vars:
         --hero-shine-peak           settled gold (Phase 1 band peak AND Phase 2 final fill)
         --hero-shine-softer         halo flanking the peak (both phases)
         --hero-shine-approach       light transition band into the fill wave
         --hero-shine-wave-crest     bright crest at the wave leading edge
         --hero-shine-glimmer-color  reflection colour (Phase 3, neutral-white alpha)
         --hero-shine-duration       total cycle (default 15s)
    */
    background:
        /* Layer 1 top - Phase 1 L→R shine: visible gold band on white text
           (same palette as the fill - consistent gold throughout).
           Wider gradient stops give a softer, calmer band with longer falloff. */
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 38%,
            var(--hero-shine-approach, #f4ecd5) 43%,
            var(--hero-shine-softer, #e9d8a7) 47%,
            var(--hero-shine-peak, #d9c27f) 50%,
            var(--hero-shine-softer, #e9d8a7) 53%,
            var(--hero-shine-approach, #f4ecd5) 57%,
            transparent 62%,
            transparent 100%
        ),
        /* Layer 2 - Phase 3 afterwave reflection (R→L on gold text) -
           a soft light sheen gliding across the gold like a reflection
           moving over a metallic surface. Neutral-white tone, narrow
           focused peak with short halo. */
        linear-gradient(
            110deg,
            transparent 0%,
            transparent 42%,
            rgba(255, 253, 243, 0.22) 46%,
            var(--hero-shine-glimmer-color, rgba(255, 253, 243, 0.7)) 50%,
            rgba(255, 253, 243, 0.22) 54%,
            transparent 58%,
            transparent 100%
        ),
        /* Layer 3 bottom - Phase 2 fill wave: white on LEFT, gold on RIGHT.
           Wave crest (brighter) is at the transition, letters settle into
           --hero-shine-peak after the wave passes. */
        linear-gradient(
            90deg,
            var(--hero-title-color, #fff) 0%,
            var(--hero-title-color, #fff) 45%,
            var(--hero-shine-approach, #f4ecd5) 48%,
            var(--hero-shine-wave-crest, #f2e4a8) 50%,
            var(--hero-shine-softer, #e9d8a7) 52%,
            var(--hero-shine-peak, #d9c27f) 55%,
            var(--hero-shine-peak, #d9c27f) 100%
        );
    background-size: 300% 100%, 300% 100%, 300% 100%;
    /* Start: shine parked OFF-LEFT (ready for L→R), glimmer parked OFF-RIGHT
       (ready for R→L), fill = all white */
    background-position: 100% 0, 0% 0, 0% 0;
    background-repeat: no-repeat, no-repeat, no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--hero-title-color, #fff); /* fallback */
    animation: hero-title-shine var(--hero-shine-duration, 15s) linear 0.3s infinite;
}

@keyframes hero-title-shine {
    /* Start of cycle - text white, shine parked off-LEFT, glimmer parked off-RIGHT */
    0%   { background-position: 100% 0,   0% 0,   0% 0; }
    /* Phase 1 (0-33%): slow L→R shine band on white text (~5s @ 15s) */
    33%  { background-position:   0% 0,   0% 0,   0% 0; }
    /* Phase 2 (33-53%): R→L gold fill wave (~3s) - letters go gold */
    53%  { background-position:   0% 0,   0% 0, 100% 0; }
    /* Hold (53-60%): all gold */
    60%  { background-position:   0% 0,   0% 0, 100% 0; }
    /* Phase 3 (60-82%): R→L reflection (~3.3s) - letters stay gold */
    82%  { background-position:   0% 0, 100% 0, 100% 0; }
    /* Phase 4 (82-96%): L→R un-fill wave (~2.1s) - letters return to white */
    96%  { background-position:   0% 0, 100% 0,   0% 0; }
    /* Final hold (96-100%) - text white, glimmer now parked off-LEFT, shine
       parked off-RIGHT. Invisible jump back to 0% keyframe (shine off-LEFT,
       glimmer off-RIGHT) because both parks map to "not visible". */
    100% { background-position:   0% 0, 100% 0,   0% 0; }
}

.hero-video-title strong {
    /* Slightly heavier weight for rhythm - no colour change, the sweep handles the shimmer */
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    /* Skip animation, show the final resting state (all gold, no glimmer). */
    .hero-video-title {
        animation: none;
        background: none;
        -webkit-text-fill-color: var(--hero-shine-peak, #d9c27f);
        color: var(--hero-shine-peak, #d9c27f);
    }
}

.hero-video-sub {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 300;
    opacity: .82;
    line-height: 1.65;
    margin: 0 auto 40px;
    max-width: 640px;
}

.hero-video-cta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--hero-cta-bg, #b08d6e);
    color: var(--hero-cta-color, #fff);
    padding: 16px 36px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: .01em;
    box-shadow: 0 10px 32px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,0.08) inset;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s;
}
.hero-video-cta:hover,
.hero-video-cta:focus-visible {
    transform: translateY(-2px);
    background: var(--hero-cta-bg-hover, #c09d7e);
    box-shadow: 0 16px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,0.12) inset;
    outline: none;
}

.hero-video-cta-text {
    font-weight: 500;
}

.hero-video-cta-price {
    opacity: .9;
    font-size: .9rem;
    padding-left: 16px;
    border-left: 1px solid rgba(255,255,255,.25);
    font-variant-numeric: tabular-nums;
}

.hero-video-note {
    margin: 24px 0 0;
    font-size: .8rem;
    opacity: .58;
    letter-spacing: .04em;
}

/* Reduced motion - hide video, keep poster/bg */
@media (prefers-reduced-motion: reduce) {
    .hero-video-media { display: none; }
}

/* Mobile */
@media (max-width: 768px) {
    .hero-video {
        min-height: 92vh;
        padding: 80px 20px 56px;
    }
    .hero-video-media {
        opacity: var(--hero-video-opacity-mobile, .35);
    }
    .hero-video-cta {
        padding: 14px 28px;
    }
    .hero-video-cta-price {
        font-size: .85rem;
        padding-left: 12px;
    }
}