/* Glass Dock Component - EXACT implementation from glass-dock.md */

/* Background Animation - EXACT from spec */
@keyframes moveBackground {
    from {
        background-position: 0% 0%;
    }
    to {
        background-position: 0% -1000%;
    }
}

/* Layout utilities */
.min-h-screen {
    min-height: 100vh;
}

.h-full {
    height: 100%;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.font-light {
    font-weight: 300;
}

.relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

.w-full {
    width: 100%;
}

.gap-6 {
    gap: 1.5rem;
}

/* Glass Dock Container - EXACT from spec */
.glass-dock-container {
    position: relative;
    display: flex;
    font-weight: 600;
    overflow: hidden;
    color: black;
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem; /* rounded-3xl */
    padding: 0.75rem; /* p-3 */
}

.glass-dock-container:hover {
    padding: 1rem; /* hover:p-4 */
    border-radius: 2rem; /* hover:rounded-4xl */
}

/* Glass Layers - EXACT from spec */
.glass-layer-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    isolation: isolate;
}

.glass-layer-background {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.25);
}

.glass-layer-highlight {
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: inherit;
    overflow: hidden;
    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), 
                inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);
}

/* Dock Content - EXACT from spec */
.glass-dock-content {
    position: relative;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* gap-2 */
    border-radius: 1.5rem; /* rounded-3xl */
    padding: 0.75rem; /* p-3 */
    padding-top: 0; /* py-0 */
    padding-bottom: 0;
    padding-left: 0.125rem; /* px-0.5 */
    padding-right: 0.125rem;
    overflow: hidden;
}

/* Dock Icons - EXACT from spec */
.dock-icon {
    width: 4rem; /* w-16 */
    height: 4rem; /* h-16 */
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    transform-origin: center center;
    cursor: pointer;
    border-radius: 0.5rem;
}

.dock-icon:hover {
    transform: scale(1.1); /* hover:scale-110 */
}

/* Glass Button Container - EXACT from spec */
.glass-button-container {
    position: relative;
    display: flex;
    font-weight: 600;
    overflow: hidden;
    color: black;
    cursor: pointer;
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 2.2);
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 1.5rem; /* rounded-3xl */
    padding-left: 2.5rem; /* px-10 */
    padding-right: 2.5rem;
    padding-top: 1.5rem; /* py-6 */
    padding-bottom: 1.5rem;
}

.glass-button-container:hover {
    padding-left: 2.75rem; /* hover:px-11 */
    padding-right: 2.75rem;
    padding-top: 1.75rem; /* hover:py-7 */
    padding-bottom: 1.75rem;
    border-radius: 2rem; /* hover:rounded-4xl */
}

.glass-button-content {
    position: relative;
    z-index: 30;
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.glass-button-container:hover .glass-button-content {
    transform: scale(0.95); /* hover:scale-95 */
}

/* Typography */
.font-semibold {
    font-weight: 600;
}

.text-black {
    color: black;
}

.text-white {
    color: white;
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .glass-content {
        gap: 0.25rem;
        padding: 0.5rem;
    }
    
    .dock-icon {
        width: 3rem;
        height: 3rem;
    }
    
    .glass-button {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .glass-button:hover {
        padding-left: 1.75rem;
        padding-right: 1.75rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

/* Animation enhancements */
@keyframes glassShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.glass-layer-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    animation: glassShimmer 3s ease-in-out infinite;
}

/* Accessibility */
.dock-icon:focus,
.glass-button:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .glass-effect,
    .dock-icon,
    .glass-button,
    .glass-button-content {
        transition: none;
    }
    
    .glass-layer-highlight::before {
        animation: none;
    }
}