/* ============================================================
   PHOTO SIMULATIONS — Vintage / Sepia Holocaust Archive Imagery
   CSS-based visual representations of archival materials
   ============================================================ */

/* ── REAL SVG SCENE PHOTO ────────────────────────────────────── */
.photo-sim-real {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #1a1208;
}
.photo-sim-real img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(0.4) contrast(0.9) brightness(0.82);
  transition: filter 0.6s ease;
}
.archive-card:hover .photo-sim-real img {
  filter: sepia(0.2) contrast(0.95) brightness(0.9);
}
.photo-sim-real::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 5px solid rgba(90, 56, 16, 0.7);
  z-index: 3;
  pointer-events: none;
}
/* Hero floating photos use same class */
.hero-photo .photo-sim-real {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
}

/* ── BASE PHOTO FRAME ───────────────────────────────────────── */
.photo-sim {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #2a2218;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Aged photo border effect */
.photo-sim::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 6px solid transparent;
  background: linear-gradient(#1a1208, #1a1208) padding-box,
              linear-gradient(135deg, #8B7040, #4A3510, #8B7040, #4A3510) border-box;
  z-index: 3;
  pointer-events: none;
}

/* Film grain overlay on photos */
.photo-sim::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size: 150px;
  opacity: 0.25;
  mix-blend-mode: multiply;
  z-index: 2;
  pointer-events: none;
}

/* Sepia / aged color cast */
.photo-sim-inner {
  width: 100%;
  height: 100%;
  position: relative;
  filter: sepia(0.85) contrast(0.9) brightness(0.85);
}

/* ── PHOTO TYPE 1: FAMILY PORTRAIT ──────────────────────────── */
.photo-family {
  background: linear-gradient(180deg, #c8b898 0%, #a89878 60%, #887858 100%);
}
.photo-family .figure-group {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.photo-family .figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.photo-family .figure-head {
  border-radius: 50%;
  background: #6a5540;
  position: relative;
}
.photo-family .figure-body {
  background: #3a2a18;
}
/* Adult figures */
.photo-family .figure.adult .figure-head { width: 22px; height: 26px; }
.photo-family .figure.adult .figure-body { width: 36px; height: 58px; border-radius: 4px 4px 0 0; }
/* Child figures */
.photo-family .figure.child .figure-head { width: 16px; height: 18px; }
.photo-family .figure.child .figure-body { width: 26px; height: 38px; border-radius: 3px 3px 0 0; }

/* Studio backdrop gradient */
.photo-family .backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #d8c8a8 0%, #a89878 55%, #786848 100%);
}

/* ── PHOTO TYPE 2: GROUP / COMMUNITY ────────────────────────── */
.photo-group {
  background: linear-gradient(170deg, #b0a080 0%, #908060 100%);
}
.photo-group .group-row {
  position: absolute;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.photo-group .group-row.back  { bottom: 48%; left: 10%; }
.photo-group .group-row.front { bottom: 15%; left: 8%; }
.photo-group .g-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.photo-group .g-figure .g-head { border-radius: 50%; background: #5a4530; }
.photo-group .g-figure .g-body { background: #2a1e10; }
.photo-group .g-figure.sm .g-head { width: 10px; height: 12px; }
.photo-group .g-figure.sm .g-body { width: 16px; height: 28px; }
.photo-group .g-figure.md .g-head { width: 13px; height: 15px; }
.photo-group .g-figure.md .g-body { width: 20px; height: 34px; }

/* Building silhouette background */
.photo-group .building {
  position: absolute;
  bottom: 0;
  background: #3a3020;
}

/* ── PHOTO TYPE 3: DOCUMENT ──────────────────────────────────── */
.photo-document {
  background: linear-gradient(160deg, #d8cca8 0%, #c0b088 100%);
  padding: 12px;
}
.photo-document .doc-paper {
  width: 85%;
  height: 88%;
  background: linear-gradient(170deg, #ece0c0 0%, #d8cc9e 100%);
  border: 1px solid #9a8860;
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  gap: 5px;
  position: relative;
}
.photo-document .doc-header {
  font-size: 0;
  height: 8px;
  background: #5a4020;
  width: 60%;
  margin: 0 auto 6px;
  border-radius: 1px;
}
.photo-document .doc-line {
  height: 3px;
  background: #7a6040;
  border-radius: 1px;
  opacity: 0.7;
}
.photo-document .doc-line.short { width: 60%; }
.photo-document .doc-line.medium { width: 80%; }
.photo-document .doc-line.full { width: 100%; }
.photo-document .doc-seal {
  position: absolute;
  bottom: 14px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 2px solid #8a6030;
  border-radius: 50%;
  opacity: 0.6;
}
.photo-document .doc-stamp {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 24px;
  height: 14px;
  border: 1.5px solid #c04020;
  opacity: 0.5;
  transform: rotate(-8deg);
}

/* ── PHOTO TYPE 4: PORTRAIT — INDIVIDUAL ────────────────────── */
.photo-portrait {
  background: linear-gradient(180deg, #c0b090 0%, #a09070 100%);
}
.photo-portrait .portrait-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, #d0c0a0 0%, #908060 70%);
}
.photo-portrait .portrait-figure {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.photo-portrait .portrait-head {
  width: 36px;
  height: 44px;
  border-radius: 50% 50% 46% 46%;
  background: linear-gradient(180deg, #7a6040 0%, #5a4020 100%);
  position: relative;
  margin-bottom: -2px;
}
.photo-portrait .portrait-shoulders {
  width: 80px;
  height: 70px;
  background: linear-gradient(180deg, #2a2010 0%, #1a1208 100%);
  border-radius: 40px 40px 0 0;
}
/* Collar detail */
.photo-portrait .portrait-head::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 8px;
  background: #e8dcc0;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

/* ── PHOTO TYPE 5: LETTER / MANUSCRIPT ──────────────────────── */
.photo-letter {
  background: linear-gradient(155deg, #d0c4a0 0%, #b8a880 100%);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-letter .letter-paper {
  width: 88%;
  height: 90%;
  background: linear-gradient(175deg, #efe5c5 0%, #ddd0a8 100%);
  border: 1px solid #9a8860;
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transform: rotate(-1.5deg);
  box-shadow: 2px 3px 8px rgba(0,0,0,0.3);
}
/* Handwriting simulation lines */
.photo-letter .hw-line {
  height: 2px;
  background: linear-gradient(90deg, #4a3010, #6a4820, #3a2008, #5a3818);
  border-radius: 2px;
  opacity: 0.75;
}
.photo-letter .hw-line:nth-child(odd) { margin-left: 4px; }
.photo-letter .hw-line.indent { margin-left: 16px; }
.photo-letter .hw-greeting {
  height: 3px;
  background: #3a2008;
  width: 55%;
  margin-bottom: 6px;
  opacity: 0.8;
  border-radius: 2px;
}
.photo-letter .hw-signature {
  height: 2px;
  background: #3a2008;
  width: 40%;
  margin-top: 8px;
  align-self: flex-end;
  opacity: 0.85;
  border-radius: 2px;
  transform: rotate(-3deg);
}

/* ── PHOTO TYPE 6: STREET SCENE ──────────────────────────────── */
.photo-street {
  background: linear-gradient(180deg, #a0a898 0%, #708070 40%, #504840 100%);
}
.photo-street .sky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(180deg, #9098a8 0%, #b0b8c8 100%);
}
.photo-street .building-l {
  position: absolute;
  bottom: 20%;
  left: 4%;
  width: 28%;
  height: 65%;
  background: #484038;
  box-shadow: inset -2px 0 6px rgba(0,0,0,0.4);
}
.photo-street .building-r {
  position: absolute;
  bottom: 20%;
  right: 6%;
  width: 22%;
  height: 55%;
  background: #403830;
}
.photo-street .street {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22%;
  background: linear-gradient(180deg, #706050 0%, #504030 100%);
}
.photo-street .silhouette {
  position: absolute;
  bottom: 22%;
  background: #201808;
  border-radius: 50% 50% 0 0 / 60% 60% 0 0;
}
.photo-street .silhouette.s1 { width: 8px; height: 18px; left: 38%; border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
.photo-street .silhouette.s2 { width: 7px; height: 15px; left: 48%; }
.photo-street .silhouette.s3 { width: 9px; height: 20px; left: 58%; }

/* ── HOVER EFFECT — Sepia lifts on hover ────────────────────── */
.archive-card:hover .photo-sim-inner {
  filter: sepia(0.5) contrast(0.95) brightness(0.95);
  transition: filter 0.6s ease;
}
.photo-sim-inner {
  transition: filter 0.6s ease;
}

/* ── TORN EDGE EFFECT ────────────────────────────────────────── */
.photo-sim.torn-top::before {
  clip-path: polygon(
    0% 3%, 5% 0%, 10% 3%, 15% 0%, 20% 4%, 25% 1%,
    30% 4%, 35% 0%, 40% 3%, 45% 0%, 50% 3%, 55% 1%,
    60% 4%, 65% 0%, 70% 3%, 75% 1%, 80% 4%, 85% 0%,
    90% 3%, 95% 0%, 100% 3%,
    100% 100%, 0% 100%
  );
}

/* ── PHOTO VIGNETTE ──────────────────────────────────────────── */
.photo-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10,8,4,0.55) 100%);
  z-index: 1;
  pointer-events: none;
}

/* ── CORNER FOLD ─────────────────────────────────────────────── */
.photo-fold {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 18px 18px;
  border-color: transparent transparent #1a1208 transparent;
  z-index: 4;
}

/* ── HERO FLOATING PHOTOS ────────────────────────────────────── */
.hero-photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  border: 3px solid rgba(139,106,30,0.5);
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(200,165,94,0.1);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: heroPhotoFloat linear infinite;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-year-stamp {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: 9px;
  color: #c8a858;
  letter-spacing: 2px;
  z-index: 4;
  opacity: 0.8;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* Photo 1 — left side, portrait */
.hp1 {
  width: 160px; height: 200px;
  left: 4%;
  top: 55%;
  transform: rotate(-6deg) translateY(0);
  animation-duration: 18s;
  animation-delay: 0s;
}
/* Photo 2 — right side, portrait */
.hp2 {
  width: 130px; height: 170px;
  right: 5%;
  top: 20%;
  transform: rotate(5deg);
  animation-duration: 22s;
  animation-delay: 2s;
}
/* Photo 3 — left, letter */
.hp3 {
  width: 120px; height: 155px;
  left: 12%;
  top: 18%;
  transform: rotate(3deg);
  animation-duration: 20s;
  animation-delay: 4s;
}
/* Photo 4 — far right, group */
.hp4 {
  width: 180px; height: 140px;
  right: 8%;
  top: 58%;
  transform: rotate(-4deg);
  animation-duration: 24s;
  animation-delay: 1s;
}

@keyframes heroPhotoFloat {
  0%   { opacity: 0; transform: rotate(var(--rot, -4deg)) translateY(30px); }
  8%   { opacity: 0.35; }
  50%  { transform: rotate(var(--rot, -4deg)) translateY(-12px); }
  92%  { opacity: 0.35; }
  100% { opacity: 0; transform: rotate(var(--rot, -4deg)) translateY(30px); }
}
.hp1 { --rot: -6deg; }
.hp2 { --rot: 5deg; }
.hp3 { --rot: 3deg; }
.hp4 { --rot: -4deg; }

@media (max-width: 768px) {
  .hp1, .hp3 { display: none; }
  .hp2 { width: 100px; height: 130px; right: 2%; }
  .hp4 { width: 120px; height: 100px; right: 2%; top: 65%; }
}

/* ── WORN SPOT ────────────────────────────────────────────────── */
.photo-worn {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,240,200,0.08);
  z-index: 2;
}

/* ── YEAR STAMP ──────────────────────────────────────────────── */
.photo-year-stamp {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Courier New', monospace;
  font-size: 7px;
  color: #8a7050;
  letter-spacing: 2px;
  z-index: 4;
  opacity: 0.7;
}