/* The workshop reacts; its reading tracks do not. The snapshot director owns
   these states. No animation defines a game deadline or moves a glyph alone. */
:root {
  --moment-cut-a: url("assets/nachtzine/menu-material-2026-09-14/paper-a-v1.webp");
  --moment-cut-b: url("assets/nachtzine/menu-material-2026-09-14/paper-b-v1.webp");
  --moment-cut-c: url("assets/nachtzine/menu-material-2026-09-14/paper-c-v1.webp");
}
.moment-world {
  position: absolute; display: block; inset: 0; z-index: -1; overflow: hidden;
  pointer-events: none; contain: layout paint style; container-type: size;
  opacity: 0; visibility: hidden;
  --moment-stock: url("assets/nachtzine/all-assets-2026-09-13/global/paper-stock-v2.webp");
  --moment-edge: url("assets/nachtzine/menu-material-2026-09-14/paper-a-v1.webp");
}
.moment-wing, .moment-cut {
  position: absolute; display: block; pointer-events: none; opacity: 0;
  background-image: var(--moment-stock); background-size: 470px;
  background-blend-mode: multiply; background-color: var(--dark);
}
.moment-wing {
  top: -5%; bottom: -5%; width: 23%;
  background: none;
  filter: drop-shadow(4px 6px 3px rgb(22 14 26 / 24%));
  transition: transform 240ms steps(3,end), opacity 240ms steps(3,end);
}
.moment-wing::before {
  content: ""; position: absolute; inset: 0;
  background: var(--moment-pigment, #514063) var(--moment-stock) center / 470px;
  background-blend-mode: multiply;
  mask: var(--moment-side-edge) center / 100% 100% no-repeat;
}
.moment-wing-left {
  --moment-side-edge: url("assets/nachtzine/all-assets-2026-09-13/global/paper-edge-right-v3.webp");
  --moment-side-sign: -1;
  left: -13%; transform: translateX(-26%);
}
.moment-wing-right {
  --moment-side-edge: url("assets/nachtzine/all-assets-2026-09-13/global/paper-edge-left-v3.webp");
  --moment-side-sign: 1;
  right: -14%; transform: translateX(28%);
}
.moment-cut {
  width: clamp(30px,3.4vw,58px); height: clamp(8px,.9vw,16px);
  background: none;
  filter: drop-shadow(.6px 1px .5px rgb(22 14 26 / 40%)) drop-shadow(2px 3px 1.5px rgb(22 14 26 / 20%));
}
.moment-cut::before {
  content: ""; position: absolute; inset: 0;
  background: var(--action) var(--moment-stock) var(--moment-grain, 21% 60%) / 170px;
  background-blend-mode: multiply;
  mask: var(--moment-cut-shape, var(--moment-cut-a)) center / 100% 100% no-repeat;
}
.moment-cut:nth-of-type(3) { left: 3%; top: 26%; rotate: 62deg; }
.moment-cut:nth-of-type(4) { --moment-cut-shape: var(--moment-cut-b); --moment-grain: 70% 30%; left: 9%; top: 12%; rotate: 25deg; }
.moment-cut:nth-of-type(5) { --moment-cut-shape: var(--moment-cut-c); left: 16%; top: 6%; rotate: -15deg; }
.moment-cut:nth-of-type(6) { --moment-cut-shape: var(--moment-cut-b); right: 3%; top: 29%; rotate: -72deg; }
.moment-cut:nth-of-type(7) { --moment-cut-shape: var(--moment-cut-c); --moment-grain: 80% 90%; right: 8%; top: 15%; rotate: -36deg; }
.moment-cut:nth-of-type(8) { right: 17%; top: 6%; rotate: 25deg; }
/* Stopmotion belongs to the pose, not to alpha. Keep the last world geometry
   while its common carrier fades; the director retires it only after 350ms. */
[data-moment-world-state="steady"] > .moment-world { opacity: 1; visibility: visible; }
[data-moment-world-state="exiting"] > .moment-world {
  opacity: 0; visibility: visible; transition: opacity 280ms cubic-bezier(.22,.61,.36,1);
}
[data-moment-world-state="off"] > .moment-world { opacity: 0; visibility: hidden; transition: none; }
[data-moment-active="false"] > .moment-world { display: none; }
.moment-record, .moment-record-mark { display: none; }

/* Press: darker side stock compresses the work area. The bearing and top
   platen react physically; all four printed word lanes remain untouched. */
#zineApp .moment-world { --moment-wing-span: 23cqw; }
#zineApp .moment-wing {
  opacity: .97;
  transform: translateX(calc(var(--moment-side-sign) * (38% - 46% * var(--moment-word-tension, 0))));
  /* Public tension is already quantized. Hold its physical pose until the
     next value; a restarted transition would perpetually lag behind ticks. */
  transition: none;
}
#zineApp .moment-wing::before {
  /* Turn the high-resolution real strip, rather than stretching a tiny stock
     edge through a thousand pixels. The shadow stays on its outer carrier. */
  inset: auto; top: 50%; left: 50%; width: 110cqh; height: var(--moment-wing-span);
  transform: translate(-50%,-50%) rotate(90deg);
  mask-image: var(--moment-edge);
  /* Opaque ink stays physical. Only the paper pigment changes, never a gray
     overlay on the words; the darkest pose still retains purple fibre. */
  background-color: rgb(calc(108 - 45 * var(--moment-word-tension, 0)) calc(85 - 39 * var(--moment-word-tension, 0)) calc(137 - 70 * var(--moment-word-tension, 0)));
  transition: background-color 260ms linear;
}
#zineApp .moment-wing-right::before { transform: translate(-50%,-50%) rotate(-90deg); }
#zineApp[data-moment-world-state="off"] .moment-wing,
#zineApp[data-moment-world-state="off"] .moment-wing::before { transition: none; }
/* No permanent all-at-once warning rays around the word. Existing short
   record/rise cues retain their separate event owner. */

/* One short contact pose per pressure/deadline stage. The real wheel keeps
   its own rotation; its whole assembly moves together with the housing. */
@media (prefers-reduced-motion: no-preference) {
  #zineApp[data-moment-directed="true"] .press-drive,
  #zineApp[data-moment-directed="true"] .press-roller-top {
    transition: translate 220ms ease-out, rotate 220ms ease-out;
  }
  #zineApp[data-moment-active="true"][data-phase="running"][data-moment-pressure="2"] .press-drive { translate: 0 -2px; rotate: -.35deg; }
  #zineApp[data-moment-active="true"][data-phase="running"][data-moment-pressure="3"] .press-drive { translate: 0 -3px; rotate: -.65deg; }
  #zineApp[data-moment-active="true"][data-phase="running"][data-moment-urgency="1"] .press-drive { translate: 1px -4px; rotate: -.8deg; transition-timing-function: steps(3,end); }
  #zineApp[data-moment-active="true"][data-phase="running"][data-moment-urgency="2"] .press-drive { translate: 2px -6px; rotate: -1.2deg; transition-timing-function: steps(3,end); }
  #zineApp[data-moment-active="true"][data-phase="running"][data-moment-urgency="1"] .press-roller-top { translate: 0 2px; transition-timing-function: steps(3,end); }
  #zineApp[data-moment-active="true"][data-phase="running"][data-moment-urgency="2"] .press-roller-top {
    translate: 0 5px; transition-timing-function: steps(3,end);
    animation: moment-platen-contact 220ms steps(2,end) both;
  }
}
@keyframes moment-platen-contact {
  0% { translate: 0 2px; }
  45% { translate: 0 7px; }
  100% { translate: 0 5px; }
}
#zineApp[data-moment-active="true"][data-moment-event="rise"] .moment-cut { animation: moment-rise-mark 720ms linear both; }
/* Rewind releases at the physical reserve, not in unrelated screen corners. */
#zineApp[data-moment-event="rewind"] .moment-cut { animation:none; opacity:0; }
#zineApp[data-moment-active="true"][data-moment-event="miss"] #zineChallengeScene { animation: moment-receipt 620ms linear both; }
#zineApp[data-moment-active="true"][data-moment-event="record"] .moment-cut { animation: moment-record-cut 1300ms linear both; }
#zineApp[data-moment-directed="true"] .moment-record {
  display: block; position: absolute; z-index: 7; top: 13%; left: 4%; width: 90%;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms ease-out, visibility 0s 160ms;
  margin: 0; padding: 12px 9px; rotate: -5deg;
  color: var(--dark); isolation: isolate;
  filter: drop-shadow(.7px 1.5px .6px rgb(32 26 34 / 42%)) drop-shadow(2.5px 5px 2.5px rgb(32 26 34 / 23%));
  font-family: "Nachtzine Print","Londrina Solid",sans-serif;
  font-size: clamp(24px,2.8vw,40px); line-height: 1; text-align: center;
}
#zineApp[data-moment-active="true"][data-moment-record-display="celebrate"] .moment-record,
#zineApp[data-moment-active="true"][data-moment-record-display="result"] .moment-record {
  /* A solid piece lands; only its departure fades. A translucent incoming
     label looked like projected UI rather than ink on actual paper. */
  opacity: 1; visibility: visible; transition: none;
}
#zineApp[data-moment-directed="true"] .moment-record-mark {
  position: absolute; top: calc(100% + 5px); left: 18px;
  padding: 2px 4px; font: 900 19px/1 "Nachtzine Print","Londrina Solid",sans-serif;
  color: var(--action); rotate: -2deg; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
#zineApp[data-moment-active="true"][data-phase="running"][data-moment-record-display="badge"] .moment-record-mark { display: block; }
#zineApp .moment-record::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--action) var(--stock) center / 250px; background-blend-mode: multiply;
  mask: url("assets/nachtzine/menu-material-2026-09-14/paper-a-v1.webp") center / 100% 100% no-repeat;
}
#zineApp[data-moment-active="true"][data-moment-record-display="celebrate"] .moment-record { animation: moment-record-stamp 480ms linear both; }
#zineApp[data-moment-active="true"][data-moment-record="true"] .scene-score strong { color: var(--dark); }
#zineApp[data-moment-active="true"][data-moment-record="true"] .scene-best strong { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* Dossier: opposed sheets creep in behind the folder, never on its 3D plane.
   No filters or transforms on the folder/cover/desk or its readable notes. */
#zineCaseApp .moment-wing { width: 70%; height: 18%; top: -14%; bottom: auto; }
#zineCaseApp .moment-wing::before { mask-image: var(--moment-edge); }
#zineCaseApp .moment-wing-left { left: -8%; rotate: -5deg; }
#zineCaseApp .moment-wing-right { right: -12%; top: auto; bottom: -14%; rotate: -6deg; }
#zineCaseApp[data-moment-world-pressure="1"] .moment-wing { --moment-pigment: #3c5a9e; opacity: .97; transform: translateY(0); }
#zineCaseApp[data-moment-world-pressure="2"] .moment-wing { --moment-pigment: #304577; opacity: .97; transform: translateY(12%); }
#zineCaseApp[data-moment-world-pressure="3"] .moment-wing { --moment-pigment: #263454; opacity: .97; transform: translateY(25%); }
#zineCaseApp[data-moment-world-pressure="3"] .moment-wing-right { transform: translateY(-24%); }
#zineCaseApp .moment-cut { width: 44px; height: 12px; top: 12%; }
#zineCaseApp[data-moment-world-urgency="1"] .moment-cut:nth-of-type(6),
#zineCaseApp[data-moment-world-urgency="2"] .moment-cut:nth-of-type(6),
#zineCaseApp[data-moment-world-urgency="2"] .moment-cut:nth-of-type(7) { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  #zineCaseApp[data-moment-directed="true"] .case-folder-tab { transition: translate 220ms ease-out, rotate 220ms ease-out; }
  #zineCaseApp[data-moment-active="true"][data-phase="memorize"][data-moment-pressure="1"] .case-folder-tab { translate: 0 -2px; }
  #zineCaseApp[data-moment-active="true"][data-phase="memorize"][data-moment-pressure="2"] .case-folder-tab { translate: 0 -4px; rotate: 1deg; transition-timing-function: steps(3,end); }
  #zineCaseApp[data-moment-active="true"][data-phase="memorize"][data-moment-pressure="3"] .case-folder-tab { translate: 0 -7px; rotate: 2deg; transition-timing-function: steps(3,end); }
}
#zineCaseApp[data-moment-active="true"][data-moment-event="case-close"] .case-folder-tab { animation: moment-tab-contact 480ms linear both; }
#zineCaseApp[data-moment-active="true"][data-moment-event="case-reveal"] .moment-cut { animation: moment-rise-mark 720ms linear both; }

@keyframes moment-rise-mark {
  0% { opacity: 0; translate: 0 10px; animation-timing-function: steps(1,end); }
  18% { opacity: 1; translate: 0 -4px; animation-timing-function: steps(1,end); }
  42%,72% { opacity: 1; translate: 0 0; animation-timing-function: steps(1,end); }
  100% { opacity: 0; translate: 0 0; }
}
@keyframes moment-relief {
  0% { opacity: 1; translate: 0 0; animation-timing-function: steps(1,end); }
  25% { opacity: 1; translate: 0 -8px; animation-timing-function: steps(1,end); }
  60% { opacity: .5; translate: 0 -20px; animation-timing-function: steps(1,end); }
  100% { opacity: 0; translate: 0 -30px; }
}
@keyframes moment-receipt {
  0% { translate: 0 -9px; animation-timing-function: steps(1,end); }
  18% { translate: 0 3px; animation-timing-function: steps(1,end); }
  45% { translate: 0 -1px; animation-timing-function: steps(1,end); }
  75%,100% { translate: 0 0; }
}
@keyframes moment-record-stamp {
  0% { translate: -8px -18px; scale: 1.08; animation-timing-function: steps(1,end); }
  25% { translate: 0 3px; scale: 1; animation-timing-function: steps(1,end); }
  57% { translate: 0 -1px; scale: 1; animation-timing-function: steps(1,end); }
  100% { translate: 0 0; scale: 1; }
}
@keyframes moment-record-cut {
  0% { opacity: 0; translate: 0 30px; animation-timing-function: steps(1,end); }
  12% { opacity: 1; translate: 0 -4px; animation-timing-function: steps(1,end); }
  35% { opacity: 1; translate: 0 -16px; animation-timing-function: steps(1,end); }
  62% { opacity: 1; translate: 0 -8px; animation-timing-function: steps(1,end); }
  84% { opacity: .5; translate: 0 8px; animation-timing-function: steps(1,end); }
  100% { opacity: 0; translate: 0 20px; }
}
@keyframes moment-tab-contact {
  0% { translate: 0 -7px; rotate: 2deg; animation-timing-function: steps(1,end); }
  18% { translate: 0 2px; rotate: 0deg; animation-timing-function: steps(1,end); }
  45%,100% { translate: 0 0; rotate: 0deg; }
}
@media (max-width: 900px), (max-height: 560px) {
  .moment-world .moment-wing { width: 18%; }
  #zineApp .moment-world { --moment-wing-span: 18cqw; }
  .moment-world .moment-cut { width: 25px; height: 7px; }
  #zineApp[data-moment-directed="true"] .moment-record { display: none; }
  #zineApp[data-moment-active="true"][data-phase="running"][data-moment-record="true"] .moment-record-mark { display: block; font-size: 15px; top: calc(100% + 1px); }
  #zineCaseApp .moment-wing { width: 70%; }
  /* Retain the same textual record confirmation on compact, without making
     the original engine's score or input layout narrower. */
  #zineApp[data-moment-active="true"][data-moment-record="true"] .scene-best { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  .moment-world, .moment-world *, [data-moment-directed="true"] .moment-record,
  #zineApp[data-moment-directed="true"] .press-drive,
  #zineApp[data-moment-directed="true"] .press-housing,
  #zineApp[data-moment-directed="true"] .press-roller-top,
  #zineApp[data-moment-directed="true"] #zineChallengeScene,
  #zineCaseApp[data-moment-directed="true"] .case-folder-tab {
    animation: none !important; transition: none !important;
  }
}
@media (forced-colors: active) {
  .moment-world { display: none !important; }
  #zineApp[data-moment-active="true"] .moment-record { color: CanvasText; background: Canvas; filter: none; outline: 2px solid CanvasText; }
  #zineApp .moment-record-mark { color: CanvasText; }
  #zineApp .moment-record::before { display: none; }
}