/*!
 * base.css — основата на всеки сайт от /ultimate (NikolovStudio).
 * НЕ съдържа визията на сайта. Тя живее в site.css (токени + секции), уникална за всеки клиент.
 * Тук: reset, слой за живия фон, утилитита за невидими шевове (Том V), форми (Том IV),
 * поддръжка на анимациите (Том III), иконите (емотикони + линейни), достъпност и reduced-motion.
 */

/* ============ 1. Токени по подразбиране (site.css ги презаписва) ============ */
:root {
  /* фон (чете се от bg-core.js) */
  --bg-base: #121014; --bg-c1: #3a2f45; --bg-c2: #697a4b; --bg-c3: #8cd99b; --bg-accent: #4bf06c;
  /* интерфейс */
  --c-bg: var(--bg-base); --c-surface: #1c1a20; --c-surface-2: #26232b;
  --c-text: #e8f3eb; --c-muted: #a6b9aa; --c-line: rgb(255 255 255 / .12);
  --c-primary: #4bf06c; --c-on-primary: #061a0c; --c-accent: #8cd99b;
  /* контакт бутони (къщният стандарт: зелено = обаждане, лилаво = Viber) */
  /* контактните бутони — еднакви на всеки сайт (references/house-style.md §2), не се пребоядисват */
  --c-call-a: #3BE07A; --c-call: #25D366; --c-call-2: #16A34A; --c-on-call: #04210F;
  --c-viber: #7360F2; --c-viber-2: #5A48D2; --c-on-viber: #FFFFFF;
  /* шрифтове */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* флуиден типографски мащаб */
  --fs-xs: clamp(.78rem, .76rem + .1vw, .84rem);
  --fs-sm: clamp(.88rem, .85rem + .15vw, .96rem);
  --fs-base: clamp(1rem, .96rem + .2vw, 1.1rem);
  --fs-lg: clamp(1.15rem, 1.06rem + .45vw, 1.4rem);
  --fs-xl: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 2vw, 3rem);
  --fs-3xl: clamp(2.4rem, 1.7rem + 3.5vw, 4.6rem);
  --fs-hero: clamp(2.8rem, 1.6rem + 6vw, 7rem);
  /* 8-точков ритъм */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;
  --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 11rem;
  /* Том IV: 2–3 радиуса за целия сайт */
  --r-s: 8px; --r-m: 18px; --r-l: 32px; --r-full: 999px;
  /* сенки */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .08), 0 4px 14px rgb(0 0 0 / .08);
  --shadow-2: 0 10px 40px -12px rgb(0 0 0 / .35);
  /* движение (Том III, раздел 07) */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 180ms; --t-med: 240ms; --t-slow: 650ms;
  /* контейнер */
  --container: 1240px; --gutter: clamp(16px, 4vw, 40px);
  /* живият фон */
  --bg-veil: 0;          /* 0–.8: успокояващ воал над фона (за четимост) */
  --grain: .05;          /* сила на зърнистостта (Том V: обща зърнистост) */
  color-scheme: dark light;
}

/* ============ 2. Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg-base); }
body {
  min-height: 100dvh; background: transparent; /* ВАЖНО: body без фон, иначе покрива живия фон */
  color: var(--c-text); font-family: var(--font-body); font-size: var(--fs-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration-thickness: .06em; text-underline-offset: .18em; }
p, li, figcaption { text-wrap: pretty; overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; font-weight: 600; }
:target { scroll-margin-top: 6rem; }
[hidden] { display: none !important; }

/* ============ 3. Живият фон (един fixed слой = обща повърхност, няма шевове) ============ */
.u-bg {
  position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: -2;
  display: block; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--ease-out);
}
.u-bg.is-ready { opacity: 1; }
.u-bg-veil { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--bg-base); opacity: var(--bg-veil); }
/* зърнистост върху всичко — разбива ивиците в градиентите и прави цвета „органичен“ */
.u-grain::after {
  content: ""; position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ============ 4. Достъпност ============ */
.u-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u-skip { position: absolute; left: 1rem; top: -4rem; z-index: 9999; padding: .75rem 1rem; border-radius: var(--r-s); background: var(--c-primary); color: var(--c-on-primary); transition: top var(--t-med) var(--ease-out); }
.u-skip:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

/* ============ 5. Помощни за подредба (минимални — композицията е в site.css) ============ */
.u-container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.u-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }
.u-stack > * + * { margin-top: var(--stack, 1rem); }

/* ============ 6. НЕВИДИМИЯТ ШЕВ (Том V) ============ */
/* Правило: върху живия фон по подразбиране ползвай FEATHER (маска) — тя разкрива фона, не гадае цвета му.
   SCRIM (цветна завеса) само когато съседът е плътен цвят (--seam-to = точно неговият цвят). */

/* 6a. Избледняваща маска (feathered mask) — снимка/панел става прозрачен към ръба */
.seam-feather-b { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--seam-h, 28%)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--seam-h, 28%)), transparent); }
.seam-feather-t { -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--seam-h, 22%)), transparent); mask-image: linear-gradient(to top, #000 calc(100% - var(--seam-h, 22%)), transparent); }
/* двустранна завеса (fade-in / fade-out): горе по-къс преход от долу */
.seam-feather-y {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--seam-top, 18%), #000 calc(100% - var(--seam-h, 28%)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--seam-top, 18%), #000 calc(100% - var(--seam-h, 28%)), transparent);
}
.seam-feather-x {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--seam-x, 14%), #000 calc(100% - var(--seam-x, 14%)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--seam-x, 14%), #000 calc(100% - var(--seam-x, 14%)), transparent);
}
.seam-feather-all {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 78%, transparent), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
.seam-feather-radial { -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 65% at 50% 45%, #000 55%, transparent 100%); }

/* 6b. Градиентна завеса (scrim) към ПЛЪТЕН цвят на съседа. Задай --seam-to точно. „Easing“ стъпки срещу ивици. */
.seam-scrim-b, .seam-scrim-t, .seam-scrim-y { position: relative; isolation: isolate; }
.seam-scrim-b::after, .seam-scrim-y::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: var(--seam-h, 32%); pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, transparent 0%,
    color-mix(in srgb, var(--seam-to, var(--bg-base)) 8%, transparent) 19%, color-mix(in srgb, var(--seam-to, var(--bg-base)) 22%, transparent) 34%,
    color-mix(in srgb, var(--seam-to, var(--bg-base)) 40%, transparent) 47%, color-mix(in srgb, var(--seam-to, var(--bg-base)) 60%, transparent) 59%,
    color-mix(in srgb, var(--seam-to, var(--bg-base)) 78%, transparent) 71%, color-mix(in srgb, var(--seam-to, var(--bg-base)) 92%, transparent) 84%,
    var(--seam-to, var(--bg-base)) 100%);
}
.seam-scrim-t::before, .seam-scrim-y::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--seam-top, 20%); pointer-events: none; z-index: 2;
  background: linear-gradient(to top, transparent 0%,
    color-mix(in srgb, var(--seam-from, var(--seam-to, var(--bg-base))) 22%, transparent) 34%,
    color-mix(in srgb, var(--seam-from, var(--seam-to, var(--bg-base))) 60%, transparent) 59%,
    color-mix(in srgb, var(--seam-from, var(--seam-to, var(--bg-base))) 92%, transparent) 84%,
    var(--seam-from, var(--seam-to, var(--bg-base))) 100%);
}

/* 6c. Светлина */
.seam-inset { box-shadow: inset 0 0 var(--inset-blur, 120px) var(--inset-spread, 20px) var(--seam-to, rgb(0 0 0 / .55)); }
.seam-vignette { position: relative; isolation: isolate; }
.seam-vignette::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: radial-gradient(ellipse at center, transparent 55%, color-mix(in srgb, var(--seam-to, #000) 55%, transparent) 100%); }
.seam-overhang { position: relative; z-index: 2; box-shadow: 0 60px 90px -50px rgb(0 0 0 / .35); }
.seam-glow { position: relative; }
.seam-glow::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--c-primary), transparent); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--c-primary) 60%, transparent); }
/* размазан ръб: задай --img: url(...) — размазано копие на снимката се разлива навън */
.seam-blur-edge { position: relative; isolation: isolate; }
.seam-blur-edge::before { content: ""; position: absolute; inset: 10% -6% -18% -6%; z-index: -1; pointer-events: none;
  background: var(--img) center / cover no-repeat; filter: blur(60px) saturate(1.2); opacity: .55; transform: translateZ(0); }

/* 6d. Припокриване */
.seam-overlap { margin-top: calc(var(--overlap, 6rem) * -1); position: relative; z-index: 3; }
.seam-cross { position: relative; z-index: 3; margin-block: calc(var(--cross, 4rem) * -1); } /* елемент, стъпил на шева */

/* 6e. Полупрозрачен панел на цяла ширина с разтворени краища (секция с „собствен тон“ без ръб) */
.u-tint { position: relative; isolation: isolate; }
.u-tint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--tint, var(--c-surface)) var(--tint-a, 72%), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--tint-fade, 16%), #000 calc(100% - var(--tint-fade, 16%)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--tint-fade, 16%), #000 calc(100% - var(--tint-fade, 16%)), transparent);
  -webkit-backdrop-filter: blur(var(--tint-blur, 0px)); backdrop-filter: blur(var(--tint-blur, 0px));
}

/* 6f. Оформени ръбове на панел (вълна, дъга, диагонал, разкъсан) — чрез маска, фонът прозира навън */
[class*="edge-"] { --edge-h: clamp(36px, 7vw, 110px); }
.edge-wave-b, .edge-curve-b, .edge-slant-b, .edge-torn-b {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-svg) bottom / 100% var(--edge-h) no-repeat;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-svg) bottom / 100% var(--edge-h) no-repeat;
}
.edge-wave-t, .edge-curve-t, .edge-slant-t, .edge-torn-t {
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-svg-t) top / 100% var(--edge-h) no-repeat;
  mask: linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--edge-h) + 1px) no-repeat, var(--edge-svg-t) top / 100% var(--edge-h) no-repeat;
}
.edge-wave-b { --edge-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V64C1250 118 1080 26 880 52C680 78 560 116 360 90C220 72 110 40 0 70Z'/%3E%3C/svg%3E"); }
.edge-wave-t { --edge-svg-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120H1440V56C1250 2 1080 94 880 68C680 42 560 4 360 30C220 48 110 80 0 50Z'/%3E%3C/svg%3E"); }
.edge-curve-b { --edge-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V20Q720 150 0 20Z'/%3E%3C/svg%3E"); }
.edge-curve-t { --edge-svg-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120H1440V100Q720 -30 0 100Z'/%3E%3C/svg%3E"); }
.edge-slant-b { --edge-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V0L0 120Z'/%3E%3C/svg%3E"); }
.edge-slant-t { --edge-svg-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120H1440V0L0 120Z'/%3E%3C/svg%3E"); }
.edge-torn-b { --edge-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V58L1404 74L1368 52L1322 80L1290 60L1240 88L1196 66L1150 90L1108 62L1060 84L1016 58L972 86L930 64L884 92L840 70L796 88L752 60L704 82L662 56L616 84L570 62L528 90L482 66L436 86L392 60L350 84L304 58L258 80L214 62L170 88L126 64L82 82L40 60L0 76Z'/%3E%3C/svg%3E"); }
.edge-torn-t { --edge-svg-t: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120H1440V62L1404 46L1368 68L1322 40L1290 60L1240 32L1196 54L1150 30L1108 58L1060 36L1016 62L972 34L930 56L884 28L840 50L796 32L752 60L704 38L662 64L616 36L570 58L528 30L482 54L436 34L392 60L350 36L304 62L258 40L214 58L170 32L126 56L82 38L40 60L0 44Z'/%3E%3C/svg%3E"); }

/* ============ 7. ФОРМИ (Том IV) ============ */
/* 7a. Снимка във форма: винаги cover + фокусна точка + резервирано съотношение */
.media { position: relative; overflow: hidden; aspect-ratio: var(--ratio, 4 / 5); }
.media > img, .media > video, .media > picture, .media > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.media--portrait { --focus: 50% 28%; } /* Том IV: за портрет фокусът е горната трета */

/* 7b. Закръгляне */
.shape-circle { aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.shape-pill { border-radius: var(--r-full); }
.shape-arch { border-radius: 999px 999px var(--arch-foot, 0) var(--arch-foot, 0); overflow: hidden; } /* точна арка при всяко портретно съотношение */
.shape-arch-b { border-radius: var(--arch-foot, 0) var(--arch-foot, 0) 999px 999px; overflow: hidden; }
.shape-leaf { border-radius: 0 50%; overflow: hidden; }
.shape-leaf-r { border-radius: 50% 0; overflow: hidden; }
.shape-blob { border-radius: 62% 38% 55% 45% / 45% 52% 48% 55%; overflow: hidden; }
.shape-squircle {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 0C8 0 0 8 0 50s8 50 50 50 50-8 50-50S92 0 50 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 0C8 0 0 8 0 50s8 50 50 50 50-8 50-50S92 0 50 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* 7c. Изрязване (сянката се слага на обвиващ .clip-shadow, не на самата форма) */
.shape-hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.shape-hex-pointy { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.shape-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.shape-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape-notch { clip-path: polygon(var(--notch, 22px) 0, 100% 0, 100% calc(100% - var(--notch, 22px)), calc(100% - var(--notch, 22px)) 100%, 0 100%, 0 var(--notch, 22px)); }
.shape-notch-1 { clip-path: polygon(0 0, calc(100% - var(--notch, 28px)) 0, 100% var(--notch, 28px), 100% 100%, 0 100%); }
.shape-slant-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant, 5vw)), 0 100%); }
.shape-slant-t { clip-path: polygon(0 var(--slant, 5vw), 100% 0, 100% 100%, 0 100%); }
.shape-polygon { clip-path: polygon(8% 4%, 72% 0, 100% 30%, 92% 86%, 40% 100%, 0 70%); }
/* 7d. Маски */
.shape-ticket {
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--hole, 14px), #000 calc(var(--hole, 14px) + .5px)) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, #0000 var(--hole, 14px), #000 calc(var(--hole, 14px) + .5px)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, #0000 var(--hole, 14px), #000 calc(var(--hole, 14px) + .5px)) left / 51% 100% no-repeat,
        radial-gradient(circle at 100% 50%, #0000 var(--hole, 14px), #000 calc(var(--hole, 14px) + .5px)) right / 51% 100% no-repeat;
}
/* 7e. Обвивки */
.clip-shadow { filter: drop-shadow(0 18px 28px rgb(0 0 0 / .22)); }
.offset-shape { position: relative; isolation: isolate; }
.offset-shape::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  translate: var(--off-x, 14px) var(--off-y, 14px); background: var(--off-c, var(--c-accent)); }
.icon-box { display: inline-grid; place-items: center; width: var(--icon-box, 3.25rem); aspect-ratio: 1; border-radius: var(--icon-radius, var(--r-m)); background: var(--icon-bg, color-mix(in srgb, var(--c-primary) 14%, transparent)); color: var(--icon-c, var(--c-primary)); }
.icon-box svg { width: 56%; height: 56%; }
.u-center-abs { position: absolute; left: 50%; top: 50%; translate: -50% -50%; } /* Том IV: точно центриране */

/* ============ 8. АНИМАЦИИ (Том III) — CSS част ============ */
/* 8a. Скриване преди старта на motion.js (само „появяващи се“ ефекти). Ако JS се провали → .no-motion показва всичко. */
.js:not(.motion-ready):not(.no-motion) :is(
  [data-anim="fade"], [data-anim="rise"], [data-anim="rise-sm"], [data-anim="slide-left"], [data-anim="slide-right"],
  [data-anim="scale"], [data-anim="pop"], [data-anim="pop-tilt"], [data-anim="blur"], [data-anim="tilt-in"], [data-anim^="mask"], [data-anim="kicker"],
  [data-anim="image-reveal"], [data-anim^="split-"], [data-anim="draw"], [data-anim="stagger"] > *) { visibility: hidden; }
.no-motion [data-anim], .no-motion [data-anim="stagger"] > * { visibility: visible !important; opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
.reduced [data-anim], .reduced [data-anim="stagger"] > * { visibility: visible !important; opacity: 1 !important; }

/* 8b. Безкрайни цикли — тръгват само когато са в кадър (.is-inview от motion.js). Том III: max 2 видими едновременно. */
[class*="loop-"] { animation-play-state: paused; }
[class*="loop-"].is-inview { animation-play-state: running; }
.loop-float { animation: u-float var(--loop-dur, 6s) ease-in-out infinite; animation-delay: var(--loop-delay, 0s); }
.loop-breathe { animation: u-breathe var(--loop-dur, 3.2s) ease-in-out infinite; }
.loop-rotate { animation: u-rotate var(--loop-dur, 28s) linear infinite; }
.loop-wiggle { animation: u-wiggle var(--loop-dur, 6s) ease-in-out infinite; transform-origin: 50% 80%; }
.loop-bounce { animation: u-bounce var(--loop-dur, 2.2s) var(--ease-in-out) infinite; }
.loop-morph { animation: u-morph var(--loop-dur, 14s) ease-in-out infinite; }
.loop-kenburns { overflow: hidden; }
.loop-kenburns > img, .loop-kenburns > video { animation: u-kenburns var(--loop-dur, 26s) ease-in-out infinite alternate; animation-play-state: inherit; }
.loop-shimmer { background: linear-gradient(100deg, var(--c-text) 20%, var(--c-primary) 40%, var(--c-accent) 50%, var(--c-text) 70%) 0 0 / 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: u-shimmer var(--loop-dur, 6s) linear infinite; }
.loop-live { position: relative; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: var(--live-c, #3ecf74); }
.loop-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: u-ping 1.8s var(--ease-out) infinite; animation-play-state: inherit; }
.loop-rings { position: relative; isolation: isolate; }
.loop-rings::before, .loop-rings::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  border: 2px solid var(--ring-c, var(--c-primary)); animation: u-ring 2.4s var(--ease-out) infinite; animation-play-state: inherit; }
.loop-rings::after { animation-delay: 1.2s; }
.loop-border { position: relative; isolation: isolate; }
.loop-border::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--u-angle), transparent 0 70%, var(--c-primary) 85%, var(--c-accent) 92%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: u-spin-angle var(--loop-dur, 4s) linear infinite; animation-play-state: inherit; }
@property --u-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes u-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--float, 12px) * -1); } }
@keyframes u-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes u-rotate { to { rotate: 360deg; } }
@keyframes u-wiggle { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -9deg; } 92% { rotate: 7deg; } 95% { rotate: -4deg; } 98% { rotate: 2deg; } }
@keyframes u-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes u-morph { 0%, 100% { border-radius: 62% 38% 55% 45% / 45% 52% 48% 55%; } 33% { border-radius: 40% 60% 45% 55% / 58% 40% 60% 42%; } 66% { border-radius: 55% 45% 38% 62% / 42% 60% 40% 58%; } }
@keyframes u-kenburns { from { scale: 1; translate: 0 0; } to { scale: 1.12; translate: -2% -1.5%; } }
@keyframes u-shimmer { to { background-position: -250% 0; } }
@keyframes u-ping { 0% { scale: 1; opacity: .7; } 80%, 100% { scale: 2.6; opacity: 0; } }
@keyframes u-ring { 0% { scale: 1; opacity: .65; } 100% { scale: 1.7; opacity: 0; } }
@keyframes u-spin-angle { to { --u-angle: 360deg; } }
@keyframes u-blink { 50% { opacity: 0; } }

/* 8c. Бягаща лента / вертикална лента (motion.js изгражда .u-marquee__track + клонинг) */
.u-marquee { display: flex; overflow: hidden; gap: var(--marquee-gap, 3rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.u-marquee .u-marquee__track { display: flex; align-items: center; flex-shrink: 0; min-width: max-content; gap: var(--marquee-gap, 3rem);
  animation: u-marquee var(--marquee-dur, 32s) linear infinite; animation-play-state: paused; }
.u-ticker { display: flex; flex-direction: column; overflow: hidden; height: var(--ticker-h, 14rem); gap: var(--marquee-gap, 1.5rem);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.u-ticker .u-marquee__track { display: flex; flex-direction: column; flex-shrink: 0; gap: var(--marquee-gap, 1.5rem);
  animation: u-ticker var(--marquee-dur, 30s) linear infinite; animation-play-state: paused; }
.u-marquee.is-inview .u-marquee__track, .u-ticker.is-inview .u-marquee__track { animation-play-state: running; }
.u-marquee:hover .u-marquee__track, .u-ticker:hover .u-marquee__track { animation-play-state: paused; }
@keyframes u-marquee { to { transform: translateX(calc(-100% - var(--marquee-gap, 3rem))); } }
@keyframes u-ticker { to { transform: translateY(calc(-100% - var(--marquee-gap, 1.5rem))); } }

/* 8d. Текстови помощници */
[data-anim="rotate-words"], [data-anim="typewriter"] { display: inline-block; vertical-align: bottom; }
[data-anim="rotate-words"] { overflow: hidden; padding-bottom: .08em; }
.u-rotate { display: inline-block; }
.u-type.has-caret::after { content: ""; display: inline-block; width: .07em; height: .95em; margin-left: .06em; vertical-align: -.08em; background: currentColor; animation: u-blink 1s steps(1) infinite; }
.u-highlight { background: linear-gradient(var(--hl-c, color-mix(in srgb, var(--c-primary) 35%, transparent)), var(--hl-c, color-mix(in srgb, var(--c-primary) 35%, transparent))) no-repeat 0 88% / var(--hl, 0%) 38%; padding-inline: .06em; }
.tl-dot { transition: background-color var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out), scale var(--t-med) var(--ease-out); }
.tl-dot.is-active { scale: 1.15; }

/* 8e. Микро-интеракции (Том III, раздел 04): 150–250 ms, само transform/opacity */
.hover-lift { transition: translate var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out); }
.hover-lift:hover { translate: 0 -6px; box-shadow: var(--shadow-2); }
.hover-zoom { overflow: hidden; }
.hover-zoom img { transition: scale .7s var(--ease-out); }
.hover-zoom:hover img { scale: 1.06; }
.press { transition: scale 120ms var(--ease-out); }
.press:active { scale: .97; }
.link-grow { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1.5px; text-decoration: none; transition: background-size var(--t-med) var(--ease-out); }
.link-grow:hover, .link-grow:focus-visible { background-size: 100% 1.5px; }
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

/* ============ 9. ИКОНИ — къщният стандарт (references/svg-icons.md) ============ */
/* 9a. Емотикони: лъскави плочки 48×48 от assets/icons/sprite.svg (make_emoticons.py). --g = цветът на сиянието. */
.emo { display: inline-block; flex: none; width: var(--emo, 44px); height: var(--emo, 44px); vertical-align: middle;
  filter: drop-shadow(0 6px 12px var(--g, rgb(0 0 0 / .22)));
  transition: filter .4s var(--ease-out), transform .5s var(--spring); }
.emo--xs { --emo: 18px; filter: drop-shadow(0 3px 6px var(--g, rgb(0 0 0 / .2))); }
.emo--sm { --emo: 26px; }
.emo--md { --emo: 36px; }
.emo--lg { --emo: 56px; }
.emo--xl { --emo: 72px; filter: drop-shadow(0 10px 22px var(--g, rgb(0 0 0 / .25))); }
/* в текст (на мястото на емоджи): подравнено по реда */
.emo--inline { --emo: 1.25em; vertical-align: -.25em; margin-inline: .08em; filter: drop-shadow(0 2px 4px var(--g, rgb(0 0 0 / .18))); }
/* оживяване при hover на родителя (карта, бутон, ред) — като стикер */
:is(a, button, label, .card, [class*="card"], li):hover > .emo,
:is(a, button, label, .card, [class*="card"], li):hover .emo:not(.emo--inline) { transform: scale(1.08) rotate(-4deg); filter: drop-shadow(0 0 10px var(--g, rgb(0 0 0 / .2))) drop-shadow(0 8px 16px var(--g, rgb(0 0 0 / .25))); }
/* избрано състояние (чипове, табове, опции) */
:is(.is-active, [aria-selected="true"], [aria-pressed="true"], :checked + *) .emo { filter: drop-shadow(0 0 8px var(--g)) drop-shadow(0 0 18px var(--g)); }
/* 9b. Линейни UI икони (стрелки, меню, плюс, затвори…) — currentColor, stroke 1.6–1.8 */
.ui-ic { display: inline-block; flex: none; width: var(--ui-ic, 20px); height: var(--ui-ic, 20px); vertical-align: middle; }
.btn-ic { display: inline-grid; place-items: center; flex: none; width: 2.25em; height: 2.25em; border-radius: 50%; background: var(--btn-ic-bg, color-mix(in srgb, currentColor 14%, transparent)); transition: transform .45s var(--spring); }
.btn-ic .ui-ic { --ui-ic: 1.05em; }
a:hover > .btn-ic, button:hover > .btn-ic { transform: translateX(3px) rotate(-45deg); }
/* 9c. Брандове (Viber, Facebook, Instagram, Google…) в официалните им цветове */
.brand-ic { display: inline-block; flex: none; width: var(--brand, 32px); height: var(--brand, 32px); filter: drop-shadow(0 6px 12px var(--g, rgb(0 0 0 / .2))); transition: transform .5s var(--spring), filter .4s var(--ease-out); }
a:hover > .brand-ic { transform: scale(1.1); filter: drop-shadow(0 0 12px var(--g, rgb(0 0 0 / .2))) drop-shadow(0 6px 12px var(--g, rgb(0 0 0 / .2))); }

/* 9d. Контактни бутони — къщният стандарт (house-style.md §2): зелено „Обади се“, лилаво „Viber“ */
.btn-call, .btn-viber { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .8em 1.5em; border: 0; border-radius: 999px; font: inherit; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out), scale .12s var(--ease-out); }
.btn-call { color: var(--c-on-call); background: linear-gradient(135deg, var(--c-call-a) 0%, var(--c-call) 55%, var(--c-call-2) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 1px rgb(107 245 154 / .35), 0 12px 34px -10px rgb(31 199 102 / .75); }
.btn-viber { color: var(--c-on-viber); background: linear-gradient(135deg, #8B7BFF 0%, var(--c-viber) 50%, var(--c-viber-2) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 0 1px rgb(168 152 255 / .35), 0 12px 34px -10px rgb(115 96 242 / .8); }
.btn-call:hover, .btn-call:focus-visible { translate: 0 -2px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 0 0 5px rgb(37 211 102 / .22), 0 0 32px rgb(31 199 102 / .5), 0 16px 40px -10px rgb(31 199 102 / .9); }
.btn-viber:hover, .btn-viber:focus-visible { translate: 0 -2px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 0 0 5px rgb(115 96 242 / .24), 0 0 32px rgb(115 96 242 / .55), 0 16px 40px -10px rgb(115 96 242 / .95); }
.btn-call:active, .btn-viber:active { scale: .97; }
/* светлинен отблясък при hover */
.btn-call::after, .btn-viber::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .42) 50%, transparent 70%); transform: translateX(-130%); transition: transform .9s var(--ease-out); }
.btn-call:hover::after, .btn-viber:hover::after { transform: translateX(130%); }
.btn-call .ui-ic, .btn-viber .ui-ic { --ui-ic: 1.2em; }
/* телефонът „звъни“ на всеки ~4.5 s (един малък цикъл) */
.btn-call .ui-ic { transform-origin: 50% 60%; animation: u-ring 4.5s var(--ease-out) infinite; }
@keyframes u-ring { 0%, 82%, 100% { transform: rotate(0); } 85% { transform: rotate(-16deg); } 88% { transform: rotate(14deg); } 91% { transform: rotate(-10deg); } 94% { transform: rotate(6deg); } }

/* 9e. Мобилна лента долу — задължителна на всеки сайт с телефон (≤ 767px) */
.sticky-cta { display: none; }
@media (max-width: 767px) {
  .sticky-cta { position: fixed; inset: auto 0 0 0; z-index: 180; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background: var(--sticky-bg, color-mix(in srgb, var(--bg-base, #0b0b0f) 82%, transparent));
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 -10px 30px -12px rgb(0 0 0 / .35); animation: u-sticky-in .7s var(--ease-out) .9s both; }
  .sticky-cta > a { min-height: 48px; padding-inline: .6em; font-size: .95rem; }
  .sticky-cta--single { grid-template-columns: 1fr; }
  body:has(.sticky-cta) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  body:has(.sticky-cta) .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@keyframes u-sticky-in { from { transform: translateY(110%); } }
/* бутон „нагоре“ — кръгъл, в акцентния цвят (main.js добавя .is-visible след първия екран) */
.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 170; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%;
  color: var(--c-on-primary, #fff); background: var(--c-primary, #222); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--c-primary, #000) 70%, transparent);
  opacity: 0; translate: 0 12px; pointer-events: none; cursor: pointer; transition: opacity .35s var(--ease-out), translate .35s var(--ease-out), box-shadow .3s; }
.to-top.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover, .to-top:focus-visible { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-primary, #000) 25%, transparent), 0 14px 30px -8px color-mix(in srgb, var(--c-primary, #000) 80%, transparent); }

/* ============ 10. Уважение към потребителя: намалено движение ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .u-bg { transition: none; }
  .u-marquee, .u-ticker { overflow-x: auto; }
}
/* ============ 11. Мобилна дисциплина ============ */
@media (max-width: 767px) {
  [class*="edge-"] { --edge-h: clamp(24px, 9vw, 56px); } /* Том V: вълните намаляват наполовина */
  .seam-overlap { --overlap: 3rem; }
}