/* Baza do pozycjonowania */
#hero{ position: relative; }
/* Znaczek na środku baneru */
#hero .bistroMark{
/* ROZMIAR jak na początku (możesz delikatnie podbić max np. do 280px) */
--size: clamp(160px, 16vw, 320px);
--logoScale: 0.92;
--ringScale: 1.12;
--y: 0px; /* np. -10px jeśli chcesz troszkę wyżej */
width: var(--size);
height: var(--size);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) translateY(var(--y));
z-index: 999;
pointer-events: none;
}
/* Wspólne ustawienia warstw */
#hero .bistroRing,
#hero .bistroLogo{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Ring większy + płynne przejścia (crossfade) */
#hero .bistroRing{
transform: scale(var(--ringScale));
z-index: 2;
opacity: 0;
transition: opacity 140ms linear;
will-change: opacity, transform;
}
/* Stan aktywny */
#hero .bistroRing.isOn{ opacity: 1; }
/* Logo na wierzchu */
#hero .bistroLogo{
transform: scale(var(--logoScale));
z-index: 3;
}
(() => {
const root = document.querySelector('#hero .bistroMark');
if (!root || root.dataset.init === '1') return;
root.dataset.init = '1';
const a = root.querySelector('.bistroRing.vA');
const b = root.querySelector('.bistroRing.vB');
if (!a || !b) return;
// WAŻNE: nie używamy loop — robimy płynne przełączanie między 2 wideo
a.removeAttribute('loop');
b.removeAttribute('loop');
// Ustawienia anty-migania:
const CUT_BEFORE_END = 0.75; // ile sekund przed końcem przełączamy (zwiększ do 0.7 jeśli nadal mignie)
const FADE_MS = 140; // długość crossfade
let active = a;
let standby = b;
let switching = false;
const safePlay = (v) => v.play().catch(()=>{});
const prep = (v) => {
v.muted = true;
v.playsInline = true;
v.defaultMuted = true;
v.preload = 'auto';
v.currentTime = 0.001;
};
prep(a); prep(b);
// start: A widoczne, B schowane
a.classList.add('isOn');
b.classList.remove('isOn');
// czekamy na metadane obu
const waitMeta = (v) => new Promise(res => {
if (isFinite(v.duration) && v.duration > 0) return res();
v.addEventListener('loadedmetadata', res, { once: true });
});
Promise.all([waitMeta(a), waitMeta(b)]).then(() => {
// odpalamy tylko aktywne, standby trzymamy na starcie
safePlay(active);
standby.pause();
standby.currentTime = 0.001;
const tick = () => {
requestAnimationFrame(tick);
if (switching) return;
if (!isFinite(active.duration) || active.duration = active.duration - CUT_BEFORE_END) {
switching = true;
// przygotuj standby od początku i włącz
standby.currentTime = 0.001;
safePlay(standby);
// crossfade
standby.classList.add('isOn');
active.classList.remove('isOn');
// po fade: reset starego i zamiana ról
setTimeout(() => {
active.pause();
active.currentTime = 0.001;
const tmp = active;
active = standby;
standby = tmp;
switching = false;
}, FADE_MS + 60);
}
};
tick();
});
// po powrocie na kartę – wznowienie
document.addEventListener('visibilitychange', () => {
if (!document.hidden) safePlay(active);
});
})();
