/* Приказни ефекти за страницата на албумна матрица (owner, 19.08.2026).

   Правилата, по които е правено — те обясняват всяко число тук:

   1. СРЕДАТА ОСТАВА ЧИСТА. Слоят е изрязан с маска: прозрачен в средата, плътен
      към краищата. Затова светлинките се виждат само по периферията и не падат
      върху текста и снимките („не прекалено да затапи съдържанието, но по края").
   2. НЕ ХВАЩА КЛИКОВЕ. pointer-events:none по целия слой — нищо под него не се
      блокира.
   3. НИСЪК ЕТАЖ. z-index 3: над фона, но далеч под попъпите и мобилния лист
      (те са на 10000+), за да не ги покрие никога.
   4. САМО transform и opacity се анимират — те не карат браузъра да смята
      разположението наново, затова вървят гладко и на телефон.
   5. МЕКО, НЕ ЯРКО. Големи размивания и ниска плътност; ярко петно с остър ръб
      изглежда евтино и разсейва.
   6. УВАЖАВА ЧОВЕКА. При „намалено движение" в системата всичко спира; при скрит
      таб анимациите се паузират (не горим батерия в джоба).
*/

.mx-magic{
  position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden;
  contain:layout paint;           /* браузърът не преизчислява страницата заради слоя */
  /* Маската — сърцето на цялата идея: празно в средата, живо по края. */
  -webkit-mask-image:radial-gradient(ellipse 54% 50% at 50% 50%,
                     rgba(0,0,0,0) 18%, rgba(0,0,0,.5) 44%, #000 72%);
          mask-image:radial-gradient(ellipse 54% 50% at 50% 50%,
                     rgba(0,0,0,0) 18%, rgba(0,0,0,.5) 44%, #000 72%);
}
.mx-magic *{ position:absolute; will-change:transform, opacity; }
/* Скрит таб → всичко замръзва. */
.mx-magic.is-paused *{ animation-play-state:paused !important; }

/* ── 1. Светулки ─────────────────────────────────────────────────────────── */
.mx-magic-svetulki i{
  width:var(--r); height:var(--r); border-radius:50%;
  left:var(--x); top:var(--y);
  background:radial-gradient(circle, #fff 0%, var(--c) 48%, transparent 74%);
  filter:blur(.2px);
  box-shadow:0 0 calc(var(--r) * 3) var(--c),
             0 0 calc(var(--r) * 7) color-mix(in srgb, var(--c) 22%, transparent);
  opacity:0;
  animation:mxSvetulka var(--t) ease-in-out var(--d) infinite;
}
@keyframes mxSvetulka{
  0%   { opacity:0;   transform:translate3d(0,0,0) scale(.7); }
  15%  { opacity:.5; }
  50%  { opacity:.32; transform:translate3d(var(--dx), calc(var(--dy) * -1), 0) scale(1.2); }
  85%  { opacity:.45; }
  100% { opacity:0;   transform:translate3d(0,0,0) scale(.7); }
}

/* ── 2. Звезден прах ─────────────────────────────────────────────────────────
   Всяка звездичка носи свой цвят (--c, идва от двигателя): злато, розово, циан,
   лилаво, мента. Цветът влиза и в сиянието ѝ, затова прахът чете като приказен,
   а не като бял шум. Блещукането е ОТДЕЛНА анимация върху кръстчето — така една
   и съща звезда и пада, и пулсира, без да си пречат. */
.mx-magic-zvezden_prah i{
  width:var(--r); height:var(--r); left:var(--x); top:-8vh;
  background:radial-gradient(circle, #fff 0%, var(--c) 55%, transparent 72%);
  border-radius:50%;
  box-shadow:0 0 calc(var(--r) * 2.5) var(--c),
             0 0 calc(var(--r) * 6) color-mix(in srgb, var(--c) 28%, transparent);
  opacity:0;
  animation:mxPrah var(--t) linear var(--d) infinite;
}
/* Кръстчето на блясъка — две чертички правят звезда, без никаква снимка. */
.mx-magic-zvezden_prah i::before,
.mx-magic-zvezden_prah i::after{
  content:""; position:absolute; left:50%; top:50%;
  background:linear-gradient(var(--ъгъл, 90deg), transparent, #fff 45%, var(--c) 55%, transparent);
  transform:translate(-50%,-50%);
  animation:mxBleskane calc(var(--t) / 7) ease-in-out var(--d) infinite;
}
.mx-magic-zvezden_prah i::before{ width:calc(var(--r) * 5); height:1.2px; }
.mx-magic-zvezden_prah i::after{ width:1.2px; height:calc(var(--r) * 5); --ъгъл:0deg; }
@keyframes mxPrah{
  0%   { opacity:0;   transform:translate3d(0,0,0) rotate(0deg); }
  8%   { opacity:.5; }
  88%  { opacity:.42; }
  100% { opacity:0;   transform:translate3d(var(--dx), 116vh, 0) rotate(220deg); }
}
@keyframes mxBleskane{
  0%, 100% { opacity:.2;  transform:translate(-50%,-50%) scale(.7); }
  50%      { opacity:.55; transform:translate(-50%,-50%) scale(1.3); }
}

/* ── 4. Мехурчета ────────────────────────────────────────────────────────── */
.mx-magic-mehurcheta i{
  width:var(--r); height:var(--r); left:var(--x); bottom:-16vh; border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.75),
             color-mix(in srgb, var(--c) 45%, transparent) 42%,
             color-mix(in srgb, var(--c) 12%, transparent) 72%);
  border:1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow:0 0 calc(var(--r) / 2) color-mix(in srgb, var(--c) 40%, transparent);
  filter:blur(.4px); opacity:0;
  animation:mxMehur var(--t) ease-in var(--d) infinite;
}
@keyframes mxMehur{
  0%   { opacity:0;   transform:translate3d(0,0,0) scale(.85); }
  12%  { opacity:.36; }
  80%  { opacity:.22; }
  100% { opacity:0;   transform:translate3d(var(--dx), -118vh, 0) scale(1.1); }
}

/* ── 4. Приказно посрещане ───────────────────────────────────────────────────
   Единственият ефект, който НЕ се върти постоянно: пуска се веднъж, при
   отварянето, силно и кратко, и се маха сам. Собственикът (19.08.2026): „в
   началото да посреща юзера с по-силен ефект, като вълшебни искри… за няколко
   секунди да става приказно, наистина осезаемо, но стилно".

   Три пласта, които влизат един след друг:
     1. мека светлина, която разцъфва от средата и си отива;
     2. рой искри, които политат навън и гаснат по пътя;
     3. вълшебна следа — дъга светлина, която минава напряко и изчезва.

   Понеже е кратък, тук маската за краищата НЕ важи: посрещането има право да
   мине през средата. Слоят се изтрива от страницата, щом свърши — нула разход
   след това. */
.mx-magic-posreshtane{
  -webkit-mask-image:none; mask-image:none;
  animation:mxPosreshtaneKray 6.4s ease-out forwards;   /* целият слой избледнява накрая */
}
@keyframes mxPosreshtaneKray{
  0%, 72% { opacity:1; }
  100%    { opacity:0; }
}
/* 1. Светлината от средата. */
.mx-magic-posreshtane u{
  left:50%; top:50%; width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax;
  border-radius:50%; display:block;
  background:radial-gradient(circle, rgba(255,236,190,.30) 0%, rgba(190,170,255,.16) 32%,
                                     rgba(140,210,255,.07) 52%, transparent 70%);
  opacity:0; transform:scale(.2);
  animation:mxRazcvet 3.2s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes mxRazcvet{
  0%   { opacity:0;   transform:scale(.2); }
  22%  { opacity:1; }
  100% { opacity:0;   transform:scale(1.15); }
}
/* 2. Роякът искри — политат навън от средата. */
.mx-magic-posreshtane i{
  left:50%; top:50%; width:var(--r); height:var(--r); border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--c) 55%, transparent 74%);
  box-shadow:0 0 calc(var(--r) * 5) var(--c),
             0 0 calc(var(--r) * 12) color-mix(in srgb, var(--c) 45%, transparent);
  opacity:0;
  animation:mxIskrene var(--t) cubic-bezier(.15,.7,.25,1) var(--d) forwards;
}
.mx-magic-posreshtane i::before,
.mx-magic-posreshtane i::after{
  content:""; position:absolute; left:50%; top:50%;
  background:linear-gradient(var(--ъгъл, 90deg), transparent, #fff 50%, transparent);
  transform:translate(-50%,-50%);
}
.mx-magic-posreshtane i::before{ width:calc(var(--r) * 7); height:1.4px; }
.mx-magic-posreshtane i::after{ width:1.4px; height:calc(var(--r) * 7); --ъгъл:0deg; }
@keyframes mxIskrene{
  0%   { opacity:0; transform:translate(-50%,-50%) rotate(var(--ъг)) translateX(0) scale(.3); }
  12%  { opacity:1; }
  70%  { opacity:.9; }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(var(--ъг)) translateX(var(--път)) scale(1); }
}
/* 3. Вълшебната следа — дъга, която минава напряко. */
.mx-magic-posreshtane s{
  left:-25%; top:38%; width:150%; height:2px; display:block; text-decoration:none;
  background:linear-gradient(90deg, transparent, rgba(255,240,200,.9) 42%,
                                    rgba(190,170,255,.85) 58%, transparent);
  filter:blur(1px) drop-shadow(0 0 8px rgba(255,214,138,.75));
  transform-origin:50% 50%; opacity:0;
  animation:mxSleda 2.4s ease-in-out .35s forwards;
}
.mx-magic-posreshtane s:nth-of-type(2){ top:62%; animation-delay:.9s; animation-duration:2.1s; }
@keyframes mxSleda{
  0%   { opacity:0; transform:translateX(-40%) rotate(-8deg) scaleX(.4); }
  30%  { opacity:1; }
  100% { opacity:0; transform:translateX(40%) rotate(-8deg) scaleX(1.1); }
}

/* ── 6. Феята ────────────────────────────────────────────────────────────────
   Първият вариант летеше по ЕДНА начертана дъга и влачеше верижка от точки —
   собственикът (19.08.2026): „само феята, но и тя е ограничена и доста
   елементарна". Права оценка: начертаният път се запомня след второто минаване,
   а равномерната верижка не е диря, а броеница.

   Сега е жива. Двигателят я води сам (виж prikazni_efekti.js): тя обикаля целия
   екран по своя воля, ту се носи бавно, ту се стрелва, спира да се повърти на
   място. Дирята не е повторение на самата нея, а ПРАШЕЦ, който рони по пътя си
   и който после гасне и пада — всяка прашинка живее сама за себе си.

   Тук стоят само видът и гаснето; движението е в двигателя, защото свободният
   ход не се описва с ключови кадри. */
.mx-magic-feya{ -webkit-mask-image:none; mask-image:none; }
.mx-magic-feya .glava{
  left:0; top:0; width:24px; height:24px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #fff3c9 32%, rgba(255,205,110,.55) 58%, rgba(255,180,60,0) 78%);
  box-shadow:0 0 26px rgba(255,224,160,1),
             0 0 64px rgba(255,196,96,.7),
             0 0 130px rgba(255,170,60,.35);
  will-change:transform;
}
/* Кръстчето на блясъка — от него светлината изглежда силна, а не просто едра. */
.mx-magic-feya .glava::before{
  content:""; position:absolute; left:50%; top:50%; width:64px; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,240,205,.85) 50%, transparent);
  transform:translate(-50%,-50%);
  box-shadow:0 0 10px rgba(255,214,138,.6);
  animation:mxDiha 1.8s ease-in-out infinite;
}
/* Ореолът диша — жива светлина, не лампичка. */
.mx-magic-feya .glava::after{
  content:""; position:absolute; inset:-9px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,236,190,.72), rgba(255,214,138,0) 70%);
  animation:mxDiha 1.8s ease-in-out infinite;
}
@keyframes mxDiha{
  0%, 100% { transform:scale(.85); opacity:.55; }
  50%      { transform:scale(1.25); opacity:1; }
}
/* Прашецът: ронва се от нея, гасне и пада. Всяка прашинка се маха сама. */
.mx-magic-feya .prah{
  left:0; top:0; width:var(--r); height:var(--r); border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--c) 55%, transparent 76%);
  box-shadow:0 0 calc(var(--r) * 4) var(--c),
             0 0 calc(var(--r) * 9) color-mix(in srgb, var(--c) 40%, transparent);
  animation:mxPrashec var(--t) ease-out forwards;
}
@keyframes mxPrashec{
  0%   { opacity:.95; transform:translate3d(0,0,0) scale(1); }
  60%  { opacity:.5; }
  100% { opacity:0;   transform:translate3d(var(--dx), var(--dy), 0) scale(.25); }
}

/* ── Телефон: по-кротко ──────────────────────────────────────────────────── */
@media (max-width:760px){
  .mx-magic{
    -webkit-mask-image:radial-gradient(ellipse 70% 52% at 50% 50%,
                       rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 68%, #000 100%);
            mask-image:radial-gradient(ellipse 70% 52% at 50% 50%,
                       rgba(0,0,0,0) 40%, rgba(0,0,0,.6) 68%, #000 100%);
  }
}

/* ── „Намалено движение" в системата: нищо не мърда ──────────────────────── */
@media (prefers-reduced-motion: reduce){
  .mx-magic *{ animation:none !important; }
  .mx-magic i{ opacity:.18; }
  .mx-magic-zvezden_prah i,
  .mx-magic-mehurcheta i,
  .mx-magic-feya *{ display:none; }         /* феята Е движение — без него няма смисъл */
  .mx-magic-posreshtane{ display:none; }    /* посрещането Е движение — без него няма смисъл */
}