@import url("https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Manrope:wght@800&display=swap");

.coco-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  transition: transform 0.45s ease;
}

.coco-loader.is-out {
  pointer-events: none;
  transform: translateY(-100%);
}

.coco-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 5vh, 2.5rem);
  width: min(100%, 40rem);
}

.coco-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  animation: coco-float 2s ease-in-out infinite;
}

.coco-mark {
  margin: 0;
  max-width: 92vw;
  font-family: "Bagel Fat One", "Arial Black", sans-serif;
  font-size: clamp(2.7rem, 16vw, 8.4rem);
  font-weight: 400;
  line-height: 0.82;
  letter-spacing: -0.03em;
  text-align: center;
  overflow-wrap: anywhere;
  color: #fff;
  -webkit-text-stroke: 0.055em #161412;
  paint-order: stroke fill;
  filter: drop-shadow(0.055em 0.07em 0 rgb(40 36 32 / 18%));
}

.coco-logo {
  display: block;
  width: auto;
  max-width: min(86vw, 32rem);
  max-height: min(38dvh, 18rem);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0.35rem 0.45rem 0 rgb(40 36 32 / 16%));
}

.coco-sub {
  margin: 0.35rem 0 0;
  max-width: 90vw;
  font-family: Manrope, sans-serif;
  font-size: clamp(0.78rem, 2.8vw, 0.95rem);
  font-weight: 800;
  letter-spacing: 0.28em;
  line-height: 1.2;
  text-align: center;
  text-transform: lowercase;
  overflow-wrap: anywhere;
  color: #161412;
}

.coco-track {
  width: clamp(9.5rem, 62vw, 18rem);
  height: clamp(0.72rem, 2.4vw, 1rem);
  box-sizing: border-box;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.coco-bar {
  width: 0;
  height: 100%;
  border-radius: 999px;
}

@keyframes coco-float {
  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@media (max-height: 520px) {
  .coco-mark { font-size: clamp(2.2rem, 14vh, 4.6rem); }
  .coco-logo { max-height: 30dvh; }
  .coco-loader-content { gap: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .coco-lockup { animation: none; }
  .coco-loader { transition: none; }
}