/*
  Vigil Hero Image Effects
  CSS clipping, masking, and layering for generated fever-dream images.
  Each effect evokes a different analog/lo-fi treatment.
*/

/* ─────────────────────────────────────────────────────
   Base: All vigil hero images get subtle shared treatment
   ───────────────────────────────────────────────────── */

.vigil-hero-image {
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.vigil-hero-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* ─────────────────────────────────────────────────────
   Effect 1: Torn Reveal
   Torn paper edge, slight rotation, vintage warmth.
   Like a photo torn from a zine and taped at an angle.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--torn-reveal {
  transform: rotate(-1.2deg);
  margin: 1rem 0 2rem;
}

.vigil-hero-image--torn-reveal img {
  clip-path: polygon(
    0% 6%, 12% 2%, 28% 7%, 42% 0%, 58% 5%,
    72% 1%, 88% 6%, 100% 3%, 100% 94%,
    88% 100%, 74% 95%, 60% 98%, 46% 93%,
    32% 97%, 18% 92%, 0% 100%
  );
  filter: sepia(0.4) contrast(1.05) brightness(0.95);
}

.vigil-hero-image--torn-reveal:hover img {
  transform: scale(1.03) rotate(0.5deg);
  filter: sepia(0.2) contrast(1.1) brightness(1.0);
}

/* ─────────────────────────────────────────────────────
   Effect 2: Hex Window
   Hexagonal cutout — looking through a porthole or
   instrument aperture at the geometric patterns within.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--hex-window {
  max-width: 420px;
  margin: 1rem auto 2rem;
}

.vigil-hero-image--hex-window img {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  filter: grayscale(0.3) contrast(1.15);
}

.vigil-hero-image--hex-window::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.15) 100%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  pointer-events: none;
}

.vigil-hero-image--hex-window:hover img {
  transform: scale(1.06);
  filter: grayscale(0.1) contrast(1.2);
}

/* ─────────────────────────────────────────────────────
   Effect 3: Diamond Frame
   Rotated square — like a radar scope or warning sign.
   Analog drop-shadow adds depth.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--diamond-frame {
  max-width: 380px;
  margin: 2rem auto;
}

.vigil-hero-image--diamond-frame img {
  clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
  filter: drop-shadow(3px 4px 8px rgba(0,0,0,0.2));
}

.vigil-hero-image--diamond-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%);
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
  pointer-events: none;
  z-index: 1;
}

.vigil-hero-image--diamond-frame:hover img {
  transform: scale(1.04);
  filter: drop-shadow(4px 6px 12px rgba(0,0,0,0.3));
}

/* ─────────────────────────────────────────────────────
   Effect 4: Ghost Blend
   Double-exposure feel. Image faded and blended,
   like a signal half-received. Overlay creates depth.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--ghost-blend {
  background: var(--color-bg, #f4f1eb);
}

.vigil-hero-image--ghost-blend img {
  mix-blend-mode: multiply;
  opacity: 0.7;
  filter: grayscale(0.5) contrast(1.3) brightness(0.9);
}

.vigil-hero-image--ghost-blend::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 60%,
    var(--color-bg, #f4f1eb) 100%
  );
  pointer-events: none;
}

.vigil-hero-image--ghost-blend:hover img {
  opacity: 0.85;
  filter: grayscale(0.3) contrast(1.2) brightness(0.95);
}

/* ─────────────────────────────────────────────────────
   Effect 5: Signal Decay
   Gradient mask fades the image like a degrading
   transmission. The signal arrives incomplete.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--signal-decay img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 30%,
    rgba(0,0,0,0.6) 60%,
    rgba(0,0,0,0.2) 80%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 30%,
    rgba(0,0,0,0.6) 60%,
    rgba(0,0,0,0.2) 80%,
    transparent 100%
  );
  filter: sepia(0.3) hue-rotate(10deg) contrast(1.1);
}

.vigil-hero-image--signal-decay:hover img {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 50%,
    rgba(0,0,0,0.7) 75%,
    rgba(0,0,0,0.3) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 50%,
    rgba(0,0,0,0.7) 75%,
    rgba(0,0,0,0.3) 90%,
    transparent 100%
  );
  transform: scale(1.02);
  filter: sepia(0.15) hue-rotate(10deg) contrast(1.15);
}

/* ─────────────────────────────────────────────────────
   Effect 6: Scan Lines
   CRT phosphor lines over the image — like watching
   through a projection booth monitor or old TV feed.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--scan-lines {
  background: #0a0a0a;
}

.vigil-hero-image--scan-lines img {
  filter: contrast(1.15) brightness(0.92) saturate(0.85);
  opacity: 0.9;
}

.vigil-hero-image--scan-lines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  z-index: 1;
}

.vigil-hero-image--scan-lines:hover img {
  filter: contrast(1.2) brightness(0.96) saturate(0.9);
  opacity: 0.95;
  transform: scale(1.02);
}

/* ─────────────────────────────────────────────────────
   Effect 7: Interference
   Horizontal offset strips — the signal arriving in
   fragments, reassembling imperfectly. Radio noise
   made visible.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--interference {
  position: relative;
}

.vigil-hero-image--interference img {
  filter: grayscale(0.4) contrast(1.2) brightness(0.9);
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%, black 18%,
    transparent 19%, transparent 21%,
    black 22%, black 48%,
    transparent 49%, transparent 52%,
    black 53%, black 76%,
    transparent 77%, transparent 79%,
    black 80%, black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%, black 18%,
    transparent 19%, transparent 21%,
    black 22%, black 48%,
    transparent 49%, transparent 52%,
    black 53%, black 76%,
    transparent 77%, transparent 79%,
    black 80%, black 100%
  );
}

.vigil-hero-image--interference::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 140, 160, 0.06) 30%,
    rgba(120, 140, 160, 0.06) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

.vigil-hero-image--interference:hover img {
  filter: grayscale(0.2) contrast(1.15) brightness(0.95);
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%, black 20%,
    rgba(0,0,0,0.5) 21%, rgba(0,0,0,0.5) 22%,
    black 23%, black 50%,
    rgba(0,0,0,0.5) 51%, rgba(0,0,0,0.5) 53%,
    black 54%, black 78%,
    rgba(0,0,0,0.5) 79%, rgba(0,0,0,0.5) 80%,
    black 81%, black 100%
  );
  mask-image: linear-gradient(
    to bottom,
    black 0%, black 20%,
    rgba(0,0,0,0.5) 21%, rgba(0,0,0,0.5) 22%,
    black 23%, black 50%,
    rgba(0,0,0,0.5) 51%, rgba(0,0,0,0.5) 53%,
    black 54%, black 78%,
    rgba(0,0,0,0.5) 79%, rgba(0,0,0,0.5) 80%,
    black 81%, black 100%
  );
  transform: scale(1.02);
}

/* ─────────────────────────────────────────────────────
   Effect 8: Aperture
   Circular vignette — looking through a telescope
   eyepiece or camera iris. The edges fall away.
   ───────────────────────────────────────────────────── */

.vigil-hero-image--aperture {
  max-width: 440px;
  margin: 1rem auto 2rem;
}

.vigil-hero-image--aperture img {
  border-radius: 50%;
  filter: contrast(1.1) brightness(0.93);
  -webkit-mask-image: radial-gradient(
    ellipse 48% 48% at 50% 50%,
    black 60%,
    rgba(0,0,0,0.5) 80%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 48% 48% at 50% 50%,
    black 60%,
    rgba(0,0,0,0.5) 80%,
    transparent 100%
  );
}

.vigil-hero-image--aperture::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 35%,
    rgba(0, 0, 0, 0.25) 100%
  );
  border-radius: 50%;
  pointer-events: none;
}

.vigil-hero-image--aperture:hover img {
  transform: scale(1.05);
  filter: contrast(1.15) brightness(0.97);
  -webkit-mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    black 65%,
    rgba(0,0,0,0.6) 85%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 50% 50% at 50% 50%,
    black 65%,
    rgba(0,0,0,0.6) 85%,
    transparent 100%
  );
}

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

@media (max-width: 768px) {
  .vigil-hero-image--torn-reveal {
    transform: rotate(-0.6deg);
  }

  .vigil-hero-image--hex-window,
  .vigil-hero-image--diamond-frame {
    max-width: 90%;
  }

  .vigil-hero-image--aperture {
    max-width: 85%;
  }

  /* Disable hover transforms on touch */
  .vigil-hero-image:hover img {
    transform: none;
  }
}