:root {
  --cookie: #c98b4f;
  --chip: #5a3320;
}

/* Loading State */

body.is-loading {
  overflow: hidden;
}

/* Loader Overlay */

.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;

  overflow: hidden;

  transition:
    opacity 0.7s ease,
    visibility 0.7s ease;
}

body.loaded .loader-overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Stars */

.loader-stars,
.loader-stars::before,
.loader-stars::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.loader-stars {
  z-index: 1;

  background:
    radial-gradient(4px 4px at 10% 18%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(3px 3px at 22% 74%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(4px 4px at 35% 38%, rgba(255,255,255,1), transparent 60%),
    radial-gradient(3px 3px at 48% 14%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(4px 4px at 62% 70%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(3px 3px at 74% 28%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(4px 4px at 86% 56%, rgba(255,255,255,1), transparent 60%),
    radial-gradient(3px 3px at 94% 16%, rgba(255,255,255,0.9), transparent 60%);

  animation: loaderTwinkleA 6s ease-in-out infinite;

  opacity: 0.95;
}

.loader-stars::before {
  background:
    radial-gradient(3px 3px at 16% 58%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(4px 4px at 30% 84%, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(3px 3px at 56% 22%, rgba(255,255,255,0.85), transparent 60%),
    radial-gradient(4px 4px at 70% 44%, rgba(255,255,255,1), transparent 60%),
    radial-gradient(3px 3px at 88% 82%, rgba(255,255,255,0.9), transparent 60%);

  animation: loaderTwinkleB 9s ease-in-out infinite;

  opacity: 0.7;
}

.loader-stars::after {
  background:
    radial-gradient(7px 7px at 18% 26%, rgba(255,255,255,0.25), transparent 72%),
    radial-gradient(7px 7px at 78% 68%, rgba(255,255,255,0.22), transparent 72%);

  animation: loaderTwinkleC 12s ease-in-out infinite;

  opacity: 0.35;
}

/* Loader Content */

.loader-wrap {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 20px;

  text-align: center;

  padding: 24px;
}

/* Cookie */

.cookie-scene {
  position: relative;
  width: 140px;
  height: 140px;
}

.cookie {
  position: absolute;
  inset: 0;

  margin: auto;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14) 0 10%, transparent 11%),
    var(--cookie);

  box-shadow:
    inset 0 -8px 0 rgba(0,0,0,0.14),
    0 10px 30px rgba(0,0,0,0.4);

  animation: cookieBob 1.8s ease-in-out infinite;
}

/* Chocolate Chips */

.chip {
  position: absolute;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: var(--chip);

  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}

.chip.c1 { top: 22px; left: 28px; }
.chip.c2 { top: 24px; right: 30px; }
.chip.c3 { top: 50px; left: 18px; }
.chip.c4 { top: 55px; left: 54px; }
.chip.c5 { top: 48px; right: 22px; }
.chip.c6 { bottom: 28px; left: 30px; }
.chip.c7 { bottom: 24px; left: 60px; }
.chip.c8 { bottom: 30px; right: 24px; }

/* Bites */

.bite {
  position: absolute;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  background: #000;

  opacity: 0;
  transform: scale(0.6);

  animation: biteIn 0.25s ease forwards;
}

.bite.b1 {
  top: 10px;
  right: 6px;
  animation-delay: 0.35s;
}

.bite.b2 {
  top: 30px;
  right: -2px;
  animation-delay: 0.75s;
}

.bite.b3 {
  top: 54px;
  right: 4px;
  animation-delay: 1.15s;
}

/* Crumbs */

.crumb {
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #c98b4f;

  opacity: 0;

  animation: crumbPop 0.5s ease forwards;
}

.crumb.cr1 {
  right: -8px;
  top: 42px;
  animation-delay: 0.82s;
}

.crumb.cr2 {
  right: -18px;
  top: 58px;
  animation-delay: 1.18s;
}

.crumb.cr3 {
  right: 2px;
  top: 82px;
  animation-delay: 1.25s;
}

/* Text */

.loader-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #f8f2ea;
}

.loader-subtitle {
  font-size: 0.93rem;
  color: rgba(246, 241, 234, 0.72);
}

.loader-dots::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}

/* Animations */

@keyframes loaderTwinkleA {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes loaderTwinkleB {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes loaderTwinkleC {
  0%, 100% { opacity: 0.18; }
  50% { opacity: 0.4; }
}

@keyframes cookieBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes biteIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes crumbPop {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.6);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(10px) scale(1);
  }
}

@keyframes dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
  100% { content: ""; }
}

/* Mobile */

@media (max-width: 640px) {

  .cookie-scene {
    width: 120px;
    height: 120px;
  }

  .cookie {
    width: 102px;
    height: 102px;
  }

}

html.skip-loader .loader-overlay {
  display: none !important;
}

html.skip-loader body {
  overflow: auto !important;
}

html.skip-loader .page {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

html.skip-loader * {
  animation-delay: 0s !important;
}