/* Stempelpers: bulk sluiten op een lopende band. */

.cel-press-scene { position: absolute; inset: 0; --belt-y: 62vh; }

.cel-press-spot { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 60% at 50% 40%, rgb(16 185 129 / .22), transparent 70%); }
.cel-press-title {
  position: absolute; left: 5vw; top: 5vh; font-family: var(--font-brand); font-size: 9vh; line-height: 1;
  color: #fff; text-shadow: 0 .6vh 0 #065f46, 0 0 3vh rgb(16 185 129 / .8);
}

.cel-press-counter {
  position: absolute; right: 5vw; top: 5vh; display: flex; align-items: baseline; gap: 1.2vh;
  padding: 1.2vh 2.6vh; border-radius: 1.4vh; background: #04140e; border: .3vh solid #10b981;
  box-shadow: 0 0 3vh rgb(16 185 129 / .5), inset 0 0 2vh rgb(16 185 129 / .25);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: #6ee7b7; text-shadow: 0 0 1.5vh #10b981;
}
.cel-press-counter-value { font-size: 8vh; font-weight: 700; line-height: 1; min-width: 2ch; text-align: right; }
.cel-press-counter-label { font-size: 2.4vh; text-transform: uppercase; letter-spacing: .15em; }

.cel-press { position: absolute; left: 50%; top: 0; width: 34vh; height: calc(var(--belt-y) - 4vh); margin-left: -17vh; }
.cel-press-frame {
  position: absolute; left: 0; right: 0; top: 0; height: 12vh; border-radius: 0 0 1.4vh 1.4vh;
  background:
    repeating-linear-gradient(-45deg, #facc15 0 2.2vh, #1c1917 2.2vh 4.4vh);
  box-shadow: inset 0 -.8vh 0 rgb(0 0 0 / .4), 0 1vh 3vh rgb(0 0 0 / .5);
}
.cel-press-ram {
  position: absolute; left: 50%; top: 12vh; width: 9vh; height: 22vh; margin-left: -4.5vh;
  background: linear-gradient(90deg, #6b7280, #e5e7eb 40%, #9ca3af 60%, #4b5563);
  box-shadow: inset 0 0 0 .3vh rgb(0 0 0 / .25);
}
.cel-press-head {
  position: absolute; left: 50%; bottom: -6vh; width: 26vh; height: 7vh; translate: -50% 0;
  display: flex; align-items: center; justify-content: center; border-radius: .8vh;
  background: linear-gradient(180deg, #374151, #111827);
  box-shadow: inset 0 -1vh 0 #0f9f6e, 0 1vh 2vh rgb(0 0 0 / .5);
  font-size: 2.6vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #6ee7b7;
}

.cel-belt { position: absolute; left: -2vw; right: -2vw; top: var(--belt-y); height: 6vh; }
.cel-belt-surface {
  position: absolute; inset: 0; border-radius: 3vh;
  background:
    repeating-linear-gradient(90deg, #27272a 0 3vh, #3f3f46 3vh 3.4vh),
    #27272a;
  box-shadow: inset 0 .6vh 0 rgb(255 255 255 / .12), 0 2vh 3vh rgb(0 0 0 / .6);
  animation: cel-belt-run .6s linear infinite;
}
.cel-roller {
  position: absolute; top: .4vh; width: 5.2vh; height: 5.2vh; border-radius: 50%;
  background: radial-gradient(circle, #a1a1aa 25%, #52525b 30%, #3f3f46 70%);
  animation: cel-spin .8s linear infinite;
}
.cel-roller.is-left { left: 3vw; }
.cel-roller.is-right { right: 3vw; }
@keyframes cel-belt-run { to { background-position: 3.4vh 0, 0 0; } }

.cel-belt-tickets { position: absolute; left: 0; right: 0; top: calc(var(--belt-y) - 11vh); height: 11vh; }
.cel-mini-ticket {
  position: absolute; left: 0; top: 0; width: 30vh; height: 10.5vh; display: flex; align-items: center; gap: 1.4vh;
  padding: 1.2vh 1.6vh; border-radius: 1vh; color: #2c2620;
  background: linear-gradient(135deg, #fffaf0, #f6ead3);
  box-shadow: 0 1vh 1.8vh rgb(0 0 0 / .45), inset -5vh 0 0 -4.6vh #ff7800;
}
.cel-mini-ticket-face { width: 6vh; height: 6vh; font-size: 2.2vh; box-shadow: 0 0 0 .3vh #ff7800; }
.cel-mini-ticket-text { flex: 1; min-width: 0; }
.cel-mini-ticket-title { font-size: 1.6vh; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cel-mini-ticket-ref { margin-top: .4vh; font-size: 1.5vh; font-weight: 700; color: #9a4a00; }
.cel-mini-ticket-stamp {
  position: absolute; right: 2vh; top: 50%; translate: 0 -50%; rotate: -14deg; opacity: 0;
  width: 7vh; height: 7vh; border: .5vh solid #0f9f6e; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 4.4vh; font-weight: 700; color: #0f9f6e;
  mix-blend-mode: multiply;
}
.cel-mini-ticket.is-stamped .cel-mini-ticket-stamp { opacity: .9; animation: cel-pop .25s ease-out; }

.cel-drawer { position: absolute; right: 2vw; top: calc(var(--belt-y) - 16vh); width: 24vh; height: 26vh; }
.cel-drawer::before {
  content: ""; position: absolute; inset: 0; border-radius: 1vh;
  background: linear-gradient(180deg, #3f3f46, #18181b); box-shadow: 0 2vh 3vh rgb(0 0 0 / .6), inset 0 0 0 .4vh #52525b;
}
.cel-drawer-front {
  position: absolute; left: -4vh; right: 4vh; top: 6vh; height: 14vh; border-radius: .8vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2vh;
  background: linear-gradient(180deg, #71717a, #3f3f46); box-shadow: inset 0 0 0 .4vh #a1a1aa, 0 1vh 2vh rgb(0 0 0 / .5);
  font-size: 2.2vh; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #e4e4e7;
}
.cel-drawer-front i { width: 8vh; height: 1.4vh; border-radius: 999px; background: #d4d4d8; box-shadow: inset 0 .3vh 0 rgb(0 0 0 / .3); }

.cel-press-caption {
  position: absolute; left: 0; right: 0; top: 78vh; text-align: center;
  font-family: var(--font-brand); font-size: 5.5vh; color: #fff; text-shadow: 0 0 3vh var(--glow);
}