/* 
 * containers.css
 * Dedicated styling for server containers and their components
 * Enhanced with always-on border animations
 * Organized by mockup color code: Blue (base), Red (banner), White (status)
 */

/* Pattern scaling controls - adjust these values to change pattern sizes */
:root {
    /* Pattern sizing - change these values to adjust pattern scale */
    --runes-pattern-size: 300px;      /* Size for runes pattern (higher value = larger pattern) */
    --dot-pattern-size: 2px;         /* Size for dot pattern (higher value = larger pattern) */
    
    /* Animation timing variables */
    --hover-transition: 0.3s ease;
    --glow-animation: 3s infinite alternate;
}

/* Server Options Container - Container for all server boxes */
.server-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/*
 * BLUE CONTAINER - Overall server container (lowest layer)
 */
.server-container {
    position: relative;
    width: 301px;
    height: 259px;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(to bottom, #010101, #414141);
    /* Shadow only applies to the blue (main) container */
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.7);
    transition: box-shadow var(--hover-transition);
}

/* Subtle shadow effect on hover (no movement) */
.server-container:hover {
    box-shadow: 0 0 20px 7px rgba(0, 0, 0, 0.8), 0 0 15px 3px rgba(255, 136, 0, 0.3);
}

/* Double layer strokes for BLUE container */
.server-container::before, .server-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    pointer-events: none;
}

/* First stroke layer for BLUE container (1px, inner gradient) - ALWAYS ANIMATED */
.server-container::before {
    border: 1px solid transparent;
    background: linear-gradient(90deg, #414141, #ff8800, #414141) border-box;
    background-size: 300% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 2;
    animation: borderGradient 6s ease infinite;
    box-shadow: 0 0 10px 2px rgba(255, 136, 0, 0.3);
}

@keyframes borderGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Second stroke layer for BLUE container (2px, outer gradient) */
.server-container::after {
    border: 2px solid transparent;
    background: linear-gradient(to bottom, #010101, #414141) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    opacity: 1;
}

/* Runes pattern overlay for BLUE container */
.server-container .runes-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/runes-pattern.webp');
    background-size: var(--runes-pattern-size) var(--runes-pattern-size);
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.05;
    filter: invert(1);
    z-index: 0;
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
}

/* Class to invert runes pattern color when needed */
.invert-runes {
    filter: invert(1);
}

/*
 * RED CONTAINER - Banner container (top layer)
 */
.banner-container {
    position: relative;
    width: 291px;
    height: 160px;
    margin: 5px;
    border-radius: 10px;
    overflow: visible; /* Changed from hidden to allow outer stroke to be visible */
    z-index: 3; /* Above the runes pattern overlay */
}

/* Dots pattern overlay for banner container */
.banner-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/dot-pattern.webp');
    background-size: var(--dot-pattern-size) var(--dot-pattern-size);
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.2;
    filter: invert(0);
    z-index: 4;
    pointer-events: none;
    border-radius: 10px;
}

/* Simple black to transparent gradient for banner */
.banner-container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.8) 0%, 
        rgba(0, 0, 0, 0) 70%);
    border-radius: 10px;
    z-index: 5;
    pointer-events: none;
}

/* Server Banner Image - will be shown as fallback if video fails to load */
.server-banner {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2; /* Keep lower than stroke z-indexes */
    border-radius: 10px;
}

/* Server Banner Video Container - Container for multiple video elements */
.server-banner-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3; /* Higher than the image so it appears on top */
    border-radius: 10px;
    overflow: hidden;
}

/* Server Banner Video - Styles for video elements */
.server-banner-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    display: none; /* Hidden by default until JavaScript verifies it loaded */
    transition: opacity 0.3s ease;
    will-change: opacity; /* Optimization for animations */
}

/* First stroke layer for banner container (1px, inner gradient) - ALWAYS ANIMATED */
.banner-stroke {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(90deg, #414141, #ff8800, #414141) border-box;
    background-size: 300% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 7;
    pointer-events: none;
    animation: borderGradient 6s ease infinite;
    box-shadow: 0 0 8px 1px rgba(255, 136, 0, 0.3);
}

/* Second stroke layer for banner container (2px, outer gradient) - EXACT MATCH to white container second stroke */
.banner-outer-stroke {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid transparent;
    border-radius: 9px; /* 8px + 1px to match outer edge */
    background: linear-gradient(to bottom, #010101, #414141) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 6; /* Ensure it's below the inner stroke but above the banner */
    pointer-events: none;
}

/*
 * WHITE CONTAINER - Status container (middle layer)
 */
.server-status {
    position: relative;
    width: 291px;
    height: 81px;
    margin: 5px;
    background: linear-gradient(to bottom, #222222, #333333);
    border-radius: 10px;
    color: #fff;
    z-index: 3; /* Above the runes pattern overlay */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Runes pattern overlay for WHITE container with inverted colors */
.server-status::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/runes-pattern.webp');
    background-size: var(--runes-pattern-size) var(--runes-pattern-size);
    background-repeat: repeat;
    background-position: 0 0;
    opacity: 0.1;
    filter: invert(1);
    z-index: 4;
    pointer-events: none;
}

/* First stroke layer for WHITE container (1px, inner gradient) - ALWAYS ANIMATED */
.server-status::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: linear-gradient(90deg, #414141, #ff8800, #414141) border-box;
    background-size: 300% 100%;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 7;
    pointer-events: none;
    animation: borderGradient 6s ease infinite;
}

/* Blue gradient overlay from bottom to top */
.server-status .blue-gradient {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: linear-gradient(to top, 
    #ff880077 0%,
        transparent 100%);
    border-radius: 10px;
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: normal; /* Makes the gradient blend better with dark backgrounds */
}

/* Second stroke layer for WHITE container (additional element) */
.server-status .outer-stroke {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 4px solid transparent;
    border-radius: 12px; /* 10px + 2px to match outer edge */
    background: linear-gradient(to bottom, #414141, #010101) border-box;
    -webkit-mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 3;
    pointer-events: none;
}

/* Server type text hover effect */
.server-type {
    transition: text-shadow var(--hover-transition), color var(--hover-transition);
}

.server-container:hover .server-type {
    color: #ff8800;
    text-shadow: 0 2px 8px rgba(255, 136, 0, 0.7), 0 0 5px rgba(255, 136, 0, 0.5);
}

/* Status fields hover effects - removed scaling */
.status-item {
    transition: var(--hover-transition);
}

/* Icon style */
.icon {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

/* Responsive adjustments for containers */
@media (max-width: 576px) {
    .server-container {
        width: 280px;
        height: auto;
    }
    
    .banner-container {
        width: 270px;
        height: 150px;
    }
    
    .server-status {
        width: 270px;
        height: auto;
        min-height: 81px;
    }
}
/* Dynamic reflection effect for server status container */
.server-status {
    position: relative;
    overflow: hidden;
}

/* Blue reflection element that follows mouse position */
.blue-reflection {
    position: absolute;
    width: 140px;
    height: 140px;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%); /* Center on cursor */
    background: radial-gradient(
        circle at center,
        rgba(255, 139, 61, 0.7) 0%, 
        rgba(201, 123, 6, 0.3) 40%,
        rgba(6, 162, 201, 0) 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.2s ease;
    mix-blend-mode: screen;
    filter: blur(3px);
    will-change: top, left, opacity;
}

/* Apply subtle glow to the blue gradient on hover to enhance reflection */
.server-container:hover .server-status .blue-gradient {
    box-shadow: inset 0 0 30px rgba(6, 162, 201, 0.2);
}

/* Enhance overall container on hover */
.server-container:hover {
    z-index: 10; /* Bring hovered container above others */
}