/* ============================================================
   „Месечен абонамент“: само движението на елементите на страницата.
   Подредбата, размерите и цветовете са в CSS на страницата
   (Page settings → Custom CSS; копие в wordpress/css/abonament.css).
   ============================================================ */

/* „магнитът“: бутонът леко следва мишката (abonament.js задава --mx и --my) */
.pfx .ab-mag { display: inline-block; transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .8s cubic-bezier(.34, 1.56, .64, 1); }
.pfx .ab-mag.is-on { transition-duration: .35s; transition-timing-function: cubic-bezier(.16, 1, .3, 1); }

/* плочките и пакетите се появяват отдолу (data-rv от темата); тук са и преходите при посочване */
[data-js] .pfx .ab-tile { transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out), background-color .5s var(--ease), color .5s; transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s; }
.pfx .ab-tile { position: relative; overflow: clip; }
.pfx .ab-tile::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--room, #2AC4EA); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.pfx .ab-tile:hover::after { transform: none; }
.pfx .ab-tile p { transition: color .5s; }

[data-js] .pfx .ab-plan { transition: opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out), translate .7s var(--ease-out), box-shadow .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms), calc(var(--d, 0) * 1ms), 0s, 0s; }
.pfx .ab-plan:not(.is-best):hover { translate: 0 -8px; box-shadow: 0 40px 80px -40px rgba(11, 37, 48, .35); }

/* пулсът до „Препоръчвам“ (ако точката се вижда) и до свободните места */
.pfx .ab-badge i { animation: ab-pulse 2s infinite; }
@keyframes ab-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 70%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }
.pfx .ab-seats i { animation: ab-live 2.4s ease-out infinite; }
@keyframes ab-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 10px transparent; } }

/* подаръкът: постовете падат в седмицата един след друг, щом инструментът се покаже (data-in от темата) */
[data-js] .pfx .ab-tool-slot img { opacity: 0; transform: translateY(-30px) rotate(-6deg); }
[data-js] .pfx .ab-tool-slot i { opacity: 0; }
.pfx .ab-tool[data-in] .ab-tool-slot img { animation: ab-drop .8s var(--ease-out) calc(.5s + var(--i, 0) * .35s) forwards; }
.pfx .ab-tool[data-in] .ab-tool-slot i { animation: ab-show .4s ease calc(1s + var(--i, 0) * .35s) forwards; }
@keyframes ab-drop { to { opacity: 1; transform: none; } }
@keyframes ab-show { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pfx .ab-mag { transform: none !important; transition: none; }
  [data-js] .pfx .ab-tile, [data-js] .pfx .ab-plan, .pfx .ab-tile::after { transition: none; }
  .pfx .ab-plan:not(.is-best):hover { translate: none; }
  [data-js] .pfx .ab-tool-slot img, [data-js] .pfx .ab-tool-slot i { opacity: 1; transform: none; animation: none !important; }
  .pfx .ab-badge i, .pfx .ab-seats i { animation: none; }
}