/* ===============================
   Confetti loader — 70×70 component
================================= */
.loaderConfetti {
  width: 60px;
  height: 60px;
  position: relative;
  flex-shrink: 0;
}

.lcPiece {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  will-change: transform;
}

.lcBling { background-image: url('../assets/index/bling.svg'); }
.lcPlus  { background-image: url('../assets/index/3.svg'); }
.lcDot   { background-image: url('../assets/index/4.svg'); }
.lcStar  { background-image: url('../assets/index/5.svg'); }

/* Individual pieces — position + size */
.lc1  { width: 6px; height: 6px; top:  3px; left:  3px; animation: lcA 2.2s ease-in-out infinite  0.0s; }
.lc2  { width: 5px; height: 5px; top:  2px; left: 26px; animation: lcB 1.9s ease-in-out infinite -0.5s; }
.lc3  { width: 6px; height: 6px; top:  3px; left: 48px; animation: lcC 2.4s ease-in-out infinite -1.1s; }
.lc4  { width: 5px; height: 5px; top: 16px; left: 52px; animation: lcA 2.0s ease-in-out infinite -0.7s; }
.lc5  { width: 6px; height: 6px; top: 28px; left: 48px; animation: lcB 2.3s ease-in-out infinite -1.6s; }
.lc6  { width: 5px; height: 5px; top: 48px; left: 50px; animation: lcC 1.8s ease-in-out infinite -0.3s; }
.lc7  { width: 6px; height: 6px; top: 52px; left: 30px; animation: lcA 2.1s ease-in-out infinite -1.4s; }
.lc8  { width: 5px; height: 5px; top: 50px; left: 10px; animation: lcB 2.5s ease-in-out infinite -0.9s; }
.lc9  { width: 6px; height: 6px; top: 32px; left:  2px; animation: lcC 1.9s ease-in-out infinite -1.8s; }
.lc10 { width: 5px; height: 5px; top: 16px; left:  8px; animation: lcA 2.3s ease-in-out infinite -0.4s; }
.lc11 { width: 5px; height: 5px; top: 18px; left: 28px; animation: lcB 2.0s ease-in-out infinite -1.2s; }
.lc12 { width: 6px; height: 6px; top: 38px; left: 24px; animation: lcC 2.2s ease-in-out infinite -0.6s; }

/* Animation A — arc with full rotation */
@keyframes lcA {
  0%   { transform: translate(0px,  0px) rotate(  0deg); }
  25%  { transform: translate(4px, -5px) rotate( 90deg); }
  50%  { transform: translate(2px,  5px) rotate(180deg); }
  75%  { transform: translate(-4px, 2px) rotate(270deg); }
  100% { transform: translate(0px,  0px) rotate(360deg); }
}

/* Animation B — float with scale pulse */
@keyframes lcB {
  0%   { transform: translate(0px,  0px) rotate(  0deg) scale(1.00); }
  30%  { transform: translate(-4px, 4px) rotate(108deg) scale(0.82); }
  60%  { transform: translate( 3px,-3px) rotate(216deg) scale(1.12); }
  100% { transform: translate(0px,  0px) rotate(360deg) scale(1.00); }
}

/* Animation C — five-point path */
@keyframes lcC {
  0%   { transform: translate(0px,  0px) rotate(  0deg); }
  20%  { transform: translate( 5px, -5px) rotate( 72deg); }
  40%  { transform: translate(-4px, -3px) rotate(144deg); }
  60%  { transform: translate(-5px,  4px) rotate(216deg); }
  80%  { transform: translate( 3px,  5px) rotate(288deg); }
  100% { transform: translate(0px,  0px) rotate(360deg); }
}

/* ===============================
   Media loader — cycling SVGs (24×24)
================================= */
.mediaCycleLoader {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
}

.mediaCycleLoader .mclPiece {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  animation: mclSwitch 2.4s ease-in-out infinite;
}

.mediaCycleLoader .mclPiece:nth-child(1) { animation-delay:    0s; }
.mediaCycleLoader .mclPiece:nth-child(2) { animation-delay: -1.8s; }
.mediaCycleLoader .mclPiece:nth-child(3) { animation-delay: -1.2s; }
.mediaCycleLoader .mclPiece:nth-child(4) { animation-delay: -0.6s; }

@keyframes mclSwitch {
  0%   { opacity: 0; transform: scale(0.7);  }
  8%   { opacity: 1; transform: scale(1.15); }
  18%  { opacity: 1; transform: scale(1.0);  }
  25%  { opacity: 0; transform: scale(0.7);  }
  100% { opacity: 0; transform: scale(0.7);  }
}

/* ===============================
   Media loading wrapper
================================= */
.mediaLoaderWrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.mediaLoaderWrap img,
.mediaLoaderWrap video {
  display: block;
  width: 100%;
  height: 100%;
}

.mediaLoaderOverlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color0-overlay);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: opacity 0.4s ease;
  z-index: 10;
}

.mediaLoaderOverlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===============================
   Page loader overlay
================================= */
.pageLoader {
  position: fixed;
  inset: 0;
  background: var(--color0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.4s ease;
}

.pageLoader.is-hidden {
  opacity: 0;
  pointer-events: none;
}