/* Full-screen loader shown while the page (incl. videos, images, 3D sections) finishes loading,
   so visitors never see an unstyled/half-rendered flash. Removed automatically after window.load. */

html.is-loading, html.is-loading body {
  overflow: hidden;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: radial-gradient(circle at 50% 42%, #16140a 0%, #000 72%);
  opacity: 1;
  visibility: visible;
  transition: opacity .32s ease, visibility 0s linear 0s;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s ease, visibility 0s linear .32s;
  pointer-events: none;
}

.page-loader.is-hidden .page-loader__coin {
  animation-play-state: paused;
  transform: translateZ(0) rotateY(0deg) scale(0.86);
  transition: transform .32s ease;
}

/* ---------- 3D stage ---------- */
.page-loader__stage {
  position: relative;
  width: 86px;
  height: 86px;
  perspective: 600px;
}

.page-loader__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.22);
  border-top-color: #FFD700;
  border-right-color: #FFD700;
  animation: pageLoaderSpin 1s cubic-bezier(.5, .15, .5, .85) infinite;
}

.page-loader__ring--b {
  inset: -12px;
  border-color: rgba(255, 215, 0, 0.1);
  border-bottom-color: #ffb300;
  border-left-color: #ffb300;
  animation-duration: 1.6s;
  animation-direction: reverse;
}

.page-loader__coin {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: pageLoaderFlip 1.1s cubic-bezier(.45, .05, .55, .95) infinite;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.45));
}

.page-loader__coin img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
}

@keyframes pageLoaderSpin {
  to { transform: rotate(360deg); }
}

@keyframes pageLoaderFlip {
  0%   { transform: rotateY(0deg) translateZ(0); }
  50%  { transform: rotateY(180deg) translateZ(8px); }
  100% { transform: rotateY(360deg) translateZ(0); }
}

/* ---------- brand text ---------- */
.page-loader__brand {
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 15px;
  color: #FFD700;
  opacity: 0;
  animation: pageLoaderFade .5s ease .15s forwards;
}

.page-loader__brand span {
  color: #fff;
  font-weight: 400;
  margin-left: 6px;
}

@keyframes pageLoaderFade {
  to { opacity: 1; }
}