html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

main {
  width: 100%;
  height: 100%;
  height: 100dvh;
  justify-content: center;
  align-items: center;
}

section {
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 480px;
}

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.redirect-btn {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  z-index: 2;
}

.redirect-btn a {
  display: block;
  text-decoration: none;
}

.redirect-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Overlay element animations ── */
.element-anim-shake {
  animation: anim-shake infinite;
}

.element-anim-heartbeat {
  animation: anim-heartbeat infinite;
}

@keyframes anim-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes anim-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  70% { transform: scale(1); }
}

/* ── Element1 slider transitions ── */
.element-slider-img.exit-animation-slide {
  animation: slide-exit 0.5s ease forwards;
}

.element-slider-img.add-animation-slide {
  animation: slide-enter 0.5s ease forwards;
}

@keyframes slide-exit {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}

@keyframes slide-enter {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Popup ── */
.popup-show {
  animation: popup-in 0.3s ease forwards;
}

@keyframes popup-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}