/**
 * AliGali — subtle polish (opacity/transform only for motion).
 * Scoped where layout could break; no product cards / footer.
 */

/* -------------------------------------------------------------------------- */
/* 1) Hero: spacing rhythm (matches .home-hero-refined__inner)                */
/* -------------------------------------------------------------------------- */
body.home-index .home-hero-refined__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

body.home-index .home-hero-refined__inner .home-hero-refined__title {
    margin: 0;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

body.home-index .home-hero-refined__inner .home-hero-refined__subtitle {
    margin: 0;
    max-width: 520px;
    width: 100%;
    opacity: 0.85;
    margin-inline: auto;
}

body.home-index .home-hero-refined--split .home-hero-refined__inner .home-hero-refined__subtitle {
    margin-inline: 0;
}

body.home-index .home-hero-refined__inner .home-hero-refined__actions {
    margin-top: 0;
}

/* Hero-only: depth vignette + title glow (no layout/spacing; גרסת וידאו — ::before פנוי בלבד) */
body.home-index .home-hero-refined:not(.home-hero-refined--bg-video) > * {
    position: relative;
    z-index: 1;
}

/* Parallax עדין על ::before (משתני --moveX / --moveY מה־JS; מובייל/מסך מגע — בלי מאנשים) */
body.home-index .home-hero-refined {
    overflow: hidden;
}

body.home-index .home-hero-refined:not(.home-hero-refined--bg-video)::before {
    inset: -10%;
    transition: transform 0.2s ease-out;
    will-change: transform;
    transform: translate(var(--moveX, 0px), var(--moveY, 0px));
}

body.home-index .home-hero-refined--bg-video::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, 0.15),
        rgba(0, 0, 0, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 1;
    transition: transform 0.2s ease-out;
    will-change: transform;
    transform: translate(var(--moveX, 0px), var(--moveY, 0px));
}

@media (prefers-reduced-motion: reduce) {
    body.home-index .home-hero-refined:not(.home-hero-refined--bg-video)::before,
    body.home-index .home-hero-refined--bg-video::before {
        inset: 0;
        transform: none !important;
        transition: none;
        will-change: auto;
    }
}

body.home-index .home-hero-refined .home-hero-refined__title {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: scale(1.03);
}

body.home-index .home-hero-refined--bg-video .home-hero-refined__title {
    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 253, 251, 0.72);
}

body.dark-mode.home-index .home-hero-refined--bg-video .home-hero-refined__title,
html[data-theme="dark"] body.home-index .home-hero-refined--bg-video .home-hero-refined__title {
    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Hero focal: כפתור ראשי = קישור .home-hero-refined__cta--primary (אין <button> ב-hero) */
body.home-index .home-hero-refined .home-hero-refined__cta--primary {
    transform: scale(1.02);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

/* -------------------------------------------------------------------------- */
/* 2) Soft fade under hero → next content (neutrals = existing ink, not black) */
/* -------------------------------------------------------------------------- */
body.home-index .home-hero-refined::after {
    content: "";
    display: block;
    width: 100%;
    height: clamp(48px, 10vw, 80px);
    pointer-events: none;
    flex-shrink: 0;
    background: linear-gradient(
        to bottom,
        rgba(61, 53, 46, 0.045),
        transparent
    );
}

body.dark-mode.home-index .home-hero-refined::after,
html[data-theme="dark"] body.home-index .home-hero-refined::after {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.12),
        transparent
    );
}

/* Full-bleed video: pseudo stays below shell inside section */
body.home-index .home-hero-refined--bg-video::after {
    position: relative;
    z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* 3) Global depth — body::after (מעל רקע html, מתחת ל־body::before wash)        */
/* -------------------------------------------------------------------------- */
html.aligali-ambient body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 18%, rgba(61, 53, 46, 0.04), transparent 42%),
        radial-gradient(circle at 82% 82%, rgba(61, 53, 46, 0.028), transparent 44%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

html[data-theme="dark"].aligali-ambient body::after,
html.aligali-ambient:has(body.dark-mode) body::after {
    background-image:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.04), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.025), transparent 42%);
}

/* -------------------------------------------------------------------------- */
/* 4) Micro-interactions — exclude cards, footer, search hits                   */
/* -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    a,
    button {
        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            box-shadow 0.25s ease,
            border-color 0.25s ease,
            background-color 0.25s ease,
            color 0.25s ease;
    }

    a:hover,
    button:hover {
        transform: translateY(-1px);
    }

    a:hover {
        opacity: 0.95;
    }

    button:hover {
        opacity: 0.98;
    }

    footer[role="contentinfo"] a:hover,
    footer[role="contentinfo"] button:hover,
    a.deal-card:hover,
    a.hot-card:hover,
    a.item-card:hover,
    a.premium-picks__card--link:hover,
    a.premium-picks__card--link:focus-visible,
    .storefront-list a.item-card:hover,
    .search-result-item:hover,
    a.search-result-item:hover {
        transform: none;
        opacity: 1;
    }

    body.home-index .home-hero-refined a.home-hero-refined__cta--primary:hover {
        transform: translateY(-1px) scale(1.02);
        opacity: 1;
        box-shadow:
            0 6px 20px rgba(184, 90, 58, 0.3),
            0 8px 30px rgba(0, 0, 0, 0.12),
            0 1px 0 rgba(255, 255, 255, 0.12) inset;
    }
}

@media (prefers-reduced-motion: reduce) {
    a,
    button {
        transition: none !important;
    }

    a:hover,
    button:hover {
        transform: none !important;
        opacity: 1 !important;
    }

    body.home-index .home-hero-refined .home-hero-refined__title {
        transform: none;
    }

    body.home-index .home-hero-refined .home-hero-refined__cta--primary {
        transform: none;
    }
}

/* -------------------------------------------------------------------------- */
/* 5) Section titles — דף הבית בלבד (ריווח בין סקשנים נשאר ב-premium layer)     */
/* -------------------------------------------------------------------------- */
body.home-index main.container section h2.section-title {
    margin-bottom: clamp(1rem, 2.5vw, 1.25rem);
    letter-spacing: -0.3px;
}

/* -------------------------------------------------------------------------- */
/* 6) Scroll reveal (class נוסף ב-JS בלבד — ללא שינוי ידני ב-HTML)             */
/* -------------------------------------------------------------------------- */
body.home-index .aligali-polish-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

body.home-index .aligali-polish-reveal.aligali-polish-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    body.home-index .aligali-polish-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* -------------------------------------------------------------------------- */
/* 7) Page load (opacity + transform only)                                    */
/* -------------------------------------------------------------------------- */
@keyframes aligali-polish-page-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        /* translateY(0) still counts as transform and breaks position:fixed descendants (e.g. a11y FAB) */
        transform: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html.aligali-ambient body {
        animation: aligali-polish-page-in 0.4s ease both;
    }
}

body.home-index.aligali-splash-active {
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html.aligali-ambient body {
        animation: none !important;
    }
}