/* Porta Islame — shtresa e markës mbi Tailwind.
 *
 * Këtu rrinë vetëm gjërat që Tailwind-i nuk i jep: harku i mihrabit, wordmark-u
 * prej metali, motivi i yjeve, karruseli dhe animacionet. Është përkthim i
 * `app/globals.css` të projektit Next.js — rregull për rregull, jo i rikujtuar.
 *
 * ┌─ PSE GJITHÇKA RRI BRENDA `@layer` ───────────────────────────────────────┐
 * │ Tailwind v4 i vendos të gjitha rregullat e veta brenda shtresave         │
 * │ (`theme, base, components, utilities`). Sipas kaskadës, CSS-ja PA shtresë│
 * │ fiton mbi çdo CSS me shtresë — pavarësisht rendit të skedarëve. Po ta    │
 * │ linim `.eyebrow` jashtë, ngjyra e tij do të mbyste çdo `text-gold-light`,│
 * │ `text-gold` e `text-muted` të shkruar krah tij, dhe ari i çelët i        │
 * │ footer-it do të dilte i errët pa asnjë gabim në konsolë.                 │
 * │                                                                          │
 * │ Prandaj ndarja është e njëjta si te globals.css: bazat te `@layer base`, │
 * │ klasat e markës te `@layer components`, dhe utilitetet e Tailwind-it     │
 * │ vijnë pas të dyjave. `@keyframes` dhe blloku i lëvizjes së reduktuar     │
 * │ mbeten jashtë shtresave — ashtu janë edhe te origjinali.                 │
 * └──────────────────────────────────────────────────────────────────────────┘
 *
 * Paleta NUK shkruhet më këtu. Burimi i vetëm i saj është `@theme` te
 * tools/tailwind-input.css, prej nga Tailwind-i i nxjerr `--color-*` te `:root`
 * — pikërisht ato ndryshore që përdoren më poshtë dhe te `stroke="var(…)"` i
 * SVG-ve. Një ngjyrë ndërrohet në një vend të vetëm.
 */

@layer base {
  :root {
    /* Brinja e pllakës së motivit. Prej saj merr masën edhe `background-size`
       edhe zhvendosja te `@keyframes drift`, që të dyja të mos kenë si të
       shkasin nga njëra-tjetra: cikli mbyllet pa qepje vetëm nëse lëvizja është
       saktësisht një pllakë, dhe këtu kjo garantohet nga ndërtimi e jo nga
       kujdesi i atij që e prek kodin herën tjetër. */
    --pattern-tile: 72px;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--color-ground);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background-color: var(--color-pine);
    color: var(--color-ground);
  }

  :focus-visible {
    outline: 2px solid var(--color-gold-deep);
    outline-offset: 3px;
  }
}

@layer components {
  /* ---- Firma e dyqanit: harku i mihrabit ------------------------------- */
  /* E njëjta formë pret çdo foto produkti. `clip-path: url()` lidhet me <svg>
     te fillimi i <body>, te header.php. */
  .arch {
    clip-path: url(#porta-arch);
  }

  /* Alternativë vetëm me CSS për shfletuesit pa `clip-path: url()`. */
  @supports not (clip-path: url("#porta-arch")) {
    .arch {
      border-radius: 50% 50% 0.25rem 0.25rem / 42% 42% 0.25rem 0.25rem;
    }
  }

  /* box-shadow pritet nga clip-path; drop-shadow e ndjek konturin e harkut. */
  .arch-lift {
    transition:
      filter 300ms ease,
      transform 300ms ease;
  }

  .group:hover .arch-lift {
    filter: drop-shadow(0 12px 20px rgb(20 38 31 / 0.18));
    transform: translateY(-2px);
  }

  /* ---- Wordmark: metal i lëmuar ----------------------------------------
     Gradienti kalon nga ari i markës te një theks pothuaj i bardhë dhe kthehet
     — kështu shkronjat lexohen si sipërfaqe e ndriçuar, jo si ngjyrë e sheshtë.
     Këndi 100deg e prish paralelizmin me bazën e shkronjave, që theksi të bjerë
     pjerrtas nëpër to.

     Ngjyra e plotë vihet e para dhe gradienti vetëm brenda `@supports`:
     shfletuesit pa `background-clip: text` do të shfaqnin tekst të padukshëm po
     ta linim `transparent` pa mbrojtje. */
  .wordmark-gold,
  .wordmark-pearl,
  .wordmark-gold-light {
    background-repeat: no-repeat;
  }

  .wordmark-gold {
    color: var(--color-gold);
  }

  .wordmark-pearl {
    color: #fff;
  }

  .wordmark-gold-light {
    color: var(--color-gold-deep);
  }

  @supports (background-clip: text) or (-webkit-background-clip: text) {
    .wordmark-gold,
    .wordmark-pearl,
    .wordmark-gold-light {
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    /* Mbi pishë. Asnjë ndalesë nuk zbret nën arin e markës (#bb9957), që çdo
       pjesë e shkronjës të mbetet të paktën aq e lexueshme sa më parë. */
    .wordmark-gold {
      background-image: linear-gradient(
        100deg,
        #bb9957 0%,
        #d3b478 14%,
        #f2e2b4 30%,
        #fffdf6 40%,
        #f0dca8 50%,
        #cfae6d 66%,
        #bb9957 82%,
        #e2caa0 100%
      );
      filter: drop-shadow(0 1px 6px rgb(187 153 87 / 0.45));
    }

    /* E bardha merr një hije perle: pa të, ana e majtë duket e sheshtë përballë
       arit që shkëlqen ngjitur. */
    .wordmark-pearl {
      background-image: linear-gradient(
        100deg,
        #dfe7de 0%,
        #ffffff 26%,
        #ffffff 44%,
        #ccd8cf 58%,
        #ffffff 78%,
        #eef3ec 100%
      );
    }

    /* Mbi sfond të çelët ari nuk mund të flakërojë: ndalesa më e ndritshme
       (#9d7c3a) mbahet me qëllim te 3.4:1 mbi `--color-ground`, që edhe maja e
       theksit të mos bjerë nën pragun e tekstit të madh. */
    .wordmark-gold-light {
      background-image: linear-gradient(
        100deg,
        #5e4a21 0%,
        #836835 20%,
        #9d7c3a 42%,
        #8e7133 56%,
        #6d5526 74%,
        #8a6c37 100%
      );
    }
  }

  /* ---- Karrusel që e lëviz gishti ----------------------------------------
     Shiriti i kategorive te ballina. Zëvendëson karruselin që lëvizte vetë:
     lëvizjen e nis vizitori, dhe `scroll-snap` e ndal secilën pllakë të
     rreshtuar me skajin e majtë të shiritit — kurrë gjysmë pllake në mes.

     `mandatory` e jo `proximity`: me pllaka të njëtrajtshme çdo ndalesë e
     ndërmjetme është e gabuar, ndaj s'ka pse t'i lihet shfletuesit zgjedhja.

     `-webkit-overflow-scrolling` i duhet ende Safari-t të vjetër në iOS që
     rrëshqitja të vazhdojë me inerci pasi gishti ngrihet; pa të, rreshti ndalon
     në vend dhe gjesti duket i vdekur.

     Shiriti i rrëshqitjes fshihet sepse do të priste bazën e pllakave.
     `overscroll-behavior-x: contain` ndalon gjestin e "kthimit mbrapa" të
     shfletuesit kur vizitori e shtyn rreshtin përtej skajit. */
  .snap-rail {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .snap-rail::-webkit-scrollbar {
    display: none;
  }

  .snap-rail > * {
    scroll-snap-align: start;
  }

  /* Rrëshqitës horizontal pa shirit të dukshëm: shiriti do të priste pjesën e
     poshtme të kartave dhe do të dukej si defekt te një rresht që lëviz vetë.
     `overscroll-behavior-x: contain` ndalon gjestin e "kthimit mbrapa" të
     shfletuesit kur vizitori e shtyn rreshtin përtej skajit. */
  .rail {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .rail::-webkit-scrollbar {
    display: none;
  }

  /* ---- Fusha-grackë për botët ------------------------------------------
     Fshihet nga syri pa u hequr nga forma: `display:none` ose `type="hidden"`
     shumica e botëve i lënë bosh, ndaj gracka do të mbetej e pashkelur. Kështu
     ajo mbetet fushë "e vërtetë" për kë lexon vetëm HTML-në.

     `aria-hidden` te kutia dhe `tabindex="-1"` te fusha e mbajnë jashtë
     lexuesve të ekranit dhe jashtë rrugës së tastierës — një përdorues i
     vërtetë nuk e prek dot as pa dashje. */
  .honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ---- Detaje tipografike ---------------------------------------------- */
  .eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold-deep);
  }

  .rule-gold {
    background-image: linear-gradient(
      to right,
      var(--color-gold) 0 2rem,
      var(--color-rule) 2rem 100%
    );
    height: 1px;
  }

  /* Yll me tetë cepa (khatam) — dy katrorë të mbivendosur, i njëjti motiv që
     përsëritet te thekët dhe kaligrafia e produkteve. Mbahet shumë i zbehtë. */
  .pattern-stars {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='72'%20viewBox='0%200%2072%2072'%3E%3Cg%20fill='none'%20stroke='%231b4d3e'%20stroke-width='1'%3E%3Crect%20x='18'%20y='18'%20width='36'%20height='36'/%3E%3Crect%20x='18'%20y='18'%20width='36'%20height='36'%20transform='rotate(45%2036%2036)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--pattern-tile) var(--pattern-tile);
    opacity: 0.06;
  }

  /* I njëjti motiv, por me vijë ari — për sfonde të errëta (pishë). */
  .pattern-stars-gold {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='72'%20viewBox='0%200%2072%2072'%3E%3Cg%20fill='none'%20stroke='%23bb9957'%20stroke-width='1'%3E%3Crect%20x='18'%20y='18'%20width='36'%20height='36'/%3E%3Crect%20x='18'%20y='18'%20width='36'%20height='36'%20transform='rotate(45%2036%2036)'/%3E%3C/g%3E%3C/svg%3E");
    background-size: var(--pattern-tile) var(--pattern-tile);
    opacity: 0.22;
  }

  /* Tipografi e përbashkët për faqet me tekst: ligjore, rreth nesh. */
  .prose-sq {
    max-width: 44rem;
  }

  .prose-sq h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--color-pine);
    margin-top: 2.75rem;
  }

  .prose-sq h2:first-child {
    margin-top: 0;
  }

  .prose-sq h3 {
    font-weight: 600;
    color: var(--color-ink);
    margin-top: 1.75rem;
  }

  .prose-sq p,
  .prose-sq li {
    margin-top: 0.85rem;
    line-height: 1.75;
    color: var(--color-muted);
  }

  .prose-sq ul {
    margin-top: 0.5rem;
    padding-left: 1.15rem;
    list-style: disc;
  }

  .prose-sq ol {
    margin-top: 0.5rem;
    padding-left: 1.35rem;
    list-style: decimal;
  }

  /* Tabelat e faqeve ligjore mbajnë fjali, jo shifra: dy kolona teksti që në
     telefon nuk zbresin dot nën gjerësinë e ekranit pa u bërë të palexueshme.
     Prandaj secila rri brenda një ene që rrëshqet vetëm horizontalisht —
     faqja nuk lëviz, tabela po. */
  .prose-sq .table-wrap {
    margin-top: 1.25rem;
    overflow-x: auto;
  }

  .prose-sq table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
  }

  .prose-sq th,
  .prose-sq td {
    border-bottom: 1px solid var(--color-rule);
    padding: 0.7rem 1.25rem 0.7rem 0;
    text-align: left;
    vertical-align: top;
    line-height: 1.65;
    color: var(--color-muted);
  }

  .prose-sq th {
    color: var(--color-pine);
    font-weight: 600;
  }

  .prose-sq strong {
    color: var(--color-ink);
    font-weight: 600;
  }

  .prose-sq a {
    color: var(--color-pine);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  /* ---- Zbulim gjatë rrëshqitjes ------------------------------------------
     Fshehja aplikohet VETËM kur JS-i mund të xhirojë dhe përdoruesi nuk ka
     kërkuar lëvizje të reduktuar. Asnjë shfletues pa mbështetje për `scripting`
     nuk e fsheh fare përmbajtjen — ana e sigurt.

     Dy grepa, një sistem i vetëm:
       `[data-reveal]`      — zbulon FËMIJËT me shkallëzim (rrjetat e kartave);
       `[data-reveal-item]` — zbulon VETË elementin (një seksion, një kre).
     Të dy i shënon i njëjti `IntersectionObserver` te ui.js, dhe të dy e mbajnë
     gjendjen te `data-shown` — ndaj një element zbulohet një herë e vetme.

     Lëvizja mbetet 16px dhe vetëm te `transform`/`opacity`: asnjë veti që
     shkakton rilayout, prandaj edhe telefonat e dobët e nxjerrin në 60fps. */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .anim-ready [data-reveal] > *,
    .anim-ready [data-reveal-item] {
      opacity: 0;
      transform: translateY(16px);
    }

    /* Variant pa zhvendosje: për elemente ku `transform` do të prishte diçka
       tjetër — çdo paraardhës i transformuar bëhet enë për `position: fixed`
       dhe e vdes `sticky`-n brenda. */
    .anim-ready [data-reveal-item="fade"] {
      transform: none;
    }

    .anim-ready [data-reveal] > [data-shown],
    .anim-ready [data-reveal-item][data-shown] {
      opacity: 1;
      transform: none;
      transition:
        opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--reveal-delay, 0ms);
    }
  }

  /* ---- Skelet ngarkimi ---------------------------------------------------
     Vetëm `transform` lëviz, kështu që shkëlqimi nuk shkakton rilayout. */
  .skeleton {
    position: relative;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--color-rule) 65%, transparent);
  }

  .skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      transparent,
      rgb(255 255 255 / 0.6),
      transparent
    );
    animation: shimmer 1.6s ease-in-out infinite;
  }

  /* Rrjeta që pret rezultate: e zbehur dhe e pandërveprueshme, pa u zhdukur. */
  .grid-pending {
    opacity: 0.45;
    filter: saturate(0.6);
    pointer-events: none;
    transition:
      opacity 200ms ease,
      filter 200ms ease;
  }

  /* ---- Motivi i yjeve që rrëshqet ngadalë te heroi -----------------------
     Shtresa zgjatet dy pllaka (144px) nga çdo anë: një pllakë e ha lëvizja deri
     në fund të ciklit, tjetra mbetet rezervë, që skaji poshtë-djathtas të mos
     afrohet kurrë me kornizën. `will-change` e ngre shtresën në GPU që nga
     fillimi, jo në mes të animacionit. */
  .pattern-drift {
    animation: drift 90s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
  }

  /* ---- Hyrje faqeje ------------------------------------------------------ */
  /* Koka: vetëm shuarje, asnjë zhvendosje. Është `sticky`, dhe një `transform`
     mbi të (ose mbi çdo paraardhës të saj) do ta shndërronte në element që nuk
     ngjitet më lart. Pak më e gjatë se `page-enter` e trupit, që të dyja të mos
     mbarojnë në të njëjtin çast. */
  .header-enter {
    animation: fade-in 520ms ease-out backwards;
  }

  .page-enter {
    animation: page-enter 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ---- Shporta: puls kur shtohet një artikull --------------------------- */
  .cart-pop {
    animation: cart-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  /* ---- "Oferta speciale": pllaka e veçantë ------------------------------
     Fildish i ngrohtë mbi sfondin e faqes, kornizë e dyfishtë ari dhe një hije
     e butë pishe. Korniza e brendshme vizatohet me `::before` e jo me një
     `box-shadow` të trashë: ashtu mbetet vijë 1px si çdo vijë tjetër e faqes,
     dhe nuk e prek as mbushjen as gjerësinë e rrjetës brenda. */
  .offer-panel {
    padding-block: 2rem;
    border: 1px solid color-mix(in srgb, var(--color-gold) 45%, transparent);
    background-image: linear-gradient(
      160deg,
      #faf8f1 0%,
      #f6f3e9 55%,
      #f1eee1 100%
    );
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--color-ink) 6%, transparent),
      0 22px 48px -34px color-mix(in srgb, var(--color-pine) 55%, transparent);
  }

  .offer-panel::before {
    content: "";
    position: absolute;
    inset: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-gold) 26%, transparent);
    pointer-events: none;
  }

  @media (min-width: 40rem) {
    .offer-panel {
      padding-block: 2.75rem;
    }

    .offer-panel::before {
      inset: 0.75rem;
    }
  }

  /* Vija e seksionit të veçantë: i njëjti mendim si `.rule-gold`, vetëm me një
     krah ari më të gjatë që shuhet gradualisht. */
  .rule-gold-rich {
    height: 1px;
    background-image: linear-gradient(
      to right,
      var(--color-gold) 0 5rem,
      color-mix(in srgb, var(--color-gold) 40%, transparent) 5rem 15rem,
      color-mix(in srgb, var(--color-rule) 75%, transparent) 15rem 100%
    );
  }

  /* ---- Fletë filtri në telefon ------------------------------------------ */
  .sheet-backdrop {
    animation: fade-in 220ms ease-out;
  }

  .sheet-panel {
    animation: sheet-up 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ---- Butoni pluskues i ofertës së personalizimit ---------------------- */
  /* Rri mbi "kthehu lart" dhe e ndjek atë: i njëjti fund (1rem, 1.5rem nga sm)
     plus lartësia e butonit (2.75rem) plus hapësira. Të shkruara si calc nga
     po ato masa, që lëvizja e njërit të mos e lërë tjetrin në ajër. */
  .gift-fab {
    bottom: calc(1rem + 2.75rem + 0.75rem);
  }

  @media (min-width: 40rem) {
    .gift-fab {
      bottom: calc(1.5rem + 2.75rem + 0.75rem);
    }
  }

  /* Shenja e njoftimit: jashtë rrethit sa gjysma e vetes, pa e zgjeruar
     butonin — prandaj pozicionim absolut e jo një kuti në rrjedhë. */
  .gift-fab__badge {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
  }

  /* Një puls i vetëm kur butoni mbërrin. 1.06 e jo më shumë: sinjal, jo
     tërheqje vëmendjeje me forcë. */
  .gift-pulse {
    animation: gift-pulse 620ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Hyrje e butë: përdoret me --enter-delay për shkallëzim mes kartave. */
  .enter {
    animation: enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: var(--enter-delay, 0ms);
  }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(
      calc(-1 * var(--pattern-tile)),
      calc(-1 * var(--pattern-tile)),
      0
    );
  }
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cart-pop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes gift-pulse {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: none;
  }
}

/* `animation-duration: 0.01ms` vetëm nuk mjafton: një animacion me `infinite`
   (drift, shimmer) nuk ndalet — rifillon rreth 100 000 herë në sekondë
   dhe kthehet në dridhje të dukshme, pikërisht e kundërta e asaj që kërkon
   përdoruesi. `animation-iteration-count: 1` e le të ecë një herë dhe të
   pushojë te korniza e fundit. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}