/* Fruitfall loader: covers the page from first paint, plays a two-second "fill a row, burst it"
   loop, and fades into the game once it has booted (js/loader.js). Sized from the viewport, so
   it fits phones, tablets and desktop in portrait or landscape. Fonts come from fonts.css. */
.ff-loader {
  /* Game paper. For the intro video's plum look use:
     --ld-ground:#3a1f5c; --ld-ink:#f4eefb; --ld-accent:#ff8fb1; --ld-dot:#4d3470; --ld-cell:#4d3470; */
  --ld-ground: #fdfbf7; --ld-ink: #2d2d2d; --ld-accent: #ff4d4d; --ld-dot: #e5e0d8; --ld-cell: #efe9df;
  --ld-w: min(92vw, 600px, 110vh);
  --ld-cell-size: calc(var(--ld-w) / 10);
  position: fixed; inset: 0; z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(12px, 3.4vmin, 34px);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  background-color: var(--ld-ground);
  background-image: radial-gradient(var(--ld-dot) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ld-ink);
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.ff-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.ff-loader__mark {
  margin: 0; line-height: 1; font-weight: 700;
  font-family: 'Kalam', 'Patrick Hand', 'Comic Sans MS', cursive;
  font-size: clamp(44px, 15vmin, 120px);
  transform: rotate(-3deg);
  animation: ff-mark-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.ff-loader__mark span { color: var(--ld-accent); }

.ff-loader__row {
  position: relative; display: flex; width: var(--ld-w);
  padding: calc(var(--ld-cell-size) * .08) 0;
}
.ff-loader__row::after {
  content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--ld-accent); opacity: 0; z-index: -1;
}
.ff-loader__cell {
  position: relative; flex: 0 0 var(--ld-cell-size); height: var(--ld-cell-size);
  display: grid; place-items: center;
}
.ff-loader__cell::before {
  content: ''; position: absolute; inset: 9%; border-radius: 50%;
  background: var(--ld-cell); border: 2px dashed color-mix(in srgb, var(--ld-ink) 22%, transparent);
}
.ff-loader__drop { position: relative; width: 92%; height: 92%; opacity: 0; }
/* Drop order, set here rather than in style="" attributes so a CSP without 'unsafe-inline' styles still animates. */
.ff-loader__cell:nth-child(1) .ff-loader__drop { --i: 3; }
.ff-loader__cell:nth-child(2) .ff-loader__drop { --i: 7; }
.ff-loader__cell:nth-child(3) .ff-loader__drop { --i: 0; }
.ff-loader__cell:nth-child(4) .ff-loader__drop { --i: 5; }
.ff-loader__cell:nth-child(5) .ff-loader__drop { --i: 9; }
.ff-loader__cell:nth-child(6) .ff-loader__drop { --i: 1; }
.ff-loader__cell:nth-child(7) .ff-loader__drop { --i: 6; }
.ff-loader__cell:nth-child(8) .ff-loader__drop { --i: 2; }
.ff-loader__cell:nth-child(9) .ff-loader__drop { --i: 8; }
.ff-loader__cell:nth-child(10) .ff-loader__drop { --i: 4; }
.ff-loader__drop img { display: block; width: 100%; height: 100%; transform-origin: 50% 90%; }

.ff-loader__caption {
  margin: 0; font-family: 'Patrick Hand', 'Kalam', 'Comic Sans MS', cursive;
  font-size: clamp(16px, 3.6vmin, 24px); color: color-mix(in srgb, var(--ld-ink) 65%, transparent);
}

/* One loop = 2 s: fruit drop in over ~1.5 s, the full row flashes and bursts at 1.65 s. */
.ff-loader.is-playing .ff-loader__drop {
  animation: ff-drop .42s cubic-bezier(.55, 0, 1, .45) calc(var(--i) * 115ms) both;
}
.ff-loader.is-playing .ff-loader__drop img {
  animation: ff-squash .3s ease-out calc(var(--i) * 115ms + 420ms);
}
.ff-loader.is-playing .ff-loader__row { animation: ff-burst .32s ease-in 1.66s forwards; }
.ff-loader.is-playing .ff-loader__row::after { animation: ff-flash .3s ease-out 1.5s; }

@keyframes ff-mark-in { from { opacity: 0; transform: rotate(-3deg) scale(.6); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes ff-drop {
  0% { opacity: 0; transform: translateY(calc(var(--ld-cell-size) * -5)); }
  35% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes ff-squash {
  0% { transform: scale(1.2, .8); }
  55% { transform: scale(.94, 1.06); }
  100% { transform: scale(1, 1); }
}
@keyframes ff-flash { 0% { opacity: 0; } 40% { opacity: .35; } 100% { opacity: 0; } }
@keyframes ff-burst {
  0% { opacity: 1; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .ff-loader__mark { animation: none; }
  .ff-loader.is-playing .ff-loader__drop { animation: ff-fade .25s linear calc(var(--i) * 115ms) both; }
  .ff-loader.is-playing .ff-loader__drop img, .ff-loader.is-playing .ff-loader__row::after { animation: none; }
  .ff-loader.is-playing .ff-loader__row { animation: ff-fade-out .3s linear 1.66s forwards; }
  @keyframes ff-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ff-fade-out { to { opacity: 0; } }
}