/* Loading — the archive builds itself as polaroids drop in one after another.
   On desktop they fall into a spread-out fanned row (the way the loader always
   was); on a phone they gather into a centred pile. Percentage sits beneath. */

.load-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6vh;
  padding: 4vw;
  position: relative;
  overflow: hidden;
  /* same scattered starfield as the object view — keeps the spatial feel */
  background-color: var(--color-bg);
  background-image:
    radial-gradient(1px 1px at 8% 22%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 32% 68%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 78% 45%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 92% 78%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 15% 85%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 45% 40%, rgba(255, 255, 255, 0.55), transparent),
    radial-gradient(1px 1px at 68% 92%, rgba(255, 255, 255, 0.6), transparent);
  background-repeat: repeat;
  background-size: 340px 340px;
}

/* ---------- desktop: a fanned row that fills in card by card ---------- */

.load-strip {
  display: flex;
  align-items: center;
  justify-content: center;
}

.load-polaroid {
  position: relative;
  box-sizing: border-box;
  background: var(--color-polaroid) url("../assets/images/polaroid-paper-1.png") center / cover;
  padding: 8px 8px 30px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.6);
  width: clamp(120px, 12.5vw, 200px);
  /* fan the cards with a light overlap — captions stay readable */
  margin-left: clamp(-30px, -1.2vw, -10px);
  cursor: pointer;
  opacity: 0;
  /* each card drops in from above and settles into the row, then keeps a
     gentle up-and-down float (starting right after it lands) so the finished
     row stays alive instead of freezing static. Each card floats on its own
     period (--float-dur) so they never all reach the top/bottom of the bob at
     once — a synchronized bob eases to a stop together, which read as a slight
     pause at the tail of the entrance. */
  animation:
    load-fall 0.66s cubic-bezier(0.2, 0.75, 0.24, 1) var(--delay, 0s) forwards,
    load-float var(--float-dur, 5.4s) ease-in-out calc(var(--delay, 0s) + 0.66s) infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* same whisper-subtle depth gradient as the hero polaroids: the photo's
   centre a touch darker, gone before it reaches the edges */
.load-polaroid::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  bottom: 30px;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.07) 45%,
    rgba(0, 0, 0, 0) 72%);
  pointer-events: none;
}

.load-polaroid:first-child {
  margin-left: 0;
}

/* stagger the float periods so the row breathes continuously instead of all
   cards pausing at the top of the bob together */
.load-polaroid:nth-child(3n)   { --float-dur: 6.2s; }
.load-polaroid:nth-child(3n+1) { --float-dur: 5.0s; }
.load-polaroid:nth-child(3n+2) { --float-dur: 5.7s; }

@keyframes load-fall {
  0%   { opacity: 0; transform: translateY(-48px) rotate(var(--tilt, 0deg)) scale(1.04); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(var(--y, 0px)) rotate(var(--tilt, 0deg)) scale(1); }
}

/* extra intermediate stops make the bob closer to a smooth sine than a
   two-point ease-in-out, which visibly lingers at each extreme */
@keyframes load-float {
  0%, 100% { transform: translateY(var(--y, 0px)) rotate(var(--tilt, 0deg)); }
  25%      { transform: translateY(calc(var(--y, 0px) - 5px)) rotate(var(--tilt, 0deg)); }
  50%      { transform: translateY(calc(var(--y, 0px) - 7px)) rotate(var(--tilt, 0deg)); }
  75%      { transform: translateY(calc(var(--y, 0px) - 3px)) rotate(var(--tilt, 0deg)); }
}

.load-polaroid:hover,
.load-polaroid:focus-visible {
  /* pause the float so the hover lift holds steady */
  animation-play-state: paused, paused;
  transform: translateY(calc(var(--y, 0px) - 12px)) rotate(0deg) scale(1.05);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.66);
  z-index: 20;
}

@media (prefers-reduced-motion: reduce) {
  .load-polaroid {
    animation: none;
    opacity: 1;
    transform: translateY(var(--y, 0px)) rotate(var(--tilt, 0deg));
  }
}

.load-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.06;
  object-fit: cover;
  background: var(--photo-backdrop);
}

.load-polaroid figcaption {
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: 30px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  font-family: var(--font-caption);
  font-size: clamp(0.55rem, 0.8vw, 0.85rem);
  color: var(--color-caption-blue);
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
}

.load-polaroid:nth-child(2) figcaption,
.load-polaroid:nth-child(4) figcaption {
  transform: translateY(-2px);
}

.load-status {
  font-family: var(--font-drawn);
  font-size: clamp(1.6rem, 2.6vw, 2.5rem);
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* ---------- phone: a centred pile that stacks up card by card ---------- */

@media (max-width: 640px) {
  .load-screen {
    gap: 5vh;
    padding: 6vw;
  }

  .load-strip {
    display: block;
    position: relative;
    width: min(64vw, 280px);
    height: auto;
    aspect-ratio: 1 / 1.12;
    margin: 0 auto;
  }

  .load-polaroid {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    margin-left: 0;
    padding: 10px 10px 34px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.62);
    opacity: 0;
    transform: translate(-50%, -50%);
    /* same idea as the desktop row: land, then keep a gentle float going —
       the phone pile used to finish its 1.2s build and sit frozen while the
       counter kept counting, which read as the loading being stuck */
    animation:
      load-drop 0.72s cubic-bezier(0.18, 0.72, 0.24, 1) var(--sd, 0s) forwards,
      load-pile-float var(--float-dur, 5.4s) ease-in-out calc(var(--sd, 0s) + 0.72s) infinite;
  }

  /* each card lands a beat after the previous one, and the later it lands the
     higher it sits — so the pile visibly builds from the bottom up; the small
     per-card offsets keep it looking hand-stacked. --tilt comes from inline. */
  .load-polaroid:nth-child(1)  { z-index: 1;  --sx: -6px;  --sy: 26px;  --sd: 0s;    }
  .load-polaroid:nth-child(2)  { z-index: 2;  --sx: 18px;  --sy: -20px; --sd: 0.13s; }
  .load-polaroid:nth-child(3)  { z-index: 3;  --sx: -22px; --sy: 6px;   --sd: 0.26s; }
  .load-polaroid:nth-child(4)  { z-index: 4;  --sx: 12px;  --sy: 22px;  --sd: 0.39s; }
  .load-polaroid:nth-child(5)  { z-index: 5;  --sx: -14px; --sy: -14px; --sd: 0.52s; }
  .load-polaroid:nth-child(6)  { z-index: 6;  --sx: 22px;  --sy: 10px;  --sd: 0.65s; }
  .load-polaroid:nth-child(7)  { z-index: 7;  --sx: -10px; --sy: -24px; --sd: 0.78s; }
  .load-polaroid:nth-child(8)  { z-index: 8;  --sx: 8px;   --sy: 18px;  --sd: 0.91s; }
  .load-polaroid:nth-child(9)  { z-index: 9;  --sx: -18px; --sy: -8px;  --sd: 1.04s; }
  .load-polaroid:nth-child(10) { z-index: 10; --sx: 4px;   --sy: 0px;   --sd: 1.17s; }

  @keyframes load-drop {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) translate(var(--sx, 0px), calc(var(--sy, 0px) - 200px)) rotate(var(--tilt, 0deg)) scale(1.06);
    }
    60% { opacity: 1; }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--tilt, 0deg)) scale(1);
    }
  }

  /* the pile's version of load-float: the same soft bob around each card's
     own resting spot, periods staggered by the 3n rules above so the pile
     breathes instead of nodding in unison */
  @keyframes load-pile-float {
    0%, 100% { transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--tilt, 0deg)); }
    25%      { transform: translate(-50%, -50%) translate(var(--sx, 0px), calc(var(--sy, 0px) - 4px)) rotate(var(--tilt, 0deg)); }
    50%      { transform: translate(-50%, -50%) translate(var(--sx, 0px), calc(var(--sy, 0px) - 6px)) rotate(var(--tilt, 0deg)); }
    75%      { transform: translate(-50%, -50%) translate(var(--sx, 0px), calc(var(--sy, 0px) - 2px)) rotate(var(--tilt, 0deg)); }
  }

  .load-polaroid:hover,
  .load-polaroid:focus-visible {
    transform: translate(-50%, -50%) translate(var(--sx, 0px), calc(var(--sy, 0px) - 12px)) rotate(0deg) scale(1.04);
  }

  @media (prefers-reduced-motion: reduce) {
    .load-polaroid {
      animation: none;
      opacity: 1;
      transform: translate(-50%, -50%) translate(var(--sx, 0px), var(--sy, 0px)) rotate(var(--tilt, 0deg));
    }
  }

  .load-polaroid figcaption {
    left: 10px;
    right: 10px;
    height: 34px;
    font-size: clamp(0.7rem, 1vw, 0.95rem);
  }
}