/*
  Collage CSS - Mixed-media composition styles
  Analog feel with torn edges, visible seams, and layering effects
*/

/* ─────────────────────────────────────────────────────
   Collage Container
   ───────────────────────────────────────────────────── */

.collage {
  position: relative;
  margin: 2rem 0;
  background: transparent;
  overflow: hidden;
}

.collage-layers {
  position: relative;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────
   Size Variants
   ───────────────────────────────────────────────────── */

.collage.portrait {
  aspect-ratio: 3/4;
  max-width: 400px;
}

.collage.landscape {
  aspect-ratio: 4/3;
  max-width: 600px;
}

.collage.square {
  aspect-ratio: 1/1;
  max-width: 400px;
}

.collage.wide {
  aspect-ratio: 16/9;
  max-width: 800px;
}

/* ─────────────────────────────────────────────────────
   Layer Elements
   ───────────────────────────────────────────────────── */

.collage-layer {
  position: absolute;
  transition: transform 0.3s ease;
}

/* Torn edge effects using clip-path */
.torn-edge-1 {
  clip-path: polygon(
    0% 8%, 15% 0%, 30% 5%, 45% 2%, 60% 8%, 
    75% 3%, 85% 7%, 100% 0%, 100% 92%, 
    85% 100%, 70% 95%, 55% 98%, 40% 92%, 
    25% 97%, 10% 93%, 0% 100%
  );
}

.torn-edge-2 {
  clip-path: polygon(
    0% 5%, 12% 2%, 28% 8%, 42% 0%, 58% 6%, 
    72% 1%, 88% 7%, 100% 3%, 100% 95%, 
    88% 100%, 74% 93%, 60% 98%, 46% 94%, 
    32% 97%, 18% 91%, 0% 100%
  );
}

.torn-edge-3 {
  clip-path: polygon(
    0% 2%, 18% 8%, 32% 0%, 48% 5%, 62% 2%, 
    78% 7%, 92% 1%, 100% 6%, 100% 98%, 
    82% 100%, 68% 95%, 54% 100%, 38% 96%, 
    22% 98%, 8% 94%, 0% 100%
  );
}

/* Cutout shapes for diverse cropping */
.cutout-circle {
  clip-path: circle(50% at 50% 50%);
}

.cutout-hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.cutout-triangle {
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

/* ─────────────────────────────────────────────────────
   Blend Modes & Effects
   ───────────────────────────────────────────────────── */

.blend-multiply {
  mix-blend-mode: multiply;
}

.blend-screen {
  mix-blend-mode: screen;
}

.blend-overlay {
  mix-blend-mode: overlay;
}

.blend-soft-light {
  mix-blend-mode: soft-light;
}

.blend-color-burn {
  mix-blend-mode: color-burn;
}

.blend-darken {
  mix-blend-mode: darken;
}

/* ─────────────────────────────────────────────────────
   Color Filters (Site Palette)
   ───────────────────────────────────────────────────── */

.filter-cream {
  filter: sepia(0.6) hue-rotate(20deg) brightness(1.1) contrast(0.9);
}

.filter-charcoal {
  filter: grayscale(0.8) contrast(1.2) brightness(0.6);
}

.filter-gold {
  filter: sepia(0.8) hue-rotate(30deg) brightness(1.2) contrast(1.1);
}

.filter-warm {
  filter: sepia(0.3) hue-rotate(10deg) brightness(1.05);
}

.filter-vintage {
  filter: sepia(0.5) contrast(1.1) brightness(0.95) saturate(0.8);
}

/* ─────────────────────────────────────────────────────
   Transforms & Positioning
   ───────────────────────────────────────────────────── */

.rotate-slight {
  transform: rotate(-2deg);
}

.rotate-more {
  transform: rotate(3deg);
}

.rotate-reverse {
  transform: rotate(-1.5deg);
}

.scale-up {
  transform: scale(1.1);
}

.scale-down {
  transform: scale(0.9);
}

/* Layer positioning */
.layer-back {
  z-index: 1;
}

.layer-middle {
  z-index: 2;
}

.layer-front {
  z-index: 3;
}

.layer-top {
  z-index: 4;
}

/* Positioning helpers */
.pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos-top-left {
  top: 10%;
  left: 10%;
}

.pos-top-right {
  top: 10%;
  right: 10%;
}

.pos-bottom-left {
  bottom: 10%;
  left: 10%;
}

.pos-bottom-right {
  bottom: 10%;
  right: 10%;
}

/* ─────────────────────────────────────────────────────
   Special Effects
   ───────────────────────────────────────────────────── */

.paper-texture::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="%23000" opacity="0.1"/><circle cx="80" cy="40" r="1" fill="%23000" opacity="0.08"/><circle cx="40" cy="80" r="1" fill="%23000" opacity="0.12"/></svg>');
  pointer-events: none;
}

.shadow-analog {
  filter: drop-shadow(2px 3px 8px rgba(0,0,0,0.15));
}

.shadow-deep {
  filter: drop-shadow(4px 6px 12px rgba(0,0,0,0.25));
}

/* ─────────────────────────────────────────────────────
   Caption Styling
   ───────────────────────────────────────────────────── */

.collage-caption {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-dim, #666);
  text-align: center;
}

/* ─────────────────────────────────────────────────────
   Responsive Adjustments
   ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .collage {
    margin: 1.5rem 0;
  }
  
  .collage.wide {
    aspect-ratio: 4/3;
  }
  
  .collage.landscape {
    aspect-ratio: 1/1;
  }
  
  /* Simplify transforms on mobile */
  .rotate-slight,
  .rotate-more,
  .rotate-reverse {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────
   Hover Effects (Subtle)
   ───────────────────────────────────────────────────── */

.collage:hover .collage-layer {
  transform: scale(1.02);
}

.collage:hover .rotate-slight {
  transform: rotate(-2.5deg) scale(1.02);
}

.collage:hover .rotate-more {
  transform: rotate(3.5deg) scale(1.02);
}