/* 3DPrintKS — shtresa e markës mbi Tailwind.
 *
 * Këtu rrinë vetëm gjërat që Tailwind-i nuk i jep: korniza e fotove, motivi i
 * rrjetës, 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-accent`,│
 * │ `text-accent` 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-surface);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
  }

  ::selection {
    background-color: var(--color-brand);
    color: var(--color-surface);
  }

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

@layer components {
  /* ---- Korniza e fotove -------------------------------------------------
     Klasa mban emrin `.arch` sepse e përdorin kartat, galeria dhe kompozimet;
     forma është drejtkëndësh me qoshe 4px — e njëjta si `--radius-*` te
     `@theme`. `clip-path` e jo `border-radius`, që edhe enët me `p-px` (korniza
     e hollë) të priten njësoj. */
  .arch {
    clip-path: inset(0 round 4px);
  }

  /* Stili tech: pa hije të buta. Hover-i e ngre elementin 2px dhe ia bën
     bordin ari — sinjal i qartë, si një buton fizik që zgjidhet. */
  .arch-lift,
  .lift {
    transition:
      transform 200ms ease,
      border-color 200ms ease,
      background-color 200ms ease;
  }

  .group:hover .arch-lift,
  .lift:hover,
  .group:hover > .lift-target {
    transform: translateY(-2px);
  }

  .lift:hover,
  .group:hover > .lift-target {
    border-color: var(--color-accent);
  }

  /* Titujt: Space Grotesk 700. Në `components` e jo `base`, që një
     `font-medium` i shkruar krah klasës ta mbishkruajë kur duhet. */
  .font-display {
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  /* ---- 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-accent-deep);
  }

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

  /* Rrjetë e hollë si pllaka e printerit 3D. Forma vjen nga `mask-image`, kurse
     ngjyra nga `background-color` — kështu motivi lexon paletën nga `@theme` e
     nuk ka asnjë ngjyrë të shkruar brenda SVG-së. */
  .pattern-stars,
  .pattern-stars-accent {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=http://www.w3.org/2000/svg%20width=72%20height=72%20viewBox=0%200%2072%2072%3E%3Cpath%20d=M0%20.5H72M.5%200V72%20fill=none%20stroke=black/%3E%3Ccircle%20cx=.5%20cy=.5%20r=2/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=http://www.w3.org/2000/svg%20width=72%20height=72%20viewBox=0%200%2072%2072%3E%3Cpath%20d=M0%20.5H72M.5%200V72%20fill=none%20stroke=black/%3E%3Ccircle%20cx=.5%20cy=.5%20r=2/%3E%3C/svg%3E");
    -webkit-mask-size: var(--pattern-tile) var(--pattern-tile);
    mask-size: var(--pattern-tile) var(--pattern-tile);
  }

  .pattern-stars {
    background-color: var(--color-brand);
    opacity: 0.06;
  }

  /* I njëjti motiv me vijë ari — për sfonde të errëta (blu). I lehtë: rrjeta
     duhet të ndihet si pllakë printeri, jo të lexohet si tabelë. */
  .pattern-stars-accent {
    background-color: var(--color-accent);
    opacity: 0.1;
  }

  /* 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-brand);
    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-brand);
    font-weight: 600;
  }

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

  .prose-sq a {
    color: var(--color-brand);
    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ë ------------------------------
     Një nuancë e lehtë ari mbi sfondin e faqes, kornizë e dyfishtë ari dhe një
     hije e butë blu. 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-accent) 45%, transparent);
    background-image: linear-gradient(
      160deg,
      #fff 0%,
      color-mix(in srgb, var(--color-accent) 6%, #fff) 55%,
      color-mix(in srgb, var(--color-accent) 11%, #fff) 100%
    );
  }

  .offer-panel::before {
    content: "";
    position: absolute;
    inset: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 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-accent`, vetëm me një
     krah ari më të gjatë që shuhet gradualisht. */
  .rule-accent-rich {
    height: 1px;
    background-image: linear-gradient(
      to right,
      var(--color-accent) 0 5rem,
      color-mix(in srgb, var(--color-accent) 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;
  }
}