/* Animation Specification §1.1 — Text Reveal on Scroll.
   Скритото състояние важи САМО при html.anim-on (слага го animations.js):
   без JS и при reduced-motion всичко си е видимо от първия кадър. */

html.anim-on .anim-reveal {
  opacity: 0;
  transform: translateY(26px);
}

html.anim-on .anim-reveal.anim-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--anim-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  html.anim-on .anim-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =============================================================
   §1.2 Button Animations (одобрен ред: след §1.1)
   Primary: светлинен sweep през бутона при hover.
   Secondary: фонът просветва плавно (~260ms).
   Tertiary: лека вълнообразна деформация.
   Мобилният nav бутон: плавен фон + леко движение на иконата.
   ============================================================= */

/* --- Primary: преминаваща светлина ---------------------------- */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg,
    transparent 0%,
    color-mix(in srgb, var(--color-white) 45%, transparent) 50%,
    transparent 100%);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after {
  animation: btn-shine 0.7s ease forwards;
}

@keyframes btn-shine {
  from { transform: translateX(-160%) skewX(-18deg); }
  to   { transform: translateX(300%) skewX(-18deg); }
}

/* --- Secondary: фонът става по-светъл ------------------------- */
.btn-secondary,
.hero-cta-secondary,
.whatis-secondary,
.tier-cta-dark,
.contact-submit {
  transition: box-shadow 0.26s ease, border-color 0.26s ease;
}

.btn-secondary:hover,
.hero-cta-secondary:hover,
.whatis-secondary:hover,
.tier-cta-dark:hover,
.btn-secondary:focus-visible,
.hero-cta-secondary:focus-visible,
.whatis-secondary:focus-visible,
.tier-cta-dark:focus-visible,
.contact-submit:hover,
.contact-submit:focus-visible {
  box-shadow: inset 0 0 0 999px
    color-mix(in srgb, var(--color-white) 9%, transparent);
}

/* --- Tertiary: вълничката ------------------------------------- */
.btn-ghost:hover,
.tier-cta-muted:hover,
.btn-ghost:focus-visible,
.tier-cta-muted:focus-visible {
  animation: btn-wave 0.55s ease-in-out;
}

@keyframes btn-wave {
  0%   { transform: none; }
  25%  { transform: skewX(-2deg) scaleY(1.03); }
  50%  { transform: skewX(1.4deg) scaleY(0.975); }
  75%  { transform: skewX(-0.8deg) scaleY(1.015); }
  100% { transform: none; }
}

/* --- Мобилният nav бутон -------------------------------------- */
.hero-nav-burger {
  transition: background-color 0.3s ease;
}

.hero-nav-burger img {
  transition: transform 0.3s ease;
}

.hero-nav-burger:hover,
.hero-nav-burger:focus-visible {
  background-color: color-mix(in srgb, var(--color-gold) 22%, transparent);
}

.hero-nav-burger:hover img,
.hero-nav-burger:focus-visible img {
  transform: translateY(-1px) scale(1.08);
}

/* reduced-motion: без sweep и вълни; плавните преходи на фон остават */
@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
  .btn-ghost:hover, .tier-cta-muted:hover { animation: none; }
}

/* --- Мобилното меню: плавно отваряне/затваряне (§1.2) ---------- */
.mobile-menu {
  opacity: 0;
  transform: translateY(-1.5%);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.mobile-menu .mobile-menu-body {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s;
}

.mobile-menu.is-open {
  opacity: 1;
  transform: none;
}

.mobile-menu.is-open .mobile-menu-body {
  opacity: 1;
  transform: none;
}

/* докосването също се усеща (телефонът няма hover) */
.hero-nav-burger:active {
  background-color: color-mix(in srgb, var(--color-gold) 30%, transparent);
  transform: scale(0.94);
}

.hero-nav-burger {
  transition: background-color 0.3s ease, transform 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu .mobile-menu-body {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- §2.1 Mouse Spotlight -------------------------------------- */
.mouse-spotlight {
  position: fixed;
  top: 0;
  left: 0;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--color-gold) 13%, transparent),
    transparent 72%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2147483000;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}

.mouse-spotlight.is-visible {
  opacity: 1;
}

/* --- §2.2 Ambient Golden Lights -------------------------------- */
/* Фоновите златни сияния дишат почти незабележимо: 6–10 сек цикли с
   РАЗЛИЧНИ периоди и отмествания — никога в синхрон. Пулсът е само
   opacity: не пипа орбитата от effects.js (transform) и паралакса. */
[class*="-glow"],
.page-glow {
  animation: ambient-pulse 8.4s ease-in-out infinite;
}

.page-glow-b,
[class*="-glow-b"] {
  animation-duration: 9.7s;
  animation-delay: -4.3s;
}

.page-glow-c,
[class*="-glow-c"] {
  animation-duration: 6.9s;
  animation-delay: -2.2s;
}

.footer-glow {
  animation-duration: 7.6s;
  animation-delay: -5.1s;
}

@keyframes ambient-pulse {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  [class*="-glow"],
  .page-glow {
    animation: none;
  }
}

/* --- §3 Hero: entrance подредбата на текста при зареждане ------- */
/* Чисто CSS (fill-mode: backwards държи началното състояние преди
   закъснението): заглавие → лид → бутоните, отдолу нагоре, премиум
   темпо. Навигацията НЕ участва (правилото за стабилен header). */
.hero-title {
  animation: hero-enter 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s backwards;
}

.hero-lead {
  animation: hero-enter 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s backwards;
}

.hero-cta {
  animation: hero-enter 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) 0.55s backwards;
}

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

@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-lead, .hero-cta {
    animation: none;
  }
}

/* --- §4 Offer Cards: преминаващият отблясък --------------------- */
/* Еднократна диагонална светлинна лента при влизане с мишката — като
   проблясък по стъкло. НЕ следва курсора (това го прави spotlight-ът
   от §2.1 — двете се дублираха перцептивно, обратна връзка 14.08). */
.tier,
.lv-card {
  position: relative;
  overflow: hidden;
}

.tier::after,
.lv-card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 48%;
  background: linear-gradient(100deg,
    transparent 0%,
    color-mix(in srgb, var(--color-white) 10%, transparent) 50%,
    transparent 100%);
  transform: translateX(-180%) skewX(-16deg);
  pointer-events: none;
}

.tier:hover::after,
.lv-card:hover::after {
  animation: card-glint 0.9s ease forwards;
}

@keyframes card-glint {
  from { transform: translateX(-180%) skewX(-16deg); }
  to   { transform: translateX(320%) skewX(-16deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tier::after,
  .lv-card::after { display: none; }
}

/* --- §5 Illustration: живата картичка на методиката ------------- */
/* При hover елементите ѝ се разместват микроскопично в различни посоки
   (translate свойството не пипа позициониращите transform-и). */
.meth-card .meth-card-q,
.meth-card .meth-card-curve,
.meth-card [class*="meth-card-dot"],
.meth-card .meth-card-factor,
.meth-card .meth-card-count {
  transition: translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.meth-card:hover .meth-card-q { translate: 0 -4px; }
.meth-card:hover .meth-card-curve { translate: 3px -2px; }
.meth-card:hover .meth-card-dot-a { translate: -5px -6px; }
.meth-card:hover .meth-card-dot-b { translate: 4px -3px; }
.meth-card:hover .meth-card-dot-c { translate: -3px 5px; }
.meth-card:hover .meth-card-factor { translate: 0 -3px; }
.meth-card:hover .meth-card-count { translate: 2px 0; }

@media (prefers-reduced-motion: reduce) {
  .meth-card * { transition: none; translate: none; }
}

/* --- §6 Блог: плавен преход при филтриране ---------------------- */
.blog-inner {
  transition: opacity 0.22s ease;
}

.blog-inner.is-swapping {
  opacity: 0.25;
}