.ch-loading-spinner-wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

/* Animated background particles */
.ch-loading-spinner-wrapper::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(191, 54, 84, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: backgroundMove 20s linear infinite;
  opacity: 0.3;
}

@keyframes backgroundMove {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

.ch-loading-spinner {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

/* Outer rotating ring with gradient */
.ch-loading-spinner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top: 4px solid #BF3654;
  border-right: 4px solid #D44A6A;
  border-bottom: 4px solid #E85C7A;
  border-left: 4px solid #BF3654;
  border-radius: 50%;
  animation: spinRotate 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  box-shadow: 0 0 30px rgba(191, 54, 84, 0.3), 
              0 0 60px rgba(191, 54, 84, 0.2),
              inset 0 0 20px rgba(191, 54, 84, 0.1);
}

/* Middle pulsing ring */
.ch-loading-spinner::after {
  content: "";
  position: absolute;
  width: 70px;
  height: 70px;
  border: 3px solid transparent;
  border-top: 3px solid #BF3654;
  border-right: 3px solid #D44A6A;
  border-radius: 50%;
  animation: spinReverse 1s linear infinite, pulseGlow 2s ease-in-out infinite;
  box-shadow: 0 0 25px rgba(191, 54, 84, 0.5),
              inset 0 0 15px rgba(191, 54, 84, 0.2);
}

/* Logo center container */
.ch-loading-spinner .logo-center {
  position: absolute;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  animation: logoBounce 1.2s ease-in-out infinite;
  padding: 12px;
  box-sizing: border-box;
}

/* Logo image */
.ch-loading-spinner .logo-center .loader-logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(191, 54, 84, 0.6))
          drop-shadow(0 0 30px rgba(191, 54, 84, 0.4));
  animation: logoPulse 1.5s ease-in-out infinite;
}

/* Floating popcorn particles */
.ch-loading-spinner > span {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, #BF3654, #D44A6A);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
  animation: popcornFloat 2.5s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(191, 54, 84, 0.6);
}

.ch-loading-spinner > span:nth-child(1) {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  animation-delay: 0s;
  transform: rotate(0deg);
}

.ch-loading-spinner > span:nth-child(2) {
  top: 50%;
  right: -10px;
  margin-top: -5px;
  animation-delay: 0.4s;
  transform: rotate(90deg);
}

.ch-loading-spinner > span:nth-child(3) {
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  animation-delay: 0.8s;
  transform: rotate(180deg);
}

.ch-loading-spinner > span:nth-child(4) {
  top: 50%;
  left: -10px;
  margin-top: -5px;
  animation-delay: 1.2s;
  transform: rotate(270deg);
}

/* Animations */
@keyframes spinRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 25px rgba(191, 54, 84, 0.5),
                inset 0 0 15px rgba(191, 54, 84, 0.2);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(191, 54, 84, 0.8),
                inset 0 0 25px rgba(191, 54, 84, 0.4);
  }
}

@keyframes logoBounce {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.05) rotate(2deg);
  }
  50% {
    transform: scale(0.98) rotate(-2deg);
  }
  75% {
    transform: scale(1.02) rotate(1deg);
  }
}

@keyframes logoPulse {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 15px rgba(191, 54, 84, 0.6))
            drop-shadow(0 0 30px rgba(191, 54, 84, 0.4));
  }
  50% {
    opacity: 0.9;
    filter: drop-shadow(0 0 25px rgba(191, 54, 84, 0.8))
            drop-shadow(0 0 45px rgba(191, 54, 84, 0.6))
            drop-shadow(0 0 60px rgba(191, 54, 84, 0.3));
  }
}

/* Home page loader — sleek orbital brand mark */
.home-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 34% at 50% 46%, rgba(90, 24, 42, 0.55) 0%, transparent 58%),
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(20, 12, 16, 0.9) 0%, transparent 55%),
    linear-gradient(180deg, #121212 0%, #0a0a0a 100%);
  animation: home-loader-enter 0.55s ease-out both;
}

.home-loader__glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(70vw, 420px);
  height: min(70vw, 420px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(191, 54, 84, 0.16) 0%, transparent 68%);
  filter: blur(8px);
  pointer-events: none;
  animation: home-loader-breathe 4s ease-in-out infinite;
}

.home-loader__stage {
  position: relative;
  width: 236px;
  height: 236px;
  flex: 0 0 auto;
  animation: home-loader-stage-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-loader__halo,
.home-loader__ring,
.home-loader__sweep {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.home-loader__halo {
  width: 198px;
  height: 198px;
  background: radial-gradient(circle, rgba(255, 70, 130, 0.2) 0%, rgba(255, 40, 100, 0.05) 45%, transparent 70%);
  filter: blur(1.5px);
  animation: home-loader-breathe 3.4s ease-in-out infinite;
}

.home-loader__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  object-fit: contain;
  border-radius: 50%;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 180, 200, 0.18),
    0 0 18px rgba(191, 54, 84, 0.45);
  animation: home-loader-mark 2.8s ease-in-out infinite;
  pointer-events: none;
}

.home-loader__ring--guide {
  width: 210px;
  height: 210px;
  border: 1px dashed rgba(255, 150, 180, 0.18);
  animation: home-loader-spin-center 18s linear infinite;
}

.home-loader__ring--outer {
  width: 172px;
  height: 172px;
  border: 1.5px solid rgba(255, 96, 148, 0.88);
  box-shadow:
    0 0 8px rgba(255, 70, 130, 0.75),
    0 0 22px rgba(255, 40, 110, 0.28);
}

.home-loader__ring--mid {
  width: 128px;
  height: 128px;
  border: 1px solid rgba(255, 140, 175, 0.38);
}

.home-loader__ring--inner {
  width: 108px;
  height: 108px;
  border: 1px solid rgba(255, 180, 205, 0.22);
}

.home-loader__sweep {
  width: 172px;
  height: 172px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 255deg,
    rgba(255, 140, 180, 0.08) 295deg,
    rgba(255, 210, 225, 0.95) 340deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 1.25px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 1.25px));
  filter: drop-shadow(0 0 7px rgba(255, 90, 150, 0.85));
  animation: home-loader-spin-center 2s linear infinite;
}

.home-loader__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
  animation: home-loader-spin 2.6s linear infinite;
}

.home-loader__orbit--a {
  width: 172px;
  height: 172px;
  margin: -86px 0 0 -86px;
}

.home-loader__orbit--b {
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  animation-duration: 4.2s;
  animation-direction: reverse;
}

.home-loader__orbit--c {
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  animation-duration: 3.4s;
}

.home-loader__dot {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #fff7fb;
  box-shadow:
    0 0 6px #fff,
    0 0 14px #ff6b9d,
    0 0 24px rgba(255, 50, 120, 0.75);
}

.home-loader__dot--sm {
  top: -3px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: #ffc0d4;
  box-shadow:
    0 0 6px #ff8ab0,
    0 0 12px rgba(255, 60, 120, 0.5);
}

.home-loader__dot--xs {
  top: -2px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: rgba(255, 210, 225, 0.9);
  box-shadow: 0 0 8px rgba(255, 120, 160, 0.55);
}

.home-loader__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: home-loader-meta-in 0.75s ease 0.12s both;
}

.home-loader__label {
  margin: 0;
  color: #f4ebe3;
  font-family: "Onest", sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.34em;
  line-height: 1;
  text-indent: 0.34em;
  text-transform: none;
  text-shadow: 0 0 18px rgba(255, 90, 140, 0.28);
}

.home-loader__track {
  position: relative;
  display: block;
  width: 112px;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.home-loader__progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #ff7aa8 35%, #fff 55%, #ff7aa8 75%, transparent);
  box-shadow: 0 0 10px rgba(255, 100, 150, 0.55);
  animation: home-loader-progress 1.5s ease-in-out infinite;
}

@keyframes home-loader-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

@keyframes home-loader-meta-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes home-loader-spin-center {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes home-loader-mark {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes home-loader-breathe {
  0%, 100% {
    opacity: 0.65;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes home-loader-progress {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(280%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-loader,
  .home-loader__glow,
  .home-loader__stage,
  .home-loader__meta,
  .home-loader__halo,
  .home-loader__logo,
  .home-loader__sweep,
  .home-loader__orbit,
  .home-loader__ring--guide,
  .home-loader__progress {
    animation: none;
  }
}

@keyframes popcornFloat {
  0%, 100% {
    transform: scale(0) translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: scale(1) translateY(-20px) rotate(45deg);
  }
  30% {
    opacity: 0.8;
    transform: scale(1.2) translateY(-40px) rotate(90deg);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.9) translateY(-60px) rotate(135deg);
  }
  70% {
    opacity: 0.3;
    transform: scale(0.7) translateY(-80px) rotate(180deg);
  }
  90% {
    opacity: 0.1;
    transform: scale(0.5) translateY(-100px) rotate(225deg);
  }
}