/* ══════════════════════════════════════════════════════════════
   details.css — the mess that makes it real.
   Crumbs (with their own tiny shadows), sugar grains that catch
   and lose the light, settled flour dust, and airborne motes
   drifting through the sun shaft.
   ══════════════════════════════════════════════════════════════ */

.debris {
  position: absolute;
  inset: 0;
  z-index: 16;
  pointer-events: none;
}
.debris b {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: block;
}

/* ── Crumbs: irregular little chunks of baked pastry. Each gets
   a real contact shadow so it sits *on* the wood. ── */
.crumb {
  width: var(--s);
  aspect-ratio: 1.25;
  rotate: var(--r);
  border-radius: 42% 58% 36% 64% / 55% 40% 60% 45%;
  background: linear-gradient(
    150deg,
    hsl(var(--h) 58% 74%) 0%,
    hsl(var(--h) 54% 58%) 44%,
    hsl(var(--h) 50% 38%) 100%
  );
  box-shadow:
    0 1px 1.5px hsl(var(--shadow-hue) / 0.6),
    0 2px 4px hsl(var(--shadow-hue) / 0.3),
    inset 0 0.5px 0.5px rgba(255, 240, 210, 0.7);
}

/* ── Loose sugar: near-point specular sparkles. ── */
.grain {
  width: 2.2px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 0%,
    rgba(255, 248, 228, 0.8) 50%,
    transparent 78%
  );
  box-shadow:
    0 0 3px rgba(255, 236, 190, 0.9),
    0 1px 1px hsl(var(--shadow-hue) / 0.5);
  animation: grain-glint 4.5s ease-in-out var(--d) infinite;
}
@keyframes grain-glint {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  46% {
    opacity: 1;
    transform: scale(1.25);
  }
}

/* ── Flour dust: soft settled puffs, no hard edge at all. ── */
.flour {
  width: 26px;
  aspect-ratio: 1.5;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 44% 40%,
    rgba(255, 250, 236, 0.3) 0%,
    rgba(255, 248, 232, 0.13) 44%,
    transparent 76%
  );
  filter: blur(3px);
  mix-blend-mode: screen;
}

/* ══ AIRBORNE MOTES ═════════════════════════════════════════════
   Twenty specks drifting through the shaft. Everything that
   varies between them — start position, path, duration, delay,
   size — is derived arithmetically from --i, so twenty elements
   need no twenty rules.
   ═══════════════════════════════════════════════════════════════ */

.motes {
  position: absolute;
  inset: 0;
  z-index: 32;
  pointer-events: none;
  overflow: hidden;
  /* Only visible where the sunlight actually is. */
  -webkit-mask: radial-gradient(
    80% 78% at 12% 4%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 42%,
    transparent 76%
  );
  mask: radial-gradient(
    80% 78% at 12% 4%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 42%,
    transparent 76%
  );
}
.motes b {
  position: absolute;
  display: block;
  /* --i spreads them across the shaft; --j / --k are set per-index
     below to break up size, blur and timing without extra markup. */
  left: calc(2% + var(--i) * 4.7%);
  top: calc(-14% + var(--i) * 3.1%);
  width: calc(1.6px + var(--j, 0) * 0.7px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 248, 226, 0.95) 0%,
    rgba(255, 238, 200, 0.5) 46%,
    transparent 76%
  );
  filter: blur(calc(0.3px + var(--k, 0) * 0.35px));
  opacity: 0;
  will-change: transform, opacity;
  animation: mote-drift calc(17s + var(--j, 0) * 2.3s + var(--k, 0) * 1.7s)
    linear calc(var(--i) * -1.7s) infinite;
}
/* Cycle --j 0–3 and --k 0–2 so the two never line up in phase. */
.motes b:nth-child(4n + 1) {
  --j: 0;
}
.motes b:nth-child(4n + 2) {
  --j: 1;
}
.motes b:nth-child(4n + 3) {
  --j: 2;
}
.motes b:nth-child(4n) {
  --j: 3;
}
.motes b:nth-child(3n + 1) {
  --k: 0;
}
.motes b:nth-child(3n + 2) {
  --k: 1;
}
.motes b:nth-child(3n) {
  --k: 2;
}

/* A long, slow diagonal fall with a lateral wander — dust doesn't
   travel straight, it rides the air. */
@keyframes mote-drift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  8% {
    opacity: 0.75;
  }
  25% {
    transform: translate3d(22px, 26vh, 0);
    opacity: 0.95;
  }
  50% {
    transform: translate3d(-8px, 52vh, 0);
    opacity: 0.6;
  }
  75% {
    transform: translate3d(30px, 78vh, 0);
    opacity: 0.85;
  }
  94% {
    opacity: 0;
  }
  100% {
    transform: translate3d(14px, 104vh, 0);
    opacity: 0;
  }
}