/**
 * My Home — premium native-app layer (Zepto / Blinkit / Zomato energy).
 * Load after customer-my-home.css. Requires main.mh-main + .mh-reveal on blocks.
 */

body.mh-page {
    --mh-prem-ease: cubic-bezier(0.34, 1.2, 0.64, 1);
    --mh-prem-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --mh-prem-glow: 0 20px 50px -12px rgba(22, 101, 52, 0.18);
    --mh-prem-glow-warm: 0 18px 44px -10px rgba(180, 95, 55, 0.2);
}

/* ── Page atmosphere (subtle motion) ── */
@media (prefers-reduced-motion: no-preference) {
    body.mh-page {
        background:
            rgba(34, 197, 94, 0.14),
            rgba(251, 191, 36, 0.09),
            rgba(45, 212, 191, 0.06),
            #f8fafc;
        background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
        animation: mh-prem-bg-shift 18s ease-in-out infinite alternate;
    }

    @keyframes mh-prem-bg-shift {
        0% {
            background-position: 0% 0%, 100% 0%, 0% 50%, 0% 0%;
        }
        100% {
            background-position: 0% 8%, 90% 4%, 8% 45%, 0% 0%;
        }
    }
}

/* ── Staggered entrance ── */
body.mh-page:not(.my-home-lively) main#cph-main.mh-main[data-kf-nav='home'] > .mh-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
    filter: blur(0);
}

/* Lively portal hubs — no premium hide (avoids blank/old look on HTMX tab swap) */
body.my-home-lively main#cph-main.mh-main[data-kf-nav='home'] > .mh-reveal,
body.subscription-contact-lively main#cph-main.mh-main[data-kf-nav='subscription'] > .mh-reveal,
body.orders-page-lively main#cph-main.mh-main[data-kf-nav='orders'] > .mh-reveal,
body.veggies-basket-lively main#cph-main.mh-main[data-kf-nav='veggies'] > .mh-reveal,
body.profile-page-lively main#cph-main.mh-main[data-kf-nav='profile'] > .mh-reveal {
    opacity: 1;
    transform: none;
    animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
    body.mh-page main#cph-main.mh-main[data-kf-nav='home'] > .mh-reveal {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal {
        animation: mh-prem-rise 0.62s var(--mh-prem-ease-soft) forwards;
    }

    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal:nth-child(1) {
        animation-delay: 0.04s;
    }
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal:nth-child(2) {
        animation-delay: 0.1s;
    }
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal:nth-child(3) {
        animation-delay: 0.16s;
    }
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal:nth-child(4) {
        animation-delay: 0.22s;
    }
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal:nth-child(5) {
        animation-delay: 0.28s;
    }
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal:nth-child(6) {
        animation-delay: 0.34s;
    }
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='home'] > .mh-reveal:nth-child(7) {
        animation-delay: 0.4s;
    }

    @keyframes mh-prem-rise {
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0) scale(1);
        }
    }
}

/* Subscription hub: single combined card entrance (not subscription-contact lively) */
body.mh-page:not(.subscription-contact-lively) main#cph-main.mh-main[data-kf-nav='subscription'] > .mh-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    body.mh-page:not(.subscription-contact-lively) main#cph-main.mh-main[data-kf-nav='subscription'] > .mh-reveal {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page:not(.subscription-contact-lively) main#cph-main.mh-main.mh-main--ready[data-kf-nav='subscription'] > .mh-reveal {
        animation: mh-prem-rise 0.62s var(--mh-prem-ease-soft) forwards;
        animation-delay: 0.06s;
    }
}

body.subscription-contact-page.subscription-contact-lively main#cph-main.mh-main[data-kf-nav='subscription'] > .mh-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    visibility: visible !important;
}

/* Wallet hub — same entrance as subscription */
body.mh-page main#cph-main.mh-main[data-kf-nav='wallet'] > .mh-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.98);
    filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
    body.mh-page main#cph-main.mh-main[data-kf-nav='wallet'] > .mh-reveal {
        opacity: 1;
        transform: none;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page main#cph-main.mh-main.mh-main--ready[data-kf-nav='wallet'] > .mh-reveal {
        animation: mh-prem-rise 0.62s var(--mh-prem-ease-soft) forwards;
        animation-delay: 0.06s;
    }
}

/* ── Hero greeting (glass + gradient type) ── */
body.mh-page main#cph-main.mh-main[data-kf-nav='home'] > .mh-greet.mh-reveal {
    position: relative;
    border-radius: var(--mh-radius-lg, 20px);
    padding: 22px 16px 20px;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
    background:
        rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(167, 243, 208, 0.55);
    box-shadow:
        var(--mh-prem-glow),
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.mh-page main#cph-main.mh-main[data-kf-nav='home'] > .mh-greet.mh-reveal::before {
    content: '';
    position: absolute;
    inset: -1px;
    background:
        rgba(74, 222, 128, 0.2),
        rgba(251, 191, 36, 0.12);
    pointer-events: none;
    z-index: 0;
}

body.mh-page main#cph-main.mh-main[data-kf-nav='home'] > .mh-greet.mh-reveal > * {
    position: relative;
    z-index: 1;
}


body.mh-page .mh-greet__name {
    margin-top: 12px;
    font-size: clamp(var(--kf-app-fs-heading), 5.5vw, calc(var(--kf-app-fs-heading) * 1.45));
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.08;
    color: #0f172a;
}

body.mh-page .mh-greet__name--timeofday {
    font-size: clamp(var(--kf-app-fs-body), 3.9vw, calc(var(--kf-app-fs-heading) * 1.15));
    line-height: 1.22;
    letter-spacing: -0.02em;
}

body.mh-page .mh-greet__name-accent {
    background: #047857;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    body.mh-page .mh-greet__name-accent {
        color: #047857;
    }
}

body.mh-page .mh-greet__showcase {
    margin-top: 16px;
    align-items: center;
}

body.mh-page .mh-greet__showcase--no-order {
    margin-top: 18px;
    gap: 20px;
}

body.mh-page .mh-greet__harvest-headline {
    font-size: clamp(1rem, 3.5vw, 1.16rem);
    letter-spacing: -0.025em;
}

body.mh-page .mh-greet__pending-date,
body.mh-page .mh-greet__harvest-date {
    background: #047857;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    body.mh-page .mh-greet__pending-date,
    body.mh-page .mh-greet__harvest-date {
        color: #047857;
    }
}

body.mh-page .mh-greet__harvest-story {
    font-size: clamp(var(--kf-app-fs-small), 3.15vw, calc(var(--kf-app-fs-body) * 1.06));
    color: #334155;
    letter-spacing: -0.01em;
}

/* Urgent order line — medium, bold, red tones + moving highlight */
body.mh-page .mh-greet__harvest-story.mh-greet__harvest-story--order-urgent {
    margin-top: 14px;
    font-size: clamp(0.94rem, 3.55vw, 1.08rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.02em;
    text-align: center;
    color: transparent;
    background-image: #7f1d1d;
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page .mh-greet__harvest-story.mh-greet__harvest-story--order-urgent {
        animation: mh-order-urgent-light 3.6s ease-in-out infinite;
    }

    @keyframes mh-order-urgent-light {
        0%,
        100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    body.mh-page .mh-greet__harvest-story.mh-greet__harvest-story--order-urgent {
        color: #b91c1c;
        background-image: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mh-page .mh-greet__harvest-story.mh-greet__harvest-story--order-urgent {
        animation: none !important;
    }
}

body.mh-page .mh-greet__harvest-panel {
    border-radius: 22px;
    border-color: rgba(110, 231, 183, 0.5);
    background: rgba(255, 255, 255, 0.96);
}

body.mh-page .mh-greet__harvest-welcome .mh-greet__basket-figure--empty {
    background: #f0fdf4;
    border-color: rgba(190, 242, 100, 0.55);
    color: #15803d;
}

body.mh-page .mh-greet__basket-figure {
    width: clamp(96px, 26vw, 118px);
    height: clamp(96px, 26vw, 118px);
    border-radius: 26px;
    box-shadow:
        0 14px 36px rgba(22, 101, 52, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.92) inset;
}

body.mh-page .mh-greet__basket-svg {
    width: min(68px, 56%);
    height: min(68px, 56%);
}

body.mh-page .mh-greet__basket-figure--empty {
    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.09),
        0 0 0 1px rgba(255, 255, 255, 0.8) inset;
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page .mh-greet__basket-figure:not(.mh-greet__basket-figure--empty) {
        animation: mh-greet-basket-pop 4.8s ease-in-out infinite;
    }

    @keyframes mh-greet-basket-pop {
        0%,
        100% {
            transform: translateY(0) scale(1);
        }
        50% {
            transform: translateY(-4px) scale(1.03);
        }
    }

    body.mh-page .mh-greet__basket-sad {
        animation: mh-greet-sad-wobble 2.4s ease-in-out infinite;
    }

    @keyframes mh-greet-sad-wobble {
        0%,
        100% {
            transform: rotate(-5deg) scale(1);
        }
        50% {
            transform: rotate(5deg) scale(1.08);
        }
    }
}

body.mh-page .mh-greet__delivery {
    margin-top: 0;
    padding: 14px 14px 14px 12px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(110, 231, 183, 0.55);
    box-shadow:
        0 10px 28px rgba(22, 101, 52, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page .mh-greet__delivery {
        animation: mh-greet-delivery-breathe 5s ease-in-out infinite;
    }

    @keyframes mh-greet-delivery-breathe {
        0%,
        100% {
            box-shadow:
                0 10px 28px rgba(22, 101, 52, 0.1),
                0 1px 0 rgba(255, 255, 255, 0.95) inset;
        }
        50% {
            box-shadow:
                0 14px 36px rgba(22, 101, 52, 0.14),
                0 1px 0 rgba(255, 255, 255, 0.95) inset;
        }
    }
}

body.mh-page .mh-greet__delivery-eyebrow {
    color: #047857;
    letter-spacing: 0.09em;
}

body.mh-page .mh-greet__delivery-line {
    color: #475569;
    font-weight: 650;
}

body.mh-page .mh-greet__delivery-date {
    color: #0f172a;
    font-weight: 900;
    padding: 0 0.06em;
    border-radius: 4px;
    background: rgba(251, 191, 36, 0.35);
}

body.mh-page .mh-greet__hint {
    margin-top: 12px;
    padding: 9px 12px 9px 14px;
    border-left-width: 4px;
    border-left-color: rgba(20, 184, 166, 0.65);
    border-radius: 0 14px 14px 0;
    background: rgba(255, 255, 255, 0.72);
    font-weight: 650;
    color: #475569;
}

body.mh-page .mh-greet__hint-em {
    color: #0f766e;
    font-style: normal;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-color: rgba(251, 191, 36, 0.85);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}


body.mh-page .mh-greet__sub {
    margin-top: 10px;
    font-weight: 600;
    color: #475569;
}

body.mh-page .mh-trust-strip {
    margin-top: 14px;
    gap: 8px;
}

body.mh-page .mh-trust-strip__item {
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #334155;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

body.mh-page .mh-trust-strip__dot {
    width: 4px;
    height: 4px;
    background: #22c55e;
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page .mh-trust-strip__item {
        animation: mh-prem-chip 3.2s ease-in-out infinite;
    }
    body.mh-page .mh-trust-strip__item:nth-child(3) {
        animation-delay: 0.4s;
    }

    @keyframes mh-prem-chip {
        0%,
        100% {
            transform: translateY(0);
            box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
        }
        50% {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(22, 101, 52, 0.08);
        }
    }
}

/* ── Carousel: floating cards + live dots ── */
body.mh-page .mh-carousel__eyebrow {
    font-size: clamp(1rem, 3.8vw, 1.125rem);
    background: #0f172a;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    body.mh-page .mh-carousel__eyebrow {
        color: var(--mh-ink, #0c1222);
    }
}

body.mh-page .mh-carousel__see-all {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: var(--kf-app-fs-small);
    text-decoration: none;
    color: #fff;
    background: #166534;
    box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 18px rgba(22, 101, 52, 0.35);
    transition: transform 0.2s var(--mh-prem-ease-soft), box-shadow 0.2s ease;
}

body.mh-page .mh-carousel__see-all:active {
    transform: scale(0.96);
}

/* Home carousel slides: visual parity with login slider — see customer-home-slider.css (no float / card chrome here). */

/* ── Combined basket hub — depth, icon motion, Open CTA pulse ── */
body.mh-page main#cph-main.mh-main[data-kf-nav='home'] > .mh-basket-hub,
body.mh-page main#cph-main.mh-main[data-kf-nav='veggies'] > .mh-basket-hub {
    box-shadow:
        0 20px 48px -14px rgba(15, 23, 42, 0.14),
        0 0 0 1px rgba(255, 255, 255, 0.92) inset,
        var(--mh-prem-glow);
}

body.mh-page .mh-basket-hub__chrome {
    display: none;
}

body.mh-page .mh-basket-hub__icon {
    border-radius: 16px;
    background: #fff;
    box-shadow:
        0 4px 14px rgba(5, 150, 105, 0.15),
        0 0 0 1px rgba(167, 243, 208, 0.8);
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page .mh-basket-hub__icon svg {
        animation: mh-prem-icon-nudge 4s ease-in-out infinite;
    }
}

body.mh-page .mh-basket-hub__grab {
    display: none;
}

body.mh-page .mh-basket-hub__title {
    background: #0f172a;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    body.mh-page .mh-basket-hub__title {
        color: var(--mh-ink, #0c1222);
    }
}

/* GoodForYou title: centered + travelling highlight */
body.mh-page .mh-basket-hub__title--gfy {
    display: inline-block;
    width: 100%;
    background: #0f172a;
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    body.mh-page .mh-basket-hub__title--gfy {
        color: #14532d;
        background: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page .mh-basket-hub__title--gfy {
        animation: mh-gfy-shimmer 4.5s linear infinite;
    }

    @keyframes mh-gfy-shimmer {
        0% {
            background-position: 210% 50%;
        }
        100% {
            background-position: -210% 50%;
        }
    }
}

body.mh-page .mh-basket-hub__zone--basket {
    padding-bottom: 14px;
}

/* In-hub customize strip + save — reads as one “live” block */
body.mh-page .mh-basket-hub .bh-customize-strip--in-items:not([hidden]) {
    margin-bottom: 10px;
    padding: 11px 14px;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(22, 101, 52, 0.1);
}

@keyframes mh-prem-chrome-shimmer {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

@keyframes mh-prem-icon-nudge {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-2px) rotate(-3deg);
    }
}

@keyframes mh-prem-handle-hub {
    0%,
    100% {
        opacity: 0.65;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.12);
    }
}

/* ── Pending week CTA (pulse) ── */
body.mh-page .mh-week__btn {
    background: #22c55e;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow:
        0 4px 0 rgba(21, 128, 61, 0.35),
        0 12px 28px rgba(22, 101, 52, 0.35);
    transition: transform 0.18s var(--mh-prem-ease-soft), box-shadow 0.18s ease;
}

@media (prefers-reduced-motion: no-preference) {
    body.mh-page .mh-week__btn {
        animation: mh-prem-pulse-btn 2.4s ease-in-out infinite;
    }

    @keyframes mh-prem-pulse-btn {
        0%,
        100% {
            box-shadow:
                0 4px 0 rgba(21, 128, 61, 0.35),
                0 12px 28px rgba(22, 101, 52, 0.35);
        }
        50% {
            box-shadow:
                0 4px 0 rgba(21, 128, 61, 0.35),
                0 16px 40px rgba(22, 101, 52, 0.45);
        }
    }
}

body.mh-page .mh-week__btn:active {
    transform: translateY(2px) scale(0.99);
    box-shadow: 0 2px 0 rgba(21, 128, 61, 0.35), 0 8px 20px rgba(22, 101, 52, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    body.mh-page .mh-week__btn {
        animation: none !important;
    }

    body.mh-page .mh-trust-strip__item {
        animation: none !important;
    }

    body.mh-page .mh-basket-hub__icon svg {
        animation: none !important;
    }

    body.mh-page .mh-basket-hub__grab {
        animation: none !important;
    }

    body.mh-page .mh-basket-hub__chrome {
        animation: none !important;
    }

    body.mh-page .mh-greet__delivery {
        animation: none !important;
    }

    body.mh-page .mh-greet__basket-figure:not(.mh-greet__basket-figure--empty) {
        animation: none !important;
    }

    body.mh-page .mh-greet__basket-sad {
        animation: none !important;
    }

    body.mh-page .mh-basket-hub__title--gfy {
        animation: none !important;
        background: #0f172a;
        background-size: 100% 100%;
    }
}