/* =========================================================================
   Hero (Vimeo) widget
   Poster is the LCP element and is always visible; the Vimeo background
   iframe is lazy-loaded via hero.js and faded in on top once ready.
   ========================================================================= */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end; /* content block sits at the bottom */
    width: 100%;
    min-height: 90vh;
    overflow: hidden;
    isolation: isolate;
    color: #fff;
}

/* --- Media layer -------------------------------------------------------- */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: var(--primary-color, #1C2945); /* avoids flash before poster paints */
}

.hero .hero__poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100% !important; /* beat Elementor's global img { height: auto } */
    object-fit: cover;
    display: block;
}

/* Vimeo background iframe, scaled to fully cover the container (16:9). */
.hero__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.hero--video-ready .hero__video {
    opacity: 1;
}

.hero__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;        /* 16:9 based on width  */
    min-height: 100%;
    min-width: 177.78vh;    /* 16:9 based on height */
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
}

/* Vertical overlay for legible text over any frame of the video:
   dark at the bottom, fading to transparent towards the top.
   Works identically in every browser (normal blending). */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 2; /* above poster (0) and video (1), below content */
    opacity: 1;
    pointer-events: none;
    background: linear-gradient(
        to top right,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* Entrance: a solid dark veil (opacity 0.9) fades out on load,
   revealing the gradient overlay above. */
.hero__overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.9;
    pointer-events: none;
    animation: hero-overlay-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes hero-overlay-reveal {
    from {
        opacity: 0.9;
    }
    to {
        opacity: 0;
    }
}

/* Decorative magenta shape, bottom-left, on top of the image/overlay.
   Slides in from the right into place on load. */
.hero__shape {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3; /* above overlay (2), below content (4) */
    width: min(970px, 70%);
    height: auto;
    display: block;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: hero-shape-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes hero-shape-in {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero__shape {
        opacity: 1;
        animation: none;
        transform: none;
    }
}

/* --- Content ------------------------------------------------------------ */
.hero__inner {
    position: relative;
    z-index: 4; /* keep title, text and buttons above the shape */
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 0px 10rem;
    box-sizing: border-box;
}

.hero__content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    max-width: 620px;
}

.hero__text-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero__title,
.hero .hero__title span,
.hero .hero__title em,
.hero .hero__title i,
.hero .hero__title strong,
.hero .hero__title b {
    color: #fff !important; /* override theme/Elementor heading colour */
}

.hero__title {
    margin: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-weight: 300; /* Klavika Light */
    font-size: clamp(2.25rem, 4.5vw, 3.75rem);
    line-height: 1.05;
}

/* Accent words: serif font, but kept inline (the theme forces h_ span to
   display:block with a left margin — undo that here so it stays on one line). */
.hero .hero__title span,
.hero .hero__title em,
.hero .hero__title i {
    display: inline;
    margin: 0;
    font-family: var(--secondary-font, "Kepler", serif);
    font-style: italic;
    font-weight: 500;
}

.hero__text {
    margin: 0;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
}

/* --- Buttons ------------------------------------------------------------ */
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    font-family: var(--primary-font, "Klavika", sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

/* Shared layout for both buttons. */
.hero__button--primary,
.hero__button--secondary {
    display: flex;
    padding: 1rem 6rem 1rem 1.5rem;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    border-radius: 0.25rem;
}

.hero__button--primary {
    border: 1px solid #C142A2;
    background: linear-gradient(61deg, #A52A87 13.96%, #C14DA5 86.04%);
    color: #fff;
}

.hero__button--primary:hover,
.hero__button--primary:focus-visible {
    filter: brightness(0.92);
    color: #fff;
}

.hero__button--secondary {
    border: 1px solid var(--S---Mid-purple-4, #E1DBE1);
    background: var(--S---Mid-purple-4, #E1DBE1);
    color: var(--primary-color, #1C2945);
}

.hero__button--secondary:hover,
.hero__button--secondary:focus-visible {
    filter: brightness(0.96);
    color: var(--primary-color, #1C2945);
}

/* Visible keyboard focus for a11y (works on the dark background). */
.hero__button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/* --- Content entrance: fade in + up ------------------------------------- */
@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__title {
    opacity: 0;
    animation: hero-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.hero__text {
    opacity: 0;
    animation: hero-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

.hero__actions {
    opacity: 0;
    animation: hero-fade-up 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 767px) {
    .hero {
        min-height: 80vh;
    }
    .hero__inner {
        padding: 56px 20px;
    }
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
    .hero__button {
        width: 100%;
    }
    /* Reset the desktop 6rem right padding so full-width buttons stay balanced. */
    .hero__button--primary,
    .hero__button--secondary {
        justify-content: center;
        padding: 1rem 1.5rem;
    }
}

/* --- Reduced motion: keep the poster, never fade in autoplay video ------ */
@media (prefers-reduced-motion: reduce) {
    .hero__video {
        display: none;
    }
    .hero__button {
        transition: none;
    }
    .hero__title,
    .hero__text,
    .hero__actions {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hero__overlay::after {
        animation: none;
        opacity: 0;
    }
}