/* ==========================================================
   DESTRA HILLS — движење, glass и звук (index, landing, katalog)
   Се вчитува по base.css.
   ========================================================== */

/* ---------- Lenis мазно скролање ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- лента за напредок при скролање ---------- */
.sprog { position: fixed; inset: 0 0 auto; height: 2px; z-index: 130; pointer-events: none; }
.sprog i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-2) 60%, var(--sunset));
  transform-origin: left;
  transform: scaleX(var(--sp, 0));
  box-shadow: 0 0 12px rgba(217, 167, 90, .55);
}

/* ---------- вовед со лого ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: var(--bg);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease-io), visibility 0s linear 1.2s;
}
.loader .logo { gap: 14px; }
.loader .logo-word { font-size: clamp(28px, 4vw, 46px); animation: intro-word 1.4s var(--ease) both; }
.loader .logo-sub { font-size: clamp(9px, .9vw, 12px); animation: intro-fade 1s .5s var(--ease) both; }
.loader-line {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 140px;
  height: 1px;
  margin-left: -70px;
  background: var(--line-2);
  overflow: hidden;
}
.loader-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  animation: intro-line 1.3s var(--ease-io) both;
}
html.is-loaded .loader { clip-path: inset(0 0 100% 0); visibility: hidden; }
html:not(.js) .loader { display: none; }
@keyframes intro-word { from { opacity: 0; letter-spacing: .9em; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }
@keyframes intro-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes intro-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.is-loading .hero, .is-loading .hero * { animation-play-state: paused !important; }

/* ---------- наслови што се креваат збор по збор ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .1em .14em 0; margin: 0 -.1em -.14em 0; }
.wi {
  display: inline-block;
  transform: translate3d(0, 112%, 0) rotate(3deg);
  transform-origin: left bottom;
  transition: transform 1.25s var(--ease) calc(var(--wi, 0) * 70ms + var(--d, 0s));
}
.js [data-reveal="split"] { opacity: 1; transform: none; }
.is-in .wi, html.is-loaded .split-now .wi { transform: none; }
.split-now { animation: none !important; opacity: 1 !important; }
.split-now .wi { transition-delay: calc(var(--wi, 0) * 90ms + .25s); }

/* ---------- копчиња: сјај и магнетно движење ---------- */
.btn { transition: transform .5s var(--ease), box-shadow .5s var(--ease), translate .5s var(--ease), background .4s, border-color .4s, color .4s; }
.btn:hover {
  box-shadow: 0 0 0 1px rgba(242, 207, 142, .55), 0 16px 46px -12px rgba(217, 167, 90, .7), 0 0 70px -24px rgba(232, 121, 58, .55);
}
.btn-ghost:hover {
  background: rgba(217, 167, 90, .07);
  box-shadow: inset 0 0 0 1px var(--gold), 0 0 36px -10px rgba(217, 167, 90, .6);
}
.btn:active { transform: scale(.98); }
.btn.magnet { transition: transform .5s var(--ease), box-shadow .5s var(--ease), translate .18s linear, background .4s, border-color .4s, color .4s; }

/* ---------- tilt на картички ---------- */
.tilting {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate3d(0, -6px, 0) !important;
  transition: transform .18s linear, box-shadow .5s var(--ease), border-color .5s !important;
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(217, 167, 90, .3);
  border-color: rgba(217, 167, 90, .4) !important;
  position: relative;
  z-index: 2;
}

/* ---------- паралакса на слики ---------- */
[data-par] img { scale: 1.12; will-change: translate; }

/* ---------- статус-ознаки ---------- */
.status {
  padding: 6px 12px 6px 10px;
  border-radius: 40px;
  background: color-mix(in srgb, currentColor 11%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  line-height: 1.2;
}
.status::before { box-shadow: 0 0 10px currentColor; }

/* ---------- glass ---------- */
.glass,
.sel-panel,
.filters,
.bld-tip,
.form-card,
.lp-form-card,
.dia-card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
}

/* ---------- модал: зголемување + замаглена позадина ---------- */
.modal-bg { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: opacity .5s var(--ease), backdrop-filter .7s var(--ease), -webkit-backdrop-filter .7s var(--ease); }
.modal.open .modal-bg { backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
.modal-card {
  background: linear-gradient(180deg, rgba(24, 24, 27, .9), rgba(13, 13, 15, .94));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: translateY(24px) scale(.93);
  transition: opacity .45s var(--ease), transform .75s cubic-bezier(.16, 1, .3, 1);
}
.modal.open .modal-card { transform: none; }

/* ---------- бегачка лента ---------- */
.marquee { overflow: hidden; padding: clamp(18px, 3vw, 30px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
.mq-track { display: flex; width: max-content; animation: mq 55s linear infinite; }
.mq-track span {
  display: flex;
  align-items: center;
  gap: .8em;
  padding-right: .8em;
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}
.mq-track span:nth-child(even) { color: transparent; -webkit-text-stroke: 1px rgba(242, 207, 142, .65); }
.mq-track span::after { content: "✦"; font-style: normal; font-size: .32em; color: var(--gold); -webkit-text-stroke: 0; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- копче за звук ---------- */
.snd {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 15px 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 40px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(10, 10, 11, .3);
  transition: color .3s, border-color .3s, background .3s, box-shadow .4s;
}
.snd:hover { border-color: var(--gold); color: var(--text); }
.snd-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.snd-bars i { width: 2px; height: 3px; border-radius: 1px; background: currentColor; transition: height .3s; }
.snd.on { color: var(--gold-2); border-color: rgba(217, 167, 90, .55); box-shadow: 0 0 24px -8px rgba(217, 167, 90, .6); }
.snd.on .snd-bars i { animation: eq .9s ease-in-out infinite; }
.snd.on .snd-bars i:nth-child(2) { animation-delay: -.3s; }
.snd.on .snd-bars i:nth-child(3) { animation-delay: -.6s; }
.snd.on .snd-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }

/* ---------- 3D книга (каталог) ---------- */
.book3d {
  position: relative;
  display: block;
  width: min(340px, 78%);
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  perspective: 1600px;
  transform-style: preserve-3d;
}
.book3d .b-pages {
  position: absolute;
  inset: 1.5% 0 1.5% 3%;
  background: repeating-linear-gradient(90deg, #e9e3d6 0 1px, #d6cfbf 1px 2px);
  border-radius: 0 3px 3px 0;
  transform: translateZ(-14px);
  box-shadow: 30px 40px 60px -20px rgba(0, 0, 0, .8);
}
.book3d .b-cover {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: rotateY(-18deg);
  transition: transform 1.1s var(--ease);
  border: 1px solid rgba(217, 167, 90, .45);
  overflow: hidden;
  background: #050506;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9);
}
.book3d:hover .b-cover, .book3d:focus-visible .b-cover { transform: rotateY(-34deg); }
.b-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.b-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 5, 6, .8), rgba(5, 5, 6, .15) 40%, rgba(5, 5, 6, .9)); }
.b-cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent); }
.b-cover > div {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12% 8% 9%;
  text-align: center;
}
.b-cover .logo-word { font-size: 15px; }
.b-cover p { margin: auto 0 0; font-family: var(--ff-serif); font-weight: 300; font-size: 34px; line-height: 1; color: var(--text); }
.b-cover p em { color: var(--gold-2); }
.b-cover small { margin-top: 10px; font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-2); }

/* ---------- достапност ---------- */
@media (hover: none) {
  .tilting { transform: none !important; }
}
@media (max-width: 640px) {
  .snd { width: 40px; padding: 0; justify-content: center; }
  .snd-t { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wi { transform: none !important; }
  .mq-track { animation: none; }
  .loader { display: none; }
  [data-par] img { scale: 1; }
}

/* ?static — снимки од екран: без вовед и без транзиции */
.static .loader { display: none !important; }
.static *, .static *::before, .static *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }