/* ========================================================================
   Cinematic Hero for Elementor — Frontend styles
   ======================================================================== */

.che-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    --che-fade-duration: 1s;
    --che-aspect-pad: 56.25%; /* 16:9 default; overridden per-device by Elementor */
}

/* Aspect ratio: a single ::before whose padding-top reads from a CSS variable.
   Elementor's responsive control sets --che-aspect-pad per breakpoint, so the
   ratio changes per device automatically. Set the variable to 0% to disable
   the ratio and rely purely on min-height. */
.che-wrap::before {
    content: '';
    display: block;
    padding-top: var(--che-aspect-pad, 56.25%);
}

/* Layers: each fills the wrap and stacks with z-index */
.che-bg-layer,
.che-overlay,
.che-content,
.che-video-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.che-bg-layer {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity var(--che-fade-duration) ease,
        transform var(--che-fade-duration) ease,
        filter var(--che-fade-duration) ease;
    will-change: opacity, transform, filter;
}

.che-overlay {
    z-index: 2;
    pointer-events: none;
    transition: opacity var(--che-fade-duration) ease;
}

.che-content {
    z-index: 3;
    display: flex;
    /* row direction: justify-content -> horizontal, align-items -> vertical */
    align-items: flex-end;       /* default: vertical bottom */
    justify-content: flex-start; /* default: horizontal left */
    pointer-events: none;
    transition: opacity var(--che-fade-duration) ease;
    will-change: opacity;
}

.che-content-inner {
    pointer-events: auto;
    /* default mode: shrink to title content */
    max-width: 100%;
}

/* Boxed mode: inner becomes a centered, capped-width column.
   Mimics Elementor's default boxed container. */
.che-content--boxed {
    /* Force the inner to span horizontally so margin: auto can center it.
       The user's "title_h_align" still affects the outer flex but with a
       100%-wide child it has no effect on positioning — text-align inside
       the title takes over for left/center/right of the actual text. */
}

.che-content--boxed .che-content-inner {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.che-title {
    margin: 0;
    color: #fff;
    line-height: 1.05;
    font-weight: 700;
    pointer-events: auto;
    word-wrap: break-word;
    /* Entry transition (uses title-in vars). On .che-faded the rule below
       overrides this with the fade-out duration. */
    transition:
        opacity var(--che-title-in-duration, 0.8s) ease var(--che-title-in-delay, 0.2s),
        transform var(--che-title-in-duration, 0.8s) ease var(--che-title-in-delay, 0.2s);
    will-change: opacity, transform;
}

.che-video-layer {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transform: scale(1);
    transition:
        opacity var(--che-fade-duration) ease,
        transform var(--che-fade-duration) ease;
    will-change: opacity, transform;
}

.che-video {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

video.che-video {
    object-fit: cover;
    background: #000;
}

iframe.che-video {
    /* For YouTube/Vimeo iframes: scale up to cover (because YouTube embeds
       always include letterboxing for non-16:9 containers) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
}

/* === Faded state === */
.che-wrap.che-faded .che-bg-layer  { opacity: 0; }
.che-wrap.che-faded .che-overlay   { opacity: 0; }
.che-wrap.che-faded .che-content   { opacity: 0; }
.che-wrap.che-faded .che-video-layer {
    opacity: 1;
    pointer-events: auto;
    z-index: 4;
}

/* Reset state (used when replay_on_view re-runs) — disable transitions
   while resetting so we don't see the title slide back to its initial pose. */
.che-wrap.che-reset .che-bg-layer,
.che-wrap.che-reset .che-overlay,
.che-wrap.che-reset .che-content,
.che-wrap.che-reset .che-content-inner,
.che-wrap.che-reset .che-title,
.che-wrap.che-reset .che-video-layer {
    transition: none !important;
}
.che-wrap.che-reset .che-bg-layer,
.che-wrap.che-reset .che-overlay,
.che-wrap.che-reset .che-content {
    opacity: 1;
}
.che-wrap.che-reset .che-video-layer {
    opacity: 0;
    pointer-events: none;
}

/* ========================================================================
   ENTRY ANIMATION — TITLE
   Initial state set via [data-title-in]. The .che-anim-in class added by JS
   triggers the transition to the visible state.
   ======================================================================== */
.che-wrap[data-title-in="fade"]       .che-title { opacity: 0; }
.che-wrap[data-title-in="fade-up"]    .che-title { opacity: 0; transform: translateY(40px); }
.che-wrap[data-title-in="fade-down"]  .che-title { opacity: 0; transform: translateY(-40px); }
.che-wrap[data-title-in="fade-left"]  .che-title { opacity: 0; transform: translateX(-50px); }
.che-wrap[data-title-in="fade-right"] .che-title { opacity: 0; transform: translateX(50px); }
.che-wrap[data-title-in="zoom-in"]    .che-title { opacity: 0; transform: scale(0.85); }

.che-wrap.che-anim-in .che-title {
    opacity: 1;
    transform: none;
}

/* ========================================================================
   EXIT — when .che-faded is added by JS
   - .che-content opacity goes to 0 (existing rule above)
   - bg-layer + title get optional transform/filter based on data-attrs
   - Use the fade-duration variable instead of the title-in transition
   ======================================================================== */
.che-wrap.che-faded .che-title {
    transition:
        opacity var(--che-fade-duration) ease,
        transform var(--che-fade-duration) ease;
}

/* Background exit */
.che-wrap.che-faded[data-bg-out="zoom"] .che-bg-layer { transform: scale(1.15); }
.che-wrap.che-faded[data-bg-out="blur"] .che-bg-layer { filter: blur(20px); }

/* Title exit */
.che-wrap.che-faded[data-title-out="fade-up"]   .che-title { transform: translateY(-40px); }
.che-wrap.che-faded[data-title-out="fade-down"] .che-title { transform: translateY(40px); }

/* ========================================================================
   ENTRY — VIDEO (paired with .che-faded which makes opacity 1)
   Initial transform set via [data-video-in], reset on faded.
   ======================================================================== */
.che-wrap[data-video-in="zoom-out"] .che-video-layer { transform: scale(1.1); }
.che-wrap[data-video-in="zoom-in"]  .che-video-layer { transform: scale(0.95); }
.che-wrap[data-video-in="slide-up"] .che-video-layer { transform: translateY(40px); }

.che-wrap.che-faded .che-video-layer {
    transform: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .che-bg-layer,
    .che-overlay,
    .che-content,
    .che-title,
    .che-video-layer {
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }
    .che-wrap[data-bg-out="zoom"].che-faded   .che-bg-layer { transform: none; }
    .che-wrap[data-bg-out="blur"].che-faded   .che-bg-layer { filter: none; }
    .che-wrap[data-video-in]                  .che-video-layer { transform: none; }
}