/**
 * Branike Image Block — frontend štýly  v1.0.0
 *
 * Zásady:
 *  - CLS = 0: aspect-ratio rezervuje priestor, width/height vždy na <img>
 *  - GPU-friendly hover: len transform / opacity / filter na ploche obrázka
 *  - prefers-reduced-motion: všetky animácie vypnuté
 */

/* ── Základ ─────────────────────────────────────────────────────────────── */
.bb-image {
    margin: 0;
    max-width: var(--bb-img-maxw, 100%);
    position: relative;
}

.bb-image__media {
    display: block;
    overflow: hidden;
    border-radius: var(--bb-img-radius, 0);
    position: relative;
    line-height: 0; /* odstráni inline-gap pod img */
}

.bb-image__img {
    display: block;
    width: 100%;
    height: auto;
    object-position: var(--bb-img-pos, 50% 50%);
    border-radius: var(--bb-img-radius, 0);
}

/* Aspect ratio — rezervovaný priestor = nulový CLS */
.bb-image--has-ratio .bb-image__img {
    aspect-ratio: var(--bb-img-ar);
    height: auto;
    object-fit: cover;
}

/* Lightbox kurzor */
.bb-image--lightbox .bb-image__media {
    cursor: zoom-in;
}

/* Focus stav — viditeľný, nikdy outline:none */
.bb-image__media:focus-visible {
    outline: 2px solid var(--branike-primary, var(--bb-primary, #7C3AED));
    outline-offset: 2px;
}

/* ── Hover efekty (GPU-friendly) ────────────────────────────────────────── */
.bb-image--fx-zoom-in .bb-image__img,
.bb-image--fx-zoom-out .bb-image__img,
.bb-image--fx-grayscale .bb-image__img,
.bb-image--fx-blur .bb-image__img {
    transition: transform 0.45s ease, filter 0.45s ease;
    will-change: transform;
}

.bb-image--fx-zoom-in:hover .bb-image__img   { transform: scale(1.07); }

.bb-image--fx-zoom-out .bb-image__img        { transform: scale(1.07); }
.bb-image--fx-zoom-out:hover .bb-image__img  { transform: scale(1); }

.bb-image--fx-grayscale .bb-image__img       { filter: grayscale(1); }
.bb-image--fx-grayscale:hover .bb-image__img { filter: grayscale(0); }

.bb-image--fx-blur .bb-image__img            { filter: blur(4px); transform: scale(1.03); }
.bb-image--fx-blur:hover .bb-image__img      { filter: blur(0); transform: scale(1); }

.bb-image--fx-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    will-change: transform;
}
.bb-image--fx-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    border-radius: var(--bb-img-radius, 0);
}

/* Reveal — tmavý overlay zmizne na hover (caption hover-reveal s ním ladí) */
.bb-image--fx-reveal .bb-image__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.bb-image--fx-reveal:hover .bb-image__media::after {
    opacity: 0;
}

/* ── Caption ────────────────────────────────────────────────────────────── */
.bb-image__caption {
    font-size: 0.875em;
    line-height: 1.5;
    color: var(--bb-img-cap-color, inherit);
}

.bb-image__caption--below {
    padding-top: 0.5em;
    text-align: center;
}

.bb-image__caption--overlay-bottom,
.bb-image__caption--overlay-full,
.bb-image__caption--hover-reveal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75em 1em;
    background: var(--bb-img-cap-bg, rgba(0, 0, 0, 0.7));
    color: var(--bb-img-cap-color, #fff);
    border-radius: 0 0 var(--bb-img-radius, 0) var(--bb-img-radius, 0);
}

.bb-image__caption--overlay-full {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--bb-img-radius, 0);
}

.bb-image__caption--hover-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    will-change: transform, opacity;
    pointer-events: none;
}
.bb-image:hover .bb-image__caption--hover-reveal,
.bb-image:focus-within .bb-image__caption--hover-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* ── Parallax ───────────────────────────────────────────────────────────── */
.bb-image--parallax .bb-image__media {
    overflow: hidden;
}
.bb-image--parallax .bb-image__img {
    transform: translateY(var(--bb-img-py, 0)) scale(var(--bb-img-pscale, 1.1));
    will-change: transform;
}
/* Parallax + hover zoom sa vylučujú — parallax má prednosť (transform konflikt) */
.bb-image--parallax.bb-image--fx-zoom-in:hover .bb-image__img,
.bb-image--parallax.bb-image--fx-zoom-out .bb-image__img {
    transform: translateY(var(--bb-img-py, 0)) scale(var(--bb-img-pscale, 1.1));
}

/* ── Shape maska ────────────────────────────────────────────────────────── */
/* Maska na media (nie img) — hover zoom/parallax sa deje VO VNÚTRI tvaru */
.bb-image--shaped .bb-image__media {
    -webkit-mask-image: var(--bb-img-mask);
    mask-image: var(--bb-img-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    border-radius: 0; /* radius nemá zmysel s maskou */
}
.bb-image--shaped .bb-image__img {
    border-radius: 0;
}

/* Shape wrapper — tieň a obrys */
.bb-image__shape {
    display: block;
    position: relative;
    line-height: 0;
}

/* Tieň kopírujúci tvar — drop-shadow na wrapperi číta alfu masky */
.bb-image__shape--shadow {
    filter: var(--bb-img-sh);
}

/* Obrys za tvarom — duplikovaná maska, posunutá, vo farbe */
.bb-image__shape--outline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bb-img-ol-c, var(--bb-primary, #7C3AED));
    -webkit-mask-image: var(--bb-img-mask);
    mask-image: var(--bb-img-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transform: translate(var(--bb-img-ol-x, 8px), var(--bb-img-ol-y, 8px));
    pointer-events: none;
}
.bb-image__shape--outline .bb-image__media {
    position: relative;
    z-index: 1;
}

/* Float hover — organický pohyb tvaru (GPU transform) */
.bb-image--shape-float .bb-image__shape {
    transition: transform 0.5s ease;
    will-change: transform;
}
.bb-image--shape-float:hover .bb-image__shape {
    transform: rotate(2deg) scale(1.03);
}

/* Lift efekt + shape: tieň rieši drop-shadow, box-shadow vypnúť */
.bb-image--shaped.bb-image--fx-lift:hover {
    box-shadow: none;
}

/* ── Sticker rámik (neubrutalizmus) ─────────────────────────────────────── */
/* Hrubý border + tvrdý offset tieň (0 blur) + voliteľná rotácia */
.bb-image--frame-sticker .bb-image__media {
    border: var(--bb-img-fr-w, 3px) solid var(--bb-img-fr-c, #111);
    box-shadow: var(--bb-img-fr-sh, 6px 6px 0 #111);
    border-radius: var(--bb-img-radius, 12px);
    transform: rotate(var(--bb-img-fr-rot, 0deg));
    will-change: transform;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bb-image--frame-sticker .bb-image__img {
    border-radius: calc(var(--bb-img-radius, 12px) - var(--bb-img-fr-w, 3px));
}
/* Hover: sticker sa vyrovná a "pritlačí" (tieň sa zmenší) */
.bb-image--frame-sticker:hover .bb-image__media {
    transform: rotate(0deg) translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--bb-img-fr-c, #111);
}
/* Lift/zoom efekty so stickerom: transform konflikt — sticker má prednosť */
.bb-image--frame-sticker.bb-image--fx-lift:hover {
    transform: none;
    box-shadow: none;
}

/* ── Sticker stack — naskladané farebné karty v pozadí ──────────────────── */
.bb-image__stack {
    display: block;
    position: relative;
    line-height: 0;
    isolation: isolate; /* vlastný stacking context — vrstvy neprepadnú pod pozadie stránky */
}
.bb-image__stack .bb-image__media {
    position: relative;
    z-index: 2;
}
.bb-image__stack::before,
.bb-image__stack::after {
    position: absolute;
    inset: 0;
    border: var(--bb-img-fr-w, 3px) solid var(--bb-img-fr-c, #111);
    border-radius: var(--bb-img-radius, 12px);
    box-shadow: var(--bb-img-fr-sh, 6px 6px 0 #111);
    pointer-events: none;
    transition: transform 0.35s ease;
    will-change: transform;
}
.bb-image__stack--1::before,
.bb-image__stack--2::before {
    content: '';
    background: var(--bb-img-st1-c, #A7F3D0);
    transform: rotate(var(--bb-img-st1-r, -4deg));
    z-index: 1;
}
.bb-image__stack--2::after {
    content: '';
    background: var(--bb-img-st2-c, #DDD6FE);
    transform: rotate(var(--bb-img-st2-r, 3deg));
    z-index: 0;
}
/* Hover: vrstvy sa rozšíria (fan-out) — rotácia sa zosilní */
.bb-image--frame-sticker:hover .bb-image__stack::before {
    transform: rotate(calc(var(--bb-img-st1-r, -4deg) * 1.8));
}
.bb-image--frame-sticker:hover .bb-image__stack::after {
    transform: rotate(calc(var(--bb-img-st2-r, 3deg) * 1.8));
}

/* ── Entrance animácie ──────────────────────────────────────────────────── */
.bb-image.bb-img-anim-ready[data-bb-anim="fade-in"]     { opacity: 0; }
.bb-image.bb-img-anim-ready[data-bb-anim="slide-up"]    { opacity: 0; transform: translateY(24px); }
.bb-image.bb-img-anim-ready[data-bb-anim="slide-left"]  { opacity: 0; transform: translateX(-24px); }
.bb-image.bb-img-anim-ready[data-bb-anim="slide-right"] { opacity: 0; transform: translateX(24px); }
.bb-image.bb-img-anim-ready[data-bb-anim="scale-in"]    { opacity: 0; transform: scale(0.93); }
.bb-image.bb-img-anim-ready[data-bb-anim="blur-in"]     { opacity: 0; filter: blur(6px); }

.bb-image.bb-img-anim-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition:
        opacity   var(--bb-img-dur, 600ms) var(--bb-img-easing, ease) var(--bb-img-delay, 0ms),
        transform var(--bb-img-dur, 600ms) var(--bb-img-easing, ease) var(--bb-img-delay, 0ms),
        filter    var(--bb-img-dur, 600ms) var(--bb-img-easing, ease) var(--bb-img-delay, 0ms);
}

/* Grayscale/blur hover + entrance blur-in: po dobehnutí entrance vráť hover filter */
.bb-image--fx-grayscale.bb-img-anim-in .bb-image__img { filter: grayscale(1); }
.bb-image--fx-grayscale.bb-img-anim-in:hover .bb-image__img { filter: grayscale(0); }

/* ── Reveal Slide ───────────────────────────────────────────────────────── */
/*
 * Farebný panel preletí cez obrázok a odhalí ho.
 * Triedy bb-image--reveal-{dir} + IO pridá bb-img-reveal-run.
 */

/* Obrázok skrytý kým panel neprejde */
.bb-image--reveal-left .bb-image__img,
.bb-image--reveal-right .bb-image__img,
.bb-image--reveal-top .bb-image__img,
.bb-image--reveal-bottom .bb-image__img {
    opacity: 0;
}

/* Farebný panel cez ::before na .bb-image__media */
.bb-image--reveal-left .bb-image__media::before,
.bb-image--reveal-right .bb-image__media::before,
.bb-image--reveal-top .bb-image__media::before,
.bb-image--reveal-bottom .bb-image__media::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bb-rv-c, #7C3AED);
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

.bb-image--reveal-left .bb-image__media::before   { transform: translateX(-101%); }
.bb-image--reveal-right .bb-image__media::before  { transform: translateX(101%); }
.bb-image--reveal-top .bb-image__media::before    { transform: translateY(-101%); }
.bb-image--reveal-bottom .bb-image__media::before { transform: translateY(101%); }

/* Keyframes — panel ide dovnútra, zastaví sa, ide von */
@keyframes bb-rv-left   { 0% { transform: translateX(-101%); } 45% { transform: translateX(0); } 55% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes bb-rv-right  { 0% { transform: translateX(101%); }  45% { transform: translateX(0); } 55% { transform: translateX(0); } 100% { transform: translateX(-101%); } }
@keyframes bb-rv-top    { 0% { transform: translateY(-101%); } 45% { transform: translateY(0); } 55% { transform: translateY(0); } 100% { transform: translateY(101%); } }
@keyframes bb-rv-bottom { 0% { transform: translateY(101%); }  45% { transform: translateY(0); } 55% { transform: translateY(0); } 100% { transform: translateY(-101%); } }

/* Obrázok: fade in v momente keď je panel plný (50 %) */
@keyframes bb-rv-img { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* Spustenie cez IO (frontend.js pridá bb-img-reveal-run) */
.bb-image--reveal-left.bb-img-reveal-run .bb-image__media::before {
    animation: bb-rv-left var(--bb-rv-dur, 1000ms) ease forwards;
}
.bb-image--reveal-right.bb-img-reveal-run .bb-image__media::before {
    animation: bb-rv-right var(--bb-rv-dur, 1000ms) ease forwards;
}
.bb-image--reveal-top.bb-img-reveal-run .bb-image__media::before {
    animation: bb-rv-top var(--bb-rv-dur, 1000ms) ease forwards;
}
.bb-image--reveal-bottom.bb-img-reveal-run .bb-image__media::before {
    animation: bb-rv-bottom var(--bb-rv-dur, 1000ms) ease forwards;
}
.bb-image--reveal-left.bb-img-reveal-run .bb-image__img,
.bb-image--reveal-right.bb-img-reveal-run .bb-image__img,
.bb-image--reveal-top.bb-img-reveal-run .bb-image__img,
.bb-image--reveal-bottom.bb-img-reveal-run .bb-image__img {
    animation: bb-rv-img var(--bb-rv-dur, 1000ms) ease forwards;
}

/* ── Animated Blob ──────────────────────────────────────────────────────── */
/*
 * border-radius morph — organický živý tvar (čistý CSS, žiadne JS).
 * Funguje standalone alebo kombinované s borderRadius.
 */
@keyframes bb-blob-morph {
    0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    20%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    40%  { border-radius: 50% 60% 30% 40% / 40% 50% 60% 50%; }
    60%  { border-radius: 60% 40% 60% 30% / 30% 60% 40% 70%; }
    80%  { border-radius: 40% 60% 50% 60% / 60% 40% 50% 40%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

.bb-image--blob-anim .bb-image__media {
    animation: bb-blob-morph 8s ease-in-out infinite;
    overflow: hidden;
}
.bb-image--blob-anim .bb-image__img {
    border-radius: inherit;
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-image.bb-img-anim-ready,
    .bb-image.bb-img-anim-in {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    .bb-image__img,
    .bb-image--fx-lift,
    .bb-image__caption--hover-reveal,
    .bb-image--shape-float .bb-image__shape {
        transition: none !important;
    }
    .bb-image--shape-float:hover .bb-image__shape {
        transform: none;
    }
    .bb-image--frame-sticker .bb-image__media,
    .bb-image--frame-sticker:hover .bb-image__media {
        transform: rotate(var(--bb-img-fr-rot, 0deg));
        transition: none !important;
    }
    .bb-image__stack::before,
    .bb-image__stack::after {
        transition: none !important;
    }
    .bb-image--frame-sticker:hover .bb-image__stack::before {
        transform: rotate(var(--bb-img-st1-r, -4deg));
    }
    .bb-image--frame-sticker:hover .bb-image__stack::after {
        transform: rotate(var(--bb-img-st2-r, 3deg));
    }
    .bb-image--parallax .bb-image__img {
        transform: none;
    }
    /* reveal-slide: okamžite zobraziť obrázok, panel vynechať */
    .bb-image--reveal-left .bb-image__img,
    .bb-image--reveal-right .bb-image__img,
    .bb-image--reveal-top .bb-image__img,
    .bb-image--reveal-bottom .bb-image__img {
        opacity: 1 !important;
        animation: none !important;
    }
    .bb-image--reveal-left .bb-image__media::before,
    .bb-image--reveal-right .bb-image__media::before,
    .bb-image--reveal-top .bb-image__media::before,
    .bb-image--reveal-bottom .bb-image__media::before {
        display: none;
    }
    /* animated-blob: statický border-radius */
    .bb-image--blob-anim .bb-image__media {
        animation: none !important;
        border-radius: var(--bb-img-radius, 50%);
    }
}