/* shared/placeholders.css — photo placeholder containers + scroll-reveal */
/* ── Base placeholder ──────────────────────────────────────────────── */
.ph {
position: relative;
display: block;
width: 100%;
aspect-ratio: 3 / 4;
background: var(--reveal-bg, var(--bg-deep));
overflow: hidden;
}
/* Aspect-ratio variants */
.ph.photo { aspect-ratio: 4 / 5; }
.ph.tall  { aspect-ratio: 2 / 3; }
/* ── Color modifier variants ────────────────────────────────────────── */
.ph--blush     { background: var(--blush-light); }
.ph--champagne { background: var(--champagne); }
.ph--ivory     { background: var(--surface); }
/* ── data-label: prototype caption overlay ──────────────────────────── */
.ph[data-label]::after {
content: attr(data-label);
position: absolute;
bottom: 12px;
left: 16px;
font-family: "IBM Plex Mono", monospace;
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink);
opacity: 0.35;
pointer-events: none;
}
/* ── Skeleton placeholders (admin / karte pages) ────────────────────── */
.ph-head {
display: block;
height: 1.2em;
background: var(--bg-deep);
border-radius: 2px;
}
.ph-body {
display: block;
height: 0.85em;
background: var(--bg-deep);
border-radius: 2px;
opacity: 0.55;
}
/* ── Scroll-reveal: image entrance animation ────────────────────────── */
.reveal-img {
opacity: 0;
transform: scale(0.97) translateY(6px);
transition:
opacity  0.6s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-img.is-in {
opacity: 1;
transform: scale(1) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.reveal-img { opacity: 1; transform: none; transition: none; }
}