/* ══════════════════════════════════════════════════════════════
   bb-border-anim.css — Animované ohraničenie (Branike Blocks)

   CSS vars každý blok nastaví na wrapperi:
     --bb-ba-color   : farba lúča           (default #0EA5E9)
     --bb-ba-bg      : pozadie interiéru     (default --bb-surface → biela/tmavá)
     --bb-ba-width   : hrúbka rámčeka (px)   (default 2px)
     --bb-ba-speed   : rýchlosť animácie     (default 3s)
     --bb-ba-radius  : border-radius bloku   (default 12px)
   ═══════════════════════════════════════════════════════════════ */

/* ── Rotate: spinning conic beam ───────────────────────────────
   Technika: overflow:hidden + veľký rotujúci conic-gradient
   + ::after cover pre "border only" efekt
   ───────────────────────────────────────────────────────────── */
.bb-border-anim--rotate {
    position:  relative !important;
    overflow:  hidden !important;
    isolation: isolate;
}

.bb-border-anim--rotate::before {
    content:      '';
    position:     absolute;
    top:          50%;
    left:         50%;
    width:        250%;
    aspect-ratio: 1 / 1;
    transform:    translate(-50%, -50%) rotate(0deg);
    background:   conic-gradient(
        from 0deg,
        transparent                              0deg,
        transparent                            150deg,
        var(--bb-ba-color, #0EA5E9)            200deg,
        transparent                            250deg
    );
    animation:    bb-ba-spin var(--bb-ba-speed, 3s) linear infinite;
    z-index:      0;
    will-change:  transform;
}

/* Interior cover — vytvára efekt "len rámček vidno"
   --bb-ba-bg: PHP nastaví automaticky z bgColor stĺpca.
   Fallback: inherit zdedí background rodiča (transparentný stĺpec = viditeľné pozadie sekcie). */
.bb-border-anim--rotate::after {
    content:       '';
    position:      absolute;
    inset:         var(--bb-ba-width, 2px);
    border-radius: calc(var(--bb-ba-radius, 12px) - var(--bb-ba-width, 2px));
    background:    var(--bb-ba-bg, inherit);
    z-index:       1;
}

/* Obsah bloku musí byť nad cover vrstvou */
.bb-border-anim--rotate > * {
    position: relative;
    z-index:  2;
}

@keyframes bb-ba-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Pulse: glowing box-shadow puls ──────────────────────────── */
.bb-border-anim--pulse {
    animation: bb-ba-pulse var(--bb-ba-speed, 2.5s) ease-in-out infinite;
}

@keyframes bb-ba-pulse {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50%      {
        box-shadow: 0 0 0 6px
            color-mix(in srgb, var(--bb-ba-color, #0EA5E9) 30%, transparent);
    }
}

/* ── Glow: statická svietiaca čiara ──────────────────────────── */
.bb-border-anim--glow {
    border:     var(--bb-ba-width, 1px) solid
                color-mix(in srgb, var(--bb-ba-color, #0EA5E9) 55%, transparent);
    box-shadow: 0 0  6px color-mix(in srgb, var(--bb-ba-color, #0EA5E9) 35%, transparent),
                0 0 16px color-mix(in srgb, var(--bb-ba-color, #0EA5E9) 18%, transparent);
}

/* ── Accessibility ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-border-anim--rotate::before,
    .bb-border-anim--pulse {
        animation: none !important;
    }
}