/* Code opgeruimd: vellen code door de versnipperaar, teller met weggehaalde regels. */

.celebration[data-mode="shredder"] { --c1: #450a0a; --c2: #ef4444; --c3: #fecaca; --glow: rgb(248 113 113 / .85); }

.cel-shred-scene { position: absolute; inset: 0; }
.cel-shred-left { position: absolute; left: 27vw; top: 0; bottom: 0; width: 0; }

.cel-shred-feed {
  position: absolute; left: -17vh; width: 34vh; top: 6vh; height: 41vh; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 12%); mask: linear-gradient(180deg, transparent, #000 12%);
}
.cel-shred-sheet {
  position: absolute; left: 2vh; right: 2vh; bottom: 0; height: 36vh; padding: 2.2vh 1.6vh;
  display: flex; flex-direction: column; justify-content: space-between; transform: translateY(-110%);
  background: linear-gradient(180deg, #fff, #f8fafc); border-radius: .6vh;
  box-shadow: 0 1vh 3vh rgb(0 0 0 / .5), inset 0 0 0 .2vh #e5e7eb;
}
.cel-shred-line { overflow: hidden; display: flex; align-items: center; gap: .6vh; height: 1.9vh; padding-right: .6vh; border-radius: .3vh; background: #ffebe9; }
.cel-shred-gutter { width: 2.2vh; text-align: center; font: 800 1.8vh ui-monospace, Menlo, monospace; color: #cf222e; background: #ffcecb; border-radius: .3vh 0 0 .3vh; align-self: stretch; line-height: 1.9vh; }
.cel-shred-indent { flex: none; }
.cel-shred-token { height: .9vh; border-radius: .45vh; opacity: .75; flex: none; }

.cel-shred-machine {
  position: absolute; left: -24vh; width: 48vh; top: 45vh; height: 21vh; border-radius: 2vh 2vh 1.2vh 1.2vh; z-index: 2;
  background: linear-gradient(180deg, #4b5563, #1f2937 40%, #111827);
  box-shadow: inset 0 .4vh 0 rgb(255 255 255 / .2), inset 0 -1vh 2vh rgb(0 0 0 / .5), 0 2vh 4vh rgb(0 0 0 / .6), 0 0 6vh color-mix(in oklab, var(--glow) 40%, transparent);
}
.cel-shred-slot {
  position: absolute; left: 6vh; right: 6vh; top: 1.6vh; height: 2.4vh; border-radius: 1.2vh; overflow: hidden;
  background: #000; box-shadow: inset 0 .6vh 1vh rgb(0 0 0 / .9), 0 .2vh 0 rgb(255 255 255 / .15);
}
.cel-shred-teeth { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #6b7280 0 .6vh, #111 .6vh 1.4vh); opacity: .6; }
.cel-shred-machine.is-running .cel-shred-teeth { animation: cel-shred-teeth .12s linear infinite; background: repeating-linear-gradient(90deg, #fca5a5 0 .6vh, #450a0a .6vh 1.4vh); opacity: 1; box-shadow: inset 0 0 1vh #ef4444; }
@keyframes cel-shred-teeth { to { background-position: 1.4vh 0; } }
.cel-shred-panel {
  position: absolute; left: 3vh; right: 3vh; top: 6.5vh; height: 6vh; display: flex; align-items: center; justify-content: center; gap: 2vh;
  border-radius: 1vh; background: linear-gradient(180deg, #111827, #030712); box-shadow: inset 0 0 0 .25vh #374151;
}
.cel-shred-brand { font-family: var(--font-brand); font-size: 3.6vh; color: var(--c3); letter-spacing: .06em; text-shadow: 0 0 1.5vh var(--glow); }
.cel-shred-led { width: 1.8vh; height: 1.8vh; border-radius: 50%; background: #7f1d1d; }
.cel-shred-led.is-green { background: #14532d; }
.cel-shred-machine.is-running .cel-shred-led { background: #ef4444; box-shadow: 0 0 1.5vh #ef4444; animation: cel-shred-blink .3s steps(1) infinite; }
.cel-shred-machine.is-running .cel-shred-led.is-green { background: #22c55e; box-shadow: 0 0 1.5vh #22c55e; animation-delay: .15s; }
@keyframes cel-shred-blink { 50% { opacity: .3; } }
.cel-shred-vents { position: absolute; left: 6vh; right: 6vh; bottom: 2vh; height: 3vh; background: repeating-linear-gradient(90deg, #030712 0 .8vh, transparent .8vh 2vh); opacity: .8; }

.cel-shred-chute { position: absolute; left: -18vh; width: 36vh; top: 64vh; height: 30vh; overflow: hidden; z-index: 1; }
.cel-shred-strip { position: absolute; top: 0; width: 1.1vh; border-radius: .2vh; box-shadow: 0 .3vh .6vh rgb(0 0 0 / .4); }

.cel-shred-bin {
  position: absolute; left: -20vh; width: 40vh; top: 72vh; height: 22vh; border-radius: .6vh .6vh 2vh 2vh; overflow: hidden; z-index: 2;
  background: linear-gradient(90deg, rgb(255 255 255 / .1), rgb(255 255 255 / .03) 30%, rgb(255 255 255 / .1));
  border: .4vh solid rgb(255 255 255 / .35); border-top: none;
  box-shadow: inset 0 0 3vh rgb(255 255 255 / .08);
}
.cel-shred-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  background:
    repeating-linear-gradient(70deg, #fff 0 .5vh, #fecaca .5vh .9vh, transparent .9vh 1.4vh),
    repeating-linear-gradient(-60deg, #fde2e2 0 .4vh, #f87171 .4vh .7vh, transparent .7vh 1.5vh),
    #fff5f5;
  opacity: .85;
}

.cel-shred-info { position: absolute; left: 52vw; right: 4vw; top: 50%; translate: 0 -50%; }
.cel-shred-kicker { font-size: 2.8vh; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: var(--c3); }
.cel-shred-title {
  margin-top: 1vh; font-size: 4.6vh; font-weight: 700; line-height: 1.15; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cel-shred-count {
  display: inline-block; margin-top: 3vh; font-family: var(--font-brand); font-size: 18vh; line-height: 1;
  color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 .8vh 0 var(--c1), 0 0 4vh var(--glow);
}
.cel-shred-count.is-done { color: #fecaca; }
.cel-shred-unit { font-size: 4vh; font-weight: 700; color: var(--c3); }
.cel-shred-diff { margin-top: 1.6vh; display: flex; gap: 1.4vh; }
.cel-shred-chip { padding: .5vh 1.6vh; border-radius: 999px; font: 800 2.8vh ui-monospace, Menlo, monospace; }
.cel-shred-chip.is-minus { background: rgb(239 68 68 / .2); color: #fca5a5; box-shadow: inset 0 0 0 .25vh rgb(239 68 68 / .6); }
.cel-shred-chip.is-plus { background: rgb(34 197 94 / .18); color: #86efac; box-shadow: inset 0 0 0 .25vh rgb(34 197 94 / .55); }
.cel-shred-by { margin-top: 3vh; display: flex; align-items: center; gap: 2vh; visibility: hidden; }
.cel-shred-avatar { width: 9vh; height: 9vh; font-size: 3.4vh; box-shadow: 0 0 0 .5vh var(--c2), 0 0 3vh var(--glow); }
.cel-shred-by-label { font-size: 2.4vh; letter-spacing: .2em; text-transform: uppercase; color: var(--c3); }
.cel-shred-name { font-size: 4.4vh; font-weight: 700; line-height: 1.1; }
.cel-shred-stamp {
  position: absolute; right: 2vw; top: 38%; visibility: hidden; padding: .6vh 2vh; border-radius: 1vh;
  font-family: var(--font-brand); font-size: 6vh; color: #4ade80; border: .6vh solid #4ade80;
  text-shadow: 0 0 2vh rgb(74 222 128 / .7); box-shadow: 0 0 3vh rgb(74 222 128 / .4), inset 0 0 2vh rgb(74 222 128 / .3);
  background: rgb(5 46 22 / .6);
}