/* Background blur */
.bg-blur {
  background-image: url(assets/01-main_hall-bg-1920.jpg);
  width: 100vw;
  height: 100dvh;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Main content area */
.main {
  background-image: url(assets/01-main_hall-kv-1920.jpg);
  background-size: cover;
  background-position: center;
  width: 100vw;
  position: relative;
  height: calc(100vw * (9 / 16));
  max-width: calc(100dvh * (16 / 9));
  max-height: 100dvh;
}

.main-m {
  background-image: url(assets/03-KV/01-main_hall-kv-375.jpg);
  height: 100dvh;
}
.main-m  span{
  display: none;
}

/* Header section */
.header {
  background-color: #f0f0f0;
  width: 100%;
  max-width: 100%;
  height: 16%;
  max-height: 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5%;
}

.header-m {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: unset;
  max-height: unset;
  padding: 40px 15px  16px;
}
.header-logo-m {
  width: 100%;
}
.header-m div{
  width:100%;
  max-width: 310px;
}

/* Flexbox settings for header children */
.header > * {
  width: 33.333%;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Logo styles */
#logo-gov {
  height: 54%;
  max-height: 98px;
}

#logo-apl {
  height: 77%;
  max-height: 140px;
}

/* Video player styles */
video {
  width: 12.7%;
  height: auto;
  position: absolute;
  top: 43%;
  left: 43.6%;
  max-width: 100%;
}

.video-m {
  width: 33%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 30%);
}

/* Light animation styles */
.light {
  display: inline-block;
  position: absolute;
  height: 19.9074074074%;
  transform-origin: 50% 97%;
  mix-blend-mode: screen;
  -webkit-animation: rotation 3s infinite alternate ease-in-out;
  animation: rotation 3s infinite alternate ease-in-out;
  --initial-rotation: 0deg;
}

/* Keyframes for light rotation animation */
@-webkit-keyframes rotation {
  0% {
    transform: rotate(calc(var(--initial-rotation) + 15deg));
    opacity: 0.5;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--initial-rotation) - 15deg));
    opacity: 1;
  }
}
@keyframes rotation {
  0% {
    transform: rotate(calc(var(--initial-rotation) + 15deg));
    opacity: 0.5;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(calc(var(--initial-rotation) - 15deg));
    opacity: 1;
  }
}

/* Reverse animation direction */
.reverse {
  animation-direction: alternate-reverse;
}

/* APL centre lights positioning and animation settings */
.apl-1 {
  top: 20.5%;
  left: 57.9%;
  --initial-rotation: 25deg;
}
.apl-2 {
  top: 22.5%;
  left: 56.6%;
  --initial-rotation: 125deg;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.apl-3 {
  top: 23.5%;
  left: 55.3%;
  --initial-rotation: 161deg;
}
.apl-4 {
  top: 23.8%;
  left: 39.3%;
  --initial-rotation: 205deg;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.apl-5 {
  top: 22.5%;
  left: 37.7%;
  --initial-rotation: 216deg;
}
.apl-6 {
  top: 20.5%;
  left: 36.5%;
  --initial-rotation: 253deg;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.apl-7 {
  top: 16.5%;
  left: 34.9%;
  --initial-rotation: -73deg;
}
.apl-8 {
  top: 11.5%;
  left: 34.9%;
  --initial-rotation: -57deg;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.apl-9 {
  top: 10.5%;
  left: 36.2%;
  --initial-rotation: -23deg;
}
.apl-10 {
  top: 8.5%;
  left: 37.6%;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.apl-11 {
  top: 5.2%;
  left: 40.4%;
  --initial-rotation: 0deg;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}

.apl-rt1 {
  top: 4.5%;
  left: 43.8%;
  --initial-rotation: 0deg;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.apl-rt2 {
  top: 6%;
  left: 45.9%;
  --initial-rotation: 37deg;
}
.apl-rt3 {
  top: 8%;
  left: 47.6%;
  --initial-rotation: 37deg;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
.apl-rt4 {
  top: 9.6%;
  left: 49.3%;
  --initial-rotation: 37deg;
}
.apl-rt5 {
  top: 11.6%;
  left: 51.3%;
  --initial-rotation: 37deg;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.apl-rt6 {
  top: 15.5%;
  left: 54.6%;
  --initial-rotation: 38deg;
}
.apl-rt7 {
  top: 17.5%;
  left: 52.6%;
  --initial-rotation: 20deg;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.apl-rt8 {
  top: 20.5%;
  left: 50%;
}
.apl-rt9 {
  top: 20.5%;
  left: 45%;
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}

.apl-rt10 {
  top: 17.5%;
  left: 42.1%;
  --initial-rotation: -20deg;
}

.apl-rt11 {
  top: 14.5%;
  left: 39.1%;
  --initial-rotation: -56deg;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
.apl-rt12 {
  top: 9.5%;
  left: 39.1%;
  --initial-rotation: -17deg;
}
.apl-rt13 {
  top: 7.5%;
  left: 41.1%;
  --initial-rotation: -26deg;
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
.apl-rt14 {
  top: 6.5%;
  left: 42.1%;
  --initial-rotation: -10deg;
}

/* Stadium light positioning and animation settings */
.stadium-s1 {
  top: 50%;
  left: 77.5%;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  --initial-rotation: -25deg;
}
.stadium-s2 {
  top: 50%;
  left: 85%;
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  --initial-rotation: 25deg;
}
.stadium-s3 {
  top: 61%;
  left: 79%;
  --initial-rotation: -15deg;
}
.stadium-s4 {
  top: 61%;
  left: 83.7%;
  --initial-rotation: 15deg;
}

/* main button styles */
.main-btn {
  width: 13.9583333333%;
  height: 10.8333333333%;
  background-image: url('assets/main-btn-default.png');
  background-size: cover;
  display: block;
  position: absolute;
  transform: translateX(-50%);
  bottom: 3.7037037037%;
  left: 50%;
}

.main-btn-m{
  width: calc((230 / 375) * 100vw); 
  height: calc((100 / 230) * (230 / 375) * 100vw); 
}

.main-btn::after {
  content: url('assets/main-btn-hover.png');
  display: none; /* Preload the hover image to avoid flickering */
}

.main-btn:hover {
  background-image: url('assets/main-btn-hover.png');
}