/**
 * Copyright © GDMexico. All rights reserved.
 *
 * GDMexico_IntroLanding — Welcome_Animation stylesheet.
 *
 * This file is loaded by view/base/layout/default.xml
 * (<css src="GDMexico_IntroLanding::css/intro.css"/>) and styles the markup emitted
 * by view/frontend/templates/element/intro.phtml.
 *
 * =============================================================================
 * TASK 11.1 — Per-image animation timing extracted from the reference videos
 * Requirements 2.1 (desktop) and 2.2 (mobile).
 * =============================================================================
 *
 * These values are the AUTHORING INPUT for the @keyframes authored in task 11.2.
 * They must reproduce the reference sequences within the 100 ms per-key-event
 * tolerance required by Requirements 2.1 / 2.2.
 *
 * ----------------------------------------------------------------------------
 * HOW THESE VALUES WERE OBTAINED
 * ----------------------------------------------------------------------------
 * ffmpeg / ffprobe are NOT installed on this machine (verified with
 * `which ffprobe ffmpeg`), so frame-by-frame image extraction was not possible.
 * macOS Spotlight (`mdls`) returned no AV metadata for the files either.
 *
 * Hard facts were instead read directly from the MP4 container atoms
 * (mvhd / tkhd / mdhd / stts / stsz) and from the still images (`sips`):
 *
 *   Reference video (desktop) — .kiro/docs/intro/desktop/VIDEO EJEMPLO.mp4
 *     - Canvas .............. 1600 x 904 px
 *     - Total duration ...... 5.000 s  (timescale 15360, duration 76800)
 *     - Frame rate .......... 60 fps   (300 frames, uniform sample delta 256)
 *
 *   Reference video (mobile) — .kiro/docs/intro/mobile/VIDEO EJEMPLO MOBILE.mp4
 *     - Canvas .............. 630 x 1200 px
 *     - Total duration ...... 3.883 s  (timescale 15360, duration 59648)
 *     - Frame rate .......... 60 fps   (233 frames, uniform sample delta 256)
 *
 *   Source images (sips pixelWidth x pixelHeight, alpha):
 *     Desktop:
 *       desktop_image_1  01_DESKTOP.jpg ..... 1600 x 513  (no alpha)  top band
 *       desktop_image_2  02_DESKTOP.jpg ..... 1600 x 392  (no alpha)  bottom band
 *       desktop_overlay  bienvenida 2-2.png .. 900 x 595  (alpha)     centered badge
 *       -> 513 + 392 = 905 ≈ 904: the two JPGs tile the full canvas as a
 *          top band + bottom band; the PNG is a transparent welcome overlay.
 *     Mobile:
 *       mobile_image_1   bienvenida 1.jpg ... 630 x 630   (no alpha)  top square
 *       mobile_image_2   bienvenida 2.jpg ... 630 x 630   (no alpha)  bottom square
 *       mobile_overlay   bienvenida 2-1.png . 900 x 892   (alpha)     centered badge
 *       -> two 630-px squares stack within the 1200-px canvas; the PNG is a
 *          transparent welcome overlay scaled to fit the width.
 *
 * ----------------------------------------------------------------------------
 * ASSUMPTIONS (because frames could not be sampled)
 * ----------------------------------------------------------------------------
 * The exact easing curve and sub-frame start of each image could not be read
 * from pixels. The timeline below is DERIVED from the geometry (band / overlay
 * composition), the known total durations, and the layering order the template
 * renders (image_1, image_2, then overlay). It is a faithful, conservative
 * reconstruction, NOT a pixel-measured capture. Treat it as the baseline for
 * task 11.2 and refine against the videos during manual QA (task 17) if a key
 * event drifts beyond the 100 ms tolerance.
 *
 *   A1. Entry order follows template render order and visual layering:
 *       background band(s) first, decorative overlay last.
 *   A2. The two background bands animate together as the backdrop; the overlay
 *       is the focal "welcome" reveal that lands last.
 *   A3. Motion paths: background bands fade + slide a short distance into their
 *       resting position; the overlay fades + scales up slightly to settle.
 *   A4. Timings are quantized to whole frames at 60 fps (16.67 ms/frame) and
 *       rounded to tidy millisecond values well inside the 100 ms tolerance.
 *   A5. The animation settles before the clip ends, leaving a static hold on
 *       the final frame (selector operable), consistent with both clip lengths.
 *
 * ============================================================================
 * DESKTOP TIMELINE  (variant active when viewport width > 768px)
 * Canvas 1600 x 904 · total clip 5.000 s · 60 fps · Requirement 2.1
 * ============================================================================
 *   order | slot             | start (ms) | duration (ms) | motion path
 *   ------+------------------+------------+---------------+---------------------------
 *     1   | desktop_image_1  |      0     |      700      | fade-in + slide down from top
 *         | (01_DESKTOP.jpg) |            |               | (translateY -24px -> 0), top band
 *     2   | desktop_image_2  |     150    |      700      | fade-in + slide up from bottom
 *         | (02_DESKTOP.jpg) |            |               | (translateY +24px -> 0), bottom band
 *     3   | desktop_overlay  |     850    |      650      | fade-in + scale-up
 *         | (bienvenida 2-2) |            |               | (scale 0.92 -> 1), centered badge
 *   ----------------------------------------------------------------------------
 *   Key events: last entry completes at 850 + 650 = 1500 ms. Remaining time to
 *   5.000 s is a static hold on the final resting state (selector operable).
 *
 * ============================================================================
 * MOBILE TIMELINE  (variant active when viewport width <= 768px)
 * Canvas 630 x 1200 · total clip 3.883 s · 60 fps · Requirement 2.2
 * ============================================================================
 *   order | slot            | start (ms) | duration (ms) | motion path
 *   ------+-----------------+------------+---------------+----------------------------
 *     1   | mobile_image_1  |      0     |      650      | fade-in + slide down from top
 *         | (bienvenida 1)  |            |               | (translateY -20px -> 0), top square
 *     2   | mobile_image_2  |     150    |      650      | fade-in + slide up from bottom
 *         | (bienvenida 2)  |            |               | (translateY +20px -> 0), bottom square
 *     3   | mobile_overlay  |     800    |      600      | fade-in + scale-up
 *         | (bienvenida 2-1)|            |               | (scale 0.90 -> 1), centered badge
 *   ----------------------------------------------------------------------------
 *   Key events: last entry completes at 800 + 600 = 1400 ms. Remaining time to
 *   3.883 s is a static hold on the final resting state (selector operable).
 *
 * ============================================================================
 * SHARED NOTES FOR TASK 11.2
 * ============================================================================
 *   - Split variants at the 768px Viewport_Breakpoint:
 *       desktop variant @media (min-width: 769px); mobile @media (max-width: 768px).
 *   - Easing: ease-out for entry motion (overshoot-free settle).
 *   - @media (prefers-reduced-motion: reduce): jump to the final resting state
 *       within 100 ms, with zero entry motion; keep the selector operable.
 *   - Final state must leave .gdmexico-intro__select / submit fully operable.
 *
 * NOTE: The @keyframes and responsive rules authored in task 11.2 follow
 * directly below and reproduce the timing table above.
 */

/* =============================================================================
 * TASK 11.2 — Welcome_Animation implementation
 * Requirements: 1.3, 1.4, 2.1, 2.2, 2.5, 2.6, 2.7
 *
 * Implementation notes:
 *   - Entry motion is pure CSS keyframes (Req 2.7); no JS is required here.
 *   - Start times are applied via `animation-delay`, durations via
 *     `animation-duration`, matching the timing table above.
 *   - `animation-fill-mode: both` holds the pre-start state before the delay
 *     elapses AND the final resting state after completion (Req 2.5).
 *   - Entry easing is ease-out for an overshoot-free settle.
 *   - The desktop variant is shown only above the 768px Viewport_Breakpoint
 *     (@media min-width: 769px); the mobile variant only at/below it
 *     (@media max-width: 768px). (Req 1.3 / 1.4)
 *   - Only the .gdmexico-intro__animation images animate. The selector/content
 *     (.gdmexico-intro__content and children) is never animated into a
 *     non-operable state: it is visible and operable at all times.
 *   - @media (prefers-reduced-motion: reduce) disables all entry animation and
 *     renders the final resting state immediately (Req 2.6).
 * ============================================================================= */

/* -----------------------------------------------------------------------------
 * Root container — full-bleed welcome stage.
 *
 * The intro renders inside the Page Builder column (.column.main) of the Empty
 * layout. We break it out to the full viewport width and give it a tall stage so
 * the background image fills the screen; the logo overlay sits in the upper area
 * and the selector form is overlaid in the lower area (see __content below).
 * -------------------------------------------------------------------------- */
.gdmexico-intro {
    position: relative;
    /* Full-bleed: escape the centered content column and span the viewport width. */
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* The stage height follows the natural height of the stacked background bands
       (one seamless scene), so there are no empty gaps above or below the image. */
    overflow: hidden;
}

/* "Landing no disponible" state (Req 1.6): only a localized message, no selector. */
.gdmexico-intro--unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    padding: 2rem 1rem;
    text-align: center;
}

.gdmexico-intro__unavailable-message {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5;
}

/* -----------------------------------------------------------------------------
 * Animation container — the background layer, in flow so it defines the stage
 * height. The two background bands stack at their NATURAL aspect ratio so they
 * reproduce the single authored scene seamlessly (no cropping, no visible seam).
 * The logo overlay is centered on top of them; the content/form is overlaid
 * absolutely on top (see __content below).
 * Each variant's visibility is controlled by the responsive media queries
 * further below; by default both are hidden to avoid a flash before match.
 * -------------------------------------------------------------------------- */
.gdmexico-intro__animation {
    display: none;
    position: relative;
    width: 100%;
    z-index: 0;
    line-height: 0; /* remove inline-image gaps between stacked bands */
    font-size: 0; /* belt-and-braces against whitespace between <img> tags */
}

/* Background bands stack full-width at their native aspect ratio: top band then
   bottom band together form one seamless image. No object-fit, no forced height. */
.gdmexico-intro__image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top; /* no baseline gap under the band */
}

/* Sub-pixel seam fix: when the bands scale up at wide viewports their computed
   heights can land on fractional pixels, leaving a ~1px white hairline between
   the two stacked images. Pull the lower band up by 1px so the seam closes
   without visibly cropping the artwork. */
.gdmexico-intro__image--desktop_image_2,
.gdmexico-intro__image--mobile_image_2 {
    margin-top: -1px;
}

/* The logo overlay is centered in the upper-middle area, on top of the bands. */
.gdmexico-intro__image--desktop_overlay,
.gdmexico-intro__image--mobile_overlay {
    position: absolute;
    top: calc(50% - 200px);
    left: 50%;
    width: auto;
    max-width: 56%;
    height: auto;
    transform: translate(-50%, -50%);
    pointer-events: none; /* purely decorative, must not block the selector */
}

/* -----------------------------------------------------------------------------
 * Content / State_Selector — ALWAYS visible and operable (Req 1.5, 2.5, 2.6).
 * Overlaid absolutely on top of the background image (z-index 1), filling the
 * stage and anchored to the lower-middle area so the form sits just below the
 * centered logo overlay. Never animated into a hidden/off-canvas state.
 * -------------------------------------------------------------------------- */
.gdmexico-intro__content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Anchor to the lower area of the stage so the form sits over the sofa scene,
       below the centered logo overlay. The stage height follows the image, so this
       stays proportional to the artwork regardless of viewport height. */
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem 6%;
    text-align: center;
}

/* Legibility panel: the form overlays a light photo, so group the headline,
 * subcopy and selector on a translucent card with a subtle backdrop blur. */
.gdmexico-intro__content > * {
    position: relative;
}

/* Headline "Bienvenido": tipografía ligera, en versales y con amplio tracking,
   en el tono café/taupe de la marca, sobre la escena clara. */
.gdmexico-intro__headline {
    margin: 0 0 0.25em;
    color: #4a4441;
    font-weight: 300;
    font-size: clamp(1.75rem, 5vw, 3rem);
    letter-spacing: 0.22em;
    line-height: 1.1;
    text-transform: uppercase;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}

.gdmexico-intro__subcopy {
    margin: 0 0 0.5rem;
    max-width: 48rem;
    color: #4a4441;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.45);
}

/* The selector is just the field now (no card, no button): a single pill. */
.gdmexico-intro__selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 32rem;
}

/* Accessible label kept for screen readers but visually hidden (the placeholder
   inside the select is the visible guide, matching the design). */
.gdmexico-intro__selector-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Pill container: soft translucent white, rounded, with room for the pin on the
   left and the chevron on the right. */
.gdmexico-intro__select-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(128, 128, 128, 0.9);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(60, 50, 40, 0.12);
    backdrop-filter: blur(3px);
}

/* Location pin on the left. */
.gdmexico-intro__select-icon {
    position: absolute;
    left: 1.1rem;
    width: 1.4rem;
    height: 1.4rem;
    fill: #8a7f76;
    pointer-events: none;
}

/* Chevron on the right. */
.gdmexico-intro__select-chevron {
    position: absolute;
    right: 1.1rem;
    width: 1.3rem;
    height: 1.3rem;
    color: #8a7f76;
    pointer-events: none;
}

/* The native select is transparent and sized to leave space for both icons;
   the browser's default arrow is removed in favour of our chevron. */
.gdmexico-intro__select {
    width: 100%;
    margin: 0;
    /* Generous line-height so the glyphs (incl. accents like "á") are never
       vertically clipped by the native control's content box. */
    padding: 0.85rem 3rem 0.85rem 3.2rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #4a4441;
    font-size: clamp(1.125rem, 2.4vw, 1.375rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.6;
    height: auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}

.gdmexico-intro__select:focus {
    outline: none;
}

.gdmexico-intro__select-wrap:focus-within {
    box-shadow: 0 0 0 3px rgba(138, 127, 118, 0.35), 0 8px 24px rgba(60, 50, 40, 0.12);
}

/* The dropdown options render in the browser's menu; keep them legible on white. */
.gdmexico-intro__select option {
    color: #4a4441;
}

/* Mobile: the viewport-relative term of the clamp collapses on narrow screens, so
   bump the select text and touch target explicitly for clear legibility on phones. */
@media (max-width: 768px) {
    .gdmexico-intro__select {
        padding: 0.9rem 3rem 0.9rem 3.2rem;
        font-size: 1.25rem;
        line-height: 1.6;
    }

    .gdmexico-intro__select-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .gdmexico-intro__select-chevron {
        width: 1.4rem;
        height: 1.4rem;
    }
}

/* Error message area (hidden until the redirect component writes into it). */
.gdmexico-intro__error:empty {
    display: none;
}

.gdmexico-intro__error {
    margin-top: 0.25rem;
    color: #e02b27;
}

/* =============================================================================
 * KEYFRAMES — DESKTOP (Requirement 2.1)
 *   desktop_image_1 : fade-in + slide down from top  (translateY -24px -> 0)
 *   desktop_image_2 : fade-in + slide up from bottom (translateY +24px -> 0)
 *   desktop_overlay : fade-in + scale-up             (scale 0.92 -> 1)
 * ============================================================================= */
@keyframes gdmexico-intro-desktop-image-1 {
    from {
        opacity: 0;
        transform: translateY(-24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gdmexico-intro-desktop-image-2 {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Overlay keeps its centering translate while scaling in. */
@keyframes gdmexico-intro-desktop-overlay {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.92);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* =============================================================================
 * KEYFRAMES — MOBILE (Requirement 2.2)
 *   mobile_image_1 : fade-in + slide down from top  (translateY -20px -> 0)
 *   mobile_image_2 : fade-in + slide up from bottom (translateY +20px -> 0)
 *   mobile_overlay : fade-in + scale-up             (scale 0.90 -> 1)
 * ============================================================================= */
@keyframes gdmexico-intro-mobile-image-1 {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gdmexico-intro-mobile-image-2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gdmexico-intro-mobile-overlay {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.90);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* =============================================================================
 * RESPONSIVE VARIANT — DESKTOP (viewport width > 768px Viewport_Breakpoint)
 * Req 1.3 / 2.1. Timing table: image_1 @0ms/700ms, image_2 @150ms/700ms,
 * overlay @850ms/650ms. Entry easing ease-out; fill-mode both.
 * ============================================================================= */
@media (min-width: 769px) {
    .gdmexico-intro__animation--desktop {
        display: block;
    }

    .gdmexico-intro__animation--mobile {
        display: none;
    }

    .gdmexico-intro__animation--desktop .gdmexico-intro__image--desktop_image_1 {
        animation: gdmexico-intro-desktop-image-1 700ms ease-out 0ms both;
    }

    .gdmexico-intro__animation--desktop .gdmexico-intro__image--desktop_image_2 {
        animation: gdmexico-intro-desktop-image-2 700ms ease-out 150ms both;
    }

    .gdmexico-intro__animation--desktop .gdmexico-intro__image--desktop_overlay {
        animation: gdmexico-intro-desktop-overlay 650ms ease-out 850ms both;
    }
}

/* =============================================================================
 * RESPONSIVE VARIANT — MOBILE (viewport width <= 768px Viewport_Breakpoint)
 * Req 1.4 / 2.2. Timing table: image_1 @0ms/650ms, image_2 @150ms/650ms,
 * overlay @800ms/600ms. Entry easing ease-out; fill-mode both.
 * ============================================================================= */
@media (max-width: 768px) {
    .gdmexico-intro__animation--mobile {
        display: block;
    }

    .gdmexico-intro__animation--desktop {
        display: none;
    }

    .gdmexico-intro__animation--mobile .gdmexico-intro__image--mobile_image_1 {
        animation: gdmexico-intro-mobile-image-1 650ms ease-out 0ms both;
    }

    .gdmexico-intro__animation--mobile .gdmexico-intro__image--mobile_image_2 {
        animation: gdmexico-intro-mobile-image-2 650ms ease-out 150ms both;
    }

    .gdmexico-intro__animation--mobile .gdmexico-intro__image--mobile_overlay {
        animation: gdmexico-intro-mobile-overlay 600ms ease-out 800ms both;
    }
}

/* =============================================================================
 * REDUCED MOTION (Requirement 2.6)
 * Disable all entry animation and render the final resting state immediately
 * (opacity 1, no slide). Overlays keep only their centering transform.
 * The selector stays visible and operable at all times.
 * ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .gdmexico-intro__image {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .gdmexico-intro__image--desktop_overlay,
    .gdmexico-intro__image--mobile_overlay {
        animation: none !important;
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}