/* ==========================================================================
   ebmnt1-hero.css  -  02 Hero (+ 12 call to action الخاص بالهيرو)
   ========================================================================== */

:root {
    /* colors */
    --ebmnt1-hero-bg-color: var(--ebmnt1-color-secondary);
    --ebmnt1-hero-glow-top-color: var(--ebmnt1-color-secondary-blue-alpha-55);
    --ebmnt1-hero-glow-bottom-color: var(--ebmnt1-color-secondary-blue-alpha-32);
    --ebmnt1-hero-grid-line-color: var(--ebmnt1-color-white-alpha-06);
    --ebmnt1-hero-label-text-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-hero-label-line-color: var(--ebmnt1-color-white-alpha-20);
    --ebmnt1-hero-title-text-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-hero-arrow-icon-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-hero-image-bg-color: var(--ebmnt1-color-helper-grey-light);
    --ebmnt1-hero-marquee-border-color: var(--ebmnt1-color-white-alpha-10);
    --ebmnt1-hero-marquee-text-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-hero-marquee-bullet-border-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-hero-card-bg-color: var(--ebmnt1-color-neutral-white);
    --ebmnt1-hero-card-shadow-color: var(--ebmnt1-color-black-alpha-35);
    --ebmnt1-hero-card-title-text-color: var(--ebmnt1-color-neutral-ink);
    --ebmnt1-hero-card-text-color: var(--ebmnt1-color-helper-grey);
    --ebmnt1-hero-card-icon-bg-color: var(--ebmnt1-color-primary);
    --ebmnt1-hero-card-icon-color: var(--ebmnt1-color-secondary);
    --ebmnt1-hero-card-list-icon-color: var(--ebmnt1-color-helper-purple-deep);

    /* font sizes */
    --ebmnt1-hero-label-font-size: clamp(0.72rem, 0.7rem + 0.15vw, 0.85rem);
    --ebmnt1-hero-title-font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.9rem);
    --ebmnt1-hero-marquee-font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.1rem);
    --ebmnt1-hero-card-title-font-size: clamp(0.98rem, 0.94rem + 0.2vw, 1.12rem);
    --ebmnt1-hero-card-text-font-size: clamp(0.82rem, 0.8rem + 0.12vw, 0.92rem);
    --ebmnt1-hero-card-icon-font-size: 0.95rem;

    /* sizes */
    --ebmnt1-hero-min-height: auto;
    --ebmnt1-hero-image-height: clamp(22rem, 90vw, 36rem);
    --ebmnt1-hero-image-radius: 1.5rem;
    --ebmnt1-hero-image-corner-radius: clamp(4rem, 14vw, 8.5rem);
    --ebmnt1-hero-visual-offset: 0px;
    --ebmnt1-hero-card-width: 100%;
    --ebmnt1-hero-card-radius: 1rem;
    --ebmnt1-hero-card-icon-size: 2.4rem;
    --ebmnt1-hero-card-outset: 1rem;
    --ebmnt1-hero-marquee-gap: 2.25rem;
    --ebmnt1-hero-marquee-duration: 38s;
}

.ebmnt1-hero__master {
    position: relative;
    background-color: var(--ebmnt1-hero-bg-color);
    background-image:
        radial-gradient(60% 55% at 75% 0%, var(--ebmnt1-hero-glow-top-color), transparent 72%),
        radial-gradient(45% 45% at 0% 100%, var(--ebmnt1-hero-glow-bottom-color), transparent 72%),
        linear-gradient(var(--ebmnt1-hero-grid-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--ebmnt1-hero-grid-line-color) 1px, transparent 1px);
    background-size: auto, auto, 3.5rem 3.5rem, 3.5rem 3.5rem;
    color: var(--ebmnt1-hero-title-text-color);
}

/* مسافة علوية بالـ gap فقط (بدون padding) */
.ebmnt1-hero__master {
    gap: 2.5em;
}

.ebmnt1-hero__master::before {
    content: "";
    display: block;
}

.ebmnt1-hero__inner {
    min-height: var(--ebmnt1-hero-min-height);
    align-items: stretch;
    justify-content: flex-start;
    gap: 2.5em;
    text-align: start;
}

/* ---------- المحتوى ---------- */
.ebmnt1-hero__content {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25em;
}

.ebmnt1-hero__label {
    font-size: var(--ebmnt1-hero-label-font-size);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ebmnt1-hero-label-text-color);
}

.ebmnt1-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75em;
}

.ebmnt1-hero__title {
    font-size: var(--ebmnt1-hero-title-font-size);
    font-weight: 700;
    line-height: 1.2;
    color: var(--ebmnt1-hero-title-text-color);
}

.ebmnt1-hero__title-line {
    display: block;
    overflow: hidden;
    padding-block: 0.05em;
}

.ebmnt1-hero__title-word {
    display: block;
}

.ebmnt1-js .ebmnt1-hero__title-word {
    transform: translateY(115%);
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--ebmnt1-line-index, 0) * 0.12s + 0.2s);
}

.ebmnt1-ready .ebmnt1-hero__title-word {
    transform: none;
}

.ebmnt1-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
}

.ebmnt1-js .ebmnt1-hero__actions,
.ebmnt1-js .ebmnt1-hero__label {
    opacity: 0;
    transition: opacity 0.9s ease 0.9s;
}

.ebmnt1-ready .ebmnt1-hero__actions,
.ebmnt1-ready .ebmnt1-hero__label {
    opacity: 1;
}

.ebmnt1-hero__arrow {
    display: none;
    font-size: 2.6rem;
    color: var(--ebmnt1-hero-arrow-icon-color);
    transform: rotate(35deg);
    animation: ebmnt1-hero-arrow 2.4s ease-in-out infinite;
}

/* ---------- الصورة + الكاردات العائمة ---------- */
.ebmnt1-hero__visual {
    order: 2;
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1em;
    translate: 0 var(--ebmnt1-hero-visual-offset);
}

.ebmnt1-hero__image-wrap {
    position: relative;
    width: 100%;
    height: var(--ebmnt1-hero-image-height);
    overflow: hidden;
    border-radius: var(--ebmnt1-hero-image-radius);
    border-end-start-radius: var(--ebmnt1-hero-image-corner-radius);
    background-color: var(--ebmnt1-hero-image-bg-color);
}

.ebmnt1-hero__image {
    width: 100%;
    height: calc(100% + 4rem);
    object-fit: cover;
    translate: 0 var(--ebmnt1-parallax-y, 0px);
}

.ebmnt1-hero__cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75em;
}

.ebmnt1-hero-card {
    position: relative;
    width: var(--ebmnt1-hero-card-width);
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    padding: 1em 1.1em;
    border-radius: var(--ebmnt1-hero-card-radius);
    background-color: var(--ebmnt1-hero-card-bg-color);
    box-shadow: 0 1rem 2.5rem var(--ebmnt1-hero-card-shadow-color);
    transition: transform var(--ebmnt1-transition-medium);
}

.ebmnt1-hero-card:hover {
    transform: translateY(-0.4rem) scale(1.02);
}

/* الصف الأول: الأيقونة + الاسم (flex-start) */
.ebmnt1-hero-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7em;
}

.ebmnt1-hero-card__icon {
    flex: 0 0 auto;
    width: var(--ebmnt1-hero-card-icon-size);
    height: var(--ebmnt1-hero-card-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ebmnt1-hero-card-icon-bg-color);
    color: var(--ebmnt1-hero-card-icon-color);
    font-size: var(--ebmnt1-hero-card-icon-font-size);
}

.ebmnt1-hero-card__title {
    align-self: center;
    font-size: var(--ebmnt1-hero-card-title-font-size);
    font-weight: 700;
    color: var(--ebmnt1-hero-card-title-text-color);
}

/* الصف الثاني: الشرح (فقرة أو قائمة) */
.ebmnt1-hero-card__text {
    font-size: var(--ebmnt1-hero-card-text-font-size);
    line-height: 1.7;
    color: var(--ebmnt1-hero-card-text-color);
}

.ebmnt1-hero-card__list {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

.ebmnt1-hero-card__list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    font-size: var(--ebmnt1-hero-card-text-font-size);
    line-height: 1.6;
    color: var(--ebmnt1-hero-card-text-color);
}

.ebmnt1-hero-card__list-icon {
    margin-top: 0.3em;
    font-size: 0.8em;
    color: var(--ebmnt1-hero-card-list-icon-color);
}

/* ---------- الشريط المتحرك ---------- */
.ebmnt1-hero__marquee {
    position: relative;
    z-index: 1;
    display: flex;
    overflow: hidden;
    border-top: 1px solid var(--ebmnt1-hero-marquee-border-color);
    background-color: var(--ebmnt1-hero-bg-color);
}

.ebmnt1-hero__marquee-track {
    flex: 0 0 auto;
    display: flex;
    width: max-content;
    animation: ebmnt1-hero-marquee var(--ebmnt1-hero-marquee-duration) linear infinite;
}

.ebmnt1-hero__marquee:hover .ebmnt1-hero__marquee-track {
    animation-play-state: paused;
}

.ebmnt1-hero__marquee-group {
    display: flex;
    align-items: center;
    gap: var(--ebmnt1-hero-marquee-gap);
    padding-inline-end: var(--ebmnt1-hero-marquee-gap);
    height: 4.5rem;
}

.ebmnt1-hero__marquee-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ebmnt1-hero-marquee-gap);
    font-size: var(--ebmnt1-hero-marquee-font-size);
    font-weight: 600;
    white-space: nowrap;
    color: var(--ebmnt1-hero-marquee-text-color);
}

.ebmnt1-hero__marquee-item::before {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 3px solid var(--ebmnt1-hero-marquee-bullet-border-color);
}

@keyframes ebmnt1-hero-marquee {
    to {
        transform: translateX(50%);
    }
}

@keyframes ebmnt1-hero-arrow {
    50% {
        translate: 0.4rem 0.6rem;
    }
}

@keyframes ebmnt1-hero-float {
    50% {
        translate: 0 -0.55rem;
    }
}

/* ---------- 425 ---------- */
@media (min-width: 425px) {
    :root {
        --ebmnt1-hero-image-height: clamp(24rem, 100vw, 38rem);
    }
}

/* ---------- 768 ---------- */
@media (min-width: 768px) {
    :root {
        --ebmnt1-hero-marquee-gap: 3rem;
    }

    .ebmnt1-hero__cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }
}

/* ---------- 1024: الكاردات تطفو فوق الصورة ---------- */
@media (min-width: 1024px) {
    :root {
        --ebmnt1-hero-min-height: calc(100svh - var(--ebmnt1-header-height) - 4.5rem);
        --ebmnt1-hero-image-height: 34rem;
        --ebmnt1-hero-visual-offset: 3.5em;
        --ebmnt1-hero-card-width: 13.5rem;
    }

    .ebmnt1-hero__master {
        gap: 0;
    }

    .ebmnt1-hero__master::before {
        display: none;
    }

    .ebmnt1-hero__inner {
        flex-direction: row;
        align-items: center;
        gap: 3em;
    }

    .ebmnt1-hero__visual {
        order: 0;
        flex: 0 0 46%;
        max-width: 46%;
    }

    .ebmnt1-hero__content {
        order: 0;
        flex: 1;
        flex-direction: row;
        align-items: stretch;
        gap: 1.5em;
    }

    .ebmnt1-hero__label {
        writing-mode: vertical-rl;
        rotate: 180deg;
        align-self: center;
    }

    .ebmnt1-hero__text {
        position: relative;
        padding-inline-start: 1.5em;
        border-inline-start: 1px solid var(--ebmnt1-hero-label-line-color);
        justify-content: center;
    }

    .ebmnt1-hero__arrow {
        display: block;
        align-self: flex-end;
    }

    .ebmnt1-hero__cards {
        display: contents;
    }

    .ebmnt1-hero-card {
        position: absolute;
        animation: ebmnt1-hero-float 5s ease-in-out infinite;
    }

    .ebmnt1-hero-card:hover {
        animation-play-state: paused;
    }

    .ebmnt1-hero-card--1 {
        top: 4%;
        inset-inline-start: calc(var(--ebmnt1-hero-card-outset) * -1);
    }

    .ebmnt1-hero-card--2 {
        top: 27%;
        inset-inline-end: calc(var(--ebmnt1-hero-card-outset) * -0.5);
        animation-delay: -1.2s;
    }

    .ebmnt1-hero-card--3 {
        top: 52%;
        inset-inline-start: calc(var(--ebmnt1-hero-card-outset) * -1);
        animation-delay: -2.4s;
    }

    .ebmnt1-hero-card--4 {
        bottom: 4%;
        inset-inline-end: calc(var(--ebmnt1-hero-card-outset) * -0.5);
        animation-delay: -3.6s;
    }

    .ebmnt1-hero-card--1::after {
        content: "";
        position: absolute;
        bottom: -0.6rem;
        inset-inline-start: 2.2rem;
        width: 1.2rem;
        height: 1.2rem;
        background-color: var(--ebmnt1-hero-card-bg-color);
        border-radius: 0.2rem;
        rotate: 45deg;
    }
}

/* ---------- 1440 ---------- */
@media (min-width: 1440px) {
    :root {
        --ebmnt1-hero-image-height: 38rem;
        --ebmnt1-hero-card-width: 15.5rem;
        --ebmnt1-hero-card-outset: 3rem;
    }

    .ebmnt1-hero__visual {
        flex-basis: 48%;
        max-width: 48%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ebmnt1-hero-card,
    .ebmnt1-hero__arrow,
    .ebmnt1-hero__marquee-track {
        animation: none;
    }
}


/* ==========================================================================
   hook message (تحت عنوان الهيرو)
   ========================================================================== */
:root {
    --ebmnt1-hero-hook-bg-color: var(--ebmnt1-color-white-alpha-06);
    --ebmnt1-hero-hook-border-color: var(--ebmnt1-color-white-alpha-10);
    --ebmnt1-hero-hook-accent-border-color: var(--ebmnt1-color-primary);
    --ebmnt1-hero-hook-text-color: var(--ebmnt1-color-white-alpha-70);
    --ebmnt1-hero-hook-highlight-text-color: var(--ebmnt1-color-primary);
    --ebmnt1-hero-hook-highlight-line-color: var(--ebmnt1-color-primary-alpha-45);
    --ebmnt1-hero-hook-icon-bg-color: var(--ebmnt1-color-primary);
    --ebmnt1-hero-hook-icon-color: var(--ebmnt1-color-secondary);
    --ebmnt1-hero-hook-pulse-color: var(--ebmnt1-color-primary-alpha-45);
    --ebmnt1-hero-hook-font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
    --ebmnt1-hero-hook-icon-size: 2.4rem;
}

.ebmnt1-hero__hook {
    position: relative;
    max-width: 34rem;
    display: flex;
    align-items: center;
    gap: 0.85em;
    padding: 0.8em 1em;
    border-radius: 0.9rem;
    border: 1px solid var(--ebmnt1-hero-hook-border-color);
    border-inline-start: 3px solid var(--ebmnt1-hero-hook-accent-border-color);
    background-color: var(--ebmnt1-hero-hook-bg-color);
    font-size: var(--ebmnt1-hero-hook-font-size);
    line-height: 1.7;
    color: var(--ebmnt1-hero-hook-text-color);
}

.ebmnt1-hero__hook-icon {
    position: relative;
    flex: 0 0 auto;
    width: var(--ebmnt1-hero-hook-icon-size);
    height: var(--ebmnt1-hero-hook-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ebmnt1-hero-hook-icon-bg-color);
    color: var(--ebmnt1-hero-hook-icon-color);
}

.ebmnt1-hero__hook-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ebmnt1-hero-hook-pulse-color);
    animation: ebmnt1-hero-hook-pulse 2.2s ease-out infinite;
}

.ebmnt1-hero__hook-highlight {
    font-weight: 700;
    color: var(--ebmnt1-hero-hook-highlight-text-color);
    background-image: linear-gradient(var(--ebmnt1-hero-hook-highlight-line-color), var(--ebmnt1-hero-hook-highlight-line-color));
    background-repeat: no-repeat;
    background-position: 100% 92%;
    background-size: 100% 0.28em;
}

.ebmnt1-js .ebmnt1-hero__hook {
    opacity: 0;
    translate: 0 1rem;
    transition: opacity 0.9s ease 0.75s, translate 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.75s;
}

.ebmnt1-ready .ebmnt1-hero__hook {
    opacity: 1;
    translate: 0 0;
}

@keyframes ebmnt1-hero-hook-pulse {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(1.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ebmnt1-hero__hook-icon::before {
        animation: none;
    }
}