/* ============================================================================
   Mobile Hero — KBI Beauty
   Active only on screens <= 767px. Replaces the Revolution Slider on mobile
   with a layered scene: warm-coral gradient background, the brand model PNG
   (same one used on desktop) floating above the title, drifting coral
   leaves, soft shimmer glints, and the two product bottles bobbing at the
   bottom. All animations are pure CSS; no new JS or dependencies.
   ============================================================================ */

.hero_mobile { display: none; }

@media (max-width: 767px) {

    /* Hide the desktop Revolution Slider on mobile */
    .hero_desktop { display: none !important; }

    /* === BASE === */
    .hero_mobile {
        display: block;
        position: relative;
        width: 100%;
        overflow: hidden;
        isolation: isolate;
        padding-bottom: 24px;
        background: linear-gradient(160deg, #fbe6dc 0%, #f7a392 55%, #f4c9a1 100%);
    }

    /* Soft sun-kissed halo behind the girl */
    .hero_mobile__glow {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: radial-gradient(60% 45% at 50% 28%,
            rgba(255, 235, 220, .55) 0%,
            rgba(255, 235, 220, 0)   70%);
    }

    /* Animated white halo with pulsing coral rings — mirrors desktop .round_anim */
    .hero_mobile__halo {
        position: absolute;
        top: 110px;
        left: 50%;
        width: min(78vw, 305px);
        aspect-ratio: 1;
        border-radius: 50%;
        background: rgba(255, 255, 255, .28);
        z-index: 2;
        pointer-events: none;
        opacity: 0;
        animation:
            hm-halo-in    1.2s cubic-bezier(.2,.7,.2,1) 100ms forwards,
            hm-halo-pulse 2.8s ease-out 1300ms infinite;
    }

    /* === BOTANICALS === */
    .hero_mobile__botanicals {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
    }
    .hero_mobile__botanicals--back  { z-index: 2; }
    .hero_mobile__botanicals--front { z-index: 4; }

    .hm_leaf {
        position: absolute;
        width: 70px;
        height: 70px;
        opacity: 0;
        will-change: transform, opacity;
        filter: drop-shadow(0 2px 4px rgba(180, 80, 60, .15));
    }
    .hm_leaf--1 {
        top: 12%;
        left: -15%;
        animation: hm-drift-1 22s linear infinite;
    }
    .hm_leaf--2 {
        top: 48%;
        left: -15%;
        width: 50px;
        height: 50px;
        animation: hm-drift-2 28s linear infinite;
        animation-delay: -8s;
    }
    .hm_leaf--3 {
        top: 32%;
        left: -15%;
        width: 90px;
        height: 90px;
        animation: hm-drift-3 32s linear infinite;
        animation-delay: -16s;
    }

    /* === GIRL PNG (centerpiece) === */
    .hero_mobile__girl {
        position: relative;
        z-index: 3;
        display: flex;
        justify-content: center;
        padding-top: 90px;
        margin-bottom: 28px;
    }
    .hero_mobile__girl img {
        width: min(72vw, 280px);
        height: auto;
        opacity: 0;
        filter: drop-shadow(0 18px 28px rgba(180, 80, 60, .18));
        /* Soft fade at the bottom so the cropped portrait edge blends into the gradient
           instead of showing a hard cut. */
        -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
                mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
        will-change: transform, opacity;
        animation:
            hm-girl-in    1.1s cubic-bezier(.2,.7,.2,1) 200ms forwards,
            hm-girl-float 6s   ease-in-out 1400ms infinite;
    }

    /* === SHIMMER === */
    .hero_mobile__shimmer {
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
    }
    .hero_mobile__shimmer span {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 220, 200, .95) 0%, rgba(247, 163, 146, 0) 70%);
        opacity: 0;
        animation: hm-twinkle 4s ease-in-out infinite;
    }
    .hero_mobile__shimmer span:nth-child(1) { top: 18%; left: 12%; animation-delay: 0.2s; width: 5px; height: 5px; }
    .hero_mobile__shimmer span:nth-child(2) { top: 22%; left: 78%; animation-delay: 1.1s; }
    .hero_mobile__shimmer span:nth-child(3) { top: 14%; left: 60%; animation-delay: 2.0s; width: 3px; height: 3px; }
    .hero_mobile__shimmer span:nth-child(4) { top: 38%; left: 8%;  animation-delay: 0.6s; }
    .hero_mobile__shimmer span:nth-child(5) { top: 35%; left: 85%; animation-delay: 1.6s; width: 6px; height: 6px; }
    .hero_mobile__shimmer span:nth-child(6) { top: 52%; left: 22%; animation-delay: 2.4s; }
    .hero_mobile__shimmer span:nth-child(7) { top: 55%; left: 70%; animation-delay: 0.9s; }
    .hero_mobile__shimmer span:nth-child(8) { top: 28%; left: 42%; animation-delay: 3.0s; width: 3px; height: 3px; }

    /* === CONTENT (title + CTA) === */
    .hero_mobile__content {
        position: relative;
        z-index: 6;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 10px 25px 0;
    }
    .hero_mobile__pre {
        max-width: 140px;
        height: auto;
        position: relative;
        top: -35px;
        opacity: 0;
        animation: hm-fade-up 800ms ease-out 1100ms forwards;
    }
    .hero_mobile__title {
        font-size: 38px;
        line-height: 1.15;
        color: #252525;
        margin: 16px 0 28px;
        opacity: 0;
        animation: hm-fade-up 900ms ease-out 1300ms forwards;
    }
    .hero_mobile__title span {
        display: block;
        font-size: 0.6em;
        margin-top: 8px;
    }
    /* Sub-headline reads white on mobile against the coral gradient (overrides .colorPrimary) */
    .hero_mobile__title .colorPrimary {
        color: #ffffff;
    }
    .hero_mobile__cta {
        opacity: 0;
        animation: hm-fade-up 800ms ease-out 1500ms forwards;
    }

    /* === FLOATING PRODUCTS === */
    .hero_mobile__products {
        position: relative;
        width: 100%;
        height: 200px;
        margin-top: 28px;
        z-index: 5;
    }
    .hm_product {
        position: absolute;
        bottom: 0;
        display: block;
        width: 130px;
        opacity: 0;
        filter: drop-shadow(0 12px 18px rgba(80, 30, 20, .35));
        will-change: transform, opacity;
    }
    .hm_product img {
        display: block;
        width: 100%;
        height: auto;
    }
    .hm_product--left {
        left: 6%;
        animation:
            hm-product-in  1.1s cubic-bezier(.2,.7,.2,1) 1700ms forwards,
            hm-product-bob 5s   ease-in-out 2800ms infinite;
    }
    .hm_product--right {
        right: 6%;
        animation:
            hm-product-in-right  1.1s cubic-bezier(.2,.7,.2,1) 1900ms forwards,
            hm-product-bob-right 5.6s ease-in-out 3000ms infinite;
    }

    /* Small phones */
    @media (max-width: 360px) {
        .hero_mobile__girl { padding-top: 80px; }
        .hero_mobile__girl img { width: 65vw; }
        .hero_mobile__title { font-size: 32px; }
        .hm_product { width: 110px; }
    }
}

/* ============================================================================
   KEYFRAMES
   ============================================================================ */

@keyframes hm-halo-in {
    from { opacity: 0; transform: translateX(-50%) scale(.85); }
    to   { opacity: 1; transform: translateX(-50%) scale(1);   }
}
@keyframes hm-halo-pulse {
    0% {
        transform: translateX(-50%) scale(1);
        box-shadow:
            0 0 0 0    rgba(247, 163, 146, .30),
            0 0 0 14px rgba(247, 163, 146, .20),
            0 0 0 28px rgba(247, 163, 146, .12);
    }
    100% {
        transform: translateX(-50%) scale(1);
        box-shadow:
            0 0 0 24px rgba(247, 163, 146, .15),
            0 0 0 46px rgba(247, 163, 146, .08),
            0 0 0 66px rgba(247, 163, 146, 0);
    }
}

@keyframes hm-girl-in {
    from { opacity: 0; transform: translateY(-20px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
@keyframes hm-girl-float {
    0%, 100% { transform: translateY(0)    scale(1);    }
    50%      { transform: translateY(-8px) scale(1.02); }
}

@keyframes hm-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes hm-product-in {
    from { opacity: 0; transform: translateY(120px) rotate(-6deg); }
    to   { opacity: 1; transform: translateY(0)     rotate(-6deg); }
}
@keyframes hm-product-in-right {
    from { opacity: 0; transform: translateY(120px) rotate(6deg); }
    to   { opacity: 1; transform: translateY(0)     rotate(6deg); }
}
@keyframes hm-product-bob {
    0%, 100% { transform: translateY(0)     rotate(-6deg); }
    50%      { transform: translateY(-10px) rotate(-4deg); }
}
@keyframes hm-product-bob-right {
    0%, 100% { transform: translateY(0)     rotate(6deg); }
    50%      { transform: translateY(-10px) rotate(4deg); }
}

@keyframes hm-twinkle {
    0%, 100% { opacity: 0;  transform: scale(.6);  }
    50%      { opacity: .9; transform: scale(1.2); }
}

/* LTR leaf drift: from offscreen-left to offscreen-right */
@keyframes hm-drift-1 {
    0%   { transform: translateX(0)     translateY(0)     rotate(0deg);   opacity: 0;  }
    8%   { opacity: .9; }
    50%  { transform: translateX(60vw)  translateY(-20px) rotate(150deg); }
    92%  { opacity: .9; }
    100% { transform: translateX(125vw) translateY(0)     rotate(360deg); opacity: 0;  }
}
@keyframes hm-drift-2 {
    0%   { transform: translateX(0)     translateY(0)    rotate(0deg);    opacity: 0;  }
    8%   { opacity: .8; }
    50%  { transform: translateX(55vw)  translateY(25px) rotate(-120deg); }
    92%  { opacity: .8; }
    100% { transform: translateX(125vw) translateY(0)    rotate(-360deg); opacity: 0;  }
}
@keyframes hm-drift-3 {
    0%   { transform: translateX(0)     translateY(0)     rotate(0deg);   opacity: 0;  }
    8%   { opacity: .7; }
    50%  { transform: translateX(58vw)  translateY(-15px) rotate(180deg); }
    92%  { opacity: .7; }
    100% { transform: translateX(125vw) translateY(0)     rotate(360deg); opacity: 0;  }
}

/* RTL leaf drift: mirror direction */
@keyframes hm-drift-1-rtl {
    0%   { transform: translateX(0)      translateY(0)     rotate(0deg);    opacity: 0; }
    8%   { opacity: .9; }
    50%  { transform: translateX(-60vw)  translateY(-20px) rotate(-150deg); }
    92%  { opacity: .9; }
    100% { transform: translateX(-125vw) translateY(0)     rotate(-360deg); opacity: 0; }
}
@keyframes hm-drift-2-rtl {
    0%   { transform: translateX(0)      translateY(0)    rotate(0deg);   opacity: 0;  }
    8%   { opacity: .8; }
    50%  { transform: translateX(-55vw)  translateY(25px) rotate(120deg); }
    92%  { opacity: .8; }
    100% { transform: translateX(-125vw) translateY(0)    rotate(360deg); opacity: 0;  }
}
@keyframes hm-drift-3-rtl {
    0%   { transform: translateX(0)      translateY(0)     rotate(0deg);    opacity: 0; }
    8%   { opacity: .7; }
    50%  { transform: translateX(-58vw)  translateY(-15px) rotate(-180deg); }
    92%  { opacity: .7; }
    100% { transform: translateX(-125vw) translateY(0)     rotate(-360deg); opacity: 0; }
}

/* ============================================================================
   RTL
   ============================================================================ */

@media (max-width: 767px) {
    html[lang="ar"] .hm_product--left {
        left: auto;
        right: 8%;
        animation-name: hm-product-in-right, hm-product-bob-right;
        transform: rotate(6deg);
    }
    html[lang="ar"] .hm_product--right {
        right: auto;
        left: 8%;
        animation-name: hm-product-in, hm-product-bob;
        transform: rotate(-6deg);
    }
    html[lang="ar"] .hm_leaf--1,
    html[lang="ar"] .hm_leaf--2,
    html[lang="ar"] .hm_leaf--3 {
        left: auto;
        right: -15%;
    }
    html[lang="ar"] .hm_leaf--1 { animation-name: hm-drift-1-rtl; }
    html[lang="ar"] .hm_leaf--2 { animation-name: hm-drift-2-rtl; }
    html[lang="ar"] .hm_leaf--3 { animation-name: hm-drift-3-rtl; }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .hero_mobile__halo,
    .hero_mobile__girl img,
    .hm_leaf,
    .hero_mobile__shimmer span,
    .hm_product,
    .hero_mobile__pre,
    .hero_mobile__title,
    .hero_mobile__cta {
        animation: none !important;
        opacity: 1 !important;
    }
    .hero_mobile__halo { transform: translateX(-50%) !important; box-shadow: none !important; }
    .hero_mobile__girl img,
    .hm_leaf,
    .hero_mobile__shimmer span,
    .hero_mobile__pre,
    .hero_mobile__title,
    .hero_mobile__cta { transform: none !important; }
    .hm_product--left  { transform: rotate(-6deg) !important; }
    .hm_product--right { transform: rotate(6deg)  !important; }
    .hero_mobile__shimmer span { opacity: .5 !important; }

    .hm_leaf--1 { left: 6%;  top: 12%; }
    .hm_leaf--2 { left: 84%; top: 48%; }
    .hm_leaf--3 { left: 16%; top: 32%; }

    html[lang="ar"] .hm_leaf--1 { left: auto; right: 6%; }
    html[lang="ar"] .hm_leaf--2 { left: auto; right: 84%; }
    html[lang="ar"] .hm_leaf--3 { left: auto; right: 16%; }
}