/*
Theme Name: Theater SPROUT
Theme URI: https://example.com/
Author: Theater SPROUT
Author URI: https://example.com/
Description: 高級貸切シアター「Theater SPROUT」のテーマ - 165インチスクリーン、7.1.4ch Dolby Atmos対応
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theater-sprout
*/

/* =============================================
   Base Styles
   ============================================= */
body {
    background-color: #050505;
    color: #f3f4f6;
    font-family: 'Noto Sans JP', sans-serif;
}

/* =============================================
   Glassmorphism
   ============================================= */
.glass-header {
    background: rgba(5, 5, 5, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-panel {
    background: rgba(11, 15, 25, 0.6);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* =============================================
   Neon Effects
   ============================================= */
.neon-text-blue {
    text-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
}
.neon-text-orange {
    text-shadow: 0 0 10px rgba(234, 88, 12, 0.6);
}
.neon-text-pink {
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}

/* Hover variants */
.neon-hover-blue:hover {
    text-shadow: 0 0 10px rgba(37, 99, 235, 0.6);
}
.neon-hover-pink:hover {
    text-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}
.neon-hover-orange:hover {
    text-shadow: 0 0 10px rgba(234, 88, 12, 0.6);
}

/* =============================================
   Custom Range Slider
   ============================================= */
input[type=range] {
    -webkit-appearance: none;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    margin-top: -10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transition: transform 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}
input[type=range]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Dynamic Slider Colors */
.theme-blue input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    height: 4px;
    border-radius: 2px;
}
.theme-orange input[type=range]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #ea580c, #f59e0b);
    height: 4px;
    border-radius: 2px;
}
.theme-blue input[type=range]::-moz-range-track {
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    height: 4px;
    border-radius: 2px;
}
.theme-orange input[type=range]::-moz-range-track {
    background: linear-gradient(90deg, #ea580c, #f59e0b);
    height: 4px;
    border-radius: 2px;
}

/* =============================================
   Animations
   ============================================= */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-10px); }
}
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes pan {
    0%   { object-position: 0% 50%; }
    100% { object-position: 100% 50%; }
}
.animate-pan-slow {
    animation: pan 30s ease-in-out infinite alternate;
}

/* =============================================
   Mobile Menu
   ============================================= */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
#mobile-menu.open {
    max-height: 500px;
}

/* =============================================
   WordPress Admin Bar Fix
   ============================================= */
body.admin-bar .glass-header {
    top: 32px;
}
@media screen and (max-width: 782px) {
    body.admin-bar .glass-header {
        top: 46px;
    }
}

/* =============================================
   Selection Colors
   ============================================= */
::selection {
    background-color: #ec4899;
    color: #fff;
}

html {
    overflow-x: hidden;
}