/* ===== Torch/Flashlight Reveal Effect ===== */

/*
 * The torch effect creates a "flashlight" reveal where images appear 
 * grayscale by default and reveal full color only where the cursor hovers.
 * 
 * Implementation:
 * - Base layer: grayscale/desaturated image
 * - Color layer: full color image with CSS mask-image using radial-gradient
 * - JavaScript tracks mouse position and updates mask position
 */

/* Container for torch-enabled sections */
.torch-container {
    --torch-x: 50%;
    --torch-y: 50%;
    --torch-size: 400px;
    --torch-blur: 100px;
    --torch-intensity: 1;
}

/* Image wrapper for torch effect */
.torch-image {
    position: relative;
    filter: grayscale(100%) brightness(0.7);
    transition: filter 0.3s ease;
}

/* Color reveal layer - positioned absolutely over the grayscale image */
.torch-color-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.torch-color-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: radial-gradient(
        circle var(--torch-size) at var(--torch-x) var(--torch-y),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 40%,
        rgba(0, 0, 0, 0) 100%
    );
    mask-image: radial-gradient(
        circle var(--torch-size) at var(--torch-x) var(--torch-y),
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 40%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* When torch is active (mouse is in the container) */
.torch-active .torch-color-layer {
    opacity: 1;
}

.torch-active .torch-image {
    filter: grayscale(100%) brightness(0.5);
}

/* Hero section specific torch styling */
.hero.torch-container .torch-color-layer img {
    --torch-size: 500px;
}

/* Card-specific torch styling */
.torch-card {
    --torch-size: 250px;
    position: relative;
    overflow: hidden;
}

.torch-card .torch-image {
    filter: grayscale(100%) brightness(0.8);
}

.torch-card.torch-active .torch-image {
    filter: grayscale(100%) brightness(0.6);
}

/* Glow effect around the torch */
.torch-glow {
    position: absolute;
    width: calc(var(--torch-size) * 1.5);
    height: calc(var(--torch-size) * 1.5);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(201, 162, 39, 0.15) 0%,
        rgba(201, 162, 39, 0.05) 40%,
        transparent 70%
    );
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.torch-active .torch-glow {
    opacity: 1;
}

/* Instagram grid specific styles */
.instagram-item.torch-card {
    --torch-size: 200px;
}

/* Services cards specific styles */
.service-card.torch-card {
    --torch-size: 280px;
}

/* Stories cards specific styles */
.story-card.torch-card {
    --torch-size: 300px;
}

/* Smooth mask animation */
.torch-color-layer img {
    will-change: mask-image, -webkit-mask-image;
}

/* Performance optimization for many torch elements */
.torch-image,
.torch-color-layer {
    will-change: filter, opacity;
}

/* Mobile: disable torch effect and show full color */
@media (hover: none) and (pointer: coarse) {
    .torch-image {
        filter: none !important;
    }
    
    .torch-color-layer {
        display: none !important;
    }
    
    .torch-glow {
        display: none !important;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .torch-image,
    .torch-color-layer,
    .torch-color-layer img {
        transition: none;
    }
}