/**
 * Boost Theme Framework - Image Effects
 *
 * CSS-only and JS-enhanced image effects.
 * Loaded only when [data-boost-image] is present on page.
 *
 * Effects:
 * - kenburns: Slow pan and zoom
 * - zoom: Hover zoom
 * - grayscale: Color on hover
 * - float: Floating animation
 * - parallax: (JS) Scroll-based movement
 * - tilt: (JS) 3D tilt on hover
 * - magnetic: (JS) Follows cursor
 *
 * @package BoostThemeFramework\Effects
 */

/* /assets/css/effects/effects-image.css */

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    [data-boost-image] {
        animation: none !important;
        transition: none !important;
    }
    
    [data-boost-image] img {
        animation: none !important;
        transition: none !important;
    }
}

/* =============================================================================
   KEN BURNS
   ============================================================================= */

[data-boost-image="kenburns"] {
    overflow: hidden;
}

[data-boost-image="kenburns"] img {
    animation: boost-kenburns 20s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes boost-kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }
    100% {
        transform: scale(1.1) translate(-2%, -2%);
    }
}

/* Variants */
[data-boost-image="kenburns"][data-boost-image-direction="reverse"] img {
    animation-direction: alternate-reverse;
}

[data-boost-image="kenburns"][data-boost-image-duration="slow"] img {
    animation-duration: 30s;
}

[data-boost-image="kenburns"][data-boost-image-duration="fast"] img {
    animation-duration: 10s;
}

/* =============================================================================
   ZOOM ON HOVER
   ============================================================================= */

[data-boost-image="zoom"] {
    overflow: hidden;
}

[data-boost-image="zoom"] img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-image="zoom"]:hover img {
    transform: scale(1.1);
}

/* Scale variants */
[data-boost-image="zoom"][data-boost-image-scale="subtle"]:hover img {
    transform: scale(1.05);
}

[data-boost-image="zoom"][data-boost-image-scale="strong"]:hover img {
    transform: scale(1.2);
}

/* =============================================================================
   GRAYSCALE TO COLOR
   ============================================================================= */

[data-boost-image="grayscale"] img {
    filter: grayscale(100%);
    transition: filter 0.5s ease;
}

[data-boost-image="grayscale"]:hover img {
    filter: grayscale(0%);
}

/* Reverse: color to grayscale */
[data-boost-image="grayscale"][data-boost-image-reverse="true"] img {
    filter: grayscale(0%);
}

[data-boost-image="grayscale"][data-boost-image-reverse="true"]:hover img {
    filter: grayscale(100%);
}

/* =============================================================================
   FLOAT
   ============================================================================= */

[data-boost-image="float"] {
    animation: boost-float 3s ease-in-out infinite;
}

@keyframes boost-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Variants */
[data-boost-image="float"][data-boost-image-intensity="subtle"] {
    animation-name: boost-float-subtle;
}

@keyframes boost-float-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

[data-boost-image="float"][data-boost-image-intensity="strong"] {
    animation-name: boost-float-strong;
}

@keyframes boost-float-strong {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* =============================================================================
   REVEAL CLIP
   ============================================================================= */

[data-boost-image="reveal-clip"] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-boost-image="reveal-clip"].is-visible {
    clip-path: inset(0 0 0 0);
}

/* Direction variants */
[data-boost-image="reveal-clip"][data-boost-image-direction="right"] {
    clip-path: inset(0 0 0 100%);
}

[data-boost-image="reveal-clip"][data-boost-image-direction="top"] {
    clip-path: inset(100% 0 0 0);
}

[data-boost-image="reveal-clip"][data-boost-image-direction="bottom"] {
    clip-path: inset(0 0 100% 0);
}

/* =============================================================================
   PARALLAX (JS-powered)
   Background image moves slower than content on scroll.
   ============================================================================= */

[data-boost-image="parallax"] {
    position: relative;
    overflow: hidden;
}

/* =============================================================================
   TILT 3D (JS-powered, base styles)
   ============================================================================= */

[data-boost-image="tilt"] {
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;
}

/* =============================================================================
   MAGNETIC (JS-powered, base styles)
   ============================================================================= */

[data-boost-image="magnetic"] {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =============================================================================
   BLUR (reveals on hover)
   ============================================================================= */

[data-boost-image="blur"] {
    overflow: hidden;
}

[data-boost-image="blur"] img {
    filter: blur(2px);
    transition: filter 0.5s ease;
}

[data-boost-image="blur"]:hover img {
    filter: blur(0);
}

/* =============================================================================
   BRIGHTNESS (brightens on hover)
   ============================================================================= */

[data-boost-image="brightness"] {
    overflow: hidden;
}

[data-boost-image="brightness"] img {
    transition: filter 0.5s ease;
}

[data-boost-image="brightness"]:hover img {
    filter: brightness(1.15);
}

/* =============================================================================
   SEPIA (desaturates, reveals color on hover)
   ============================================================================= */

[data-boost-image="sepia"] {
    overflow: hidden;
}

[data-boost-image="sepia"] img {
    filter: sepia(60%);
    transition: filter 0.5s ease;
}

[data-boost-image="sepia"]:hover img {
    filter: sepia(0%);
}

/* =============================================================================
   DUOTONE (two-tone color overlay — Spotify aesthetic)
   ============================================================================= */

[data-boost-image="duotone"] {
    overflow: hidden;
    position: relative;
}

[data-boost-image="duotone"] img {
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.5s ease;
}

[data-boost-image="duotone"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(var(--boost-primary-rgb, 59, 130, 246), 0.4),
        rgba(var(--boost-accent-rgb, 124, 58, 237), 0.5)
    );
    mix-blend-mode: color;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

[data-boost-image="duotone"]:hover img {
    filter: grayscale(0%) contrast(1);
}

[data-boost-image="duotone"]:hover::after {
    opacity: 0;
}

/* =============================================================================
   GLITCH (digital distortion on hover)
   ============================================================================= */

[data-boost-image="glitch"] {
    overflow: hidden;
    position: relative;
}

[data-boost-image="glitch"] img {
    transition: transform 0.1s;
}

[data-boost-image="glitch"]:hover img {
    animation: boost-img-glitch 0.3s steps(2) infinite;
}

@keyframes boost-img-glitch {
    0% { transform: translate(0); filter: hue-rotate(0deg); }
    25% { transform: translate(-2px, 1px); filter: hue-rotate(90deg); clip-path: inset(20% 0 30% 0); }
    50% { transform: translate(2px, -1px); filter: hue-rotate(180deg); clip-path: inset(50% 0 10% 0); }
    75% { transform: translate(-1px, 2px); filter: hue-rotate(270deg); clip-path: inset(10% 0 60% 0); }
    100% { transform: translate(0); filter: hue-rotate(360deg); clip-path: none; }
}

/* =============================================================================
   UNCOVER (clip-path reveals image on scroll via JS)
   ============================================================================= */

[data-boost-image="uncover"] {
    overflow: hidden;
}

[data-boost-image="uncover"] img {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-boost-image="uncover"].is-visible img {
    clip-path: inset(0 0 0 0);
}

/* =============================================================================
   COLOR POP (B&W with primary color emerging on hover)
   ============================================================================= */

[data-boost-image="color-pop"] {
    overflow: hidden;
    position: relative;
}

[data-boost-image="color-pop"] img {
    filter: grayscale(100%);
    transition: filter 0.6s ease;
}

[data-boost-image="color-pop"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at var(--boost-pop-x, 50%) var(--boost-pop-y, 50%),
        transparent 0%,
        transparent 30%,
        rgba(0, 0, 0, 0.03) 100%
    );
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

[data-boost-image="color-pop"]:hover img {
    filter: grayscale(0%);
}

[data-boost-image="color-pop"]:hover::before {
    opacity: 1;
}

/* =============================================================================
   SPOTLIGHT (light beam follows cursor)
   ============================================================================= */

[data-boost-image="spotlight"] {
    overflow: hidden;
    position: relative;
}

[data-boost-image="spotlight"]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle 120px at var(--boost-spot-x, 50%) var(--boost-spot-y, 50%),
        transparent 0%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

[data-boost-image="spotlight"]:hover::after {
    opacity: 1;
}

/* =============================================================================
   MORPH (border-radius morphs on hover)
   ============================================================================= */

[data-boost-image="morph"] {
    overflow: hidden;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transition: border-radius 0.6s ease;
}

[data-boost-image="morph"]:hover {
    border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
}

[data-boost-image="morph"] img {
    transition: transform 0.6s ease;
}

[data-boost-image="morph"]:hover img {
    transform: scale(1.05);
}