/**
 * Animated Background Component - Wakasm.com
 * Reusable animated background system for video game pages
 * 
 * Usage: wp_enqueue_style('wakasm-animated-background', 
 *        get_stylesheet_directory_uri() . '/assets/css/components/animated-background.css');
 *
 * HTML Structure Required:
 * <div class="game-bg-container">
 *     <div class="square-octagon-bg rankings-bg"></div>
 * </div>
 */

/* CSS Custom Properties for smooth animation interpolation */
@property --a {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}
@property --p {
    syntax: '<percentage>';
    inherits: true;
    initial-value: 0%;
}
@property --c1 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
}
@property --c2 {
    syntax: '<color>';
    inherits: true;
    initial-value: #000;
}

/* Animated background container - fixed position */
.game-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.15;
    pointer-events: none;
}

/* Actual CodePen Animation - Dark Grey Version */
.square-octagon-bg {
    width: 100%;
    height: 100%;
    --s: 80px;
    --_g: #0000, var(--c1) 2deg calc(var(--a) - 2deg), #0000 var(--a);
    background: 
        conic-gradient(from calc(-45deg  - var(--a)/2) at top    var(--p) left  var(--p), var(--_g)),
        conic-gradient(from calc(-45deg  - var(--a)/2) at top    var(--p) left  var(--p), var(--_g)),
        conic-gradient(from calc( 45deg  - var(--a)/2) at top    var(--p) right var(--p), var(--_g)),
        conic-gradient(from calc( 45deg  - var(--a)/2) at top    var(--p) right var(--p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--a)/2) at bottom var(--p) left  var(--p), var(--_g)),
        conic-gradient(from calc(-135deg - var(--a)/2) at bottom var(--p) left  var(--p), var(--_g)),
        conic-gradient(from calc( 135deg - var(--a)/2) at bottom var(--p) right var(--p), var(--_g)),
        conic-gradient(from calc( 135deg - var(--a)/2) at bottom var(--p) right var(--p), var(--_g))
        var(--c2);
    background-size: calc(2*var(--s)) calc(2*var(--s));
    animation: morph-pattern 4s infinite alternate linear;
}

@keyframes morph-pattern {
    0%, 15% {
        --a: 135deg;
        --p: 20%;
        --c1: #2a2a2a;
        --c2: #1a1a1a;
        background-position: 0 0, var(--s) var(--s);
    }
    45%, 50% {
        --a: 90deg;
        --p: 25%;
        --c1: #2a2a2a;
        --c2: #1a1a1a;
        background-position: 0 0, var(--s) var(--s);
    }
    50.01%, 55% {
        --a: 90deg;
        --p: 25%;
        --c2: #2a2a2a;
        --c1: #1a1a1a;
        background-position: var(--s) 0, 0 var(--s);
    }
    85%, 100% {
        --a: 135deg;
        --p: 20%;
        --c2: #2a2a2a;
        --c1: #1a1a1a;
        background-position: var(--s) 0, 0 var(--s);
    }
}