/* ============ PHOTO PLACEHOLDERS ============
   CSS-painted scenes that LOOK like warehouse photos.
   Drop these in until real photos arrive. */

.photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #1a1815;
  isolation: isolate;
}
.photo__atmosphere,
.photo__scene,
.photo__grain,
.photo__vignette,
.photo__overlay {
  position: absolute;
  inset: 0;
}
.photo__overlay {
  display: flex;
  align-items: end;
  padding: 24px;
  pointer-events: none;
}

/* === Tone: golden-hour warm === */
.photo--amber .photo__atmosphere {
  background:
    radial-gradient(ellipse 80% 60% at 75% 25%, rgba(255, 180, 90, 0.55), transparent 55%),
    radial-gradient(ellipse 100% 80% at 20% 80%, rgba(140, 70, 30, 0.6), transparent 60%),
    linear-gradient(180deg, #2a1d12 0%, #1a1208 50%, #0d0805 100%);
}
.photo--amber .photo__vignette {
  background: radial-gradient(ellipse 120% 100% at center, transparent 30%, rgba(0,0,0,0.55) 100%);
}

/* === Tone: cool industrial === */
.photo--cool .photo__atmosphere {
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, rgba(120, 160, 200, 0.4), transparent 60%),
    radial-gradient(ellipse 100% 80% at 70% 90%, rgba(40, 60, 80, 0.7), transparent 60%),
    linear-gradient(180deg, #1f2832 0%, #15191e 60%, #0a0c10 100%);
}
.photo--cool .photo__vignette {
  background: radial-gradient(ellipse 120% 100% at center, transparent 35%, rgba(0,0,0,0.5) 100%);
}

/* === Tone: bright daylight === */
.photo--bright .photo__atmosphere {
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(255, 240, 210, 0.7), transparent 60%),
    linear-gradient(180deg, #d4cdb9 0%, #a89980 50%, #6b5d48 100%);
}
.photo--bright .photo__vignette {
  background: radial-gradient(ellipse 120% 100% at center, transparent 50%, rgba(0,0,0,0.25) 100%);
}

/* === Tone: deep red brand === */
.photo--red .photo__atmosphere {
  background:
    radial-gradient(ellipse 90% 70% at 60% 30%, rgba(212, 52, 30, 0.5), transparent 60%),
    radial-gradient(ellipse 100% 80% at 20% 90%, rgba(60, 10, 5, 0.8), transparent 65%),
    linear-gradient(180deg, #2a0e07 0%, #1a0805 60%, #0a0303 100%);
}
.photo--red .photo__vignette {
  background: radial-gradient(ellipse 110% 100% at center, transparent 30%, rgba(0,0,0,0.65) 100%);
}

/* === Universal grain === */
.photo__grain {
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 4px);
  opacity: 0.7;
  mix-blend-mode: overlay;
}

/* ===== Scene: forklift in warehouse ===== */
.photo--forklift-warehouse .photo__scene {
  background:
    /* warehouse rack lines (back wall) */
    linear-gradient(90deg, transparent 0%, transparent 5%, rgba(0,0,0,0.4) 5%, rgba(0,0,0,0.4) 5.5%, transparent 5.5%, transparent 14%, rgba(0,0,0,0.4) 14%, rgba(0,0,0,0.4) 14.5%, transparent 14.5%, transparent 23%, rgba(0,0,0,0.4) 23%, rgba(0,0,0,0.4) 23.5%, transparent 23.5%, transparent 32%, rgba(0,0,0,0.4) 32%, rgba(0,0,0,0.4) 32.5%, transparent 32.5%) bottom / 100% 70% no-repeat,
    /* horizontal rack shelves */
    linear-gradient(0deg, transparent 25%, rgba(0,0,0,0.3) 25%, rgba(0,0,0,0.3) 26%, transparent 26%, transparent 45%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.3) 46%, transparent 46%, transparent 65%, rgba(0,0,0,0.3) 65%, rgba(0,0,0,0.3) 66%, transparent 66%) bottom / 100% 70% no-repeat,
    /* floor */
    linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.4) 70%, rgba(0,0,0,0.6) 100%) bottom / 100% 100% no-repeat;
}
.photo--forklift-warehouse .photo__scene::before {
  /* forklift silhouette body */
  content: "";
  position: absolute;
  bottom: 8%; left: 35%;
  width: 38%; height: 50%;
  background: linear-gradient(180deg, #b81e0c 0%, #d4341e 50%, #8a1408 100%);
  clip-path: polygon(
    /* counterweight / cabin */
    35% 100%, 35% 65%, 30% 60%, 30% 35%, 40% 35%, 40% 20%, 60% 20%, 60% 35%, 70% 35%, 70% 65%, 65% 75%,
    /* mast going up */
    100% 75%, 100% 0%, 95% 0%, 95% 60%, 85% 60%, 85% 100%
  );
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.photo--forklift-warehouse .photo__scene::after {
  /* forks + load shadow */
  content: "";
  position: absolute;
  bottom: 4%; left: 50%;
  width: 25%; height: 6%;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
  filter: blur(2px);
  border-radius: 50%;
}

/* ===== Scene: technician at work ===== */
.photo--technician .photo__scene {
  background:
    radial-gradient(ellipse 60% 80% at 50% 60%, rgba(255, 200, 130, 0.3), transparent 70%);
}
.photo--technician .photo__scene::before {
  /* technician silhouette (head + shoulders + arm reaching) */
  content: "";
  position: absolute;
  bottom: 0; left: 25%;
  width: 50%; height: 80%;
  background: linear-gradient(180deg, #2a2520 0%, #1a1612 50%, #0a0805 100%);
  clip-path: polygon(
    /* head */
    40% 0%, 60% 0%, 65% 8%, 65% 15%, 60% 18%,
    /* neck */
    60% 22%, 70% 25%,
    /* shoulder right */
    85% 35%, 90% 50%, 88% 70%,
    /* arm reaching */
    100% 55%, 100% 65%, 90% 75%, 80% 70%,
    /* body */
    75% 100%, 25% 100%,
    /* shoulder left */
    15% 70%, 12% 50%, 18% 35%,
    /* neck left */
    35% 25%, 40% 22%, 35% 18%, 30% 15%, 30% 8%
  );
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.5));
}
.photo--technician .photo__scene::after {
  /* tool / equipment in foreground */
  content: "";
  position: absolute;
  bottom: 8%; right: 10%;
  width: 22%; height: 25%;
  background: linear-gradient(135deg, #d4341e, #8a1408);
  clip-path: polygon(0% 100%, 10% 50%, 30% 30%, 70% 30%, 90% 50%, 100% 100%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  opacity: 0.85;
}

/* ===== Scene: warehouse interior wide ===== */
.photo--warehouse .photo__scene {
  background:
    /* perspective floor */
    linear-gradient(180deg, transparent 60%, rgba(40,30,20,0.4) 70%, rgba(20,15,10,0.7) 100%),
    /* ceiling lights */
    radial-gradient(ellipse 8% 4% at 20% 8%, rgba(255,240,200,0.8), transparent 60%),
    radial-gradient(ellipse 8% 4% at 50% 6%, rgba(255,240,200,0.9), transparent 60%),
    radial-gradient(ellipse 8% 4% at 80% 8%, rgba(255,240,200,0.8), transparent 60%);
}
.photo--warehouse .photo__scene::before {
  /* left rack */
  content: "";
  position: absolute;
  bottom: 20%; left: 0;
  width: 25%; height: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.6) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.5) 0 2px, transparent 2px 24px),
    rgba(40, 30, 20, 0.4);
  transform: perspective(400px) rotateY(35deg);
  transform-origin: left center;
}
.photo--warehouse .photo__scene::after {
  /* right rack */
  content: "";
  position: absolute;
  bottom: 20%; right: 0;
  width: 25%; height: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.6) 0 2px, transparent 2px 18px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.5) 0 2px, transparent 2px 24px),
    rgba(40, 30, 20, 0.4);
  transform: perspective(400px) rotateY(-35deg);
  transform-origin: right center;
}

/* ===== Scene: portrait (head & shoulders) ===== */
.photo--portrait .photo__scene::before {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 95%;
  background: linear-gradient(180deg, #5c4a3a 0%, #2a2018 60%, #15100b 100%);
  clip-path: polygon(
    /* head */
    35% 5%, 65% 5%, 72% 15%, 72% 25%, 65% 32%,
    /* neck */
    65% 38%, 75% 42%,
    /* shoulders */
    95% 55%, 100% 100%,
    /* bottom mirror */
    0% 100%, 5% 55%,
    /* shoulder left */
    25% 42%, 35% 38%,
    /* neck left */
    35% 32%, 28% 25%, 28% 15%
  );
  filter: drop-shadow(0 -8px 24px rgba(255, 200, 150, 0.15));
}
.photo--portrait .photo__scene::after {
  /* highlight on cheek */
  content: "";
  position: absolute;
  top: 18%; left: 55%;
  width: 12%; height: 14%;
  background: radial-gradient(ellipse, rgba(255, 220, 180, 0.4), transparent 70%);
  border-radius: 50%;
}

/* ===== Scene: forklift studio (white seamless) ===== */
.photo--studio .photo__atmosphere {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255, 255, 255, 1), transparent 80%),
    linear-gradient(180deg, #f5f3ee 0%, #d8d2c2 70%, #6b6253 100%);
}
.photo--studio .photo__vignette { background: none; }
.photo--studio .photo__scene::before {
  content: "";
  position: absolute;
  bottom: 12%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 65%;
  background: linear-gradient(180deg, #d4341e 0%, #b81e0c 60%, #6a0d04 100%);
  clip-path: polygon(
    20% 100%, 20% 70%, 12% 65%, 12% 40%, 25% 40%, 25% 22%, 55% 22%, 55% 40%, 70% 40%, 70% 70%, 65% 80%,
    100% 80%, 100% 0%, 92% 0%, 92% 65%, 78% 65%, 78% 100%
  );
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
}

/* ===== Scene: parts/spec ===== */
.photo--parts .photo__scene {
  background:
    radial-gradient(circle at 30% 30%, #4a4036, transparent 50%),
    radial-gradient(circle at 70% 60%, #2a2018, transparent 60%),
    repeating-linear-gradient(45deg, #1a1612 0 12px, #221c16 12px 24px);
}
.photo--parts .photo__scene::before {
  /* gear/cog silhouette */
  content: "";
  position: absolute;
  top: 30%; left: 40%;
  width: 30%; height: 40%;
  background: radial-gradient(circle, #888 0 30%, #555 30% 35%, #888 35% 50%, transparent 50%);
  border-radius: 50%;
  opacity: 0.6;
  filter: blur(0.5px);
}
.photo--parts .photo__scene::after {
  /* second gear */
  content: "";
  position: absolute;
  top: 50%; left: 25%;
  width: 22%; height: 30%;
  background: radial-gradient(circle, #aaa 0 30%, #666 30% 35%, #aaa 35% 50%, transparent 50%);
  border-radius: 50%;
  opacity: 0.4;
  filter: blur(1px);
}

/* ===== Scene: shop bay (overhead doors) ===== */
.photo--shop .photo__scene {
  background:
    /* shop floor */
    linear-gradient(180deg, transparent 65%, rgba(60,50,40,0.5) 75%, rgba(20,15,10,0.8) 100%),
    /* overhead light */
    radial-gradient(ellipse 40% 12% at 50% 5%, rgba(255,240,210,0.6), transparent 70%);
}
.photo--shop .photo__scene::before {
  /* big bay door */
  content: "";
  position: absolute;
  top: 8%; left: 25%;
  width: 50%; height: 60%;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.4) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #4a3e30, #2a2218);
  border: 2px solid rgba(0,0,0,0.5);
}

/* ===== Scene: city/Chicago skyline ===== */
.photo--chicago .photo__scene {
  background:
    /* sky */
    linear-gradient(180deg, #2a3045 0%, #4a3848 40%, #6a4838 60%, #4a2820 100%);
}
.photo--chicago .photo__scene::before {
  content: "";
  position: absolute;
  bottom: 25%; left: 0; right: 0;
  height: 50%;
  background:
    /* skyline buildings */
    linear-gradient(90deg,
      transparent 0%, transparent 5%,
      #0a0a10 5%, #0a0a10 12%,
      transparent 12%, transparent 14%,
      #0a0a10 14%, #0a0a10 22%,
      transparent 22%, transparent 24%,
      #0a0a10 24%, #0a0a10 35%,
      transparent 35%, transparent 38%,
      #0a0a10 38%, #0a0a10 50%,
      transparent 50%, transparent 53%,
      #0a0a10 53%, #0a0a10 60%,
      transparent 60%, transparent 63%,
      #0a0a10 63%, #0a0a10 75%,
      transparent 75%, transparent 78%,
      #0a0a10 78%, #0a0a10 88%,
      transparent 88%, transparent 92%,
      #0a0a10 92%, #0a0a10 100%
    ) bottom / 100% 60% no-repeat,
    linear-gradient(90deg,
      transparent 0%, transparent 8%,
      #050508 8%, #050508 18%,
      transparent 18%, transparent 22%,
      #050508 22%, #050508 30%,
      transparent 30%, transparent 35%,
      #050508 35%, #050508 48%,
      transparent 48%, transparent 55%,
      #050508 55%, #050508 70%,
      transparent 70%, transparent 78%,
      #050508 78%, #050508 95%,
      transparent 95%, transparent 100%
    ) bottom / 100% 100% no-repeat;
}
.photo--chicago .photo__scene::after {
  /* window dots */
  content: "";
  position: absolute;
  bottom: 25%; left: 0; right: 0; height: 50%;
  background-image: radial-gradient(circle, rgba(255, 220, 150, 0.5) 1px, transparent 1.5px);
  background-size: 12px 8px;
  background-position: bottom;
  opacity: 0.8;
}

/* ============ DROP PHOTO WRAPPER ============ */
.drop-photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.drop-photo image-slot {
  z-index: 2;
  background: transparent !important;
}
.drop-photo image-slot::part(label) { display: none; }
.drop-photo__bg { z-index: 1; }
.drop-photo__over {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

/* image-slot styling override - empty state shows our painted scene */
.drop-photo image-slot[data-empty="true"] {
  background: transparent;
  border: none;
}