/* Generative archival imagery — all SVG, no raster, no faces.
   These live on paper. A few also work on ink.
*/

.art { position: relative; color: var(--ink); }
.art svg { width: 100%; height: 100%; display: block; }

/* ----- Grain field (animated SVG noise) ----- */
.art-grain {
  background: var(--linen);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.art-grain::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ----- Film leader: SMPTE-style countdown frame ----- */
.art-leader {
  aspect-ratio: 4 / 3;
  background: #0D0D0D;
  color: #F5F2EC;
  overflow: hidden;
}

/* ----- Archival card shell (for sections, tier cards, etc) ----- */
.archive-card {
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  padding: 28px;
}

/* ----- Tape block (a strip of "archival tape" w/ handwriting look) ----- */
.tape {
  position: relative;
  display: inline-block;
  padding: 10px 18px;
  background: #E6DFC9;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-0.6deg);
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.tape::before, .tape::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 12px;
  background-image: linear-gradient(to right, transparent 0, transparent 3px, rgba(0,0,0,0.1) 3px, rgba(0,0,0,0.1) 4px, transparent 4px);
  background-size: 6px 100%;
  opacity: 0.5;
}
.tape::before { left: 0; }
.tape::after { right: 0; transform: scaleX(-1); }

/* ----- Registration marks (corner crosses on hero / frames) ----- */
.reg-frame {
  position: relative;
  padding: 28px;
}
.reg-frame > .reg {
  position: absolute;
  width: 16px; height: 16px;
  opacity: 0.7;
}
.reg-frame > .reg.tl { top: 6px; left: 6px; }
.reg-frame > .reg.tr { top: 6px; right: 6px; }
.reg-frame > .reg.bl { bottom: 6px; left: 6px; }
.reg-frame > .reg.br { bottom: 6px; right: 6px; }

/* ----- Film-leader spinning circle (used decoratively) ----- */
@keyframes leader-sweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.leader-sweep { animation: leader-sweep 4s linear infinite; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .leader-sweep { animation: none; } }

/* ----- Reel / sprocket strip along a side ----- */
.sprocket-strip {
  background: var(--ink);
  padding: 22px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.sprocket-hole {
  width: 18px; height: 10px;
  background: var(--paper);
  border-radius: 1px;
}