/* Tekstura e sfondit — vija arkitekturore.
 *
 * Një mekanizëm i vetëm: `.rl-tex` bëhet konteineri, `.rl-tex::before` pikturon
 * motivin PAS përmbajtjes (`z-index:-1`), jashtë rrjedhës së faqes. Prandaj
 * asnjë tekst nuk zhvendoset kur motivi ngarkohet — CLS-ja s'e ndien fare.
 *
 * Motivi zbehet anash me `mask-image`, JO me një shtresë ngjyre sipër. Ky ishte
 * gabimi te kryefaqja: `pattern-houses.svg` ishte aty me opacity .10 dhe pastaj
 * mbi të rrinte një gradient krem 70–95% që e fshinte.
 */

.rl-tex {
  position: relative;
  isolation: isolate;
}

.rl-tex::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--rl-tex-url);
  background-repeat: repeat;
  background-size: var(--rl-tex-size, 180px 180px);
  opacity: var(--rl-tex-op, .08);
  /* Zbehje në të katër anët që motivi të mos pritet me thikë te skaji. */
  -webkit-mask-image: var(--rl-tex-mask, linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent));
          mask-image: var(--rl-tex-mask, linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent));
}

/* ── Motivet ──────────────────────────────────────────────────────── */

/* Plan kati — faqet e formave (Me gjej shtëpi, Kontakt, Reklamo, Vlerësim). */
.rl-tex--plan {
  --rl-tex-url: url("/static/images/tex/plan.svg");
  --rl-tex-size: 180px 180px;
  --rl-tex-op: .045;
}
/* Mbi bezhe motivi duhet më i fortë se mbi të bardhë, ndryshe zhduket. */
.rl-tex--on-cream { --rl-tex-op: .10; }

/* Rrëshqitje e ngadaltë me scroll-in. `--rl-scroll` shkruhet nga motion.js
 * (vlerë në px, negative). 0.12 = rreth 12% e shpejtësisë së faqes. */
.rl-tex--drift::before {
  background-position: 0 calc(var(--rl-scroll, 0px) * .12);
  will-change: background-position;
}

/* ── Banda e kokës ────────────────────────────────────────────────────
 * Faqet e brendshme nisnin me <h1> mbi të bardhë të pastër. Banda u jep
 * një fillim: gradient krem→bardhë, motivi brenda, dhe një vijë floku poshtë.
 */
.rl-band {
  position: relative;
  isolation: isolate;
  background-image: linear-gradient(180deg, #faf5e6 0%, #fdfaf3 55%, #ffffff 100%);
  border-bottom: 1px solid rgb(226 232 240 / .9);
}

/* Konteiner i thjeshtë izolimi për seksionet që mbajnë një plan të madh. */
.rl-iso { position: relative; isolation: isolate; }

/* Rrezja e artë nën bandë: e hollë, zbehet anash, thjesht ndan seksionet. */
.rl-band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, rgb(201 162 39 / .55), transparent);
  pointer-events: none;
}


/* ══ Plani i madh: element grafik, jo tapet ══════════════════════════
 * Pllaka e vogël e përsëritur dukej si "katrorë të hollë" dhe s'lexohej
 * si dizajn. Këtu i njëjti motiv vihet në përmasa arkitekturore: një
 * plan i vetëm, i madh, që del jashtë kuadrit dhe VIZATOHET vetë.
 */
.rl-blueprint {
  position: absolute;
  top: 50%;
  width: 680px;
  height: auto;
  opacity: var(--rl-bp-op, .22);
  pointer-events: none;
  z-index: -1;
  transform: translateY(-50%);
}
/* Fasadat janë pamje nga rruga, pra i takojnë FUNDIT të seksionit dhe gjerësia
 * e plotë — jo ana, si plani apo harta. Si element anësor maska e priste
 * pikërisht mbi ndërtesat dhe mbetej vetëm një cep. */
.rl-blueprint.rl-blueprint--houses {
  top: auto;
  bottom: -4%;
  left: 50%;
  right: auto;
  width: min(1500px, 132%);
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 52%);
          mask-image: linear-gradient(to bottom, transparent 6%, #000 52%);
}

.rl-blueprint--right {
  right: -150px;
  /* Vizatimi tretet nga ana ku bie teksti, që të mos e ngarkojë leximin
     dhe që prerja te skaji të duket e qëllimshme, jo e rastësishme. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
          mask-image: linear-gradient(to right, transparent 0%, #000 40%);
}
.rl-blueprint--left {
  left: -190px;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, #000 40%);
          mask-image: linear-gradient(to left, transparent 0%, #000 40%);
}

@media (min-width: 1024px) {
  .rl-blueprint { width: 780px; }
  .rl-blueprint--right { right: -90px; }
}
/* Në telefon plani rri pas tekstit, më i vogël dhe më i zbehtë. */
@media (max-width: 767px) {
  .rl-blueprint {
    width: 560px;
    opacity: calc(var(--rl-bp-op, .22) * .62);
  }
  .rl-blueprint--right { right: -220px; }
  .rl-blueprint--left  { left: -240px; }
}

/* Vizatimi. `--d` vjen nga shabllon element-për-element. Dasharray-ja
 * është e madhe me qëllim: mbulon edhe shtegun më të gjatë këtu, pa
 * pasur nevojë t'i matim gjatësitë një nga një. */
.rl-blueprint [style*="--d"] {
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  animation: rl-bp-draw 1.1s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rl-bp-draw { to { stroke-dashoffset: 0; } }

/* Shkëlqim i butë jeshil poshtë-majtas: i jep brezit thellësi, që të mos
 * jetë thjesht një drejtkëndësh krem. */
.rl-glow::before {
  content: "";
  position: absolute;
  z-index: -2;
  left: -12%;
  bottom: -60%;
  width: 70%;
  height: 170%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(16 185 129 / .16), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .rl-blueprint [style*="--d"] {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}


/* ══ Skena: sfond me shtresa që lëvizin me mausin ═══════════════════════
 * Vetëm vija të holla nuk binin në sy — sfondi dukej i ngrirë. Këtu janë
 * tri shtresa me thellësi të ndryshme: ngjyra e gjallë poshtë, vizatimi
 * mbi të, përmbajtja lart. `--rl-px/--rl-py` (-1..1) i shkruan motion.js
 * nga pozicioni i kursorit; çdo shtresë e shumëzon me thellësinë e vet,
 * pra lëvizin me shpejtësi të ndryshme dhe sfondi merr thellësi të vërtetë.
 */
.rl-scene { position: relative; isolation: isolate; }

.rl-layer {
  position: absolute;
  inset: -14%;
  z-index: -1;
  pointer-events: none;
  transform: translate3d(
    calc(var(--rl-px, 0) * var(--rl-depth, 10px)),
    calc(var(--rl-py, 0) * var(--rl-depth, 10px)), 0);
  /* Kalimi i gjatë i jep ndjesinë që sfondi "ndjek" dorën, jo që kërcen
     bashkë me të. Pa të, lëvizja duket e ashpër dhe e lirë. */
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

/* Shtresa e ngjyrës — kjo është ajo që bie në sy.
 *
 * Gradientët janë shkruar në forcën e tyre MAKSIMALE dhe pastaj zbuten nga
 * `--rl-aurora-strength`. Pra forca e ngjyrës në gjithë faqen rregullohet
 * nga NJË numër i vetëm, jo nga tetë vlera alfa të shpërndara. 0 = pa
 * ngjyrë fare, 1 = maksimumi.
 *
 * 9 shtator 2026: .55 → .78 me kërkesë të Lordit ("rrite pak").
 */
:root { --rl-aurora-strength: .78; }

.rl-aurora {
  --rl-depth: 26px;
  opacity: var(--rl-aurora-strength, .78);
  background-image:
    radial-gradient(36rem 27rem at 16% 24%, rgb(16 185 129 / .54), transparent 68%),
    radial-gradient(30rem 24rem at 82% 10%, rgb(201 162 39 / .46), transparent 66%),
    radial-gradient(40rem 30rem at 64% 92%, rgb(110 231 183 / .58), transparent 70%),
    radial-gradient(26rem 22rem at 40% 60%, rgb(4 120 87 / .24), transparent 72%);
  animation: rl-aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes rl-aurora-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 3% -2%, -4% 3%, 2% 3%, -3% -2%; }
}

/* Shtresa e vizatimit — lëviz më pak, pra duket më "larg" nga syri. */
.rl-layer--plan { --rl-depth: 11px; }

@media (prefers-reduced-motion: reduce) {
  .rl-layer { transform: none !important; transition: none !important; }
  .rl-aurora { animation: none !important; }
}


/* Faqe të gjata (katalogu, zonat, blogu): ngjyra rri VETËM lart, ndryshe
 * gradientët shtriqen mbi 3000px dhe humbin çdo formë.
 *
 * Zhvendosja lart duhet në PIKSELA, jo në përqindje. Te `.rl-layer` është
 * `-14%`, dhe përqindja vertikale matet mbi lartësinë e seksionit — te faqja
 * e blogut, 5261px e lartë, kjo e çonte shtresën 736px lart dhe e mbaronte
 * te −33px: krejt jashtë pamjes. Sfondi zhdukej saktësisht te faqet e gjata,
 * pa asnjë gabim, pa asnjë shenjë. */
.rl-scene--top > .rl-layer {
  inset: -80px -14% auto -14%;
  height: 720px;
}

/* Mbi sfond të errët ngjyrat duhen si dritë, jo si bojë. */
.rl-aurora--dark {
  background-image:
    radial-gradient(34rem 24rem at 14% 18%, rgb(16 185 129 / .58), transparent 66%),
    radial-gradient(28rem 20rem at 86% 22%, rgb(201 162 39 / .42), transparent 64%),
    radial-gradient(30rem 22rem at 56% 96%, rgb(110 231 183 / .36), transparent 68%);
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rl-tex--drift::before {
    background-position: 0 0 !important;
    will-change: auto;
  }
}