/**
 * Motion System v2.0 - Effects Styles
 *
 * Advanced visual effects CSS for Motion System.
 * Includes: backgrounds, gradients, textures, advanced micro-interactions.
 *
 * @package starter-site
 * @subpackage motion/effects
 * @version 2.0.0
 */

/* =============================================================================
   BACKGROUND EFFECTS
   ============================================================================= */

/**
 * Gradient mesh background.
 *
 * CSS provides M3-native static base. JS enhances with animation via
 * backgrounds.js. When JS is ready, it adds [data-motion-ready] and
 * the CSS ::before is hidden in favor of the animated JS layer.
 *
 * NOTE: No overflow:hidden here - causes conflicts with child components
 * like carousels (see Decision #4 in DECISIONS_LOG.md).
 */
[data-effect="mesh"],
.motion-bg-mesh {
    position: relative;
    /* NO overflow: hidden - breaks child components */
}

[data-effect="mesh"]::before,
.motion-bg-mesh::before {
    content: '';
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 20% 30%, rgba(var(--primary-rgb), 0.25) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--secondary-rgb, var(--primary-rgb)), 0.2) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(var(--primary-rgb), 0.15) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    /* Static base - JS adds animation via .mesh-layer */
}

/* Hide CSS base when JS takes over */
[data-effect="mesh"][data-motion-ready]::before,
.motion-bg-mesh[data-motion-ready]::before {
    display: none;
}

@keyframes motion-mesh-shift {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(5%, 5%) rotate(5deg);
    }
    66% {
        transform: translate(-5%, 2%) rotate(-3deg);
    }
}

/**
 * Aurora background.
 *
 * CSS provides M3-native static base. JS enhances with animation via
 * backgrounds.js. When JS is ready, it adds [data-motion-ready] and
 * the CSS ::before is hidden in favor of the animated JS layer.
 *
 * NOTE: No overflow:hidden here - causes conflicts with child components
 * like carousels (see Decision #4 in DECISIONS_LOG.md).
 */
[data-effect="aurora"],
.motion-bg-aurora {
    position: relative;
    /* NO overflow: hidden - breaks child components */
}

[data-effect="aurora"]::before,
.motion-bg-aurora::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(var(--primary-rgb), 0.1) 0deg,
        rgba(var(--secondary-rgb, var(--primary-rgb)), 0.15) 120deg,
        rgba(var(--primary-rgb), 0.1) 240deg,
        rgba(var(--secondary-rgb, var(--primary-rgb)), 0.15) 360deg
    );
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    /* Static base - JS adds animation via .aurora-layer */
}

/* Hide CSS base when JS takes over */
[data-effect="aurora"][data-motion-ready]::before,
.motion-bg-aurora[data-motion-ready]::before {
    display: none;
}

/* Legacy keyframes kept for reference - JS handles animation now */
@keyframes motion-aurora {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/**
 * Spotlight effect.
 */
[data-effect="spotlight"],
.motion-bg-spotlight {
    position: relative;
}

[data-effect="spotlight"]::before,
.motion-bg-spotlight::before {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        var(--motion-spotlight-color, rgba(255, 255, 255, 0.1)) 0%,
        transparent 70%
    );
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

/**
 * Noise texture overlay.
 */
[data-effect="noise"],
.motion-bg-noise {
    position: relative;
}

[data-effect="noise"]::after,
.motion-bg-noise::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: var(--motion-noise-opacity, 0.03);
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/**
 * Film grain effect.
 */
[data-effect="grain"],
.motion-bg-grain {
    position: relative;
}

[data-effect="grain"]::after,
.motion-bg-grain::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
    opacity: var(--motion-grain-opacity, 0.05);
    pointer-events: none;
    z-index: 1;
    animation: motion-grain 0.5s steps(10) infinite;
}

@keyframes motion-grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-1%, -1%); }
    20% { transform: translate(1%, 1%); }
    30% { transform: translate(-1%, 1%); }
    40% { transform: translate(1%, -1%); }
    50% { transform: translate(-1%, 0); }
    60% { transform: translate(1%, 0); }
    70% { transform: translate(0, 1%); }
    80% { transform: translate(0, -1%); }
    90% { transform: translate(1%, 1%); }
}

/* =============================================================================
   PATTERN OVERLAYS
   ============================================================================= */

/**
 * Dot grid pattern.
 */
[data-effect="dots"],
.motion-pattern-dots {
    position: relative;
}

[data-effect="dots"]::after,
.motion-pattern-dots::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        var(--motion-dots-color, rgba(255, 255, 255, 0.1)) 1px,
        transparent 1px
    );
    background-size: var(--motion-dots-size, 20px) var(--motion-dots-size, 20px);
    pointer-events: none;
    z-index: 1;
}

/**
 * Grid lines pattern.
 */
[data-effect="grid"],
.motion-pattern-grid {
    position: relative;
}

[data-effect="grid"]::after,
.motion-pattern-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--motion-grid-color, rgba(255, 255, 255, 0.05)) 1px, transparent 1px),
        linear-gradient(90deg, var(--motion-grid-color, rgba(255, 255, 255, 0.05)) 1px, transparent 1px);
    background-size: var(--motion-grid-size, 40px) var(--motion-grid-size, 40px);
    pointer-events: none;
    z-index: 1;
}

/* =============================================================================
   TEXT EFFECTS
   ============================================================================= */

/**
 * Gradient text.
 */
[data-effect="text-gradient"],
.motion-text-gradient {
    background: linear-gradient(
        135deg,
        var(--motion-text-gradient-1, var(--primary, #6366f1)),
        var(--motion-text-gradient-2, var(--secondary, #ec4899))
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/**
 * Animated gradient text.
 */
[data-effect="text-gradient-animated"],
.motion-text-gradient-animated {
    background: linear-gradient(
        90deg,
        var(--motion-text-gradient-1, var(--primary, #6366f1)),
        var(--motion-text-gradient-2, var(--secondary, #ec4899)),
        var(--motion-text-gradient-3, var(--primary, #6366f1))
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: motion-text-gradient-shift 3s linear infinite;
}

@keyframes motion-text-gradient-shift {
    to {
        background-position: 200% center;
    }
}

/**
 * Glow text.
 */
[data-effect="text-glow"],
.motion-text-glow {
    text-shadow:
        0 0 10px var(--motion-glow-color, var(--primary, #6366f1)),
        0 0 20px var(--motion-glow-color, var(--primary, #6366f1)),
        0 0 30px var(--motion-glow-color, var(--primary, #6366f1));
}

/**
 * Neon text.
 */
[data-effect="text-neon"],
.motion-text-neon {
    color: var(--motion-neon-color, #fff);
    text-shadow:
        0 0 5px var(--motion-neon-color, #fff),
        0 0 10px var(--motion-neon-color, #fff),
        0 0 20px var(--motion-neon-glow, var(--primary, #6366f1)),
        0 0 40px var(--motion-neon-glow, var(--primary, #6366f1)),
        0 0 80px var(--motion-neon-glow, var(--primary, #6366f1));
}

/* =============================================================================
   BORDER EFFECTS
   ============================================================================= */

/**
 * Gradient border.
 */
[data-effect="border-gradient"],
.motion-border-gradient {
    position: relative;
    background: var(--ctx-bg, var(--bg, #000));
}

[data-effect="border-gradient"]::before,
.motion-border-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: var(--motion-border-width, 2px);
    background: linear-gradient(
        135deg,
        var(--motion-border-gradient-1, var(--primary, #6366f1)),
        var(--motion-border-gradient-2, var(--secondary, #ec4899))
    );
    border-radius: inherit;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/**
 * Animated gradient border.
 */
[data-effect="border-gradient-animated"],
.motion-border-gradient-animated {
    position: relative;
    background: var(--ctx-bg, var(--bg, #000));
}

[data-effect="border-gradient-animated"]::before,
.motion-border-gradient-animated::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: var(--motion-border-width, 2px);
    background: linear-gradient(
        var(--motion-border-angle, 0deg),
        var(--motion-border-gradient-1, var(--primary, #6366f1)),
        var(--motion-border-gradient-2, var(--secondary, #ec4899)),
        var(--motion-border-gradient-3, var(--primary, #6366f1))
    );
    background-size: 300% 300%;
    border-radius: inherit;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: motion-border-rotate 4s linear infinite;
}

@keyframes motion-border-rotate {
    to {
        --motion-border-angle: 360deg;
    }
}

/* Support for @property (Chrome, Edge) */
@supports (background: paint(something)) {
    @property --motion-border-angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }
}

/**
 * Glow border.
 */
[data-effect="border-glow"],
.motion-border-glow {
    box-shadow:
        0 0 0 1px var(--motion-glow-color, var(--primary, #6366f1)),
        0 0 10px var(--motion-glow-color, var(--primary, #6366f1)),
        0 0 20px rgba(99, 102, 241, 0.3);
}

/* =============================================================================
   HOVER EFFECTS
   ============================================================================= */

/**
 * Glow on hover.
 */
[data-effect="hover-glow"],
.motion-hover-glow {
    transition: box-shadow var(--motion-duration-sm) var(--motion-ease-out);
}

[data-effect="hover-glow"]:hover,
.motion-hover-glow:hover {
    box-shadow:
        0 0 20px var(--motion-glow-color, rgba(99, 102, 241, 0.4)),
        0 0 40px var(--motion-glow-color, rgba(99, 102, 241, 0.2));
}

/**
 * Shine sweep on hover.
 */
[data-effect="hover-shine"],
.motion-hover-shine {
    position: relative;
    overflow: hidden;
}

[data-effect="hover-shine"]::after,
.motion-hover-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transform: skewX(-25deg);
    transition: none;
}

[data-effect="hover-shine"]:hover::after,
.motion-hover-shine:hover::after {
    left: 150%;
    transition: left 0.5s var(--motion-ease-out);
}

/**
 * Fill from left on hover.
 */
[data-effect="hover-fill"],
.motion-hover-fill {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

[data-effect="hover-fill"]::before,
.motion-hover-fill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--motion-fill-color, var(--primary, #6366f1));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--motion-duration-sm) var(--motion-ease-out);
    z-index: -1;
}

[data-effect="hover-fill"]:hover::before,
.motion-hover-fill:hover::before {
    transform: scaleX(1);
}

/* =============================================================================
   IMAGE EFFECTS
   ============================================================================= */

/**
 * Parallax image container.
 */
[data-image="parallax"],
.motion-image-parallax {
    overflow: hidden;
}

[data-image="parallax"] img,
.motion-image-parallax img {
    will-change: transform;
    transform: scale(1.2);
}

/**
 * Reveal image on scroll.
 */
[data-image="reveal"],
.motion-image-reveal {
    overflow: hidden;
}

[data-image="reveal"]::after,
.motion-image-reveal::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ctx-bg, var(--bg, #000));
    transform-origin: right;
    transition: transform var(--motion-duration-md) var(--motion-ease-out);
}

[data-image="reveal"].motion-revealed::after,
.motion-image-reveal.motion-revealed::after {
    transform: scaleX(0);
}

/**
 * Zoom image on hover.
 */
[data-image="zoom"],
.motion-image-zoom {
    overflow: hidden;
}

[data-image="zoom"] img,
.motion-image-zoom img {
    transition: transform var(--motion-duration-md) var(--motion-ease-out);
}

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

/**
 * Tilt image on hover.
 */
[data-image="tilt"],
.motion-image-tilt {
    transform-style: preserve-3d;
    perspective: 1000px;
}

[data-image="tilt"] img,
.motion-image-tilt img {
    transition: transform var(--motion-duration-sm) var(--motion-ease-out);
}

/* =============================================================================
   SHAPE DIVIDERS
   ============================================================================= */

/**
 * Wave divider.
 */
.motion-divider-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.motion-divider-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 50px;
}

.motion-divider-wave .shape-fill {
    fill: var(--motion-divider-color, var(--bg, #000));
}

/**
 * Angle divider.
 */
.motion-divider-angle {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(
        to bottom right,
        transparent 49.9%,
        var(--motion-divider-color, var(--bg, #000)) 50%
    );
}

/* =============================================================================
   FLOATING SHAPES
   ============================================================================= */

.motion-floating-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.motion-floating-shape {
    position: absolute;
    border-radius: 50%;
    background: var(--motion-shape-color, rgba(255, 255, 255, 0.05));
    animation: motion-float 20s ease-in-out infinite;
}

.motion-floating-shape:nth-child(1) {
    width: 300px;
    height: 300px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.motion-floating-shape:nth-child(2) {
    width: 200px;
    height: 200px;
    top: 60%;
    right: 10%;
    animation-delay: -5s;
}

.motion-floating-shape:nth-child(3) {
    width: 150px;
    height: 150px;
    bottom: 20%;
    left: 30%;
    animation-delay: -10s;
}

@keyframes motion-float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(20px, -30px) rotate(5deg);
    }
    50% {
        transform: translate(-10px, 20px) rotate(-5deg);
    }
    75% {
        transform: translate(30px, 10px) rotate(3deg);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    /* Disable all animated effects */
    [data-effect="mesh"]::before,
    [data-effect="aurora"]::before,
    [data-effect="grain"]::after,
    [data-effect="border-gradient-animated"]::before,
    .motion-floating-shape {
        animation: none !important;
    }

    /* Disable text animations */
    .motion-text-gradient-animated {
        animation: none !important;
    }

    /* Disable hover animations */
    [data-effect="hover-shine"]::after,
    [data-effect="hover-fill"]::before {
        transition: none !important;
    }
}

.motion-reduced [data-effect="mesh"]::before,
.motion-reduced [data-effect="aurora"]::before,
.motion-reduced [data-effect="grain"]::after,
.motion-reduced [data-effect="border-gradient-animated"]::before,
.motion-reduced .motion-floating-shape {
    animation: none !important;
}