/* =========================================================
   HERO (KD) — Dedicated stylesheet (deduped + maintainable)
   File: wwwroot/css/hero.css
   ========================================================= */

/* ---------- HERO HEAD ---------- */
.hero {
    padding: 34px 0 0;
}

.hero-head-premium {
    text-align: center;
    padding: 34px 0 0;
    display: grid;
    justify-items: center;
    gap: 0;
}

    .hero-head-premium .scribble {
        margin: 0 0 14px;
        letter-spacing: .12em;
    }

    .hero-head-premium .display {
        margin: 0;
        line-height: .98;
    }

        .hero-head-premium .display br {
            display: block;
            content: "";
            margin-top: 10px;
        }

    .hero-head-premium .display-strong {
        display: inline-block;
        margin-top: 30px; /* was 30px */
        letter-spacing: -0.01em; /* slightly tighter */
        font-size: 0.68em; /* makes it smaller than “iKkasi Lakho…” */
        font-weight: 700; /* calmer than the main line */
        opacity: .92; /* subtle hierarchy */
    }

    .hero-head-premium .lead {
        margin: 18px 0 0;
        text-align: center;
        max-width: 68ch;
        line-height: 1.65;
    }

    .hero-head-premium .hero-ctas {
        margin-top: 18px;
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-head-premium .hero-badges {
        margin-top: 16px;
        display: flex;
        gap: 18px;
        justify-content: center;
        flex-wrap: wrap;
    }

        .hero-head-premium .hero-badges img {
            height: 100px;
            width: auto;
        }

@media (max-width: 720px) {
    .hero-head-premium {
        padding-top: 26px;
    }

        .hero-head-premium .lead {
            max-width: 56ch;
        }
}

/* ---------- HERO STAGE / BLEED ---------- */
.hero-bleed {
    width: 100%;
    padding: 0 24px;
}

:root {
    /* Desktop defaults (overridden on mobile below) */
    --hero-phone-h: clamp(520px, 62vh, 740px);
}

.hero-stage {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    min-height: calc(var(--hero-phone-h) + 420px);
}

/* ---------- CENTER PHONE ---------- */
.hero-phone-main {
    position: absolute;
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
    z-index: 5;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-device-img {
    height: var(--hero-phone-h);
    width: auto;
    max-width: min(92vw, 420px);
    display: block;
    filter: drop-shadow(0 28px 92px rgba(0,0,0,.22));
}

/* ---------- CONNECTOR SVG ---------- */
.hero-link {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3; /* above inactive cards */
    opacity: 0;
    transition: opacity .25s var(--ease);
}

    .hero-link.is-on {
        opacity: 1;
    }

.hero-link-path {
    fill: none;
    stroke: url(#heroLinkGrad);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 12px 26px rgba(0,0,0,.12));
}

.hero-link-dot {
    fill: rgba(255,255,255,.95);
    stroke: rgba(0,0,0,.18);
    stroke-width: 1;
    filter: drop-shadow(0 12px 22px rgba(0,0,0,.10));
}

/* ---------- CARD BASE (webp panels) ---------- */
.hero-card {
    position: absolute;
    width: 300px;
    height: 175px;
    border-radius: 28px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 70px rgba(0,0,0,.08);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    z-index: 2;
    pointer-events: none; /* keep UX clean; montage is visual */
    opacity: .40; /* less washed out */
    transition: transform .24s var(--ease), opacity .24s var(--ease), box-shadow .24s var(--ease);
}

.hero-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .32; /* less washed out */
    filter: grayscale(.55) saturate(.70) contrast(.98) brightness(1.02);
    transform: scale(1.01);
    transition: opacity .24s var(--ease), filter .24s var(--ease), transform .24s var(--ease);
}

.hero-card-ghost {
    position: absolute;
    inset: 0;
    background: radial-gradient(closest-side at 30% 30%, rgba(0,0,0,.05), transparent 55%), linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.70));
    opacity: .34; /* reduced milk overlay */
    transition: opacity .24s var(--ease);
}

/* “next” card gets a bit of presence */
.hero-card[data-next="true"] {
    opacity: .62;
    z-index: 3;
}

/* active card full strength */
.hero-card[data-active="true"] {
    opacity: 1;
    z-index: 4;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 26px 95px rgba(0,0,0,.16);
}

    .hero-card[data-active="true"] .hero-card-img {
        opacity: 1;
        filter: none;
        transform: scale(1);
    }

    .hero-card[data-active="true"] .hero-card-ghost {
        opacity: 0;
    }

/* ---------- FLOAT PHONES (15% smaller than centre) ---------- */
.hero-float-phone {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: .34;
    transform: rotate(var(--rot, 0deg));
    filter: drop-shadow(0 26px 70px rgba(0,0,0,.16));
    transition: transform .26s var(--ease), opacity .26s var(--ease), filter .26s var(--ease);
    will-change: transform, opacity;
}

.hero-float-phone-img {
    display: block;
    height: calc(var(--hero-phone-h) * 0.65); /* ~35% smaller than centre */
    width: auto;
    max-width: 44vw;
}

/* active/next states for floats too (your JS uses data-active/data-next) */
.hero-float-phone[data-next="true"] {
    opacity: .62;
    z-index: 3;
}

.hero-float-phone[data-active="true"] {
    opacity: 1;
    z-index: 4;
    transform: rotate(var(--rot, 0deg)) translateY(-2px) scale(1.01);
}

/* ---------- POSITIONS (DESKTOP) ---------- */
/* Phones (big) */
.hero-stage .hc5 {
    left: 4%;
    top: 10%;
    --rot: -10deg;
}
/* Discover phone (left) */
.hero-stage .hc6 {
    right: 5%;
    top: 6%;
    --rot: 9deg;
}
/* Food detail (top-right) */
.hero-stage .hc7 {
    right: 12%;
    top: 56%;
    --rot: 7deg;
}
/* Salon detail (lower-right) */

/* Cards (webp) */
.hero-stage .hc1 {
    left: 24%;
    top: 10%;
    transform: rotate( 4deg);
}
/* Food */
.hero-stage .hc2 {
    left: 10%;
    top: 58%;
    transform: rotate(-6deg);
}
/* Salons */
.hero-stage .hc3 {
    right: 22%;
    top: 12%;
    transform: rotate( 6deg);
}
/* Rentals */
.hero-stage .hc4 {
    right: 8%;
    top: 46%;
    transform: rotate(-5deg);
}
/* Laundry */

/* ---------- TABLET ---------- */
@media (max-width: 1200px) {
    .hero-stage {
        max-width: 1200px;
    }

        .hero-stage .hc5 {
            left: 2%;
            top: 14%;
        }

        .hero-stage .hc6 {
            right: 2%;
            top: 10%;
        }

        .hero-stage .hc7 {
            right: 8%;
            top: 58%;
        }

        .hero-stage .hc1 {
            left: 18%;
            top: 12%;
        }

        .hero-stage .hc2 {
            left: 6%;
            top: 62%;
        }

        .hero-stage .hc3 {
            right: 18%;
            top: 14%;
        }

        .hero-stage .hc4 {
            right: 6%;
            top: 50%;
        }
}

@media (max-width: 900px) {
    .hero-bleed {
        padding: 0 14px;
    }

    .hero-device-img {
        height: clamp(460px, 58vh, 640px);
        max-width: 92vw;
    }

    .hero-card {
        width: 240px;
        height: 150px;
        border-radius: 24px;
    }
}

/* ---------- MOBILE: everything fits + is visible ---------- */
@media (max-width: 560px) {
    .hero-bleed {
        padding: 0 10px;
    }

    /* shrink centre phone to make room for sides */
    :root {
        --hero-phone-h: clamp(360px, 46vh, 520px);
    }

    .hero-device-img {
        max-width: 78vw;
    }

    .hero-stage {
        min-height: calc(var(--hero-phone-h) + 240px);
    }

    /* cards become smaller but still visible */
    .hero-card {
        width: min(44vw, 190px);
        height: min(28vw, 120px);
        border-radius: 22px;
        opacity: .34;
    }

    .hero-card-img {
        opacity: .30;
        filter: grayscale(.45) saturate(.85) brightness(1.02);
        transform: scale(1.01);
    }

    .hero-card-ghost {
        opacity: .26;
    }

    /* float phones shrink too */
    .hero-float-phone-img {
        height: calc(var(--hero-phone-h) * 0.72);
        max-width: 46vw;
    }

    /* positions: INSIDE viewport (no negative left/right) */
    .hero-stage .hc5 {
        left: 2%;
        top: 14%;
        --rot: -10deg;
    }

    .hero-stage .hc6 {
        right: 2%;
        top: 16%;
        --rot: 9deg;
    }

    .hero-stage .hc7 {
        right: 6%;
        top: 68%;
        --rot: 8deg;
    }

    .hero-stage .hc1 {
        left: 6%;
        top: 6%;
        transform: rotate(-6deg);
    }

    .hero-stage .hc3 {
        right: 6%;
        top: 6%;
        transform: rotate( 6deg);
    }

    .hero-stage .hc2 {
        left: 10%;
        top: 72%;
        transform: rotate( 6deg);
    }

    .hero-stage .hc4 {
        right: 10%;
        top: 74%;
        transform: rotate(-5deg);
    }
}