/* neuOS Glass Morphism Styles - Standardized System */
/* Uses new design tokens for consistent glass effects across all components */

/* ===== BASE GLASS CONTAINERS ===== */
.glass-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: 220px;
    border-radius: var(--radius-2xl);
    cursor: move;
    isolation: isolate;
    touch-action: none;
    box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium);
    z-index: var(--z-modal);
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-filter-medium);
    -webkit-backdrop-filter: var(--glass-filter-medium);
    border: 1px solid var(--color-border-subtle);
    transition: all var(--transition-normal);
    overflow: hidden;
}

.glass-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-inner-medium);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.glass-container:hover {
    box-shadow: var(--glass-hover-medium), var(--glass-glow-medium);
    transform: translate(-50%, -50%) scale(1.02);
}

/* ===== GLASS LAYERS ===== */
.glass-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--glass-bg-heavy);
    z-index: 1;
    transform: translateZ(10px);
    box-shadow: 0 0 30px var(--color-accent-blue);
    border-radius: inherit;
}

/* ===== GLASS REFLECTIONS ===== */
.glass-reflection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        var(--glass-reflection-primary) 0%, 
        var(--glass-reflection-secondary) 25%, 
        transparent 50%, 
        var(--glass-reflection-quaternary) 75%, 
        transparent 100%);
    opacity: var(--glass-reflection-opacity);
    mix-blend-mode: screen;
    z-index: 3;
    transform: translateZ(25px);
    border-radius: inherit;
    pointer-events: none;
    animation: glassReflectionShift 8s ease-in-out infinite;
}

@keyframes glassReflectionShift {
    0% { background-position: 0% 50%; opacity: 0.3; }
    50% { background-position: 100% 50%; opacity: 0.35; }
    100% { background-position: 0% 50%; opacity: 0.3; }
}

/* ===== GLASS EDGES ===== */
.glass-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--glass-glow-medium);
    z-index: 0;
    transform: translateZ(-5px);
    border-radius: inherit;
}

/* ===== GLASS BUTTONS ===== */
.glass-login-btn {
    position: relative;
    background: var(--glass-bg-ultra);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    color: var(--color-primary);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    overflow: hidden;
    isolation: isolate;
    box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium);
    z-index: var(--z-modal);
    backdrop-filter: var(--glass-filter-medium);
    -webkit-backdrop-filter: var(--glass-filter-medium);
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.glass-login-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--glass-hover-medium), var(--glass-glow-medium);
    background: var(--glass-bg-heavy);
    border-color: var(--color-primary);
}

.glass-login-btn:active {
    transform: translateY(-1px) scale(1.02);
}

/* ===== GLASS INTERACTIVE ELEMENTS ===== */
.glass-interactive {
    transition: transform var(--transition-normal);
}

.glass-interactive:hover {
    transform: scale(1.05);
}

/* ===== GLASS INTENSITY CLASSES ===== */
.glass-minimal {
    background: var(--glass-bg-minimal);
    backdrop-filter: var(--glass-filter-minimal);
    -webkit-backdrop-filter: var(--glass-filter-minimal);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--glass-shadow-minimal), var(--glass-glow-minimal);
}

.glass-light {
    background: var(--glass-bg-light);
    backdrop-filter: var(--glass-filter-light);
    -webkit-backdrop-filter: var(--glass-filter-light);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--glass-shadow-light), var(--glass-glow-light);
}

.glass-medium {
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-filter-medium);
    -webkit-backdrop-filter: var(--glass-filter-medium);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium);
}

.glass-heavy {
    background: var(--glass-bg-heavy);
    backdrop-filter: var(--glass-filter-heavy);
    -webkit-backdrop-filter: var(--glass-filter-heavy);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--glass-shadow-heavy), var(--glass-glow-heavy);
}

.glass-ultra {
    background: var(--glass-bg-ultra);
    backdrop-filter: var(--glass-filter-ultra);
    -webkit-backdrop-filter: var(--glass-filter-ultra);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: var(--glass-shadow-ultra), var(--glass-glow-ultra);
}

/* ===== GLASS SHAPE CLASSES ===== */
.glass-rounded {
    border-radius: var(--radius-lg);
}

.glass-circular {
    border-radius: var(--radius-full);
}

.glass-pill {
    border-radius: 9999px;
}

/* ===== GLASS INTERACTION STATES ===== */
.glass-hover:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--glass-shadow-heavy), var(--glass-glow-heavy);
}

.glass-focus:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary), var(--glass-shadow-medium);
}

/* ===== GLASS ANIMATIONS ===== */
.glass-pulse {
    animation: glassPulse 2s ease-in-out infinite;
}

@keyframes glassPulse {
    0%, 100% { box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium); }
    50% { box-shadow: var(--glass-shadow-heavy), var(--glass-glow-heavy); }
}

.glass-breathe {
    animation: glassBreathe 3s ease-in-out infinite;
}

@keyframes glassBreathe {
    0%, 100% { transform: scale(1); box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium); }
    50% { transform: scale(1.02); box-shadow: var(--glass-shadow-heavy), var(--glass-glow-heavy); }
}

/* ===== GLASS TEXT EFFECTS ===== */
.glass-text {
    color: var(--color-text-primary);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.glass-text-glow {
    color: var(--color-primary);
    text-shadow: 0 0 30px var(--color-primary), 0 0 60px var(--color-primary);
    animation: textGlow 2s ease-in-out infinite alternate;
}

/* ===== NEUOS GLASS TITLE ===== */
.neuos-glass-title {
    font-size: 4rem;
    font-weight: 300; /* Thinner font weight like the widget */
    color: var(--color-text-primary); /* White text like the widget */
    margin: 0;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.3); /* White glow instead of blue */
    letter-spacing: -0.025em;
    font-family: var(--font-family);
    z-index: 2;
    text-align: center;
    width: 100%;
    text-transform: lowercase;
}

@keyframes textGlow {
    0% { text-shadow: 0 0 20px var(--color-primary), 0 0 40px var(--color-primary); }
    100% { text-shadow: 0 0 30px var(--color-primary), 0 0 60px var(--color-primary); }
}

/* ===== BACKGROUND SPINNER ===== */
.background-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--color-primary);
    border-radius: 50%;
    animation: backgroundSpin 2s linear infinite;
    z-index: 1;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.3);
}

@keyframes backgroundSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== NEUOS SPECIFIC GLASS COMPONENTS ===== */
.neuos-glass-box {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: var(--radius-full);
    cursor: grab;
    isolation: isolate;
    touch-action: none;
    box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium);
    z-index: var(--z-modal);
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-filter-medium);
    -webkit-backdrop-filter: var(--glass-filter-medium);
    border: 1px solid var(--color-border-subtle);
    transition: all var(--transition-normal);
    overflow: hidden;
    padding: var(--spacing-4xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Positioning handled by JavaScript */
    /* Ensure perfect centering of content */
    text-align: center;
}

.neuos-glass-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-inner-medium);
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
}

.neuos-glass-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        var(--glass-reflection-primary) 0%, 
        var(--glass-reflection-secondary) 25%, 
        transparent 50%, 
        var(--glass-reflection-quaternary) 75%, 
        transparent 100%);
    opacity: var(--glass-reflection-opacity);
    mix-blend-mode: screen;
    z-index: 3;
    transform: translateZ(25px);
    border-radius: inherit;
    pointer-events: none;
    animation: glassReflectionShift 8s ease-in-out infinite;
}

.neuos-glass-box:hover {
    /* Removed scale transform to prevent positioning conflicts */
    box-shadow: var(--glass-hover-medium), var(--glass-glow-medium);
}

/* ===== BOOT AND LOGIN ORBS - ENHANCED GLASS THEME ===== */
.boot-container.neuos-glass-box,
.login-container.neuos-glass-box {
    /* Ensure proper centering only if not moved */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 1000 !important;
    /* Enhanced glass effects to match neuOS widget */
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-filter-medium);
    -webkit-backdrop-filter: var(--glass-filter-medium);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium);
    transition: all var(--transition-normal);
    overflow: hidden;
    isolation: isolate;
    will-change: transform, box-shadow;
    contain: layout style;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* Don't apply centering if element has been moved by user */
.boot-container.neuos-glass-box[data-has-been-moved="true"],
.login-container.neuos-glass-box[data-has-been-moved="true"] {
    transform: none !important;
}

.boot-container.neuos-glass-box:hover,
.login-container.neuos-glass-box:hover {
    box-shadow: var(--glass-hover-medium), var(--glass-glow-medium);
    background: var(--glass-bg-heavy);
    border-color: var(--color-border-light);
}

.boot-container.neuos-glass-box:active,
.login-container.neuos-glass-box:active {
    cursor: grabbing;
    box-shadow: var(--glass-shadow-heavy), var(--glass-glow-heavy);
}

/* ===== NEUOS WIDGET ===== */
.neuos-widget {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    cursor: grab;
    isolation: isolate;
    touch-action: none;
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-filter-medium);
    -webkit-backdrop-filter: var(--glass-filter-medium);
    box-shadow: var(--glass-shadow-medium), var(--glass-glow-medium);
    z-index: 50; /* Much lower than terminal window (2000) */
    border: 1px solid var(--color-border-subtle);
    transition: all var(--transition-normal);
    overflow: hidden;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Ensure proper centering only if not moved */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Don't apply centering if element has been moved by user */
.neuos-widget[data-has-been-moved="true"] {
    transform: none !important;
}

.neuos-widget:hover {
    /* Removed scale transform to prevent positioning conflicts */
    box-shadow: var(--glass-shadow-heavy), var(--glass-glow-heavy);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.glass-container,
.glass-login-btn,
.neuos-glass-box,
.neuos-widget {
    will-change: transform, box-shadow;
    contain: layout style;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    .glass-container,
    .glass-login-btn,
    .neuos-glass-box,
    .neuos-widget {
        backdrop-filter: var(--glass-filter-heavy);
        -webkit-backdrop-filter: var(--glass-filter-heavy);
        box-shadow: var(--glass-shadow-heavy), var(--glass-glow-heavy);
    }
    
    .glass-reflection {
        animation-duration: 12s;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
    .glass-container,
    .glass-login-btn,
    .neuos-glass-box,
    .neuos-widget {
        animation: none;
        transition: none;
    }
    
    .glass-reflection {
        animation: none;
    }
    
    .glass-pulse,
    .glass-breathe {
        animation: none;
    }
}