/**
 * Hero Animation 1 — Styles
 *
 * Layout:
 *   - Header block: centered content (logo, tagline, title, subtitle, description, buttons)
 *   - Showcase block: title + 3 images in horizontal row
 *
 * IMPORTANT:
 *   - Uses ONLY CSS variables (NO hardcoded hex/rgba values)
 *   - Responsive: Desktop (>=992px), Tablet (768-991px), Mobile (<=767px)
 *   - Spacing via centralized wb-global-styles.css where applicable
 *   - NO gap in flexbox (uses margin with :not(:last-child))
 *
 * @package Elementor_WB
 */

/* ============================================================================
   BASE LAYOUT
   ========================================================================= */


   
.wb-hero-animation-1 {
    position: relative;
    width: 100%;
}

.wb-hero-animation-1__pinned {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Container — absorbs padding-global + container-large + padding-section-large */
.wb-hero-animation-1__container {
    position: relative;
    width: 100%;
    max-width: var(--container-container-large, 80rem);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--page-padding-padding-global, 5%);
    padding-right: var(--page-padding-padding-global, 5%);
    padding-top: var(--page-padding-padding-global, 5%);
    padding-bottom: var(--page-padding-padding-global, 5%);
}

/* ============================================================================
   HEADER SECTION
   ========================================================================= */

.wb-hero-animation-1__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: var(--container-medium, 768px);
    margin-left: auto;
    margin-right: auto;
}

/* Logo */
.wb-hero-animation-1__logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--section-padding-padding-section-small, 3rem);
}

.wb-hero-animation-1__logo {
    max-height: var(--logo-max-height, 24px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Tagline — spacing via wb-global-styles.css [class*="__tagline"] */
/* font-family and color inherited from global Design Tokens */
.wb-hero-animation-1__tagline {
    font-size: var(--text-size-regular, 16px);
    font-weight: 600;
    line-height: 1.5;
}

/* Title — spacing via wb-global-styles.css [class*="__title"] */
/* font-family and color inherited from global Design Tokens / WB_Typography_Trait */
.wb-hero-animation-1__title {
    font-size: var(--text-size-h1, 56px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Subtitle (optional) */
/* font-family and color inherited from global Design Tokens */
.wb-hero-animation-1__subtitle {
    font-size: var(--text-size-h4, 28px);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: var(--spacing-8x, 1rem);
}

/* Description — margin-bottom: 0 so .button-group handles spacing */
/* font-family and color inherited from global Design Tokens / WB_Typography_Trait */
.wb-hero-animation-1__description {
    font-size: var(--text-size-medium, 18px);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Buttons — spacing via wb-global-styles.css .button-group */
.wb-hero-animation-1__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.wb-hero-animation-1__buttons > *:not(:last-child) {
    margin-right: var(--spacing-small, 16px);
}

/* ============================================================================
   SHOWCASE SECTION (lower block)
   ========================================================================= */

.wb-hero-animation-1__showcase {
    text-align: center;
    margin-top: 0;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
}

/* Showcase title */
/* font-family and color inherited from global Design Tokens */
.wb-hero-animation-1__showcase-title {
    font-size: var(--text-size-h1, 56px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: var(--spacing-16x, 2rem);

    /* Title positioning — centered over images */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Images container — horizontal row */
/* position: relative creates the positioning context for absolute child wrappers (image 1 & 3) */
.wb-hero-animation-1__images {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    max-height: 50vh;
}

.wb-hero-animation-1__images > *:not(:last-child) {
    margin-right: var(--spacing-8x, 1rem);
}

/* Individual image wrapper */
.wb-hero-animation-1__image-wrapper {
    flex: none;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--radius-large, 8px);
    max-height: 50vh;
    display: flex;
    justify-content: center;
}

.wb-hero-animation-1__image-wrapper:nth-of-type(1) {
    opacity: 0;
    position: absolute;
}

.wb-hero-animation-1__image-wrapper:nth-of-type(2) {
    width: 100%;
}

.wb-hero-animation-1__image-wrapper:nth-of-type(3) {
    opacity: 0;
    position: absolute;
}

/* Image itself */
.wb-hero-animation-1__image {
    display: block;
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ============================================================================
   RESPONSIVE: MOBILE (<=767px)
   Font-size responsive overrides removed — handled by Elementor controls
   and WB_Typography_Trait. Only layout changes remain.
   ========================================================================= */

@media (max-width: 767px) {

    .wb-hero-animation-1__logo-wrapper {
        margin-bottom: var(--spacing-16x, 2rem);
    }

    /* Stack images vertically on mobile */
    .wb-hero-animation-1__images {
        flex-direction: column;
    }

    .wb-hero-animation-1__images > *:not(:last-child) {
        margin-right: 0;
        margin-bottom: var(--spacing-8x, 1rem);
    }

    /* Buttons stack vertically on mobile */

    .wb-hero-animation-1__buttons > *:not(:last-child) {
        margin-right: 0;
        margin-bottom: var(--spacing-4x, 0.5rem);
    }
}

/* ============================================================================
   ACCESSIBILITY
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
    .wb-hero-animation-1,
    .wb-hero-animation-1__image {
        transition: none;
    }
}