.bkbg-vf-wrapper { box-sizing: border-box; } .bkbg-vf-facade { position: relative; width: 100%; cursor: pointer; overflow: hidden; background: #111; display: block; } .bkbg-vf-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .bkbg-vf-facade:hover .bkbg-vf-thumb { transform: scale(1.035); } .bkbg-vf-overlay { position: absolute; inset: 0; pointer-events: none; } .bkbg-vf-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 32px 24px; text-align: center; pointer-events: none; } .bkbg-vf-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: transform 0.2s ease; } .bkbg-vf-facade:hover .bkbg-vf-play { transform: scale(1.08); } /* Pulsing ring animation */ @keyframes bkbg-vf-pulse { 0% { box-shadow: 0 0 0 0 rgba(108, 63, 181, 0.45); } 70% { box-shadow: 0 0 0 20px rgba(108, 63, 181, 0); } 100% { box-shadow: 0 0 0 0 rgba(108, 63, 181, 0); } } .bkbg-vf-play-btn-inner.is-pulsing { animation: bkbg-vf-pulse 2s ease-in-out infinite; } /* Caption */ .bkbg-vf-caption { margin-top: 12px; text-align: center; line-height: 1.5; font-family: var(--bkvf-cp-ff, inherit); font-size: var(--bkvf-cp-fsd, 13px); font-weight: var(--bkvf-cp-fw, 400); font-style: var(--bkvf-cp-fst, normal); line-height: var(--bkvf-cp-lhd, 1.5); letter-spacing: var(--bkvf-cp-lsd, normal); word-spacing: var(--bkvf-cp-wsd, normal); text-transform: var(--bkvf-cp-tt, none); text-decoration: var(--bkvf-cp-td, none); } /* Title / subtitle overlays */ .bkbg-vf-title { font-family: var(--bkvf-tt-ff, inherit); font-size: var(--bkvf-tt-fsd, 28px); font-weight: var(--bkvf-tt-fw, 800); font-style: var(--bkvf-tt-fst, normal); line-height: var(--bkvf-tt-lhd, 1.2); letter-spacing: var(--bkvf-tt-lsd, normal); word-spacing: var(--bkvf-tt-wsd, normal); text-transform: var(--bkvf-tt-tt, none); text-decoration: var(--bkvf-tt-td, none); } .bkbg-vf-subtitle { font-family: var(--bkvf-st-ff, inherit); font-size: var(--bkvf-st-fsd, 16px); font-weight: var(--bkvf-st-fw, 400); font-style: var(--bkvf-st-fst, normal); line-height: var(--bkvf-st-lhd, 1.5); letter-spacing: var(--bkvf-st-lsd, normal); word-spacing: var(--bkvf-st-wsd, normal); text-transform: var(--bkvf-st-tt, none); text-decoration: var(--bkvf-st-td, none); } /* Iframe (inserted by JS on click) */ .bkbg-vf-iframe-wrap { position: absolute; inset: 0; } .bkbg-vf-iframe-wrap iframe { width: 100%; height: 100%; border: 0; display: block; } /* Fade in on scroll */ .bkbg-vf-wrapper { opacity: 0; transform: translateY(12px); transition: opacity 0.55s ease, transform 0.55s ease; } .bkbg-vf-wrapper.is-visible { opacity: 1; transform: none; } /* Responsive typography */ @media (max-width: 1024px) { .bkbg-vf-title { font-size: var(--bkvf-tt-fst1, var(--bkvf-tt-fsd, 28px)); line-height: var(--bkvf-tt-lht, var(--bkvf-tt-lhd, 1.2)); letter-spacing: var(--bkvf-tt-lst, var(--bkvf-tt-lsd, normal)); word-spacing: var(--bkvf-tt-wst, var(--bkvf-tt-wsd, normal)); } .bkbg-vf-subtitle { font-size: var(--bkvf-st-fst1, var(--bkvf-st-fsd, 16px)); line-height: var(--bkvf-st-lht, var(--bkvf-st-lhd, 1.5)); letter-spacing: var(--bkvf-st-lst, var(--bkvf-st-lsd, normal)); word-spacing: var(--bkvf-st-wst, var(--bkvf-st-wsd, normal)); } .bkbg-vf-caption { font-size: var(--bkvf-cp-fst1, var(--bkvf-cp-fsd, 13px)); line-height: var(--bkvf-cp-lht, var(--bkvf-cp-lhd, 1.5)); letter-spacing: var(--bkvf-cp-lst, var(--bkvf-cp-lsd, normal)); word-spacing: var(--bkvf-cp-wst, var(--bkvf-cp-wsd, normal)); } } @media (max-width: 767px) { .bkbg-vf-title { font-size: var(--bkvf-tt-fsm, var(--bkvf-tt-fst1, var(--bkvf-tt-fsd, 28px))); line-height: var(--bkvf-tt-lhm, var(--bkvf-tt-lht, var(--bkvf-tt-lhd, 1.2))); letter-spacing: var(--bkvf-tt-lsm, var(--bkvf-tt-lst, var(--bkvf-tt-lsd, normal))); word-spacing: var(--bkvf-tt-wsm, var(--bkvf-tt-wst, var(--bkvf-tt-wsd, normal))); } .bkbg-vf-subtitle { font-size: var(--bkvf-st-fsm, var(--bkvf-st-fst1, var(--bkvf-st-fsd, 16px))); line-height: var(--bkvf-st-lhm, var(--bkvf-st-lht, var(--bkvf-st-lhd, 1.5))); letter-spacing: var(--bkvf-st-lsm, var(--bkvf-st-lst, var(--bkvf-st-lsd, normal))); word-spacing: var(--bkvf-st-wsm, var(--bkvf-st-wst, var(--bkvf-st-wsd, normal))); } .bkbg-vf-caption { font-size: var(--bkvf-cp-fsm, var(--bkvf-cp-fst1, var(--bkvf-cp-fsd, 13px))); line-height: var(--bkvf-cp-lhm, var(--bkvf-cp-lht, var(--bkvf-cp-lhd, 1.5))); letter-spacing: var(--bkvf-cp-lsm, var(--bkvf-cp-lst, var(--bkvf-cp-lsd, normal))); word-spacing: var(--bkvf-cp-wsm, var(--bkvf-cp-wst, var(--bkvf-cp-wsd, normal))); } }