/* Story + Case material production pass. Blank photographic objects, never
   scenario/word bitmaps. The existing sheet and 3-D cover remain the only
   carriers of their ink and the only owners of their finite movements. */
@media (min-width: 901px) and (min-height: 561px) {
  #zineStoryApp {
    --director-pad: url("assets/nachtzine/shipping/story-case/director-pad-v1.webp");
    --brief-sheet: url("assets/nachtzine/shipping/story-case/brief-sheet-v1.webp");
    overflow: clip;
  }
  #zineStoryApp .story-desk::before {
    inset: -24px -6px -18px -6px;
    background: var(--director-pad) center / 100% 100% no-repeat;
    clip-path: none;
    transform: rotate(-.35deg);
    filter: drop-shadow(.7px 2px .7px #102e2b80) drop-shadow(4px 7px 4px #102e2b40);
  }
  #zineStoryApp .story-desk::after { content: none; }
  #zineStoryApp .story-sheet { top: 36px; height: calc(100% - 36px); }
  #zineStoryApp .story-departure-sheet {
    position: absolute; width: 100%; z-index: 4; pointer-events: none;
    animation: story-brief-tear-out 240ms steps(1, end) both;
  }
  @keyframes story-brief-tear-out {
    0% { transform: rotate(-.35deg); opacity: 1; }
    25% { transform: translate(-8%, -4%) rotate(-2.4deg); opacity: 1; }
    50% { transform: translate(-45%, -8%) rotate(-6deg); opacity: 1; }
    75%, 100% { transform: translate(-116%, -18%) rotate(-9deg); opacity: 0; }
  }
  #zineStoryApp .story-paper-lift {
    inset: 0 0 10px;
    filter: drop-shadow(.5px 1px .5px #55492c50) drop-shadow(2px 3px 2px #55492c20);
  }
  #zineStoryApp .story-paper-lift::before { content: none; }
  #zineStoryApp .story-paper-surface {
    background: var(--brief-sheet) center / 100% 100% no-repeat;
    /* The image's actual torn glue seam replaces the generated CSS contour. */
    clip-path: none !important;
  }
  #zineStoryApp .story-copy {
    padding-top: clamp(64px, 7.4vh, 80px);
    padding-bottom: clamp(28px, 3.5vh, 40px);
  }
  #zineStoryApp .story-type { top: 19px; color: #bc4425; }
  #zineStoryApp .story-type::before { border-width: 2px; }
  #zineStoryApp .story-stroke {
    background: #bc4425;
    mask: var(--ink-grain-mask, none) 73px 29px / 192px 160px repeat;
  }

  #zineCaseApp {
    --file-slip: url("assets/nachtzine/shipping/story-case/index-slip-v1.webp");
    --brief-sheet: url("assets/nachtzine/shipping/story-case/brief-sheet-v1.webp");
  }
  #zineCaseApp .case-levels .case-choice-paper {
    inset: -4px -2px -3px;
    /* Macro fibres need the same material scale as the dossier. The newly
       photographed edge/lift is retained, not multiplied into a flat icon. */
    background-image: var(--file-slip), var(--stock);
    background-position: center, 173px 51px;
    background-size: 100% 100%, 660px;
    background-repeat: no-repeat, repeat;
    background-blend-mode: multiply;
    clip-path: none !important;
    mask: var(--file-slip) center / 100% 100% no-repeat;
  }
  #zineCaseApp .case-levels button[aria-pressed="true"] .case-choice-paper {
    background-color: var(--ink);
    background-blend-mode: multiply;
    mask: var(--file-slip) center / 100% 100% no-repeat;
  }
  #zineCaseApp .case-levels button {
    padding-top: 24px;
    padding-bottom: 15px;
    filter: drop-shadow(.6px 1px .6px #59472170) drop-shadow(2px 3px 2px #59472130);
  }
  #zineCaseApp .case-levels button[aria-pressed="true"] { filter: drop-shadow(.5px 1px .5px #59472170); }
  #zineCaseApp .case-levels button[aria-pressed="true"]::after { bottom: 6px; }
  #zineCaseApp .case-note .case-note-paper {
    inset: 4% 0;
    background-image: var(--brief-sheet), var(--stock);
    background-position: center, 43px 181px;
    background-size: 100% 100%, 700px;
    background-repeat: no-repeat, repeat;
    background-blend-mode: multiply;
    mask: var(--brief-sheet) center / 100% 100% no-repeat;
    clip-path: none !important;
  }
  #zineCaseApp .case-note:nth-child(2n) .case-note-paper { background-position: center, 291px 52px; }
  #zineCaseApp .case-note:nth-child(3n) .case-note-paper { background-position: center, 143px 307px; }
  #zineCaseApp .case-levels button:nth-of-type(2) .case-choice-paper { background-position: center, 310px 178px; }
  #zineCaseApp .case-levels button:nth-of-type(3) .case-choice-paper { background-position: center, 70px 305px; }
  #zineCaseApp .case-note {
    filter: drop-shadow(.7px 1.6px .7px #59472180) drop-shadow(2px 4px 2px #5947212e);
  }
  #zineCaseApp .case-note:nth-child(2n) {
    filter: drop-shadow(.7px 1.6px .7px #59472180) drop-shadow(2px 4px 2px #5947212e);
  }
  /* These real page edges replace the two geometric strips behind the cover.
     Their visibility remains entirely controlled by the original Case phase. */
  #zineCaseApp .case-file-edges span {
    height: 66px;
    background-image: var(--brief-sheet), var(--stock);
    background-position: center, 120px 241px;
    background-size: 100% 100%, 700px;
    background-blend-mode: multiply;
    mask: var(--brief-sheet) center / 100% 100% no-repeat;
    clip-path: none;
  }

  /* Failed optional photography must never erase its reading substrate.
     The existing material gate chooses fallback; no retry or timer here. */
  #zineStoryApp[data-material-state="fallback"] .story-desk::before {
    background: var(--paper) var(--stock) 31px 83px / 740px;
    background-blend-mode: multiply;
  }
  #zineStoryApp[data-material-state="fallback"] .story-paper-surface {
    background: var(--paper) var(--stock) 24px 74px / 850px;
    background-blend-mode: multiply;
  }
  #zineCaseApp[data-material-state="fallback"] :is(.case-choice-paper, .case-note-paper, .case-file-edges span) {
    mask: none;
    background: var(--paper) var(--stock) 43px 181px / 700px;
    background-blend-mode: multiply;
  }
  #zineCaseApp[data-material-state="fallback"] .case-levels button[aria-pressed="true"] .case-choice-paper {
    mask: none;
    background: var(--ink) var(--xerox) 0 0 / 450px;
    background-blend-mode: multiply;
  }
}

@media (min-width: 901px) and (min-height: 561px) and (max-height: 800px) {
  #zineStoryApp .story-desk::before { inset-block: -17px -14px; }
  #zineStoryApp .story-sheet { top: 28px; height: calc(100% - 28px); }
  #zineStoryApp .story-copy { padding-top: 57px; padding-bottom: 22px; }
  #zineStoryApp .story-type { top: 17px; }
  #zineCaseApp .case-levels button { padding-top: 23px; padding-bottom: 15px; }
}

@media (forced-colors: active) {
  #zineStoryApp .story-desk::before { display: none; }
  #zineStoryApp .story-paper-surface,
  #zineCaseApp .case-note .case-note-paper {
    background: Canvas; border: 2px solid CanvasText; mask: none;
  }
  #zineStoryApp .story-type { color: CanvasText; }
  #zineStoryApp .story-stroke { background: CanvasText; mask: none; }
  #zineCaseApp .case-levels .case-choice-paper { display: none; }
}

@media (max-width: 900px), (max-height: 560px), (prefers-reduced-motion: reduce) {
  #zineStoryApp .story-departure-sheet { display: none; }
}