/**
 * Hero Intro widget.
 *
 * Layer order (bottom → top): background image → video → skip button, with the
 * content block on top of the background image once revealed.
 *
 * Reveal model:
 *   - Desktop: content starts hidden and fades in when JS adds `.is-revealed`.
 *     A <noscript>-free fallback isn't needed because the reveal also fires on
 *     autoplay-block / error / timeout.
 *   - <= 768px: the video + skip button are hidden and never loaded; content is
 *     visible by default. Keep this breakpoint in sync with hero-intro.js.
 */

/* Let Elementor's Advanced → Border Radius actually clip the hero.
 * The radius is applied to the widget wrapper, which by default doesn't clip
 * its children; without overflow: hidden the rounded corners are invisible. */
.elementor-widget-aigocy_child_hero_intro_widget .elementor-widget-container {
    overflow: hidden;
}

.hero-intro {
    position: relative;
    width: 100%;
    min-height: 97vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
}

/* Background image — shown while the video buffers and after it ends. */
.hero-intro__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Fullscreen intro video. Hidden until JS starts playback. */
.hero-intro__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.hero-intro.is-playing .hero-intro__video {
    opacity: 1;
}

/* Skip button — only visible while the video is playing. */
.hero-intro__skip {
    position: absolute;
    right: 24px;
    bottom: 24px;
    z-index: 4;
    padding: 10px 20px;
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, background 0.2s ease;
}

.hero-intro.is-playing .hero-intro__skip {
    opacity: 1;
    pointer-events: auto;
}

.hero-intro__skip:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Content block — sits above the background image. */
.hero-intro__content {
    position: relative;
    z-index: 3;
    max-width: 1100px;
    padding: 0 24px;
    text-align: center;
    color: #fff;
}

.hero-intro__sub {
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 16px;
    opacity: 0.9;
}

.hero-intro__title {
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.1;
    margin: 0 0 20px;
}

.hero-intro__subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 640px;
    opacity: 0.9;
}

.hero-intro__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* Buttons use the theme's 3D classes (.tf-btn / .tf-btn-2 + .animate-btn),
 * so their look is inherited from the parent theme and stays in sync with the
 * header / theme hero. Only text-decoration is reset here as a safety net. */
.hero-intro__btn {
    text-decoration: none;
}

/* Remove the top-edge (upper side) inset highlight/shadow on hover, keeping the
 * bottom depth + drop shadows. Scoped to hero buttons so the theme's default
 * buttons elsewhere are untouched. */
.hero-intro__btn.tf-btn:hover {
    box-shadow:
        0px -3px 0px 0px #1b242d inset,
        0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12),
        0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.13),
        0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.14),
        0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.14),
        0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.15),
        0px 100px 80px 0px rgba(0, 0, 0, 0.15),
        0px 3px 3px 0px rgba(0, 0, 0, 0.14),
        0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12);
}

/* Secondary (orange) button: the theme's default shadow is too subtle to read
 * as 3D on the hero background. Give it the same deep black shadow stack as the
 * primary, keeping the extrude-base inset bottom border + top highlight. */
.hero-intro__btn.tf-btn-2 {
    box-shadow:
        0px -3px 0px 0px #b36a1a inset,
        0px 1px 0px 0px rgba(255, 255, 255, 0.3) inset,
        0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12),
        0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.13),
        0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.13),
        0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.14),
        0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.15),
        0px 100px 80px 0px rgba(0, 0, 0, 0.15),
        0px 3px 3px 0px rgba(0, 0, 0, 0.14);
}

/* Hover: drop the top-edge highlight, keep the extrude-base border + deep black shadow. */
.hero-intro__btn.tf-btn-2:hover {
    box-shadow:
        0px -3px 0px 0px #b36a1a inset,
        0px 2.77px 2.21px 0px rgba(0, 0, 0, 0.12),
        0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.13),
        0px 12.52px 10.02px 0px rgba(0, 0, 0, 0.13),
        0px 22.34px 17.87px 0px rgba(0, 0, 0, 0.14),
        0px 41.78px 33.42px 0px rgba(0, 0, 0, 0.15),
        0px 100px 80px 0px rgba(0, 0, 0, 0.15),
        0px 3px 3px 0px rgba(0, 0, 0, 0.14);
}

/* ── Desktop reveal: content hidden until the video finishes ───────────── */
@media (min-width: 769px) {
    /* Content block is centered in the hero. */
    .hero-intro__content {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        opacity: 0;
        transform: translate(-50%, calc(-50% + 24px));
        pointer-events: none;
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    .hero-intro.is-revealed .hero-intro__content {
        opacity: 1;
        transform: translate(-50%, -50%);
        pointer-events: auto;
    }
}

/* ── Small screens: no video, content shown immediately ───────────────── */
@media (max-width: 768px) {
    .hero-intro__video,
    .hero-intro__skip {
        display: none !important;
    }

    .hero-intro {
        min-height: 70vh;
    }
}