/* ============================================================
   HERO ME MORPH — port vanilla i scroll-morph-hero
   ------------------------------------------------------------
   Kartat kalojnë: shpërndarje → rreth → hark, të drejtuara nga
   pozicioni i scroll-it të faqes.

   TRE NDRYSHIME NDAJ ORIGJINALIT, të qëllimshme:

   1. PA SCROLL-JACKING. Origjinali bënte e.preventDefault() mbi
      wheel-in, pra useri ngecte në hero derisa animacioni mbaronte.
      Në një faqe tregu ku njerëzit vijnë për të parë njoftime, kjo
      është armiqësore. Këtu morph-i lidhet me scroll-in normal —
      i njëjti efekt, por useri mbetet në kontroll.

   2. KARTAT JANË LINKE TË VËRTETA drejt njoftimeve, jo div-e.
      Klikohen, hapen në tab të ri me Ctrl, i lexon screen reader-i.

   3. RESPEKTON prefers-reduced-motion: harku shfaqet i palëvizshëm.
   ============================================================ */

.hm {
    position: relative;
    /* Lartësia i jep scroll-it hapësirë ku të zhvillohet morph-i.
       Përmbajtja brenda është sticky, pra ndjek ekranin.
       Ulur nga 220vh: njoftimet janë arsyeja pse vjen useri, pra hero-ja
       nuk duhet të hajë dy ekrane para tyre. */
    height: 145vh;
}
.hm-stage {
    position: sticky; top: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
    background: var(--tg-paper, #F2F2EF);
}

/* ── Sfondi ──────────────────────────────────────────────────
   Rrjetë e imët si e një regjistri tregu, jo gradient dekorativ.
   Zbehet nga poshtë-lart, që sipër të mos konkurrojë me titullin.
   Zero kërkesa rrjeti: gjithçka është CSS. */
.hm-stage::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(to right, var(--hm-grid, rgba(13,13,13,.07)) 1px, transparent 1px),
        linear-gradient(to bottom, var(--hm-grid, rgba(13,13,13,.07)) 1px, transparent 1px);
    background-size: 34px 34px;
    /* Rrjeta jeton vetëm në gjysmën e poshtme, ku ulen kartat */
    -webkit-mask-image: linear-gradient(to bottom, transparent 8%, #000 55%, #000 100%);
            mask-image: linear-gradient(to bottom, transparent 8%, #000 55%, #000 100%);
}

/* Banka poshtë — tavolina e pazarit ku ulen kartat.
   Zgjidhje strukturore, jo shkëlqim dekorativ: një sipërfaqe me buzë
   të prerë. Provova një radial të verdhë të gjerë dhe lexohej si njollë,
   që bie ndesh me vetë drejtimin. */
.hm-stage::after {
    content: '';
    position: absolute; inset: 62% 0 0; z-index: -1;
    pointer-events: none;
    background: var(--hm-bench, rgba(13, 13, 13, .035));
    border-top: 1px solid var(--hm-rule, rgba(13, 13, 13, .14));
}

/* Sinjali mbetet, por i shtrënguar: vetëm një rrip i ngushtë pikërisht
   nën harkun, sa t’i ndajë kartat nga banka. */
.hm-stage .hm-horizon {
    position: absolute; left: 0; right: 0; z-index: -1;
    top: 62%; height: 190px;
    pointer-events: none;
    background: radial-gradient(58% 100% at 50% 0%,
        var(--hm-glow, rgba(255, 212, 0, .22)) 0%, transparent 72%);
}

/* Teksti dytësor brenda hero-s ka sfond të vetin, jo atë të faqes: letër,
   bankë, ose rrip i verdhë. Global-i --pk-text-2 (#6B7280) matet 4.31:1 mbi
   letër dhe bie në 3.81:1 mbi rripin — nën AA. Nuk e ndryshova tokenin global,
   sepse ai përdoret në gjithë sajtin dhe do kërkonte audit të veçantë;
   këtu vlen vetëm brenda skenës. #606064 jep 5.58 / 5.19 / 4.93:1. */
.hm-stage { --hm-muted: #606064; }

:root[data-bs-theme="dark"] .hm-stage {
    --hm-grid:  rgba(244,244,240,.055);
    --hm-glow:  rgba(255, 212, 0, .13);
    --hm-bench: rgba(255,255,255,.028);
    --hm-rule:  rgba(244,244,240,.13);
    --hm-muted: #A9A9A3;
}

/* Skena 3D. perspective vendoset te prindi, jo te çdo kartë —
   ndryshe çdo kartë do kishte pikën e vet të ikjes dhe harku do dukej i sheshtë. */
.hm-field {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.hm-card {
    position: absolute;
    width: 64px; height: 90px;
    border-radius: 12px;
    /* will-change vetëm mbi transform: lista e gjatë e detyron shfletuesin
       të mbajë shtresa të panevojshme. */
    will-change: transform;
    transform-style: preserve-3d;
    /* Pozicionimi bëhet nga JS-i me transform; pa tranzicion CSS këtu,
       sepse do luftonte me rAF-in. Tranzicioni vlen vetëm për hover. */
    text-decoration: none;
    outline-offset: 4px;
}
.hm-card-inner {
    position: absolute; inset: 0;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
    border-radius: 12px;
}
.hm-card:hover .hm-card-inner,
.hm-card:focus-visible .hm-card-inner { transform: rotateY(180deg); }

.hm-face {
    position: absolute; inset: 0;
    border-radius: 12px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 4px 14px rgba(17,24,39,.16);
}
.hm-front { background: var(--pk-n-200, #E5E7EB); }
.hm-front img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.hm-front::after {
    content: ''; position: absolute; inset: 0;
    background: rgba(17,24,39,.10);
    transition: background-color .3s ease-out;
}
.hm-card:hover .hm-front::after { background: transparent; }

.hm-back {
    transform: rotateY(180deg);
    background: #111827;
    color: #fff;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.12);
}
.hm-back-price {
    font-size: 11px; font-weight: 800; letter-spacing: -.02em;
    color: #FFA033;
    font-variant-numeric: tabular-nums;
}
.hm-back-title {
    font-size: 9px; line-height: 1.3; margin-top: 3px;
    color: rgba(255,255,255,.9);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.hm-back-city { font-size: 8px; color: rgba(255,255,255,.55); margin-top: 4px; }

/* ── Teksti mbi skenë ── */
.hm-copy {
    position: relative; z-index: 3;
    text-align: center;
    pointer-events: none;
    padding-inline: 20px;
    max-width: 720px;
}
.hm-copy > * { pointer-events: auto; }

/* BUG I RREGULLUAR: .hm-outro kishte `position:absolute; top:12%`, por
   kontejneri i tij është .hm-copy, jo skena — pra 12% llogaritej mbi
   lartësinë e vetë tekstit, i cili tashmë ishte i qendërzuar. Teksti
   dilte në mes të ekranit në vend të lart.
   Tani të dy tekstet ndajnë të njëjtën qelizë grid dhe shkëmbehen në vend. */
.hm-copy { display: grid; }
.hm-intro, .hm-outro {
    grid-area: 1 / 1;
    transition: opacity .5s ease-out, transform .5s ease-out, filter .5s ease-out;
}

/* Teksti zë brezin e sipërm; rrethi ulet në atë që mbetet (llogaritur nga
   JS-i te measure()). Provova më parë një translateY(-14vh) fiks: në 820px
   lartësi titulli binte 85px MBI unazën e fotove, dhe në ekrane më të
   shkurtër përplasja bëhej më e keqe — sepse rrezja e rrethit varet nga
   lartësia, ndërsa zhvendosja ishte konstante. Ankorimi lart e heq varësinë. */
.hm-copy {
    align-self: start;
    margin-top: clamp(40px, 8vh, 96px);
}

.hm-h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem);
    font-weight: 800; letter-spacing: -.035em; line-height: 1.08;
    color: var(--pk-text, #111827);
    margin: 0;
}
.hm-h1 em { font-style: normal; color: var(--pk-accent, #FF8A00); }
.hm-kicker {
    margin-top: 14px;
    font-size: 11px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hm-muted, #606064);
}
.hm-h2 {
    font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
    font-weight: 800; letter-spacing: -.03em;
    color: var(--pk-text, #111827); margin: 0 0 12px;
}
.hm-sub {
    font-size: clamp(.875rem, .8rem + .3vw, 1rem);
    color: var(--hm-muted, #606064);
    max-width: 46ch; margin-inline: auto; line-height: 1.6;
}
.hm-cta { display: inline-flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }

/* Shenjë se ka ende për të parë poshtë */
.hm-hint {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--hm-muted, #606064);
    transition: opacity .4s ease-out;
}
.hm-hint svg { animation: hmNudge 1.8s ease-in-out infinite; }
@keyframes hmNudge {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50%      { transform: translateY(5px); opacity: 1; }
}

/* ── Pa JS: harku nuk ndërtohet dot, pra kartat rreshtohen si grid i thjeshtë ── */
.hm-nojs .hm { height: auto; }
.hm-nojs .hm-stage { position: static; height: auto; padding-block: 48px; }
.hm-nojs .hm-field {
    position: static; display: flex; flex-wrap: wrap; gap: 12px;
    justify-content: center; perspective: none; margin-top: 32px;
}
.hm-nojs .hm-card { position: static; transform: none !important; }
.hm-nojs .hm-outro, .hm-nojs .hm-hint { display: none; }
/* order:-1 sepse .hm-field vjen para .hm-copy ne DOM (motori i do kartat te
   dala te parat); ne rrjedhen statike kjo do e linte titullin poshte kartave. */
.hm-nojs .hm-copy { display: block; transform: none; margin-top: 0; order: -1; }
.hm-nojs .hm-stage::before, .hm-nojs .hm-stage::after,
.hm-nojs .hm-horizon { display: none; }

/* ── Reduced motion: harku shfaqet i palëvizshëm, pa scroll ── */
@media (prefers-reduced-motion: reduce) {
    .hm { height: auto; }
    .hm-stage { position: static; height: auto; padding-block: 48px; }
    .hm-field {
        position: static; display: flex; flex-wrap: wrap; gap: 12px;
        justify-content: center; perspective: none; margin-top: 32px;
    }
    .hm-card { position: static; transform: none !important; }
    .hm-card-inner { transition: none; }
    .hm-hint { display: none; }
    /* Pa lëvizje të dy tekstet duhen njëri nën tjetrin, jo në të njëjtën
       qelizë grid — ndryshe do mbivendoseshin. */
    .hm-copy { display: block; transform: none; margin-top: 0; order: -1; }
    .hm-intro, .hm-outro { grid-area: auto; }
    .hm-outro { position: static; margin-top: 24px; }
    .hm-intro, .hm-outro { opacity: 1 !important; transform: none !important; filter: none !important; }
    .hm-stage::before, .hm-stage::after, .hm-horizon { display: none; }
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .hm { height: 118vh; }
    .hm-card { width: 52px; height: 74px; }
}