/* A physical reserve above the press. It is automatic, never an extra input.
   All effects stay outside the reading aperture; only charged stock wiggles. */
#zineApp .rewind-badge {
  position: absolute; z-index: 7; display: flex; align-items: center; gap: .85rem;
  bottom: calc(100% + 14px); left: 10px; right: 10px; margin: 0; padding: 0;
  color: var(--paper); background: transparent; pointer-events: none;
  font: 400 clamp(1rem,1.35vw,1.3rem)/1.15 "Nachtzine Print","Londrina Solid",sans-serif;
  max-width: 38rem; height: auto; min-height: 88px;
}
#zineApp .rewind-badge-copy {
  position:relative; isolation:isolate; display:grid; gap:.15rem;
  color:var(--ink); padding:.4rem .9rem .5rem; rotate:-1deg;
  filter:drop-shadow(1px 2px .6px #160e2450) drop-shadow(2px 4px 2px #160e2420);
}
#zineApp .rewind-badge-copy::before {
  content:""; position:absolute; z-index:-1; inset:0;
  background:var(--paper) var(--stock) 71px 17px/420px;
  clip-path:polygon(1% 3%,17% 1%,36% 3%,60% 0,82% 3%,99% 1%,98% 24%,100% 47%,98% 76%,99% 97%,76% 99%,48% 97%,22% 100%,0 96%,1% 66%,0 32%);
}
#zineApp .rewind-badge-copy strong { font-weight:900; font-size:1.12em; }
#zineApp .rewind-badge-symbol {
  position: relative; flex: 0 0 88px; width: 88px; height: 88px;
  filter: drop-shadow(.6px 1px .5px #160e2460);
}
/* Tape fixes the reserve to the backdrop, not to the bouncing upper roller.
   The tape remains inside the badge height; nothing reaches down to the press. */
#zineApp .rewind-badge-symbol::before {
  content:""; position:absolute; display:block;
  inset:25% -9% 43%; rotate:-8deg;
  background:var(--paper) var(--stock) 20px 11px/180px;
  box-shadow:inset 0 1px 0 #fff3dba0,inset 0 -1px 0 #a3815060;
  clip-path:polygon(1% 4%,13% 0,31% 4%,56% 0,78% 3%,99% 0,98% 29%,100% 58%,98% 96%,78% 100%,53% 97%,28% 100%,0 96%,2% 67%,0 35%);
}
#zineApp .rewind-badge-symbol::after { content:none; }
#zineApp .rewind-capsule { position:absolute; inset:0; z-index:1; display:block; transform-origin:50% 85%; filter:drop-shadow(1px 2px 1px #160e2440); }
#zineApp .rewind-socket {
  position:absolute; inset:9%; display:block; border-radius:48% 50% 49% 51%;
  border:6px solid #a38150;
  background:#302833 var(--stock) 24px 13px/140px; background-blend-mode:multiply;
  box-shadow:inset 3px 5px 3px #130e17, inset -1px -1px 0 #bd9b68, 1px 2px 0 #413123;
}
#zineApp .rewind-socket i {
  position:absolute; top:40%; width:14%; height:20%;
  background:#ad8c58 var(--stock) 8px 27px/100px; background-blend-mode:multiply;
  box-shadow:1px 2px 1px #0d0816a0,inset 0 1px 0 #ddc294;
  clip-path:polygon(0 0,96% 8%,100% 93%,0 100%);
}
#zineApp .rewind-socket i:first-child {left:-5%;}
#zineApp .rewind-socket i:last-child {right:-5%;rotate:180deg;}
#zineApp .rewind-capsule::before { content:none; }
#zineApp .rewind-shell {
  position:absolute; inset:0; display:block;
  background:url("assets/nachtzine/wordstream-stopmotion-2026-09-14/capsule-v1.webp") center/116% 116% no-repeat;
}
#zineApp .rewind-shell-top { clip-path:inset(0 0 51%); transform-origin:20% 49%; }
#zineApp .rewind-shell-bottom { clip-path:inset(49% 0 0); transform-origin:80% 49%; }
#zineApp .rewind-mark { position:absolute; width:64%; height:40%; left:18%; top:30%; color:var(--ink); mask:var(--ink-grain,none); }
#zineApp .rewind-badge[data-charge="empty"] .rewind-shell { opacity:0; }
#zineApp[data-rewind-cue="used"] .rewind-badge .rewind-shell { opacity:1; }
#zineApp .rewind-badge[data-charge="full"] .rewind-badge-copy::before,
#zineApp[data-rewind-cue="used"] .rewind-badge-copy::before { background-color:var(--action); background-blend-mode:multiply; }
#zineApp .rewind-burst { position:absolute; inset:2%; opacity:0; }
#zineApp .rewind-burst i {
  position:absolute; left:calc(50% - 4px); top:0; width:8px; height:13px;
  transform-origin:4px 42.24px; transform:rotate(var(--ray));
  background:var(--action) var(--stock) center/180px; background-blend-mode:multiply;
  clip-path:polygon(0 3%,86% 0,100% 100%,16% 92%);
}
#zineApp .rewind-burst i:nth-child(1) { --ray:0deg; }
#zineApp .rewind-burst i:nth-child(2) { --ray:60deg; }
#zineApp .rewind-burst i:nth-child(3) { --ray:120deg; }
#zineApp .rewind-burst i:nth-child(4) { --ray:180deg; }
#zineApp .rewind-burst i:nth-child(5) { --ray:240deg; }
#zineApp .rewind-burst i:nth-child(6) { --ray:300deg; }
/* Intermittent anticipation, not a continuously bouncing distraction. */
@media (prefers-reduced-motion: no-preference) {
  #zineApp[data-phase="running"][data-rewind-cue="none"] .rewind-badge[data-charge="full"] .rewind-capsule { animation:rewind-ready-wiggle 4000ms steps(1,end) infinite; }
  #zineApp[data-rewind-cue="earned"] .rewind-capsule { animation:rewind-capsule-arrive 640ms steps(1,end) both; }
  #zineApp[data-rewind-cue="earned"] .rewind-burst { animation:rewind-paper-burst 640ms steps(1,end) both; }
  #zineApp[data-rewind-cue="earned"] .rewind-badge-copy { animation:rewind-copy-stamp 240ms steps(1,end) both; }
  #zineApp[data-rewind-cue="used"] .rewind-capsule { animation:rewind-capsule-tension 640ms steps(1,end) both; }
  #zineApp[data-rewind-cue="used"] .rewind-shell-top { animation:rewind-shell-open-top 640ms steps(1,end) both; }
  #zineApp[data-rewind-cue="used"] .rewind-shell-bottom { animation:rewind-shell-open-bottom 640ms steps(1,end) both; }
  #zineApp[data-rewind-cue="used"] .rewind-burst { animation:rewind-paper-burst 640ms steps(1,end) both; }
}
/* Timing is per held pose, not five new tween frames inside each interval.
   The mechanical adapter shares the same 160ms release and 640ms landing. */
@keyframes rewind-ready-wiggle { 0%,76%,92%,100% { transform:none; } 78%,84% { transform:rotate(-7deg); } 81%,87% { transform:rotate(6deg); } 90% { transform:rotate(-3deg); } }
@keyframes rewind-capsule-arrive { 0% { transform:translateY(-8px) rotate(-12deg); } 25% {transform:translateY(3px) rotate(5deg);} 50% {transform:translateY(-2px) rotate(-4deg);} 75%,100% {transform:none;} }
@keyframes rewind-capsule-tension { 0% {transform:none;} 12.5% {transform:translateY(2px) rotate(-6deg);} 25% {transform:translateY(-2px) rotate(4deg);} 37.5% {transform:rotate(-3deg);} 50%,100% {transform:none;} }
@keyframes rewind-paper-burst { 0%,12.5% {opacity:0;transform:scale(.6);} 25% {opacity:1;transform:scale(.85) rotate(-8deg);} 37.5% {opacity:1;transform:scale(1);} 50% {opacity:1;transform:scale(1.05) rotate(5deg);} 62.5%,100% {opacity:0;transform:scale(1.05) rotate(5deg);} }
@keyframes rewind-copy-stamp { 0% {transform:translateY(3px) rotate(-1deg);} 50% {transform:translateY(-1px);} 100% {transform:none;} }
@keyframes rewind-shell-open-top { 0%,12.5% {transform:none;opacity:1;} 25% {transform:translate(-9px,6px) rotate(-18deg);} 37.5%,75% {transform:translate(-21px,12px) rotate(-32deg);opacity:1;} 87.5%,100% {transform:translate(-25px,16px) rotate(-40deg);opacity:0;} }
@keyframes rewind-shell-open-bottom { 0%,12.5% {transform:none;opacity:1;} 25% {transform:translate(9px,5px) rotate(18deg);} 37.5%,75% {transform:translate(21px,7px) rotate(32deg);opacity:1;} 87.5%,100% {transform:translate(25px,10px) rotate(40deg);opacity:0;} }
@media (prefers-reduced-motion: reduce) {
  #zineApp #wordstreamSheet { animation:none!important; }
  #zineApp[data-rewind-cue="used"] .rewind-badge .rewind-shell { opacity:0; }
}
@media (max-width:700px), (max-height:760px) {
  #zineApp .rewind-badge { min-height:62px; bottom:calc(100% + 12px); gap:.65rem; font-size:.95rem; }
  #zineApp .rewind-badge-symbol { flex-basis:62px; width:62px; height:62px; }
  #zineApp .rewind-burst i { transform-origin:4px 29.76px; }
  #zineApp .rewind-badge-copy {padding:.35rem .65rem .4rem;}
  #zineApp .rewind-badge-copy strong { font-size:1.12em; }
}
@media (max-width:900px) and (orientation:portrait) {
  #zineApp .rewind-badge { bottom:calc(100% + 85px); }
}
@media (forced-colors: active) {
  #zineApp .rewind-badge { color: CanvasText!important; background:Canvas; border:1px solid CanvasText; }
  #zineApp .rewind-shell { background:ButtonFace; border:2px solid ButtonText; }
  #zineApp .rewind-mark { color:ButtonText!important; }
  #zineApp .rewind-capsule { filter:none!important; opacity:1!important; }
  #zineApp .rewind-socket { background:Canvas; border:2px dashed CanvasText; box-shadow:none; }
  #zineApp .rewind-socket i { background:CanvasText; }
  #zineApp .rewind-badge-copy {color:CanvasText;filter:none;}
  #zineApp .rewind-badge-copy::before {background:Canvas!important;}
  #zineApp .rewind-badge-symbol::before {background:Canvas;box-shadow:none;outline:1px solid CanvasText;}
}
html #zineApp[data-material-state="fallback"] .rewind-shell { background:var(--action) var(--stock) center/140px; border-radius:50%; }

/* The image is neutral photographic material, not a photographed moving
   light source. The fixed carrier computes its bevel light after rotation. */
html #zineApp[data-word-press] .press-wheel-light {
  position: absolute; inset: 0; display: block; pointer-events: none;
  filter: url(#press-fixed-light);
}
html #zineApp[data-word-press] #pressWheel {
  position: absolute; inset: 1.2992013% auto auto .0494777%;
  width: 100%; height: 100%; object-fit: contain;
  transform-origin: 49.9505223% 48.7007987%;
  filter: url(#press-material-key);
}
html #zineApp[data-word-press] .press-axle {
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:12%; aspect-ratio:1; pointer-events:none;
  filter: drop-shadow(1px 2px .6px #130d1880) drop-shadow(2px 4px 2px #130d1838);
}
html #zineApp[data-word-press] .press-axle::before {
  content:""; position:absolute; inset:0;
  clip-path:polygon(29% 0,72% 0,100% 28%,100% 73%,72% 100%,28% 100%,0 73%,0 28%);
  background: linear-gradient(135deg,#fff2cd70,transparent 50%,#33230f28), var(--paper) var(--stock) 18px 32px / 180px;
  box-shadow:inset 1px 1px 1px #fff4da, inset -1px -1px 1px #694b2b;
}
html #zineApp[data-word-press] .press-axle::after {
  content:""; position:absolute; inset:36%; border-radius:50%; background:#1d181d;
  box-shadow:inset 1px 2px 1px #090709, 0 1px 0 #ffe3b7;
}
/* A separate grip orbits with the wheel and counter-rotates on its own axis.
   Its fixed top-left bevel and bottom-right contact shadow never orbit. */
html #zineApp[data-word-press] .press-grip-orbit {
  position:absolute; inset:0; pointer-events:none; transform-origin:50% 50%;
}
html #zineApp[data-word-press] .press-grip {
  position:absolute; left:44%; top:88%; width:12%; aspect-ratio:1;
  border-radius:48% 51% 49% 50%;
  background:linear-gradient(135deg,#f3ffb128,transparent 30%,#43551b30),#cae851 var(--stock) 12px 19px / 58px;
  background-blend-mode:normal,multiply;
  box-shadow:inset 1px 1px 0 #f3ff9c,inset -1px -2px 0 #6a791e;
  filter:drop-shadow(1px 3px 1px #160f1880) drop-shadow(3px 6px 2px #160f1840);
  transform-origin:50% 50%;
}
html #zineApp[data-word-press] .press-grip::after {
  content:"";position:absolute;inset:25%;border-radius:50%;
  background:#252721 var(--stock) 21px 27px / 100px;background-blend-mode:multiply;
  box-shadow:inset 1px 2px 1px #080908,0 1px 0 #e4f986;
}
html #zineApp[data-material-state="fallback"] .press-grip-orbit { display:none; }
html #zineApp[data-material-state="fallback"] #pressWheel { inset:0; transform-origin:50% 50%; filter:none; }
html #zineApp[data-material-state="fallback"] :is(.press-wheel-light,.press-axle) { filter:none; }
html #zineApp[data-material-state="fallback"] .press-axle { display:none; }