/*
 * ============================================================
 *  VNV MARKETING — TORCH EFFECT
 *  ─────────────────────────────────────────────────────────
 *  The flashlight/spotlight colour reveal effect.
 *  Move your mouse over a B&W image to see vivid colors
 *  appear underneath the cursor like a torch.
 *
 *  HOW IT WORKS:
 *    1. The base image is shown in grayscale.
 *    2. JS injects .torch-color-fill (gradient layer) and
 *       .torch-multiply-img (colored duplicate) inside each
 *       .torch-effect wrapper.
 *    3. On mousemove, --tx and --ty CSS vars are updated.
 *    4. A radial mask follows the cursor exposing the color.
 *
 *  TO CUSTOMIZE THE SPOTLIGHT RADIUS:
 *    Change "160px" in the radial-gradient mask below.
 *
 *  COLOR PALETTE PER SECTION:
 *    Set data-color-type="seo" etc. on the .torch-effect
 *    element in the HTML to pick a palette. Add new ones
 *    at the bottom of this file.
 * ============================================================
 */

/* ── Wrapper ── */
.torch-effect {
  position: relative;
  overflow: hidden;
  background: var(--card);
}

/* Grayscale base image */
.torch-effect img {
  display: block; width: 100%; height: auto;
  filter: grayscale(100%) contrast(115%);
  transition: filter 0.3s ease;
}

/* Color fill gradient layer (sits under the multiply layer) */
.torch-effect .torch-color-fill {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0; z-index: 2;
  transition: opacity 0.25s ease;
  /* Spotlight mask — change 160px to resize the spotlight */
  mask-image: radial-gradient(circle 160px at var(--tx, -500px) var(--ty, -500px), #000 0%, rgba(0,0,0,0.85) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 160px at var(--tx, -500px) var(--ty, -500px), #000 0%, rgba(0,0,0,0.85) 60%, transparent 100%);
  /* Default fallback gradient (overridden by data-color-type palettes below) */
  background: linear-gradient(135deg, #ff007f, #7928ca, #00dfd8, #ff4500, #ffb700);
}

/* Multiply-blend duplicate image (locks black ink lines while colors show through) */
.torch-effect .torch-multiply-img {
  position: absolute; inset: 0;
  pointer-events: none; opacity: 0; z-index: 3;
  mix-blend-mode: multiply;
  filter: contrast(135%) brightness(1.05);
  transition: opacity 0.25s ease;
  mask-image: radial-gradient(circle 160px at var(--tx, -500px) var(--ty, -500px), #000 0%, rgba(0,0,0,0.85) 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle 160px at var(--tx, -500px) var(--ty, -500px), #000 0%, rgba(0,0,0,0.85) 60%, transparent 100%);
}

/* Reveal on hover */
.torch-effect:hover .torch-color-fill,
.torch-effect:hover .torch-multiply-img { opacity: 1; }

/* Custom color image spotlight override */
.torch-effect[data-color-src] .torch-multiply-img {
  mix-blend-mode: normal;
  filter: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.torch-effect[data-color-src] .torch-color-fill {
  display: none;
}

/* ── ─────────────────────────────────────────────────────
   COLOR PALETTES PER SECTION / SERVICE
   Add data-color-type="yourname" to .torch-effect in HTML,
   then add a matching rule below.
   ───────────────────────────────────────────────────── ── */

/* Hero (homepage) */
.torch-effect[data-color-type="hero"] .torch-color-fill {
  background: conic-gradient(from 45deg at 50% 50%, #ff0055, #ffaa00, #00e5ff, #7a00ff, #00ff66, #ff0055);
}
/* General services banner */
.torch-effect[data-color-type="services"] .torch-color-fill {
  background: linear-gradient(135deg, #ff007f, #7928ca, #00dfd8, #ff4500, #ffb700);
}
/* SEO */
.torch-effect[data-color-type="seo"] .torch-color-fill {
  background: radial-gradient(circle at 30% 30%, #ffea00, #00e5ff 50%, #0044ff);
}
/* Social Media Marketing */
.torch-effect[data-color-type="smm"] .torch-color-fill {
  background: linear-gradient(135deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}
/* Meta Ads */
.torch-effect[data-color-type="meta"] .torch-color-fill {
  background: linear-gradient(135deg, #0066ff, #00c6ff, #002699, #ff9900);
}
/* Graphic Design */
.torch-effect[data-color-type="graphic"] .torch-color-fill {
  background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff, #ff0000);
}
/* Video Editing */
.torch-effect[data-color-type="video"] .torch-color-fill {
  background: linear-gradient(135deg, #e50914, #833ab4, #fd1d1d, #fcb045);
}
/* Email Marketing */
.torch-effect[data-color-type="email"] .torch-color-fill {
  background: linear-gradient(135deg, #00b4db, #0083b0, #ff4e50, #f9d423);
}
/* WhatsApp Marketing */
.torch-effect[data-color-type="whatsapp"] .torch-color-fill {
  background: radial-gradient(circle at 40% 40%, #25d366, #128c7e, #075e54, #dcf8c6);
}
/* Contact page */
.torch-effect[data-color-type="contact"] .torch-color-fill {
  background: linear-gradient(135deg, #ff0844, #ffb199, #4158d0, #c850c0);
}
/* "The Fix" / Blog */
.torch-effect[data-color-type="fix"] .torch-color-fill {
  background: linear-gradient(135deg, #ff007f, #00e5ff 40%, #ffea00 80%, #7a00ff);
}