/*
Theme Name: HeyBen - 独立开发与游戏空间
Theme URI: https://heyben.work
Author: Ben
Author URI: https://heyben.work
Description: 专为独立开发者Ben打造的现代响应式WordPress主题。支持独立游戏展示、数字商品与服务、即时留言、全站深色/浅色昼夜模式自适应切换与精美全屏Banner。
Version: 1.1.3
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: heyben
Tags: custom-background, featured-images, full-width-template, theme-options, translation-ready
*/

/* Custom Base Utilities */
@layer utilities {
    .glass-card {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(226, 232, 240, 0.8);
    }
    .dark .glass-card {
        background: rgba(15, 23, 42, 0.75);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    .text-gradient {
        background: linear-gradient(135deg, #10b981 0%, #0ea5e9 50%, #8b5cf6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .text-glow {
        text-shadow: 0 0 20px rgba(16, 185, 129, 0.35);
    }
}

/* Light / Dark Mode Global Transitions */
html {
    transition: background-color 0.25s ease, color 0.25s ease;
}

body {
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* Card item hover stability without flickering */
article {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Keep cards readable when a visitor explicitly enables dark mode. */
html.dark .heyben-card {
    background-color: #1e293b !important;
    border-color: #475569 !important;
}

/* WebGL canvas container */
#webgl-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

html:not(.dark) #webgl-canvas {
    opacity: 0.35;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.dark ::-webkit-scrollbar-track {
    background: #0f172a;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
::-webkit-scrollbar-thumb:hover {
    background: #10b981;
}