/* Keep the image and fire anchors in the same uncropped 3:1 coordinate space. */
.royal-banner.kvk-banner.beacon-banner{position:relative;display:block;padding:0;min-height:0;background:#10191d;border-bottom:1px solid #655b43}
html[dir=rtl] .royal-banner.beacon-banner{background:#10191d}
.beacon-scene{position:relative;aspect-ratio:3/1;width:100%;overflow:hidden;direction:ltr}
.beacon-scene>img{display:block;width:100%;height:100%;object-fit:contain}
.beacon-banner .kvk-banner-copy{padding:20px 28px;background:linear-gradient(110deg,#182328,#10191d)}
.beacon-banner .kvk-banner-copy h2{margin-bottom:6px}
.beacon{position:absolute;width:2.5%;height:12%;transform:translate(-50%,-100%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.beacon.is-lit{opacity:1}
.beacon-1{left:3.85%;top:27.8%}.beacon-2{left:13.37%;top:38.8%}.beacon-3{left:22.5%;top:43.2%}.beacon-4{left:32.8%;top:48%}.beacon-5{left:43.1%;top:52%}
.beacon-6{left:94.2%;top:51.3%;width:5.6%;height:24%}
.beacon i{position:absolute;display:block;animation-play-state:paused}
.beacon.is-lit i{animation-play-state:running}
.beacon-flame{inset:0 0 -5%;background:url('/assets/beacon-fire.webp') center/100% 100% no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 90%,transparent)}
.beacon-core,.beacon-smoke{display:none!important}
.beacon-glow{inset:30% -40% -35%;background:radial-gradient(ellipse,#ff951425,transparent 68%)}
/* The artwork stays still; only two tiny embers drift above each lit fire. */
.beacon::before,.beacon::after{content:'';position:absolute;left:46%;top:35%;width:2.5px;height:2.5px;border-radius:50%;background:#ffd88b;opacity:0;box-shadow:0 0 4px #ffb958aa;animation:beacon-ember 4.2s ease-out infinite;animation-play-state:paused}
.beacon::after{left:62%;top:44%;width:2px;height:2px;animation-duration:5.4s;animation-delay:-2.7s}
.beacon.is-lit::before,.beacon.is-lit::after{animation-play-state:running}
.beacon:nth-child(odd)::before{animation-delay:-2.1s}.beacon:nth-child(3n)::before{animation-delay:-4.3s}.beacon:nth-child(even)::after{animation-delay:-5.6s}
@keyframes beacon-ember{0%,8%{transform:translate(0,0) scale(.7);opacity:0}20%{opacity:.85}52%{transform:translate(3px,-16px) scale(.9);opacity:.6}85%,100%{transform:translate(7px,-32px) scale(.4);opacity:0}}
@media(min-width:801px){
 .royal-banner.kvk-banner.beacon-banner{height:200px;overflow:hidden}
 .beacon-banner .beacon-scene{position:absolute;left:0;top:50%;width:100%;transform:translateY(-40%)}
 .beacon-banner .kvk-banner-copy{position:relative;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;height:100%;width:100%;padding:18px 28px;background:linear-gradient(90deg,#10191de8 0%,#10191d99 25%,#10191d33 48%,transparent 70%)}
 .beacon-banner .kvk-banner-copy h2{font-size:24px}
 html[dir=rtl] .beacon-banner .kvk-banner-copy{text-align:right;background:linear-gradient(270deg,#10191de8 0%,#10191d99 25%,#10191d33 48%,transparent 70%)}
}
@media(max-width:600px){.beacon-banner .kvk-banner-copy{padding:16px 20px}.beacon-banner .kvk-banner-copy h2{font-size:22px}.beacon-flame{filter:drop-shadow(0 0 2px #ff981c)}}
@media(prefers-reduced-motion:reduce){.beacon::before,.beacon::after{display:none}}
html.beacons-paused .beacon i,html.beacons-paused .beacon::before,html.beacons-paused .beacon::after{animation-play-state:paused}

/* Guest visibility takes precedence over beacon layout rules. */
.royal-banner[hidden],body.signed-out .royal-banner{display:none!important}