/* ============================================================
   WahahStore — Home (soft modern) · hero · categories · promo
   Blue palette · cloud shadows · rounded · mobile-first
   ============================================================ */
:root { --cloud: 0 26px 50px -16px rgba(0, 69, 228, .22); --cloud-sm: 0 14px 30px -12px rgba(0, 69, 228, .16); }

/* ---------- HERO ---------- */
.home-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: 8px 0 4px; }
.home-hero__copy { display: flex; flex-direction: column; gap: 20px; }
.home-hero__chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 9px 18px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); font-weight: 700; font-size: .9rem; }
.home-hero__chip .material-symbols-outlined { font-size: 1.1rem; }
.home-hero__title { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.1; color: var(--on-surface); font-weight: 800; }
.home-hero__title .hl { color: var(--primary); position: relative; white-space: nowrap; }
.home-hero__title .hl-line { position: absolute; inset-inline-start: 0; inset-block-end: -.42em; width: 100%; height: .4em; color: var(--secondary); overflow: visible; }
.home-hero__title .hl-line path { stroke-dasharray: 250; stroke-dashoffset: 250; animation: draw 1.1s ease forwards .5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.home-hero__text { color: var(--on-surface-variant); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 46ch; }
.home-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.home-hero__stats { display: flex; gap: clamp(20px, 4vw, 40px); margin-top: 14px; flex-wrap: wrap; }
.home-hero__stats > div { display: flex; flex-direction: column; }
.home-hero__stats strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--on-surface); }
.home-hero__stats span { color: var(--on-surface-variant); font-size: .85rem; }

.home-hero__media { position: relative; display: grid; place-items: center; min-height: 320px; }
.home-hero__art { position: relative; z-index: 2; width: 100%; max-width: 540px; animation: floaty 8s ease-in-out infinite; }
.home-hero__art img { width: 100%; height: auto; display: block; filter: drop-shadow(0 28px 30px rgba(0, 69, 228, .14)); }
.home-hero__blob { position: absolute; border-radius: 46% 54% 57% 43% / 50% 45% 55% 50%; z-index: 1; filter: blur(2px); }
.home-hero__blob.b1 { width: 46%; aspect-ratio: 1; background: color-mix(in srgb, var(--primary) 22%, transparent); inset-block-start: -8%; inset-inline-end: -6%; animation: floaty 7s ease-in-out infinite; }
.home-hero__blob.b2 { width: 38%; aspect-ratio: 1; background: color-mix(in srgb, var(--secondary) 26%, transparent); inset-block-end: -10%; inset-inline-start: -6%; animation: floaty 9s ease-in-out 1s infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(1.5deg); } }

/* ---------- CATEGORY CIRCLES (round image in a soft colour ring + name) ---------- */
/* Pull the hero up so the gap under the bubbles is tight, not a big void. */
.catcir-sec { margin-block-end: clamp(-56px, -4vw, -28px); }
.cat-circles { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(18px, 2.6vw, 44px); width: 100%; }
.catcir {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: clamp(104px, 9vw, 134px); text-align: center;
    animation: catcirIn .55s cubic-bezier(.2, .85, .25, 1) both; animation-delay: var(--d, 0s);
}
.catcir__ring {
    width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--tint);
    padding: 9px; box-shadow: 0 10px 22px -10px rgba(16, 24, 40, .28);
    display: grid; place-items: center;
    transition: transform .35s cubic-bezier(.2, .85, .25, 1), box-shadow .35s;
}
.catcir__ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #fff; display: block; }
.catcir:hover .catcir__ring { transform: translateY(-7px) scale(1.05); box-shadow: 0 18px 30px -10px rgba(16, 24, 40, .34); }
.catcir__name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--on-surface); line-height: 1.22; transition: color .25s; }
.catcir:hover .catcir__name { color: var(--primary); }
@keyframes catcirIn { from { opacity: 0; transform: translateY(16px) scale(.82); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .catcir { width: clamp(88px, 26vw, 110px); } }
@media (prefers-reduced-motion: reduce) { .catcir { animation: none; } }

/* ---------- PROMO BAND ---------- */
.promo-band { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 24px; border-radius: var(--radius-2xl); background: var(--primary); color: #fff; overflow: hidden; box-shadow: var(--cloud); }
.promo-band__content { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; position: relative; z-index: 2; }
.promo-band__eyebrow { font-weight: 700; font-size: .85rem; background: rgba(255, 255, 255, .16); padding: 6px 14px; border-radius: var(--radius-full); }
.promo-band__content h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.promo-band__content p { opacity: .9; max-width: 40ch; }
.promo-band__content .btn--light { background: #fff; color: var(--primary); margin-top: 6px; }
.promo-band__art { align-self: stretch; min-height: 200px; }
.promo-band__art img { width: 100%; height: 100%; object-fit: cover; }
.promo-band__shape { position: absolute; inset-block: -30% auto; inset-inline-end: 30%; width: 40%; aspect-ratio: 1; background: rgba(255, 255, 255, .06); border-radius: 50%; z-index: 1; }

/* ---------- Micro-interactions + reveal ---------- */
.btn.pop:active { transform: scale(.96); }
.pcard__add:active { transform: scale(.86); }
.pcard__fav:active { transform: scale(.8); }
/* Scroll reveal — fade + rise + gentle scale & blur for a premium entrance */
.reveal { opacity: 0; transform: translateY(42px) scale(.965); filter: blur(6px); will-change: opacity, transform, filter;
    transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease; }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
/* Stagger inner pieces so each section "builds" as it enters */
.reveal .section__head, .reveal .carousel, .reveal .cat-cards, .reveal .prod-grid,
.reveal .promo-band__content, .reveal .benefit { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in .section__head { opacity: 1; transform: none; transition-delay: .08s; }
.reveal.in .carousel, .reveal.in .cat-cards, .reveal.in .prod-grid, .reveal.in .promo-band__content { opacity: 1; transform: none; transition-delay: .2s; }
.reveal.in .benefit { opacity: 1; transform: none; }
.reveal.in .benefit:nth-child(1) { transition-delay: .1s; }
.reveal.in .benefit:nth-child(2) { transition-delay: .2s; }
.reveal.in .benefit:nth-child(3) { transition-delay: .3s; }
.reveal.in .benefit:nth-child(4) { transition-delay: .4s; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
    .home-hero { grid-template-columns: 1fr; }
    .home-hero__media { order: -1; max-width: 540px; margin-inline: auto; width: 100%; }
    .promo-band { grid-template-columns: 1fr; }
    .promo-band__art { min-height: 160px; }
}
@media (max-width: 600px) {
    .home-hero__pill { padding: 9px 12px; }
    .home-hero__pill small { display: none; }
    .home-hero__stats strong { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero__blob { animation: none; }
    .home-hero__title .hl-line path { stroke-dashoffset: 0; animation: none; }
    .reveal, .reveal .section__head, .reveal .carousel, .reveal .cat-cards, .reveal .prod-grid,
    .reveal .promo-band__content, .reveal .benefit { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ============ Mobile / iOS device polish ============ */
body { -webkit-tap-highlight-color: transparent; }
/* Fixed UI clears the notch / home indicator on iOS (needs viewport-fit=cover). */
.topnav-wrap { inset-block-start: max(16px, env(safe-area-inset-top)); }
.whatsapp-float { inset-block-end: max(20px, env(safe-area-inset-bottom)); inset-inline-start: max(20px, env(safe-area-inset-left)); }
/* Momentum scrolling for the product/banner carousels on iOS. */
.carousel__track { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }

@media (max-width: 560px) {
    /* 16px inputs stop iOS from zooming in when a field is focused. */
    input, select, textarea { font-size: 16px; }
    /* Tighter, app-like vertical rhythm on phones. */
    :root { --section-gap: clamp(38px, 9vw, 54px); }
    .btn { padding: 13px 22px; }
}