/* Version B artwork and scene styles from Interactive_Footer_code.zip. */
/* Official hkele.com.hk footer styling; the engraving remains a separate scene. */
.bbe-illustrated-footer { background: #0b132b; overflow: hidden; }
.bbe-live-footer {
  position: relative;
  z-index: auto;
  background: linear-gradient(to bottom, #10193a, #0b132b);
  color: #fff;
  font: 16px/1.5 "Manrope", "Noto Sans HK", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.bbe-live-footer :is(a, button, input):focus-visible { outline: 2px solid #c8a24a; outline-offset: 3px; }
.bbe-live-footer a { cursor: pointer; }
.bbe-live-footer svg { display: block; vertical-align: middle; flex-shrink: 0; }
.bbe-live-footer .bbe-payment-art { width: min(100%, 720px); min-width: 0; box-sizing: border-box; }
.bbe-live-footer .bbe-payment-logos { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; }
.bbe-live-footer [data-bbe-whatsapp-float] { z-index: 99; }
@media (min-width: 768px) { .bbe-live-footer .bbe-payment-art { width: min(100%, 400px); } }
@media (max-width: 767px) { .bbe-live-footer [data-bbe-footer-main-grid] > [data-bbe-footer-showrooms] { order: -1; } }
@media (min-width: 640px) {
  .bbe-live-footer [data-bbe-whatsapp-float] { width: 42px; height: 42px; gap: 0; padding: 0; }
  .bbe-live-footer [data-bbe-whatsapp-float] > span:last-child { width: 42px; height: 42px; gap: 0; padding: 0; justify-content: center; }
  .bbe-live-footer [data-bbe-whatsapp-float] > span:last-child > span:first-child { width: 24.5px; height: 24.5px; background: transparent; color: #fff; }
  .bbe-live-footer [data-bbe-whatsapp-float] > span:last-child svg { width: 24.5px; height: 24.5px; }
  .bbe-live-footer [data-bbe-whatsapp-float] > span:last-child > span:last-child { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .bbe-live-footer [data-bbe-whatsapp-float]:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
}
/* The scene filter maps this source navy to the official footer's lower edge. */
.bbe-illustrated-footer .bbe-footer-scene::after { height: 24px; z-index: 5; background: linear-gradient(#102b55, transparent); }

.bbe-footer-scene { position: relative; aspect-ratio: 4 / 1; overflow: hidden; pointer-events: none; filter: url(#bbe-engraving-ivory); }
.bbe-footer-scene::after { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 24px; background: linear-gradient(#102b55, transparent); }
.bbe-footer-scene img, .bbe-footer-scene video { position: absolute; bottom: 0; display: block; width: 100%; height: auto; max-width: none; user-select: none; }
.bbe-footer-scene video { opacity: 0; transition: opacity 1.2s ease; filter: url(#bbe-harbour-navy); }
.bbe-harbour-film[data-video-ready="true"] video { opacity: 1; }
@media (max-width: 767px) { .bbe-footer-scene { aspect-ratio: 3.5 / 1; } }
@media (prefers-reduced-motion: reduce) { .bbe-footer-scene video { display: none; transition: none; } }

.bbe-wheel-frame { position: absolute; z-index: 1; bottom: 0; width: 100%; aspect-ratio: 3 / 1; pointer-events: none; }
.bbe-footer-scene .bbe-wheel { position: absolute; left: 77.3941%; top: 68.0939%; bottom: auto; width: 2.48619%; height: auto; transform: translate(-50%, -50%) rotate(0deg); transform-origin: center; animation: bbe-wheel-turn 180s linear infinite; animation-play-state: paused; }
.bbe-harbour-film[data-motion="on"] .bbe-wheel { animation-play-state: running; }
@keyframes bbe-wheel-turn { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bbe-footer-scene .bbe-wheel { animation: none; } }

.bbe-junk-frame { position: absolute; z-index: 2; bottom: 0; width: 100%; aspect-ratio: 3 / 1; pointer-events: none; }
.bbe-junk-position { position: absolute; left: 100%; top: 66.4365%; width: 6.16943%; aspect-ratio: 134 / 92; animation: bbe-junk-sail 192s linear infinite; animation-play-state: paused; will-change: transform; }
.bbe-junk-float { position: relative; width: 100%; height: 100%; animation: bbe-junk-float 8s ease-in-out infinite; animation-play-state: paused; will-change: transform; }
.bbe-footer-scene .bbe-junk-sprite { position: relative; width: 100%; height: auto; bottom: auto; }
.bbe-footer-scene .bbe-junk-wake { position: absolute; width: 200%; height: auto; left: 0; bottom: -1%; opacity: .3; }
.bbe-footer-scene .bbe-foreground { z-index: 3; pointer-events: none; }
.bbe-footer-scene .bbe-trunk { z-index: 4; width: 15.1934%; left: 0; bottom: 0; pointer-events: none; }
.bbe-harbour-film[data-motion="on"] .bbe-junk-position, .bbe-harbour-film[data-motion="on"] .bbe-junk-float { animation-play-state: running; }
@keyframes bbe-junk-sail { from { transform: translate3d(0,0,0); } to { transform: translate3d(-1720.8955%,0,0); } }
@keyframes bbe-junk-float { 0%,100% { transform: translate3d(0,-.6%,0) rotate(-.08deg); } 50% { transform: translate3d(0,.6%,0) rotate(.08deg); } }
@media (prefers-reduced-motion: reduce) { .bbe-junk-position { animation: none; left: 85%; } .bbe-junk-float { animation: none; } }

/* Responsive layouts retain the full composition without motion or video. */
.bbe-harbour-film[data-static="true"] .bbe-wheel,
.bbe-harbour-film[data-static="true"] .bbe-junk-position,
.bbe-harbour-film[data-static="true"] .bbe-junk-float { animation: none; will-change: auto; }
.bbe-harbour-film[data-static="true"] .bbe-junk-position { left: 85%; transform: none; }
.bbe-harbour-film[data-static="true"] .bbe-junk-float { transform: none; }

/* Match the export utility geometry without global Tailwind registrations. */
.bbe-illustrated-footer{display:block;position:relative;box-sizing:border-box;z-index:auto;font:16px/1.5 "Manrope","Noto Sans HK",ui-sans-serif,system-ui,sans-serif;color:#000}
.bbe-footer-export h4{line-height:inherit}
.bbe-footer-export>.bbe-harbour-film>svg{position:absolute;width:0;height:0}
@media(min-width:640px){.bbe-footer-export [data-bbe-whatsapp-float]>span:last-child{display:flex!important}}