/* The parcel: a distinct visual world inside the same app. Kraft paper and
 * physical objects on a desk, where the letters are ink on cream. */

.parcel {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  width: 100%;
  text-align: left;
  padding: var(--sp-4);
  margin-top: var(--sp-3);
  border: 1px dashed var(--brass);
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      -45deg, transparent, transparent 7px,
      rgba(184, 134, 59, 0.04) 7px, rgba(184, 134, 59, 0.04) 8px);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.parcel.ghost {
  border-style: dotted;
  opacity: 0.5;
  cursor: default;
}

.parcel .seal {
  font-size: 1.4rem;
  color: var(--brass);
  line-height: 1;
}

.parcel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 400;
}

.parcel .meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--moon-soft);
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------- the desk */

.packview {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overflow-x: hidden;   /* a tall item's tilt must never buy a sideways scroll */
  overscroll-behavior: contain;
  background: #221d14;
  --motif: var(--brass);
}

.packview .desk {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-16);
}

.packview .desk > h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--motif);
  text-align: center;
  margin: 0 0 var(--sp-8);
}

.packview .close {
  display: block;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--moon-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: var(--sp-2);
}

.packview .item {
  margin: 0 0 var(--sp-6);
  transform: rotate(var(--tilt, 0deg));
}

/* notes — the author's own hand */
.packview .note {
  background: #f4ecd8;
  color: #2a2416;
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  font-family: "Hand", "Spectral", serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
}

.packview .note p { margin: 0 0 0.6em; }
.packview .note p:last-child { margin-bottom: 0; }
.packview .note img { max-width: 100%; height: auto; }

/* photos — bordered prints, tap to lift */
.packview .photo {
  background: #fdfcf8;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.packview .photo img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.packview .photo.lifted img { cursor: zoom-out; }

.packview .photo figcaption {
  font-family: "Hand", "Spectral", serif;
  font-style: italic;
  font-size: var(--text-sm);
  color: #6b6250;
  padding-top: var(--sp-2);
  text-align: center;
}

.packview .photo.lifted {
  position: fixed;
  inset: var(--sp-4);
  z-index: 5;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
}

/* soundbites — labelled cassettes */
.packview .cassette {
  background: #2f2a20;
  border: 1px solid var(--motif);
  border-radius: 2px;
  padding: var(--sp-4);
}

.packview .cassette .label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--motif);
  margin-bottom: var(--sp-3);
}

.packview .cassette audio { width: 100%; }

/* films */
.packview .film video {
  display: block;
  width: 100%;
  height: auto;
  background: #000;
}

.packview .film figcaption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--moon-soft);
  padding-top: var(--sp-2);
}

/* clippings — torn newsprint */
.packview .clipping {
  background: #e8e4d9;
  color: #241f18;
  padding: var(--sp-4);
  clip-path: polygon(
    0 2%, 3% 0, 97% 1.5%, 100% 0, 99% 98%, 96% 100%, 2% 99%, 0 100%);
}

.packview .clipping a {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: #241f18;
  text-decoration: none;
  border-bottom: 1px solid rgba(36, 31, 24, 0.4);
}

.packview .clipping p {
  margin: var(--sp-3) 0 0;
  font-family: "Hand", "Spectral", serif;
  font-style: italic;
  font-size: var(--text-sm);
  color: #4a4234;
}

/* -------------------------------------------------- the unwrapping */

.packview.unwrapping .desk > h2,
.packview.unwrapping .item {
  opacity: 0;
  animation: settle 0.5s ease-out forwards;
}

.packview.unwrapping .item:nth-child(2) { animation-delay: 0.35s; }
.packview.unwrapping .item:nth-child(3) { animation-delay: 0.5s; }
.packview.unwrapping .item:nth-child(4) { animation-delay: 0.65s; }
.packview.unwrapping .item:nth-child(n + 5) { animation-delay: 0.8s; }

@keyframes settle {
  from { opacity: 0; transform: translateY(8px) rotate(0deg) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .packview .item { transform: none; }
  .packview.unwrapping .desk > h2,
  .packview.unwrapping .item { opacity: 1; animation: none; }
}

/* the seal's postscript — no affordance, found only by holding */
.month-head { position: relative; }

.postscript-note {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 3;
  margin-top: var(--sp-2);
  padding: var(--sp-4);
  background: #f4ecd8;
  color: #2a2416;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  font-family: "Hand", "Spectral", serif;
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.postscript-note.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .postscript-note { transition: none; }
}