:root {
  /* blue gradient: bright on top → dark blue at the bottom */
  --pink-deep: #06183f;
  --pink-hot: #1f6ee0;
  --pink-bright: #48a8ff;
  --cream: #fff6ee;
  --yellow: #ffd93d;
  --line: rgba(255,255,255,0.85);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: var(--pink-hot);
  font-family: 'Montserrat', sans-serif;
}

#loading-screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;   /* fill the small viewport on mobile — no gap at the bottom */
  background:
    radial-gradient(125% 100% at 50% 4%, var(--pink-bright) 0%, var(--pink-hot) 42%, var(--pink-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

#loading-screen.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------------- decorations ---------------- */

.decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.deco-item {
  position: absolute;
  top: 0;
  will-change: transform;
  animation: fall var(--dur, 10s) linear infinite;
  filter: drop-shadow(0 5px 7px rgba(0,18,55,0.38));
}
.deco-item svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* candy rains down from above and loops */
@keyframes fall {
  from { transform: translateY(-20vh) rotate(var(--rot, 0deg)); }
  to   { transform: translateY(118vh) rotate(calc(var(--rot, 0deg) + 24deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .deco-item { animation-play-state: paused; }
}

/* ---------------- title ---------------- */

.loading-content {
  position: relative;
  z-index: 2;
  /* Its own layer. Each piece of falling candy is one (will-change above),
     and with forty-odd of them moving the browser sometimes composited the
     candy over this block and left the logo unpainted: a blank blue middle
     with candy drawn over the words, though z-index says otherwise. Promoting
     the block keeps the order the z-index gives. */
  will-change: transform;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 20px;
}

/* The POPROCKS sticker (assets/poprocks-logo.webp, cut out of its black
   background). About as wide as the lettering it replaced: 8 letters at up
   to 112px. The shadow lifts it off the candy the way the old 3D letters'
   extrude did, and it bounces on hover as each letter did, more gently. */
.title {
  margin: 0;
  line-height: 0;
  user-select: none;
}

.title-logo {
  display: block;
  width: clamp(260px, 62vw, 620px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 20, 55, 0.28));
  cursor: default;
  -webkit-user-drag: none;
}

.title-logo:hover {
  animation: logo-pop 0.5s cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce) {
  .title-logo:hover { animation: none; }
}

/* the letters' squash and stretch, scaled down for a whole logo */
@keyframes logo-pop {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.07, 0.94) rotate(-2deg); }
  55%  { transform: scale(0.97, 1.04) rotate(1.5deg); }
  75%  { transform: scale(1.02, 0.99) rotate(-0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* subtitle / footer */

.subtitle, .footer {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--cream);
}

.subtitle-text {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 4px;
  white-space: nowrap;   /* one line always: at 375px it broke after "A MUSIC" */
}

.footer-text {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 3px;
  opacity: 0.85;
}

.footer {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  will-change: transform;      /* above the candy, as .loading-content (see there) */
}
@media (max-width: 640px) {
  .footer { display: none; }   /* hide EST. 2024 on mobile */
}

.line {
  width: 46px;
  height: 1px;
  background: var(--line);
  opacity: 0.7;
}
/* The subtitle row is 335.2px wide (46 + 14 + 215.2 + 14 + 46) and a phone
   375px wide gives it 335px inside the padding. Shorter rules on narrow
   screens, so the unwrapped words fit instead of pushing the rules off the
   sides. Only the subtitle's: the footer's are hidden below 640px anyway. */
@media (max-width: 380px) {
  .subtitle .line { width: 24px; }
}

/* ---------------- loader ---------------- */

.loader {
  position: relative;
  width: min(340px, 70vw);
  height: 60px;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
}

.track-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--cream);
  border-radius: 2px;
  transition: width 0.05s linear;
}

.percent {
  position: absolute;
  right: 0;
  bottom: calc(50% + 8px);   /* sit just above the right end of the line */
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--cream);
  min-width: 24px;
  text-align: right;
}

/* ---------------- white flash before leaving for the artists page ---------------- */

#whiteout {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
#whiteout.show { opacity: 1; }

/* the scrollbar is the shared cake in assets/scrollbar.css */