/* Pterodactyl Brand System Styles */

/* Component Styles */
@import url('../../css/components/FixtureList.css');

/* Font Face Declarations - Loading from ../fonts/ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap');

/* Custom font faces for local fonts (fallback to system if not available) */
@font-face {
    font-family: 'BrandDisplay';
    src: url('../fonts/display-font.ttf') format('truetype'),
         url('../fonts/display-font.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrandBody';
    src: url('../fonts/body-font.otf') format('opentype'),
         url('../fonts/body-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BrandLogo';
    src: url('../fonts/logo-font.otf') format('opentype'),
         url('../fonts/logo-font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Sarabun Font Family */
@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sarabun';
    src: url('../../fonts/Sarabun/Sarabun-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

/* Noto Sans Thai Font Family */
@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai';
    src: url('../../fonts/Noto_Sans_Thai/static/NotoSansThai-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Chakra Petch Font Family */
@font-face {
    font-family: 'Chakra Petch';
    src: url('../../fonts/ChakraPetch-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chakra Petch';
    src: url('../../fonts/ChakraPetch-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Noto Sans Thai Looped Font Family */
@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans Thai Looped';
    src: url('../../fonts/Noto_Sans_Thai_Looped/static/NotoSansThaiLooped-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Keyframes for GSAP fallback animations */
@keyframes cursor-blink {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Keyframe animations for enhanced effects */
@keyframes ptr-pixel-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.02); opacity: 0.9; }
}

@keyframes ptr-pixel-glow {
    0%, 100% { filter: brightness(1) blur(0px); }
    50% { filter: brightness(1.2) blur(1px); }
}

@keyframes ptr-pixel-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* CSS Custom Properties for theming */
:root {
    --primary-color: #3580F6;
    --secondary-color: #E83326;
    --background-light: #FFFFFF;
    --background-dark: #000000;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --border-color: #e5e7eb;
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* Dynamic brand theming properties */
    --brand-primary: var(--primary-color);
    --brand-secondary: var(--secondary-color);
    --brand-accent: var(--primary-color);
    --brand-background: var(--background-light);
    --brand-text: var(--text-primary);
    --spacing-2xl: 3rem;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.75rem;
    --border-radius-xl: 1rem;
}

/* === ColorPicker Integrated Component Styles === */

/* Container styling */
.ptr-color-picker-integrated {
    display: block;
    position: relative;
    font-family: inherit;
    transition: all 0.2s ease-in-out;
}

.ptr-color-picker-integrated--small {
    font-size: 0.875rem;
}

.ptr-color-picker-integrated--medium {
    font-size: 1rem;
}

.ptr-color-picker-integrated--large {
    font-size: 1.125rem;
}

.ptr-color-picker-integrated--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ptr-color-picker-integrated--readonly .ptr-color-picker-integrated__input {
    background-color: var(--background-secondary, #f8fafc);
    cursor: default;
}

/* Live preview box enhancements */
.ptr-color-picker-integrated__preview {
    position: relative;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ptr-color-picker-integrated__preview:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.ptr-color-picker-integrated__preview:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Format selector button styles */
.ptr-color-picker-integrated__format-button {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    padding: 6px 12px;
    background-color: var(--background-light, #ffffff);
    color: var(--text-primary, #1f2937);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.ptr-color-picker-integrated__format-button:hover {
    border-color: var(--brand-primary, #3580F6);
    background-color: var(--brand-primary, #3580F6);
    color: white;
}

.ptr-color-picker-integrated__format-button--active {
    border-color: var(--brand-primary, #3580F6);
    background-color: var(--brand-primary, #3580F6);
    color: white;
}

.ptr-color-picker-integrated__format-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Copy button styles */
.ptr-color-picker-integrated__copy-button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background-color: var(--brand-primary, #3580F6);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
}

.ptr-color-picker-integrated__copy-button:hover {
    background-color: var(--brand-primary-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.25);
}

.ptr-color-picker-integrated__copy-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.25);
}

.ptr-color-picker-integrated__copy-button--success {
    background-color: var(--success-color, #10b981);
}

.ptr-color-picker-integrated__copy-button--success:hover {
    background-color: var(--success-color-dark, #059669);
}

.ptr-color-picker-integrated__copy-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Color information panel */
.ptr-color-picker-integrated__info-panel {
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    transition: all 0.2s ease-in-out;
}

.ptr-color-picker-integrated__info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 16px;
    font-size: 0.875rem;
}

.ptr-color-picker-integrated__info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ptr-color-picker-integrated__info-label {
    font-weight: 600;
    opacity: 0.9;
}

.ptr-color-picker-integrated__info-value {
    font-family: 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Enhanced alpha transparency checkerboard background */
.ptr-color-picker-integrated__alpha-bg {
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%), 
        linear-gradient(-45deg, #ccc 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #ccc 75%), 
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

/* Input integration styles */
.ptr-color-picker-integrated__input-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ptr-color-picker-integrated__format-examples {
    font-family: 'JetBrains Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    background-color: var(--background-secondary, #f8fafc);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #e5e7eb);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ptr-color-picker-integrated__info-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .ptr-color-picker-integrated__format-button {
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .ptr-color-picker-integrated__copy-button {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Focus states for accessibility */
.ptr-color-picker-integrated__format-button:focus,
.ptr-color-picker-integrated__copy-button:focus,
.ptr-color-picker-integrated__preview:focus {
    outline: 2px solid var(--brand-primary, #3580F6);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ptr-color-picker-integrated {
        border: 2px solid;
    }
    
    .ptr-color-picker-integrated__format-button {
        border-width: 2px;
    }
    
    .ptr-color-picker-integrated__preview {
        border-width: 3px;
    }
}

/* Base styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    /* Remove hardcoded background - let BrandResolver handle it */
}

/* Header styles */
.header {
    background: var(--background-light);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 3px var(--shadow-light);
    position: sticky;
    top: 0;
    transition: background 0.3s ease, color 0.3s ease;
    z-index: 100;
}

/* Color Grid System */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.color-swatch {
    aspect-ratio: 3/2;
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
}


@keyframes ptr-glow-bg {
    0% { --bgrotate: 0deg; }
    100% { --bgrotate: 360deg; }
}

@keyframes ptr-holo-bg {
    0% {
        background-position: 0 var(--background-y), 0 0, center;
    }
    100% {
        background-position: 0 var(--background-y), 90% 90%, center;
    }
}

/* Dock Component Styles */
.ptr-dock {
    position: relative;
}

.ptr-dock__panel {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ptr-dock-item {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.ptr-dock-item:hover {
    z-index: 10;
}

.ptr-dock-item:focus-visible {
    outline: 2px solid rgba(59, 130, 246, 0.8);
    outline-offset: 2px;
}

}

@media (max-width: 480px) {

}

.color-swatch-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
}

.color-swatch:hover {
    /* No hover effects on the swatch itself */
}

.color-swatch:active {
    /* No active effects on the swatch itself */
}

.color-value {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    transition: transform 0.2s ease;
}

.color-name {
    position: absolute;
    bottom: var(--spacing-sm);
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: var(--spacing-xs);
    transition: transform 0.2s ease;
}

.copied-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(34, 197, 94, 0.95);
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    animation: copy-success 0.3s ease-out;
    z-index: 10;
}

@keyframes copy-success {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.color-count {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    background: var(--background-light);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    margin-left: var(--spacing-sm);
}

.section-description {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    max-width: 600px;
    text-align: left;
}

/* Enhanced color grid for smaller screens */
@media (max-width: 640px) {
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: var(--spacing-md);
    }
    
    .color-swatch {
        min-height: 100px;
    }
}

/* Font Display Grid */
.font-display-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.font-display-item {
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--background-light);
    transition: all 0.2s ease;
}

.font-display-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px var(--shadow-light);
}

.font-specimen {
    margin-bottom: var(--spacing-md);
    line-height: 1.4;
    word-break: break-word;
}

.font-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.font-key {
    font-weight: 600;
    color: var(--primary-color);
    text-transform: capitalize;
}

.font-name {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    background: rgba(var(--primary-color-rgb, 53, 128, 246), 0.1);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
}

/* Typography System - iOS Brand Style Cascade */
.typography-cascade {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.typography-cascade-item {
    transition: opacity 0.2s ease-in-out;
    background: transparent;
}

.typography-cascade-item:hover {
    opacity: 0.8;
}

.typography-specimen-natural {
    padding: var(--spacing-lg);
}

.typography-demo-text {
    margin-bottom: var(--spacing-md);
    line-height: 1.3;
    word-break: break-word;
}

.typography-details {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr 1fr;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-size: 0.75rem;
    align-items: center;
}

.typography-key {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb, 53, 128, 246), 0.1);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.typography-size {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

.typography-font {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.typography-weight {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
    text-align: right;
    text-transform: capitalize;
}

/* Responsive typography details */
@media (max-width: 768px) {
    .typography-details {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .typography-key {
        justify-self: start;
    }
    
    .typography-size,
    .typography-weight {
        text-align: left;
    }
}

/* Legacy typography styles for compatibility */
.typography-grid {
    display: grid;
    gap: var(--spacing-xl);
}

.typography-specimen {
    padding: var(--spacing-md) 0;
    transition: opacity 0.2s ease-in-out;
    position: relative;
    background: transparent;
}

.typography-specimen:hover {
    opacity: 0.8;
}

.typography-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.typography-meta .property-name {
    font-weight: 600;
    color: var(--text-primary);
}

.typography-meta .property-value {
    font-family: 'JetBrains Mono', monospace;
    background: #f3f4f6;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: 0.75rem;
}

/* Font specimen styles */
.font-display {
    font-family: 'BrandDisplay', 'Inter', sans-serif;
}

.font-body {
    font-family: 'BrandBody', 'Inter', sans-serif;
}

.font-logo {
    font-family: 'BrandLogo', 'Inter', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Spacing Visualization System */
.spacing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-lg);
    align-items: end;
}

.spacing-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.spacing-box {
    background: linear-gradient(135deg, var(--primary-color), #2563eb);
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: var(--spacing-sm);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px var(--shadow-light);
    position: relative;
    overflow: hidden;
}

.spacing-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
    pointer-events: none;
}

.spacing-box:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px var(--shadow-medium);
}

.spacing-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: capitalize;
}

.spacing-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

/* Corner radius visualization */
.corner-radius-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-lg);
}

.corner-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.corner-box {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--secondary-color), #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: var(--spacing-sm);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px var(--shadow-light);
}

.corner-box:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px var(--shadow-medium);
}

/* Icon size visualization */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--spacing-lg);
}

.icon-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.icon-box {
    background: #6b7280;
    border-radius: var(--border-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: var(--spacing-sm);
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px var(--shadow-light);
    position: relative;
}

.icon-box::after {
    content: '⚡';
    font-size: 60%;
    opacity: 0.7;
}

.icon-box:hover {
    transform: scale(1.05);
    background: #4b5563;
    box-shadow: 0 4px 8px var(--shadow-medium);
}

/* Section styles */
.brand-section {
    background: transparent;
    padding: var(--spacing-lg) 0;
    margin-bottom: var(--spacing-2xl);
}

.section-title {
    font-size: var(--brand-typography-large-strong-size, 1.875rem);
    font-weight: var(--brand-typography-large-strong-weight, 700);
    color: var(--brand-primary, var(--text-primary));
    margin-bottom: var(--spacing-xl);
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    /* No font-family - let JavaScript set this */
}

.section-title::before {
    content: '';
    width: 4px;
    height: 2rem;
    background: linear-gradient(180deg, var(--brand-primary, var(--primary-color)), var(--brand-secondary, var(--secondary-color)));
    border-radius: 2px;
    transition: background 0.3s ease;
}

.subsection-title {
    font-size: var(--brand-typography-medium-strong-size, 1.25rem);
    font-weight: var(--brand-typography-medium-strong-weight, 600);
    font-family: var(--brand-typography-medium-strong-font, system-ui, sans-serif);
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    text-transform: capitalize;
    padding-left: var(--spacing-md);
    border-left: 3px solid var(--brand-primary, var(--primary-color));
    transition: border-left-color 0.3s ease;
}

/* Brand-Aware Typography System */
h1, .hero-title {
    font-size: var(--brand-typography-xlarge-strong-size, 3rem);
    font-weight: var(--brand-typography-xlarge-strong-weight, 700);
    font-family: var(--brand-typography-xlarge-strong-font, system-ui, sans-serif);
    line-height: 1.2;
}

h2 {
    font-size: var(--brand-typography-large-strong-size, 1.875rem);
    font-weight: var(--brand-typography-large-strong-weight, 700);
    font-family: var(--brand-typography-large-strong-font, system-ui, sans-serif);
    line-height: 1.3;
}

h3 {
    font-size: var(--brand-typography-medium-strong-size, 1.25rem);
    font-weight: var(--brand-typography-medium-strong-weight, 600);
    font-family: var(--brand-typography-medium-strong-font, system-ui, sans-serif);
    line-height: 1.4;
}

h4 {
    font-size: var(--brand-typography-small-strong-size, 1.125rem);
    font-weight: var(--brand-typography-small-strong-weight, 600);
    font-family: var(--brand-typography-small-strong-font, system-ui, sans-serif);
    line-height: 1.4;
}

/* Body text with brand typography */
p, .body-text {
    font-size: var(--brand-typography-medium-size, 1rem);
    font-weight: var(--brand-typography-medium-weight, 400);
    font-family: var(--brand-typography-medium-font, system-ui, sans-serif);
    line-height: 1.6;
}

/* Small text */
.text-sm, .small-text {
    font-size: var(--brand-typography-small-size, 0.875rem);
    font-weight: var(--brand-typography-small-weight, 400);
    font-family: var(--brand-typography-small-font, system-ui, sans-serif);
    line-height: 1.5;
}

/* Interactive states */
.interactive-element {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-element:hover {
    transform: translateY(-1px);
}

.interactive-element:active {
    transform: translateY(0);
}

/* Enhanced Loading States */
.loading-container {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
}

.loading-spinner-enhanced {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    border: 3px solid transparent;
    border-top: 3px solid var(--primary-color);
    border-right: 3px solid var(--secondary-color);
    border-radius: 50%;
    animation: spin-enhanced 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.loading-pulse {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    opacity: 0.3;
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes spin-enhanced {
    0% { 
        transform: rotate(0deg);
        border-top-color: var(--primary-color);
        border-right-color: var(--secondary-color);
    }
    50% { 
        transform: rotate(180deg);
        border-top-color: var(--secondary-color);
        border-right-color: var(--primary-color);
    }
    100% { 
        transform: rotate(360deg);
        border-top-color: var(--primary-color);
        border-right-color: var(--secondary-color);
    }
}

@keyframes pulse-glow {
    0%, 100% { 
        opacity: 0.2;
        transform: scale(0.9);
    }
    50% { 
        opacity: 0.4;
        transform: scale(1.1);
    }
}

.loading-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced Error States */
.error-container {
    background: linear-gradient(135deg, #fef2f2, #fef7f7);
    border: 2px solid #fecaca;
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-xl);
    margin: var(--spacing-lg) 0;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
    position: relative;
    overflow: hidden;
}

.error-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.error-icon {
    background: #fee2e2;
    border-radius: 50%;
    padding: var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.retry-button {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border: none;
    border-radius: var(--border-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.retry-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.retry-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.error-state {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg) 0;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-secondary);
}

/* Responsive Design */

/* Tablet styles */
@media (max-width: 1024px) {
    .brand-section {
        padding: var(--spacing-md) 0;
        margin-bottom: var(--spacing-xl);
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
    
    .spacing-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    .brand-section {
        padding: var(--spacing-sm) 0;
        margin-bottom: var(--spacing-lg);
    }
    
    .section-title {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-lg);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .section-title::before {
        width: 100%;
        height: 2px;
    }
    
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: var(--spacing-md);
    }
    
    .spacing-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: var(--spacing-md);
    }
    
    .corner-radius-grid,
    .icon-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: var(--spacing-md);
    }
    
    .typography-specimen {
        padding: var(--spacing-md);
    }
    
    .typography-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .color-swatch {
        min-height: 80px;
    }
    
    .color-value {
        font-size: 0.625rem;
        padding: 2px 4px;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .color-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    
    .spacing-grid,
    .corner-radius-grid,
    .icon-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
    }
    
    .brand-section {
        padding: var(--spacing-xs) 0;
    }
    
    .color-swatch {
        min-height: 70px;
    }
}

/* Dark mode support - Enhanced for manual toggle */
@media (prefers-color-scheme: dark) {
    :root {
        --background-light: #1f2937;
        --text-primary: #f9fafb;
        --text-secondary: #d1d5db;
        --border-color: #374151;
        --shadow-light: rgba(0, 0, 0, 0.3);
        --shadow-medium: rgba(0, 0, 0, 0.4);
    }
    
    body {
        /* Remove hardcoded background - let BrandResolver handle it */
    }
    
    .color-value {
        color: var(--text-primary);
    }
    
    .color-name {
        color: var(--text-primary);
    }
    
    .typography-meta .property-value {
        background: #374151;
        color: var(--text-primary);
    }
}

/* Manual dark mode class support */
body.dark-mode {
    /* Remove hardcoded background - let BrandResolver handle it */
    color: #f9fafb;
}

body.dark-mode .header {
    background: #1f2937;
    border-bottom-color: #374151;
}

body.dark-mode .brand-section {
    background: transparent;
}

body.dark-mode .color-value {
    color: var(--text-primary);
}

body.dark-mode .color-name {
    color: var(--text-primary);
}

body.dark-mode .typography-meta .property-value {
    background: #374151;
    color: var(--text-primary);
}

body.dark-mode .typography-specimen {
    background: transparent;
}

body.dark-mode select,
body.dark-mode button {
    background: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

body.dark-mode .text-gray-700 {
    color: #d1d5db !important;
}

body.dark-mode .text-gray-600 {
    color: #9ca3af !important;
}

body.dark-mode .text-gray-900 {
    color: #f9fafb !important;
}

/* Print styles */
@media print {
    .brand-section {
        break-inside: avoid;
    }
    
    .color-swatch {
        border: 1px solid #000;
        box-shadow: none;
    }
    
    .interactive-element:hover {
        transform: none;
    }
    
    .section-title::before {
        display: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .color-swatch {
        border-width: 3px;
    }
    
    .typography-specimen {
        /* No borders in high contrast mode */
    }
    
    .section-title::before {
        background: var(--text-primary);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .loading-spinner {
        animation: none;
        border-top-color: var(--primary-color);
    }
}

/* Focus styles for accessibility */
.color-swatch:focus,
.spacing-box:focus,
.corner-box:focus,
.icon-box:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.typography-specimen:focus {
    opacity: 0.8;
    outline: none;
}

/* Utility Classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.text-mono {
    font-family: 'JetBrains Mono', monospace;
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Smooth Transitions and Animations */
.brand-content {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.brand-content.fade-in {
    opacity: 1;
    transform: translateY(0);
}

.color-group {
    animation: slide-in-up 0.5s ease-out backwards;
}

.color-group:nth-child(1) { animation-delay: 0.1s; }
.color-group:nth-child(2) { animation-delay: 0.2s; }
.color-group:nth-child(3) { animation-delay: 0.3s; }
.color-group:nth-child(4) { animation-delay: 0.4s; }

@keyframes slide-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brand-section {
    animation: fade-in-section 0.6s ease-out backwards;
}

.brand-section:nth-child(1) { animation-delay: 0.1s; }
.brand-section:nth-child(2) { animation-delay: 0.2s; }
.brand-section:nth-child(3) { animation-delay: 0.3s; }
.brand-section:nth-child(4) { animation-delay: 0.4s; }

@keyframes fade-in-section {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Enhanced Hover Effects - Minimal text scaling only */
.color-swatch:hover .color-value {
    transform: scale(1.05);
}

.color-swatch:hover .color-name {
    transform: scale(1.05);
}

/* Section visibility transitions */
.brand-section[v-show] {
    transition: all 0.3s ease-in-out;
}

/* Enhanced focus indicators */
.color-swatch:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
    border-color: var(--primary-color);
}

/* Loading state transitions */
.loading-container {
    animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

/*
 * ===============================================================
 * VUE-BITS COMPONENT CSS INTEGRATION PATTERNS
 * ===============================================================
 * 
 * This section demonstrates how to create CSS for vue-bits components
 * that work with the CDN-only, brand-aware theming system.
 * 
 * KEY PATTERNS FOR COMPONENT CSS:
 * 
 * 1. USE CSS CUSTOM PROPERTIES FOR THEMING:
 *    - var(--primary-color) - Main brand color
 *    - var(--secondary-color) - Accent brand color  
 *    - var(--text-primary) - Main text color
 *    - var(--text-secondary) - Muted text color
 *    - var(--background-light) - Light background
 *    - var(--background-dark) - Dark background
 *    - var(--border-color) - Border color
 *    - var(--shadow-light) - Light shadow
 *    - var(--shadow-medium) - Medium shadow
 * 
 * 2. COMPONENT NAMING CONVENTION:
 *    - Base class: .component-name
 *    - Variants: .component-name-variant
 *    - States: .component-name:hover, .component-name:active
 *    - Modifiers: .component-name.modifier
 * 
 * 3. ANIMATION KEYFRAMES:
 *    - Use @keyframes for reusable animations
 *    - Name keyframes descriptively (shine, pulse, fade)
 *    - Make animations smooth with cubic-bezier easing
 *    - Support prefers-reduced-motion for accessibility
 * 
 * 4. RESPONSIVE DESIGN:
 *    - Use CSS Grid/Flexbox for layouts
 *    - Include @media queries for mobile support
 *    - Use relative units (rem, em, %) where possible
 * 
 * 5. THEMING INTEGRATION:
 *    - Colors update automatically via CSS custom properties
 *    - No JavaScript needed for theme changes
 *    - Components inherit brand theme seamlessly
 * 
 * EXAMPLE COMPONENT CSS STRUCTURE:
 * 
 * /* Base component styles */
/* .my-component {
 *   background: var(--primary-color);
 *   color: var(--background-light);
 *   border: 1px solid var(--border-color);
 *   border-radius: 0.5rem;
 *   padding: 0.5rem 1rem;
 *   transition: all 0.2s ease;
 *   display: inline-block;
 * }
 * 
 * /* Hover state */
/* .my-component:hover {
 *   background: var(--secondary-color);
 *   transform: translateY(-2px);
 *   box-shadow: 0 4px 8px var(--shadow-medium);
 * }
 * 
 * /* Variant styles */
/* .my-component-large {
 *   padding: 1rem 2rem;
 *   font-size: 1.25rem;
 * }
 * 
 * .my-component-subtle {
 *   background: transparent;
 *   color: var(--text-secondary);
 *   border-color: var(--text-secondary);
 * }
 * 
 * /* Animation */
/* @keyframes my-animation {
 *   0% { opacity: 0; transform: scale(0.9); }
 *   100% { opacity: 1; transform: scale(1); }
 * }
 * 
 * .my-component.animated {
 *   animation: my-animation 0.3s ease-out;
 * }
 * 
 * /* Responsive design */
/* @media (max-width: 768px) {
 *   .my-component {
 *     padding: 0.375rem 0.75rem;
 *     font-size: 0.875rem;
 *   }
 * }
 */

/* Shine Animation for ShinyText Component */
@keyframes shine {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Pulse Animation for ShinyText Component */
@keyframes shiny-pulse {
    0%, 100% {
        background-position: 0% center;
        opacity: 1;
        transform: scale(1);
    }
    50% {
        background-position: 100% center;
        opacity: 0.8;
        transform: scale(1.02);
    }
}

/* ShinyText Component Base Styles - Now fully brand-aware */
.shiny-text,
.shiny-text-default {
    background: linear-gradient(
        90deg,
        var(--text-primary, #1f2937) 0%,
        var(--primary-color, #3580F6) 50%,
        var(--text-primary, #1f2937) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2s ease-in-out infinite;
    display: inline-block;
    font-weight: inherit;
}

.shiny-text-subtle {
    background: linear-gradient(
        90deg,
        var(--text-primary, #1f2937) 0%,
        var(--primary-color, #3580F6) 30%,
        var(--secondary-color, #E83326) 50%,
        var(--primary-color, #3580F6) 70%,
        var(--text-primary, #1f2937) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s ease-in-out infinite;
    display: inline-block;
    font-weight: inherit;
}

.shiny-text-fast {
    background: linear-gradient(
        90deg,
        var(--text-primary, #1f2937) 0%,
        var(--primary-color, #3580F6) 50%,
        var(--text-primary, #1f2937) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 1.5s ease-in-out infinite;
    display: inline-block;
    font-weight: inherit;
}

.shiny-text-hero {
    background: linear-gradient(
        90deg,
        var(--text-primary, #1f2937) 0%,
        var(--primary-color, #3580F6) 25%,
        var(--secondary-color, #E83326) 50%,
        var(--primary-color, #3580F6) 75%,
        var(--text-primary, #1f2937) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 2.5s ease-in-out infinite;
    display: inline-block;
    font-weight: 700;
}

/*
 * ===============================================================
 * COMPONENT DEVELOPMENT TEMPLATES
 * ===============================================================
 * 
 * Copy and modify these templates when creating new vue-bits components.
 * Each template demonstrates best practices for different component types.
 */

/*
 * TEMPLATE 1: BUTTON COMPONENT
 * 
 * Use this template for interactive button-like components.
 * Includes hover states, focus indicators, and variant support.

.my-button {
    background: var(--primary-color);
    color: var(--background-light);
    border: none;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    box-shadow: 0 2px 4px var(--shadow-light);
}

.my-button:hover:not(:disabled) {
    background: var(--secondary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px var(--shadow-medium);
}

.my-button:active {
    transform: translateY(0);
}

.my-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.my-button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Button variants */
/* .my-button-secondary {
    background: var(--secondary-color);
}

.my-button-outline {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.my-button-ghost {
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
} */

/*
 * TEMPLATE 2: ANIMATED TEXT COMPONENT
 * 
 * Use this template for text components with animations.
 * Demonstrates background-clip text effects and keyframe animations.

.animated-text {
    background: linear-gradient(
        90deg,
        var(--primary-color) 0%,
        var(--secondary-color) 50%,
        var(--primary-color) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    display: inline-block;
}

.animated-text-wave {
    animation: text-wave 2s ease-in-out infinite;
}

.animated-text-pulse {
    animation: text-pulse 1.5s ease-in-out infinite;
}

@keyframes text-wave {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

@keyframes text-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
} */

/*
 * TEMPLATE 3: CARD/CONTAINER COMPONENT
 * 
 * Use this template for container components like cards, panels, boxes.
 * Includes elevation, borders, and hover effects.

.my-card {
    background: transparent;
    padding: var(--spacing-lg);
    transition: opacity 0.2s ease-in-out;
    position: relative;
}

.my-card:hover {
    opacity: 0.8;
}

.my-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.my-card:hover::before {
    opacity: 1;
}

/* Card variants */
/* .my-card-elevated {
    box-shadow: 0 4px 12px var(--shadow-medium);
    transform: translateY(-1px);
}

.my-card-flat {
    box-shadow: none;
    border-width: 2px;
}

.my-card-accent {
    border-color: var(--secondary-color);
} */

/*
 * TEMPLATE 4: LOADING/SPINNER COMPONENT
 * 
 * Use this template for loading indicators and spinners.
 * Includes rotation animations and size variants.

.my-spinner {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--border-color);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}

.my-spinner-dual {
    border-right: 2px solid var(--secondary-color);
}

.my-spinner-small {
    width: 1rem;
    height: 1rem;
    border-width: 1px;
}

.my-spinner-large {
    width: 3rem;
    height: 3rem;
    border-width: 3px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
} */

/*
 * ===============================================================
 * INTEGRATION CHECKLIST
 * ===============================================================
 * 
 * When adding a new vue-bits component, ensure you:
 * 
 * ✅ CSS:
 *    □ Use CSS custom properties for all colors
 *    □ Include hover, focus, and active states
 *    □ Add variants using modifier classes
 *    □ Include @keyframes for animations
 *    □ Support responsive design
 *    □ Follow naming convention (.component-name)
 * 
 * ✅ JAVASCRIPT:
 *    □ Define component as const ComponentName = {}
 *    □ Include props for customization
 *    □ Use computed properties for dynamic classes
 *    □ Keep template as template literal
 *    □ Register with app.component()
 * 
 * ✅ INTEGRATION:
 *    □ Test with different brand themes
 *    □ Verify hover and focus states work
 *    □ Check responsive behavior
 *    □ Test accessibility (keyboard navigation, screen readers)
 *    □ Validate in different browsers
 * 
 * ✅ DOCUMENTATION:
 *    □ Add usage examples in component demo section
 *    □ Document available props and variants
 *    □ Include code examples in template
 *    □ Update this integration guide if needed
 */

/* Side Navigation - Base Structure Only (Styling via Vue) */
.nav-menu {
    list-style: none;
    padding: 16px 0;
    margin: 0;
}

.nav-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
}

.nav-title {
    background: none !important;
    background-image: none !important;
    animation: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Main content with navigation */
.main-content.with-nav {
    margin-left: 250px;
    min-height: 100vh;
}

.content-with-nav {
    margin-left: 250px;
}

/* Component Showcase Styles */
.component-showcase {
    max-width: 7xl;
    margin: 0 auto;
    padding: 2rem;
}

.showcase-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    color: #1f2937;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

.showcase-content {
    border-radius: 8px;
    padding: 2rem;
}

/* Button Component Styles */
.ptr-button {
    /* Base styles are handled in JavaScript for brand-aware theming */
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    background-image: none;
    line-height: 1;
}

.ptr-button:focus {
    outline: 2px solid var(--brand-primary, #3580F6);
    outline-offset: 2px;
}

.ptr-button:focus:not(:focus-visible) {
    outline: none;
}

.ptr-button:focus-visible {
    outline: 2px solid var(--brand-primary, #3580F6);
    outline-offset: 2px;
}

.ptr-button:active {
    transform: translateY(0px) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.ptr-button--disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.ptr-button--loading {
    cursor: wait !important;
}

.ptr-button--full-width {
    width: 100% !important;
    display: flex !important;
}

.ptr-button__spinner {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    animation: ptr-button-spin 1s linear infinite;
}

.ptr-button__text--loading {
    opacity: 0.7;
}

@keyframes ptr-button-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive button adjustments */
@media (max-width: 768px) {
    .ptr-button--large {
        padding: 14px 20px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    
    .ptr-button--medium {
        padding: 10px 16px !important;
        min-height: 36px !important;
        font-size: 14px !important;
    }
    
    .ptr-button--small {
        padding: 6px 10px !important;
        min-height: 28px !important;
        font-size: 12px !important;
    }
    
    /* Hero buttons maintain their large font size on mobile */
    .ptr-button--hero {
        font-size: 40px !important;
    }
}

/* Input Component Styles */
.ptr-input-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.ptr-input-wrapper--full-width {
    width: 100%;
}

.ptr-input-container {
    position: relative;
    display: flex;
}

.ptr-input {
    /* Base styles are handled in JavaScript for brand-aware theming */
    box-sizing: border-box;
    display: block;
}

.ptr-input:focus {
    /* Focus styles handled in JavaScript for brand-aware colors */
}

.ptr-input:focus-visible {
    outline: none;
}

.ptr-input--disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.ptr-input--readonly {
    cursor: default !important;
    /* Background handled in JavaScript for brand-aware theming */
}

.ptr-input--full-width {
    width: 100% !important;
}

.ptr-input--textarea {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    line-height: 1.5 !important;
}

.ptr-input-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.ptr-input-meta > div:only-child {
    width: 100%;
}

/* Placeholder styling */
.ptr-input::placeholder {
    opacity: 0.6;
    color: inherit;
}

.ptr-input::-webkit-input-placeholder {
    opacity: 0.6;
    color: inherit;
}

.ptr-input::-moz-placeholder {
    opacity: 0.6;
    color: inherit;
}

.ptr-input:-ms-input-placeholder {
    opacity: 0.6;
    color: inherit;
}

/* Remove default browser styling */
.ptr-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Textarea specific styles */
.ptr-input--textarea {
    resize: vertical;
    min-height: 80px;
}

.ptr-input--textarea.ptr-input--small {
    min-height: 60px;
}

.ptr-input--textarea.ptr-input--large {
    min-height: 120px;
}

/* Responsive input adjustments */
@media (max-width: 768px) {
    .ptr-input--large {
        padding: 14px 16px !important;
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .ptr-input--medium {
        padding: 10px 14px !important;
        min-height: 40px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .ptr-input--small {
        padding: 8px 12px !important;
        min-height: 36px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .ptr-input--textarea.ptr-input--large {
        min-height: 100px !important;
    }
    
    .ptr-input--textarea.ptr-input--medium {
        min-height: 80px !important;
    }
    
    .ptr-input--textarea.ptr-input--small {
        min-height: 60px !important;
    }
}

/* Card Component Styles */
.ptr-card {
    /* Base styles are handled in JavaScript for brand-aware theming */
    box-sizing: border-box;
    width: 100%;
}

.ptr-card--interactive {
    cursor: pointer;
}

.ptr-card--disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.ptr-card--loading {
    position: relative;
    pointer-events: none;
}

.ptr-card__loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

.ptr-card__spinner {
    color: var(--brand-primary, #3580F6);
    animation: ptr-card-spin 1s linear infinite;
}

.ptr-card__header {
    /* Header styles handled in JavaScript */
}

.ptr-card__content {
    flex: 1;
}

.ptr-card__footer {
    margin-top: auto;
    padding-top: 16px;
}

/* Card variants with hover effects */
.ptr-card--interactive:hover {
    /* Hover styles handled in JavaScript for brand-aware colors */
}

.ptr-card--interactive:active {
    transform: translateY(0px) !important;
}

.ptr-card--interactive:focus {
    outline: 2px solid var(--brand-primary, #3580F6);
    outline-offset: 2px;
}

.ptr-card--interactive:focus:not(:focus-visible) {
    outline: none;
}

.ptr-card--interactive:focus-visible {
    outline: 2px solid var(--brand-primary, #3580F6);
    outline-offset: 2px;
}

@keyframes ptr-card-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive card adjustments */
@media (max-width: 768px) {
    .ptr-card--padding-large {
        padding: 24px !important;
    }
    
    .ptr-card--padding-medium {
        padding: 16px !important;
    }
    
    .ptr-card--padding-small {
        padding: 12px !important;
    }
    
    .ptr-card--large {
        min-height: 140px !important;
    }
    
    .ptr-card--medium {
        min-height: 100px !important;
    }
    
    .ptr-card--small {
        min-height: 80px !important;
    }
}

/* Snackbar Component Styles */
.ptr-snackbar {
    /* Base styles are handled in JavaScript for brand-aware theming */
    box-sizing: border-box;
}

.ptr-snackbar--visible {
    /* Visibility handled in JavaScript for smooth animations */
}

.ptr-snackbar--persistent {
    /* Persistent snackbars don't auto-dismiss */
}

/* Snackbar positioning classes */
.ptr-snackbar--top-left,
.ptr-snackbar--top-center,
.ptr-snackbar--top-right,
.ptr-snackbar--bottom-left,
.ptr-snackbar--bottom-center,
.ptr-snackbar--bottom-right {
    /* Positioning handled in JavaScript for dynamic placement */
}

/* Responsive snackbar adjustments */
@media (max-width: 768px) {
    .ptr-snackbar {
        max-width: calc(100vw - 32px) !important;
        margin: 0 16px !important;
    }
    
    .ptr-snackbar--top-left,
    .ptr-snackbar--top-right {
        left: 16px !important;
        right: 16px !important;
        top: 16px !important;
    }
    
    .ptr-snackbar--bottom-left,
    .ptr-snackbar--bottom-right {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
    }
    
    .ptr-snackbar--top-center {
        left: 16px !important;
        right: 16px !important;
        top: 16px !important;
        transform: none !important;
    }
    
    .ptr-snackbar--bottom-center {
        left: 16px !important;
        right: 16px !important;
        bottom: 16px !important;
        transform: none !important;
    }
}

/* Select Component Styles */
.ptr-select-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

.ptr-select-wrapper--full-width {
    width: 100%;
}

.ptr-select {
    /* Base styles are handled in JavaScript for brand-aware theming */
    box-sizing: border-box;
    position: relative;
}

.ptr-select:focus {
    /* Focus styles handled in JavaScript for brand-aware colors */
}

.ptr-select:focus-visible {
    outline: none;
}

.ptr-select--disabled {
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 0.6 !important;
}

.ptr-select--full-width {
    width: 100% !important;
}

.ptr-select--open {
    /* Open state styles handled in JavaScript */
}

.ptr-select__display {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ptr-select__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.ptr-select__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.ptr-select__clear:hover {
    opacity: 1;
}

.ptr-select__chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ptr-select__dropdown {
    /* Dropdown styles handled in JavaScript for brand-aware theming */
}

.ptr-select__option {
    /* Option styles handled in JavaScript for brand-aware theming */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ptr-select__option:last-child {
    border-bottom: none;
}

.ptr-select__option:hover {
    /* Hover styles handled in JavaScript for brand-aware colors */
}

.ptr-select__search input {
    /* Search input inherits brand styling */
}

/* Responsive select adjustments */
@media (max-width: 768px) {
    .ptr-select--large {
        padding: 14px 16px !important;
        min-height: 44px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .ptr-select--medium {
        padding: 10px 14px !important;
        min-height: 40px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .ptr-select--small {
        padding: 8px 12px !important;
        min-height: 36px !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    .ptr-select__dropdown {
        max-height: 160px !important;
    }
}

/* Accordion Component Styles */
.ptr-accordion {
    /* Base styles are handled in JavaScript for brand-aware theming */
    width: 100%;
}

.ptr-accordion--animated {
    /* Animation handled in JavaScript for smooth transitions */
}

.ptr-accordion__item {
    /* Item styles handled in JavaScript for brand-aware theming */
}

.ptr-accordion__item:last-child {
    border-bottom: none;
}

.ptr-accordion__item--open {
    /* Open state styles handled in JavaScript */
}

.ptr-accordion__item--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ptr-accordion__header {
    /* Header styles handled in JavaScript for brand-aware theming */
    position: relative;
}

.ptr-accordion__header:focus {
    outline: 2px solid var(--brand-primary, #3580F6);
    outline-offset: -2px;
}

.ptr-accordion__header:focus:not(:focus-visible) {
    outline: none;
}

.ptr-accordion__header:focus-visible {
    outline: 2px solid var(--brand-primary, #3580F6);
    outline-offset: -2px;
}

.ptr-accordion__title {
    /* Title styles handled in JavaScript for brand-aware theming */
}

.ptr-accordion__icon {
    /* Icon styles handled in JavaScript for brand-aware theming */
}

.ptr-accordion__content {
    /* Content styles handled in JavaScript for brand-aware theming */
}

.ptr-accordion__content p {
    margin: 0 0 12px 0;
}

.ptr-accordion__content p:last-child {
    margin-bottom: 0;
}

.ptr-accordion__content ul,
.ptr-accordion__content ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.ptr-accordion__content li {
    margin-bottom: 4px;
}

.ptr-accordion__content code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.9em;
}

.ptr-accordion__content pre {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    margin: 0 0 12px 0;
}

.ptr-accordion__content pre code {
    background: none;
    padding: 0;
}

/* Responsive accordion adjustments */
@media (max-width: 768px) {
    .ptr-accordion--large .ptr-accordion__header {
        padding: 16px 20px !important;
        font-size: 16px !important;
    }
    
    .ptr-accordion--medium .ptr-accordion__header {
        padding: 14px 16px !important;
        font-size: 15px !important;
    }
    
    .ptr-accordion--small .ptr-accordion__header {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    
    .ptr-accordion__content {
        font-size: 14px !important;
    }
}

/*
 * ===============================================================
 * TEXT ANIMATION COMPONENTS CSS
 * ===============================================================
 * 
 * Responsive CSS styles for all 6 Vue Bits text animation components:
 * 1. GradientText - Brand-aware animated gradient text
 * 2. ScrambleText - Proximity-based scrambling animation
 * 3. TrueFocus - Word-by-word focus/blur animation
 * 4. RotatingText - Automatic text rotation animation
 * 5. ScrollVelocity - Scroll-based velocity animation
 * 6. TextType - Typewriter effect animation
 * 
 * All components use CSS custom properties for brand-aware theming
 */

/* 1. GradientText Component */
.gradient-text {
    position: relative;
    margin: 0 auto;
    display: flex;
    max-width: fit-content;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    backdrop-filter: blur(8px);
    transition: box-shadow 0.5s ease;
    cursor: pointer;
}

.gradient-text--with-border {
    position: relative;
}

.gradient-text__border {
    position: absolute;
    inset: 0;
    background-size: 300% 100%;
    z-index: 0;
    pointer-events: none;
    animation: gradient-move 8s linear infinite;
}

.gradient-text__border-inner {
    position: absolute;
    inset: 0;
    background-color: var(--background-light, #ffffff);
    z-index: -1;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.gradient-text__text {
    display: inline-block;
    position: relative;
    z-index: 2;
    color: transparent;
    background-size: 300% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move 8s linear infinite;
}

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

/* 2. ScrambleText Component */
.scramble-text {
    color: var(--text-primary, #1f2937);
    cursor: pointer;
    user-select: none;
    transition: color 0.3s ease;
}

.scramble-text__char {
    display: inline-block;
    will-change: transform;
    transition: color 0.3s ease;
}

.scramble-text:hover {
    opacity: 0.9;
}

/* 3. TrueFocus Component */
.truefocus-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

.truefocus-word {
    position: relative;
    font-weight: 900;
    font-size: 4.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-primary, #1f2937);
    transition: filter 0.5s ease, color 0.5s ease;
    user-select: none;
}

.truefocus-word--blurred {
    filter: blur(5px);
    color: var(--text-detail, #6b7280);
    opacity: 0.6;
}

.truefocus-word--focused {
    filter: blur(0px);
    color: var(--text-primary, #1f2937);
}

.truefocus-border {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: all 0.5s ease;
    opacity: 0;
}

.truefocus-border--visible {
    opacity: 1;
}

.truefocus-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 3px solid var(--brand-primary, var(--primary-color));
    border-radius: 3px;
    filter: drop-shadow(0 0 4px var(--brand-primary, var(--primary-color)));
}

.truefocus-corner--top-left {
    top: -10px;
    left: -10px;
    border-right: none;
    border-bottom: none;
}

.truefocus-corner--top-right {
    top: -10px;
    right: -10px;
    border-left: none;
    border-bottom: none;
}

.truefocus-corner--bottom-left {
    bottom: -10px;
    left: -10px;
    border-right: none;
    border-top: none;
}

.truefocus-corner--bottom-right {
    bottom: -10px;
    right: -10px;
    border-left: none;
    border-top: none;
}

@keyframes truefocus-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* 4. RotatingText Component */
.rotating-text {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    white-space: pre-wrap;
    color: var(--text-headline, #1f2937);
    overflow: hidden;
}

.rotating-char {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.rotating-char--entering {
    animation: rotateTextEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.rotating-char--exiting {
    animation: rotateTextExit 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rotateTextEnter {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotateTextExit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-120%);
    }
}

/* 5. ScrollVelocity Component */
.scroll-velocity {
    position: relative;
    width: 100%;
}

.scroll-velocity__parallax {
    position: relative;
    overflow: hidden;
}

.scroll-velocity__scroller {
    display: flex;
    white-space: nowrap;
    text-align: center;
    font-family: sans-serif;
    font-size: 2.25rem;
    font-weight: bold;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07));
    color: var(--text-headline, #1f2937);
    will-change: transform;
}

.scroll-velocity__text {
    flex-shrink: 0;
    color: var(--text-headline, #1f2937);
}

/* 6. TextType Component */
.text-type {
    display: inline-block;
    white-space: pre-wrap;
    letter-spacing: -0.025em;
}

.text-type__text {
    display: inline;
}

.text-type__cursor {
    margin-left: 0.25rem;
    display: inline-block;
    opacity: 1;
    color: var(--brand-primary, var(--primary-color));
    animation: textTypeBlink 1s ease-in-out infinite;
}

.text-type__cursor--hidden {
    visibility: hidden;
}

@keyframes textTypeBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 
 * ===============================================================
 * RESPONSIVE BREAKPOINTS FOR TEXT ANIMATION COMPONENTS
 * ===============================================================
 */

/* Large screens (desktops) */
@media (min-width: 1024px) {
    .truefocus-word {
        font-size: 5rem;
    }
    
    .scroll-velocity__scroller {
        font-size: 3rem;
    }
}

/* Medium screens (tablets) */
@media (max-width: 1023px) and (min-width: 769px) {
    .truefocus-word {
        font-size: 3.5rem;
        gap: 0.8em;
    }
    
    .scroll-velocity__scroller {
        font-size: 2rem;
    }
    
    .gradient-text {
        border-radius: 1rem;
    }
}

/* Small screens (mobile devices) */
@media (max-width: 768px) {
    .truefocus-container {
        gap: 0.6em;
        flex-direction: column;
        text-align: center;
    }
    
    .truefocus-word {
        font-size: 2.5rem;
    }
    
    .truefocus-corner {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }
    
    .scroll-velocity__scroller {
        font-size: 1.5rem;
    }
    
    .gradient-text {
        border-radius: 0.75rem;
    }
    
    .gradient-text__border-inner {
        border-radius: 0.75rem;
    }
    
    .rotating-text {
        font-size: 0.9em;
    }
    
    .text-type {
        font-size: 0.95em;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .truefocus-word {
        font-size: 2rem;
    }
    
    .truefocus-corner {
        width: 10px;
        height: 10px;
        border-width: 2px;
    }
    
    .scroll-velocity__scroller {
        font-size: 1.25rem;
    }
    
    .gradient-text {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
    }
    
    .text-type__cursor {
        margin-left: 0.125rem;
    }
    
    .rotating-char {
        font-size: 0.9em;
    }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .gradient-text__text,
    .gradient-text__border {
        background-size: 400% 100%;
    }
    
    .truefocus-corner {
        filter: drop-shadow(0 0 6px var(--brand-primary, var(--primary-color)));
    }
}

/* Dark mode support for text animations */
@media (prefers-color-scheme: dark) {
    .gradient-text__border-inner {
        background-color: var(--background-dark, #1f2937);
    }
    
    .scroll-velocity__scroller {
        filter: drop-shadow(0 4px 3px rgb(255 255 255 / 0.1));
    }
}

body.dark-mode .gradient-text__border-inner {
    background-color: var(--background-dark, #1f2937);
}

body.dark-mode .scroll-velocity__scroller {
    filter: drop-shadow(0 4px 3px rgb(255 255 255 / 0.1));
}

/* Reduce motion preferences */
@media (prefers-reduced-motion: reduce) {
    .gradient-text__text,
    .gradient-text__border {
        animation: none !important;
    }
    
    .rotating-char {
        transition: none !important;
        animation: none !important;
    }
    
    .truefocus-word {
        transition: filter 0.1s ease, color 0.1s ease !important;
    }
    
    .truefocus-border {
        transition: all 0.1s ease !important;
    }
    
    .text-type__cursor {
        animation: none !important;
        opacity: 1 !important;
    }
    
    .scramble-text__char {
        transition: none !important;
    }
}

/* Print styles for text animations */
@media print {
    .gradient-text__text {
        color: var(--text-primary, #1f2937) !important;
        background: none !important;
        -webkit-text-fill-color: inherit !important;
    }
    
    .text-type__cursor {
        display: none !important;
    }
    
    .truefocus-border,
    .truefocus-corner {
        display: none !important;
    }
    
    .rotating-char {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/*
 * ===============================================================
 * NEW ANIMATION COMPONENTS CSS
 * ===============================================================
 * 
 * Component-specific CSS for the 7 new animation components:
 * 1. CountUp - Brand-aware animated number counter
 * 2. GlareHover - Interactive hover effect with glare animation
 * 3. SplashCursor - WebGL fluid simulation cursor effects
 * 4. PixelTransition - Pixelated transition effect with GSAP
 * 5. ShapeBlur - WebGL shape with mouse interaction
 * 6. MetallicPaint - WebGL metallic shader effects
 * 7. StarBorder - Animated star border with gradient effects
 */

/* 1. CountUp Component Styles */
.count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.count-up:hover {
    transform: scale(1.05);
}

.count-up--large {
    font-size: 2.5rem;
    font-weight: 700;
}

.count-up--medium {
    font-size: 1.5rem;
    font-weight: 600;
}

.count-up--small {
    font-size: 1rem;
    font-weight: 500;
}

/* 2. GlareHover Component Styles */
.glare-hover {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glare-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-medium);
}

.glare-hover:active {
    transform: translateY(0);
}

.glare-hover__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glare-hover:hover .glare-hover__overlay {
    opacity: 1;
}

/* 3. SplashCursor Component Styles */
.splash-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
}

.splash-cursor__canvas {
    width: 100vw;
    height: 100vh;
    display: block;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Hide splash cursor on touch devices for performance */
@media (pointer: coarse) {
    .splash-cursor {
        display: none;
    }
}

/* 4. PixelTransition Component Styles */
.pixelated-transition {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: var(--background-light);
    border: 2px solid var(--text-primary);
    transition: all 0.3s ease;
}

.pixelated-transition:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px var(--shadow-medium);
}

.pixelated-transition-pixel {
    position: absolute;
    display: none;
    transition: none;
    will-change: transform, opacity;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.pixelated-transition__content {
    position: relative;
    z-index: 2;
}

.pixelated-transition__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

/* Pixel animation keyframes */
@keyframes pixelFadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pixelFadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* 5. ShapeBlur Component Styles */
.shape-blur-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: transparent;
    transition: all 0.3s ease;
}

.shape-blur-container:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

.shape-blur-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: inherit;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
}

/* Fallback for when WebGL/Three.js is not available */
.shape-blur-fallback {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, 
        rgba(var(--primary-color-rgb, 53, 128, 246), 0.2) 0%, 
        transparent 70%);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.shape-blur-fallback:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

/* 6. MetallicPaint Component Styles */
.metallic-paint {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--background-dark);
}

.metallic-paint canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain;
    border-radius: inherit;
    image-rendering: auto;
    image-rendering: high-quality;
    image-rendering: -webkit-optimize-contrast;
}

.metallic-paint:hover canvas {
    filter: brightness(1.1) contrast(1.05);
    transform: scale(1.01);
    transition: all 0.3s ease;
}

/* 7. StarBorder Component Styles */
.star-border-container {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background: transparent !important;
    border: none !important;
    border-radius: 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.star-border-container:hover {
    transform: translateY(-2px);
}

.star-border-content {
    position: relative;
    z-index: 10;
    border: 1px solid var(--border-color);
    background: var(--background-light);
    color: var(--text-primary);
    font-size: 16px;
    text-align: center;
    padding: 24px 64px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.star-border-container:hover .star-border-content {
    box-shadow: 0 0 20px rgba(var(--primary-color-rgb, 53, 128, 246), 0.3);
    border-color: var(--primary-color);
}

/* Star movement animations */
@keyframes star-movement-bottom {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    100% {
        transform: translate(-100%, 0%);
        opacity: 0;
    }
}

@keyframes star-movement-top {
    0% {
        transform: translate(0%, 0%);
        opacity: 1;
    }
    100% {
        transform: translate(100%, 0%);
        opacity: 0;
    }
}

.star-movement-bottom {
    animation: star-movement-bottom linear infinite alternate;
    position: absolute;
    width: 300%;
    height: 50%;
    opacity: 0.7;
    bottom: -11px;
    right: -250%;
    border-radius: 50%;
    z-index: 0;
}

.star-movement-top {
    animation: star-movement-top linear infinite alternate;
    position: absolute;
    width: 300%;
    height: 50%;
    opacity: 0.7;
    top: -10px;
    left: -250%;
    border-radius: 50%;
    z-index: 0;
}

/* Enhanced hover effects for star borders */
.star-border-container:hover .star-movement-bottom,
.star-border-container:hover .star-movement-top {
    animation-duration: 3s;
    opacity: 0.9;
}

/*
 * ===============================================================
 * RESPONSIVE DESIGN FOR ANIMATION COMPONENTS
 * ===============================================================
 */

/* Large screens (1024px and up) */
@media (min-width: 1024px) {
    .count-up--large {
        font-size: 3rem;
    }
    
    .star-border-content {
        padding: 28px 72px;
        font-size: 18px;
    }
    
    .pixelated-transition {
        border-radius: 20px;
    }
}

/* Medium screens (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 769px) {
    .count-up--large {
        font-size: 2.25rem;
    }
    
    .star-border-content {
        padding: 20px 48px;
        font-size: 15px;
    }
    
    .pixelated-transition {
        border-radius: 12px;
    }
}

/* Small screens (768px and below) */
@media (max-width: 768px) {
    .count-up--large {
        font-size: 1.75rem;
    }
    
    .count-up--medium {
        font-size: 1.25rem;
    }
    
    .star-border-content {
        padding: 16px 32px;
        font-size: 14px;
    }
    
    .glare-hover {
        min-height: 120px;
    }
    
    .pixelated-transition {
        border-radius: 10px;
        border-width: 1px;
    }
    
    .shape-blur-container {
        min-height: 200px;
    }
    
    .metallic-paint {
        min-height: 180px;
    }
    
    /* Reduce animation intensity on mobile for performance */
    .star-movement-bottom,
    .star-movement-top {
        animation-duration: 8s;
        opacity: 0.5;
    }
}

/* Extra small screens (480px and below) */
@media (max-width: 480px) {
    .count-up--large {
        font-size: 1.5rem;
    }
    
    .count-up--medium {
        font-size: 1.125rem;
    }
    
    .star-border-content {
        padding: 12px 24px;
        font-size: 13px;
    }
    
    .glare-hover {
        min-height: 100px;
    }
    
    .pixelated-transition {
        border-radius: 8px;
    }
    
    .shape-blur-container,
    .metallic-paint {
        min-height: 150px;
    }
    
    /* Further reduce animations on very small screens */
    .star-movement-bottom,
    .star-movement-top {
        animation-duration: 10s;
        opacity: 0.3;
    }
}

/*
 * ===============================================================
 * GPU ACCELERATION AND PERFORMANCE OPTIMIZATIONS
 * ===============================================================
 */

/* GPU acceleration hints for animated elements */
.count-up,
.glare-hover,
.glare-hover__overlay,
.pixelated-transition,
.pixelated-transition-pixel,
.shape-blur-container canvas,
.metallic-paint canvas,
.star-movement-bottom,
.star-movement-top,
.star-border-content {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Optimize for smooth animations */
@media (prefers-reduced-motion: no-preference) {
    .count-up,
    .glare-hover,
    .pixelated-transition,
    .star-border-container {
        will-change: transform, opacity;
    }
}

/*
 * ===============================================================
 * ACCESSIBILITY AND REDUCED MOTION SUPPORT
 * ===============================================================
 */

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .star-movement-bottom,
    .star-movement-top {
        animation: none !important;
        opacity: 0.6 !important;
    }
    
    .count-up:hover {
        transform: none !important;
    }
    
    .glare-hover:hover {
        transform: none !important;
    }
    
    .pixelated-transition:hover {
        transform: none !important;
    }
    
    .shape-blur-container:hover {
        transform: none !important;
    }
    
    .star-border-container:hover {
        transform: none !important;
    }
    
    .pixelated-transition-pixel {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .star-border-content {
        border-width: 2px;
    }
    
    .pixelated-transition {
        border-width: 3px;
    }
    
    .glare-hover {
        border-width: 2px;
    }
}

/* Dark mode enhancements for animation components */
@media (prefers-color-scheme: dark) {
    .star-border-content {
        background: var(--background-dark);
        border-color: var(--text-secondary);
    }
    
    .pixelated-transition {
        background: var(--background-dark);
        border-color: var(--text-secondary);
    }
}

body.dark-mode .star-border-content {
    background: var(--background-dark);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

body.dark-mode .pixelated-transition {
    background: var(--background-dark);
    border-color: var(--text-secondary);
}

body.dark-mode .shape-blur-fallback {
    background: radial-gradient(circle at 50% 50%, 
        rgba(var(--primary-color-rgb, 53, 128, 246), 0.15) 0%, 
        transparent 70%);
}

/*
 * ===============================================================
 * VUE BITS UI COMPONENTS CSS
 * ===============================================================
 */

/* AnimatedList Component */
.ptr-animated-list {
    position: relative;
    background: var(--background-primary, #0b0b0b);
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    overflow: hidden;
}

.ptr-animated-list__scroll {
    scrollbar-width: var(--scrollbar-width, 8px);
    scrollbar-color: var(--scrollbar-thumb-bg, #333) var(--scrollbar-track-bg, #111);
}

.ptr-animated-list__scroll::-webkit-scrollbar {
    width: var(--scrollbar-width, 8px);
}

.ptr-animated-list__scroll::-webkit-scrollbar-track {
    background: var(--scrollbar-track-bg, #111);
    border-radius: 4px;
}

.ptr-animated-list__scroll::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg, #333);
    border-radius: 4px;
}

.ptr-animated-list__scroll::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, #444);
}

.ptr-scrollbar-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ptr-scrollbar-hidden::-webkit-scrollbar {
    width: 0px;
    display: none;
}

/* GlassSurface Component */
.ptr-glass-surface {
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.ptr-glass-surface.dark-mode {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

/* Dock Component */
.ptr-dock {
    background: var(--background-surface, rgba(0, 0, 0, 0.8));
    border: 1px solid var(--border-color, rgb(55, 65, 81));
    border-radius: 16px;
    padding: 8px 16px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.ptr-dock__panel {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px;
    min-height: 64px;
}

.ptr-dock-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--item-bg, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 24px;
    color: var(--text-primary, #ffffff);
    border: 1px solid transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ptr-dock-item:hover {
    background: var(--item-hover-bg, rgba(255, 255, 255, 0.2));
    border-color: var(--border-hover, rgba(255, 255, 255, 0.3));
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.ptr-dock-item:focus-visible {
    outline: 2px solid var(--primary-color, #3b82f6);
    outline-offset: 2px;
}

/* PixelCard Component */
/* Enhanced PixelCard Component */
.ptr-pixel-card {
    position: relative;
    background: var(--background-surface, rgba(17, 17, 17, 0.8));
    border-radius: 25px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.5, 1, 0.89, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 400px;
    width: 300px;
    aspect-ratio: 4/5;
    display: grid;
    place-items: center;
    isolate: isolate;
    touch-action: none;
    user-select: none;
}

.ptr-pixel-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: var(--pixel-card-border-color, var(--primary-color, #3b82f6));
}

.ptr-pixel-card:focus-visible {
    outline: 2px solid var(--pixel-card-primary-color, var(--primary-color, #3b82f6));
    outline-offset: 2px;
}

.ptr-pixel-card__canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    display: block;
}

.ptr-pixel-card__content {
    position: relative;
    z-index: 10;
    padding: 24px;
    color: var(--text-primary, #ffffff);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* Enhanced brand variants */
.ptr-pixel-card.variant-pterodactyl {
    background: linear-gradient(135deg, 
        var(--primary-color, #3580F6)08 0%, 
        var(--secondary-color, #E83326)08 100%);
    border-color: var(--primary-color, #3580F6);
}

.ptr-pixel-card.variant-cyberpunk {
    background: linear-gradient(135deg, 
        #00ffff08 0%, 
        #ff00ff08 50%, 
        #ffff0008 100%);
    border-color: #00ffff;
    box-shadow: 0 0 20px #00ffff40;
}

.ptr-pixel-card.variant-cyberpunk:hover {
    box-shadow: 0 0 30px #00ffff60, 0 25px 50px rgba(0, 0, 0, 0.4);
    animation: ptr-pixel-glow 2s ease-in-out infinite;
}

/* Glow effect enhancement */
.ptr-pixel-card.glow-effect {
    box-shadow: 
        0 0 20px var(--pixel-card-primary-color, var(--primary-color, #3580F6))40,
        0 0 40px var(--pixel-card-primary-color, var(--primary-color, #3580F6))20;
}

.ptr-pixel-card.glow-effect:hover {
    box-shadow: 
        0 0 30px var(--pixel-card-primary-color, var(--primary-color, #3580F6))60,
        0 0 60px var(--pixel-card-primary-color, var(--primary-color, #3580F6))30,
        0 25px 50px rgba(0, 0, 0, 0.4);
}

/* Carousel Component */
.ptr-carousel {
    position: relative;
    perspective: 1000px;
    overflow: hidden;
}

.ptr-carousel__container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    cursor: grab;
    user-select: none;
}

.ptr-carousel__container:active {
    cursor: grabbing;
}

.ptr-carousel__item {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--background-surface, #111);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    padding: 24px;
    color: var(--text-primary, #ffffff);
    transform-style: preserve-3d;
    transition: all 0.3s ease;
    backface-visibility: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.ptr-carousel__item:hover {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--primary-color-rgb, 59, 130, 246), 0.2);
}

.ptr-carousel__item.active {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 
        0 30px 50px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(var(--primary-color-rgb, 59, 130, 246), 0.3);
}

/* CardSwap Component */
.ptr-card-swap {
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

.ptr-card-swap__container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}

.ptr-card-swap__container.flipped {
    transform: rotateY(180deg);
}

.ptr-card-swap__side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    background: var(--background-surface, #111);
    padding: 24px;
    color: var(--text-primary, #ffffff);
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.ptr-card-swap__side--back {
    transform: rotateY(180deg);
}

.ptr-card-swap:hover .ptr-card-swap__side {
    border-color: var(--primary-color, #3b82f6);
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--primary-color-rgb, 59, 130, 246), 0.2);
}

/*
 * ===============================================================
 * VUE BITS RESPONSIVE DESIGN
 * ===============================================================
 */

@media (max-width: 768px) {
    .ptr-animated-list {
        width: 100% !important;
        max-width: 100%;
    }

    .ptr-dock {
        padding: 6px 12px;
        margin: 0 8px;
    }
    
    .ptr-dock__panel {
        gap: 6px;
        padding: 6px;
        min-height: 56px;
    }
    
    .ptr-carousel__item,
    .ptr-pixel-card__content,
    .ptr-card-swap__side {
        padding: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ptr-animated-list__scroll,
    .ptr-carousel__container,
    .ptr-card-swap__container {
        transition: none !important;
        animation: none !important;
    }

    .ptr-pixel-card__canvas {
        display: none;
    }
}

/*
 * ===============================================================
 * DARK MODE OVERRIDES FOR VUE BITS COMPONENTS
 * ===============================================================
 */

body.dark-mode .ptr-animated-list {
    background: var(--background-dark, #0b0b0b);
    border-color: var(--border-dark, rgba(255, 255, 255, 0.1));
}

body.dark-mode .ptr-glass-surface {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.37),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .ptr-pixel-card,
body.dark-mode .ptr-carousel__item,
body.dark-mode .ptr-card-swap__side {
    background: var(--background-dark, rgba(17, 17, 17, 0.9));
    border-color: var(--border-dark, rgba(255, 255, 255, 0.1));
}

body.dark-mode .ptr-dock-item {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .ptr-dock-item:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

/*
 * ===============================================================
 * PRINT STYLES FOR ANIMATION COMPONENTS
 * ===============================================================
 */

@media print {
    .splash-cursor,
    .star-movement-bottom,
    .star-movement-top {
        display: none !important;
    }
    
    .glare-hover__overlay {
        display: none !important;
    }
    
    .pixelated-transition-pixel {
        display: none !important;
    }
    
    .star-border-content,
    .pixelated-transition {
        box-shadow: none !important;
        transform: none !important;
    }
    
    .count-up,
    .glare-hover,
    .shape-blur-container,
    .metallic-paint {
        transform: none !important;
        filter: none !important;
    }
    
    /* Vue Bits Components Print Styles */
    .ptr-animated-list,
    .ptr-glass-surface,
    .ptr-pixel-card,
    .ptr-carousel,
    .ptr-card-swap {
        box-shadow: none !important;
        transform: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .ptr-carousel__container,
    .ptr-card-swap__container {
        transform: none !important;
    }
}

/*
 * ===============================================================
 * PERFORMANCE-LEVEL CSS CLASSES
 * ===============================================================
 * 
 * These classes provide progressive enhancement based on device
 * performance detection. Applied by GSAPUtils based on:
 * - Hardware concurrency (CPU cores)
 * - Available memory 
 * - Connection type
 * - Device type (mobile/desktop)
 * 
 * Usage: GSAPUtils automatically applies the appropriate class
 * to document.body based on performance metrics.
 */

/* Ultra Performance - High-end devices with 8+ cores, 8GB+ RAM */
.performance-ultra {
    --animation-duration: 1;
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --blur-intensity: 20px;
    --shadow-layers: 3;
    --particle-count: 100;
    --fps-target: 60;
}

.performance-ultra .ptr-glass-surface {
    backdrop-filter: blur(var(--blur-intensity)) saturate(1.8);
    -webkit-backdrop-filter: blur(var(--blur-intensity)) saturate(1.8);
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.37),
        0 2px 8px rgba(31, 38, 135, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.performance-ultra .ptr-animated-list {
    transition: all 0.4s var(--animation-easing);
}

/* High Performance - Mid-range devices with 4-7 cores, 4-8GB RAM */
.performance-high {
    --animation-duration: 1.2;
    --animation-easing: ease-out;
    --blur-intensity: 15px;
    --shadow-layers: 2;
    --particle-count: 50;
    --fps-target: 60;
}

.performance-high .ptr-glass-surface {
    backdrop-filter: blur(var(--blur-intensity)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--blur-intensity)) saturate(1.5);
    box-shadow: 
        0 6px 24px rgba(31, 38, 135, 0.3),
        0 1px 4px rgba(31, 38, 135, 0.15);
}

.performance-high .ptr-animated-list {
    transition: all 0.3s var(--animation-easing);
}

/* Medium Performance - Standard devices with 2-3 cores, 2-4GB RAM */
.performance-medium {
    --animation-duration: 1.5;
    --animation-easing: ease;
    --blur-intensity: 10px;
    --shadow-layers: 2;
    --particle-count: 25;
    --fps-target: 30;
}

.performance-medium .ptr-glass-surface {
    backdrop-filter: blur(var(--blur-intensity)) saturate(1.2);
    -webkit-backdrop-filter: blur(var(--blur-intensity)) saturate(1.2);
    box-shadow: 
        0 4px 16px rgba(31, 38, 135, 0.25),
        0 1px 2px rgba(31, 38, 135, 0.1);
}

.performance-medium .ptr-animated-list {
    transition: all 0.25s var(--animation-easing);
}

/* Low Performance - Older devices with limited resources */
.performance-low {
    --animation-duration: 2;
    --animation-easing: ease;
    --blur-intensity: 5px;
    --shadow-layers: 1;
    --particle-count: 10;
    --fps-target: 30;
}

.performance-low .ptr-glass-surface {
    backdrop-filter: blur(var(--blur-intensity));
    -webkit-backdrop-filter: blur(var(--blur-intensity));
    box-shadow: 0 2px 8px rgba(31, 38, 135, 0.2);
}

.performance-low .ptr-animated-list {
    transition: all 0.2s var(--animation-easing);
}

/* Disable expensive transforms on low performance */
.performance-low .ptr-dock,
.performance-low .ptr-carousel,
.performance-low .ptr-card-swap {
    will-change: auto;
}

/* Minimal Performance - Very constrained devices, accessibility first */
.performance-minimal {
    --animation-duration: 0;
    --animation-easing: none;
    --blur-intensity: 0px;
    --shadow-layers: 1;
    --particle-count: 0;
    --fps-target: 15;
}

.performance-minimal .ptr-glass-surface {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.performance-minimal .ptr-animated-list {
    transition: none;
}

/* Disable all animations and effects for minimal performance */
.performance-minimal *,
.performance-minimal *::before,
.performance-minimal *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transform: none !important;
    will-change: auto !important;
}

.performance-minimal .pixelated-transition-pixel,
.performance-minimal .star-movement-top,
.performance-minimal .glare-hover__overlay,
.performance-minimal canvas {
    display: none !important;
}

/* Performance-aware hover states */
.performance-ultra .ptr-dock__item:hover,
.performance-high .ptr-dock__item:hover {
    transform: scale(1.1) translateY(-8px);
    transition: transform 0.3s var(--animation-easing);
}

.performance-medium .ptr-dock__item:hover {
    transform: scale(1.05) translateY(-4px);
    transition: transform 0.2s var(--animation-easing);
}

.performance-low .ptr-dock__item:hover {
    transform: scale(1.02) translateY(-2px);
    transition: transform 0.15s var(--animation-easing);
}

.performance-minimal .ptr-dock__item:hover {
    opacity: 0.8;
}

/* Performance-aware scroll effects */
.performance-ultra .scroll-velocity-sensitive,
.performance-high .scroll-velocity-sensitive {
    will-change: transform;
}

.performance-medium .scroll-velocity-sensitive {
    will-change: transform;
}

.performance-low .scroll-velocity-sensitive,
.performance-minimal .scroll-velocity-sensitive {
    will-change: auto;
    transform: none !important;
}

/* Animation Control System */
.animations-disabled {
    --animation-duration: 0s !important;
    --transition-duration: 0s !important;
}

.animations-disabled *,
.animations-disabled *::before,
.animations-disabled *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    transform: none !important;
    will-change: auto !important;
}

/* Preserve essential non-animation transforms */
.animations-disabled .transform-preserve {
    transform: revert !important;
}

/* Settings button animation (always enabled for usability) */
.animations-disabled button[title="Animation Settings"] {
    transition: background-color 0.2s ease !important;
}

.animations-disabled button[title="Animation Settings"]:hover {
    transition: background-color 0.2s ease !important;
}

/* Animation enabled state - restore defaults */
.animations-enabled {
    --animation-duration: initial;
    --transition-duration: initial;
}

/* Smooth settings panel transitions (always enabled) */
.fixed.inset-0.z-50 {
    transition: opacity 0.3s ease !important;
}

.fixed.inset-0.z-50 .bg-white.rounded-lg {
    transition: transform 0.3s ease !important;
}

/* Toggle switch animation (always enabled for accessibility) */
.relative.inline-flex.h-6.w-11 {
    transition: background-color 0.2s ease !important;
}

.relative.inline-flex.h-6.w-11 span {
    transition: transform 0.2s ease !important;
}

/* Performance level indicators */
.performance-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 4px;
}

.performance-ultra .performance-indicator {
    background-color: #10b981; /* Green for ultra */
}

.performance-high .performance-indicator {
    background-color: #3b82f6; /* Blue for high */
}

.performance-medium .performance-indicator {
    background-color: #f59e0b; /* Yellow for medium */
}

.performance-low .performance-indicator {
    background-color: #ef4444; /* Red for low */
}

.performance-minimal .performance-indicator {
    background-color: #6b7280; /* Gray for minimal */
}

/* Settings button pulse animation when animations are disabled */
.animations-disabled button[title="Animation Settings"] {
    animation: settings-pulse 2s infinite;
}

@keyframes settings-pulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(55, 65, 81, 0.7);
    }
    70% { 
        box-shadow: 0 0 0 10px rgba(55, 65, 81, 0);
    }
}

/*
 * ===============================================================
 * COMPREHENSIVE REDUCED MOTION SUPPORT
 * ===============================================================
 * 
 * Enhanced support for users who prefer reduced motion.
 * This consolidates and expands existing reduced motion rules
 * to ensure all animations and transitions respect user preferences.
 */

@media (prefers-reduced-motion: reduce) {
    /* Global animation and transition reset */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Disable all keyframe animations */
    .cursor-blink,
    .loading-spinner,
    .ptr-glow-bg,
    .ptr-holo-bg,
    .copy-success,
    .spin-enhanced,
    .pulse-glow,
    .spinning,
    .slide-in-up,
    .fade-in-section,
    .breathe,
    .shine,
    .shiny-pulse,
    .text-wave,
    .text-pulse,
    .ptr-button-spin,
    .ptr-card-spin,
    .gradient-move,
    .truefocus-pulse,
    .rotate-text-enter,
    .rotate-text-exit,
    .text-type-blink,
    .pixel-fade-in,
    .pixel-fade-out,
    .settings-pulse {
        animation: none !important;
    }
    
    /* Disable specific component animations */
    .gradient-text__text,
    .gradient-text__border,
    .rotating-char,
    .star-movement-bottom,
    .star-movement-top,
    .count-up,
    .glare-hover,
    .pixelated-transition,
    .metallic-paint,
    .shape-blur-container {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    
    /* Vue.js component animation overrides */
    .ptr-animated-list__scroll,
    .ptr-dock__item,
    .ptr-carousel__container,
    .ptr-card-swap__container,
    .ptr-glass-surface,
    .ptr-pixel-card,
    .ptr-button {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* Disable hover animations and effects */
    .count-up:hover,
    .ptr-dock__item:hover,
    .ptr-button:hover,
    .glare-hover:hover {
        transform: none !important;
        transition: none !important;
    }
    
    /* Hide decorative animated elements */
    .star-movement-bottom,
    .star-movement-top,
    .pixelated-transition-pixel,
    canvas[data-animation="true"] {
        opacity: 0.6 !important;
        animation: none !important;
    }
    
    /* Simplify complex visual effects */
    .gradient-text,
    .metallic-paint,
    .shape-blur-container {
        background: currentColor !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        filter: none !important;
    }
    
    /* Reduce backdrop filters that can cause motion sickness */
    .ptr-glass-surface {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.1) !important;

/* ==========================================================================
   ENHANCED RESPONSIVE STYLES FOR 7 UI COMPONENTS
   ========================================================================== */

/* Advanced Brand Variable Integration */
:root {
    /* Enhanced Component-specific Brand Variables */
    --ptr-glass-opacity: 0.15;
    --ptr-glass-blur: 16px;
    --ptr-glass-saturation: 1.8;
    --ptr-animation-speed: 0.3s;
    --ptr-hover-scale: 1.02;
    --ptr-focus-outline: 2px;
    
    /* Mobile-first Responsive Variables */
    --ptr-mobile-padding: 12px;
    --ptr-tablet-padding: 16px;
    --ptr-desktop-padding: 24px;
    
    --ptr-mobile-gap: 8px;
    --ptr-tablet-gap: 12px;
    --ptr-desktop-gap: 16px;
    
    --ptr-mobile-radius: 12px;
    --ptr-tablet-radius: 16px;
    --ptr-desktop-radius: 20px;
}

/* ==========================================================================
   1. ANIMATED LIST - ENHANCED RESPONSIVE STYLES
   ========================================================================== */

.ptr-animated-list {
    /* Enhanced Glass Backdrop */
    backdrop-filter: blur(var(--ptr-glass-blur)) saturate(var(--ptr-glass-saturation));
    -webkit-backdrop-filter: blur(var(--ptr-glass-blur)) saturate(var(--ptr-glass-saturation));
    
    /* Smooth transitions */
    transition: all var(--ptr-animation-speed) var(--animation-easing);
    
    /* Enhanced border gradient */
    border: 1px solid;
    border-image: linear-gradient(135deg, 
        var(--primary-color)40, 
        var(--secondary-color)20, 
        transparent) 1;
}

.ptr-animated-list:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 20px 40px rgba(var(--primary-color-rgb), 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1);
}

.ptr-animated-list__item {
    position: relative;
    transition: all var(--ptr-animation-speed) var(--animation-easing);
    border-radius: var(--ptr-mobile-radius);
}

.ptr-animated-list__item:hover {
    background: linear-gradient(135deg, 
        var(--primary-color)08, 
        var(--secondary-color)05);
    transform: translateX(4px);
}

.ptr-animated-list__item:focus-visible {
    outline: var(--ptr-focus-outline) solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile Optimizations */
@media (max-width: 480px) {
    .ptr-animated-list {
        padding: var(--ptr-mobile-padding);
        margin: 0 8px;
        border-radius: var(--ptr-mobile-radius);
    }
    
    .ptr-animated-list__scroll {
        max-height: 60vh;
    }
    
    .ptr-animated-list__item {
        padding: 8px var(--ptr-mobile-padding);
        margin-bottom: 4px;
    }
}

/* Tablet Optimizations */
@media (min-width: 481px) and (max-width: 768px) {
    .ptr-animated-list {
        padding: var(--ptr-tablet-padding);
        border-radius: var(--ptr-tablet-radius);
    }
    
    .ptr-animated-list__scroll {
        max-height: 70vh;
    }
    
    .ptr-animated-list__item {
        padding: 12px var(--ptr-tablet-padding);
        margin-bottom: 6px;
    }
}

/* Desktop Optimizations */
@media (min-width: 769px) {
    .ptr-animated-list {
        padding: var(--ptr-desktop-padding);
        border-radius: var(--ptr-desktop-radius);
    }
    
    .ptr-animated-list__scroll {
        max-height: 80vh;
    }
    
    .ptr-animated-list__item {
        padding: 16px var(--ptr-desktop-padding);
        margin-bottom: var(--ptr-desktop-gap);
    }
}

/* ==========================================================================
   2. GLASS SURFACE - ENHANCED RESPONSIVE STYLES
   ========================================================================== */

.ptr-glass-surface {
    /* Enhanced glass effect with better performance */
    backdrop-filter: blur(var(--ptr-glass-blur)) saturate(var(--ptr-glass-saturation)) brightness(1.1);
    -webkit-backdrop-filter: blur(var(--ptr-glass-blur)) saturate(var(--ptr-glass-saturation)) brightness(1.1);
    
    /* Multi-layer background for depth */
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, var(--ptr-glass-opacity)) 0%, transparent 100%),
        radial-gradient(circle at 30% 30%, var(--primary-color)08 0%, transparent 50%),
        rgba(255, 255, 255, calc(var(--ptr-glass-opacity) * 0.5));
    
    /* Enhanced border with gradient */
    border: 1px solid;
    border-image: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.3), 
        rgba(255, 255, 255, 0.1), 
        transparent) 1;
    
    /* Smooth animations */
    transition: all var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-glass-surface:hover {
    backdrop-filter: blur(calc(var(--ptr-glass-blur) * 1.2)) saturate(calc(var(--ptr-glass-saturation) * 1.1));
    -webkit-backdrop-filter: blur(calc(var(--ptr-glass-blur) * 1.2)) saturate(calc(var(--ptr-glass-saturation) * 1.1));
    
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.05);
}

/* Variant styles */
.ptr-glass-surface--frosted {
    backdrop-filter: blur(calc(var(--ptr-glass-blur) * 1.5));
    -webkit-backdrop-filter: blur(calc(var(--ptr-glass-blur) * 1.5));
    background: rgba(255, 255, 255, calc(var(--ptr-glass-opacity) * 0.8));
}

.ptr-glass-surface--subtle {
    backdrop-filter: blur(calc(var(--ptr-glass-blur) * 0.7));
    -webkit-backdrop-filter: blur(calc(var(--ptr-glass-blur) * 0.7));
    background: rgba(255, 255, 255, calc(var(--ptr-glass-opacity) * 0.3));
}

/* Mobile Glass Adjustments */
@media (max-width: 480px) {
    .ptr-glass-surface {
        --ptr-glass-blur: 12px;
        padding: var(--ptr-mobile-padding);
        border-radius: var(--ptr-mobile-radius);
    }
}

/* Tablet Glass Adjustments */
@media (min-width: 481px) and (max-width: 768px) {
    .ptr-glass-surface {
        --ptr-glass-blur: 14px;
        padding: var(--ptr-tablet-padding);
        border-radius: var(--ptr-tablet-radius);
    }
}

/* Desktop Glass Adjustments */
@media (min-width: 769px) {
    .ptr-glass-surface {
        --ptr-glass-blur: 16px;
        padding: var(--ptr-desktop-padding);
        border-radius: var(--ptr-desktop-radius);
    }
}

/* ==========================================================================
   ========================================================================== */

@keyframes ptr-border-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced avatar effects */

@keyframes ptr-avatar-glow {
    0%, 100% { opacity: 0; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

@media (max-width: 480px) {

}

@media (min-width: 481px) and (max-width: 768px) {

}

@media (min-width: 769px) {
    
}

/* ==========================================================================
   4. DOCK - ENHANCED RESPONSIVE STYLES
   ========================================================================== */

.ptr-dock {
    /* Enhanced glass dock background */
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(var(--ptr-glass-blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--ptr-glass-blur)) saturate(1.5);
    
    /* Enhanced border */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    
    transition: all var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-dock:hover {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ptr-dock-item {
    position: relative;
    overflow: hidden;
    transition: all var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-dock-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        var(--primary-color)20, 
        var(--secondary-color)10);
    opacity: 0;
    transition: opacity var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-dock-item:hover::before {
    opacity: 1;
}

.ptr-dock-item:hover {
    transform: scale(1.1) translateY(-8px);
    z-index: 10;
    box-shadow: 
        0 15px 30px rgba(var(--primary-color-rgb), 0.3),
        0 8px 16px rgba(0, 0, 0, 0.15);
}

/* Mobile Dock */
@media (max-width: 480px) {
    .ptr-dock {
        padding: 8px var(--ptr-mobile-padding);
        border-radius: var(--ptr-mobile-radius);
        margin: 0 8px;
    }
    
    .ptr-dock__panel {
        gap: 6px;
        min-height: 48px;
    }
    
    .ptr-dock-item {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }
    
    .ptr-dock-item:hover {
        transform: scale(1.05) translateY(-4px);
    }
}

/* Tablet Dock */
@media (min-width: 481px) and (max-width: 768px) {
    .ptr-dock {
        padding: 10px var(--ptr-tablet-padding);
        border-radius: var(--ptr-tablet-radius);
    }
    
    .ptr-dock__panel {
        gap: var(--ptr-tablet-gap);
        min-height: 56px;
    }
    
    .ptr-dock-item {
        width: 48px;
        height: 48px;
        border-radius: 10px;
    }
    
    .ptr-dock-item:hover {
        transform: scale(1.08) translateY(-6px);
    }
}

/* Desktop Dock */
@media (min-width: 769px) {
    .ptr-dock {
        padding: 12px var(--ptr-desktop-padding);
        border-radius: var(--ptr-desktop-radius);
    }
    
    .ptr-dock__panel {
        gap: var(--ptr-desktop-gap);
        min-height: 64px;
    }
    
    .ptr-dock-item {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }
}

/* ==========================================================================
   5. PIXEL CARD - ENHANCED RESPONSIVE STYLES
   ========================================================================== */

.ptr-pixel-card {
    position: relative;
    overflow: hidden;
    transition: all var(--ptr-animation-speed) var(--animation-easing);
    
    /* Enhanced pixelated background */
    background: 
        radial-gradient(circle at 25% 25%, var(--primary-color)15 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, var(--secondary-color)10 0%, transparent 50%),
        var(--background-surface);
}

.ptr-pixel-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px),
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.03) 4px);
    pointer-events: none;
}

.ptr-pixel-card:hover {
    transform: translateY(-4px) scale(var(--ptr-hover-scale));
    box-shadow: 
        0 20px 40px rgba(var(--primary-color-rgb), 0.2),
        0 10px 20px rgba(0, 0, 0, 0.1),
        0 0 0 1px var(--pixel-card-primary-color, var(--primary-color))40;
}

.ptr-pixel-card__canvas {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    mix-blend-mode: screen;
    transition: opacity var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-pixel-card:hover .ptr-pixel-card__canvas {
    opacity: 0.8;
}

/* Enhanced glow effect for pixel cards */
.ptr-pixel-card.glow-effect {
    animation: ptr-pixel-pulse 3s ease-in-out infinite;
}

.ptr-pixel-card.glow-effect:hover {
    animation: ptr-pixel-glow 1.5s ease-in-out infinite;
}

/* Mobile Pixel Card */
@media (max-width: 480px) {
    .ptr-pixel-card {
        border-radius: var(--ptr-mobile-radius);
    }
    
    .ptr-pixel-card__content {
        padding: var(--ptr-mobile-padding);
    }
    
    .ptr-pixel-card__canvas {
        opacity: 0.4;
    }
}

/* Tablet Pixel Card */
@media (min-width: 481px) and (max-width: 768px) {
    .ptr-pixel-card {
        border-radius: var(--ptr-tablet-radius);
    }
    
    .ptr-pixel-card__content {
        padding: var(--ptr-tablet-padding);
    }
    
    .ptr-pixel-card__canvas {
        opacity: 0.5;
    }
}

/* Desktop Pixel Card */
@media (min-width: 769px) {
    .ptr-pixel-card {
        border-radius: var(--ptr-desktop-radius);
    }
    
    .ptr-pixel-card__content {
        padding: var(--ptr-desktop-padding);
    }
}

/* ==========================================================================
   6. CAROUSEL - ENHANCED RESPONSIVE STYLES
   ========================================================================== */

.ptr-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--ptr-desktop-radius);
}

.ptr-carousel__container {
    transition: transform var(--ptr-animation-speed) var(--animation-easing);
    will-change: transform;
}

.ptr-carousel__item {
    background: linear-gradient(135deg, 
        var(--background-surface) 0%, 
        rgba(var(--primary-color-rgb), 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(var(--ptr-glass-blur));
    -webkit-backdrop-filter: blur(var(--ptr-glass-blur));
    
    transition: all var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-carousel__item:hover {
    border-color: var(--primary-color);
    transform: scale(var(--ptr-hover-scale));
    box-shadow: 
        0 20px 40px rgba(var(--primary-color-rgb), 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1);
}

.ptr-carousel__item.active {
    border-color: var(--primary-color);
    box-shadow: 
        0 25px 50px rgba(var(--primary-color-rgb), 0.2),
        0 15px 30px rgba(0, 0, 0, 0.15);
    z-index: 5;
}

/* Navigation buttons */
.ptr-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    transition: all var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-carousel__nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.ptr-carousel__nav--prev {
    left: 16px;
}

.ptr-carousel__nav--next {
    right: 16px;
}

/* Indicators */
.ptr-carousel__indicators {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.ptr-carousel__indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all var(--ptr-animation-speed) var(--animation-easing);
    cursor: pointer;
}

.ptr-carousel__indicator.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

.ptr-carousel__indicator:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

/* Mobile Carousel */
@media (max-width: 480px) {
    .ptr-carousel {
        border-radius: var(--ptr-mobile-radius);
        margin: 0 8px;
    }
    
    .ptr-carousel__item {
        border-radius: var(--ptr-mobile-radius);
        padding: var(--ptr-mobile-padding);
    }
    
    .ptr-carousel__nav {
        width: 36px;
        height: 36px;
    }
    
    .ptr-carousel__nav--prev {
        left: 8px;
    }
    
    .ptr-carousel__nav--next {
        right: 8px;
    }
    
    .ptr-carousel__indicator {
        width: 8px;
        height: 8px;
    }
}

/* Tablet Carousel */
@media (min-width: 481px) and (max-width: 768px) {
    .ptr-carousel {
        border-radius: var(--ptr-tablet-radius);
    }
    
    .ptr-carousel__item {
        border-radius: var(--ptr-tablet-radius);
        padding: var(--ptr-tablet-padding);
    }
    
    .ptr-carousel__nav {
        width: 42px;
        height: 42px;
    }
    
    .ptr-carousel__nav--prev {
        left: 12px;
    }
    
    .ptr-carousel__nav--next {
        right: 12px;
    }
    
    .ptr-carousel__indicator {
        width: 10px;
        height: 10px;
    }
}

/* ==========================================================================
   7. CARD SWAP - ENHANCED RESPONSIVE STYLES
   ========================================================================== */

.ptr-card-swap {
    perspective: 1000px;
    transition: all var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-card-swap:hover {
    transform: translateY(-2px);
}

.ptr-card-swap__container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s var(--animation-easing);
}

.ptr-card-swap__container.flipped {
    transform: rotateY(180deg);
}

.ptr-card-swap__side {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--ptr-desktop-radius);
    
    background: linear-gradient(135deg, 
        var(--background-surface) 0%, 
        rgba(var(--primary-color-rgb), 0.05) 100%);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(var(--ptr-glass-blur));
    -webkit-backdrop-filter: blur(var(--ptr-glass-blur));
    
    transition: all var(--ptr-animation-speed) var(--animation-easing);
}

.ptr-card-swap__side--front {
    transform: rotateY(0deg);
}

.ptr-card-swap__side--back {
    transform: rotateY(180deg);
}

.ptr-card-swap:hover .ptr-card-swap__side {
    border-color: var(--primary-color);
    box-shadow: 
        0 20px 40px rgba(var(--primary-color-rgb), 0.15),
        0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Enhanced flip animation */
.ptr-card-swap__container::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 180deg, 
        var(--primary-color), 
        var(--secondary-color), 
        var(--primary-color));
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s var(--animation-easing);
    z-index: -1;
}

.ptr-card-swap__container.flipped::before {
    opacity: 0.3;
    animation: ptr-flip-glow 0.6s ease-in-out;
}

@keyframes ptr-flip-glow {
    0% { opacity: 0; transform: scale(0.9); }
    50% { opacity: 0.6; transform: scale(1.1); }
    100% { opacity: 0.3; transform: scale(1); }
}

/* Mobile Card Swap */
@media (max-width: 480px) {
    .ptr-card-swap__side {
        border-radius: var(--ptr-mobile-radius);
        padding: var(--ptr-mobile-padding);
    }
}

/* Tablet Card Swap */
@media (min-width: 481px) and (max-width: 768px) {
    .ptr-card-swap__side {
        border-radius: var(--ptr-tablet-radius);
        padding: var(--ptr-tablet-padding);
    }
}

/* Desktop Card Swap */
@media (min-width: 769px) {
    .ptr-card-swap__side {
        border-radius: var(--ptr-desktop-radius);
        padding: var(--ptr-desktop-padding);
    }
}

/* ==========================================================================
   ENHANCED ACCESSIBILITY & PERFORMANCE
   ========================================================================== */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .ptr-animated-list,
    .ptr-glass-surface,
    .ptr-pixel-card,
    .ptr-carousel__item,
    .ptr-card-swap__side {
        border: 2px solid;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .ptr-animated-list,
    .ptr-glass-surface,
    .ptr-dock-item,
    .ptr-pixel-card,
    .ptr-carousel__container,
    .ptr-card-swap__container {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    
}

/* Print styles */
@media print {
    .ptr-animated-list,
    .ptr-glass-surface,
    .ptr-pixel-card,
    .ptr-carousel,
    .ptr-card-swap {
        background: white !important;
        color: black !important;
        border: 1px solid #ccc !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        transform: none !important;
    }
}

/* Ultra-wide screen optimizations */
@media (min-width: 1920px) {
    :root {
        --ptr-desktop-padding: 32px;
        --ptr-desktop-gap: 20px;
        --ptr-desktop-radius: 24px;
        --ptr-glass-blur: 20px;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .ptr-dock-item:hover,
    .ptr-carousel__item:hover,
    .ptr-card-swap:hover {
        transform: none;
    }
    
    .ptr-dock-item,
    .ptr-carousel__nav,
    .ptr-carousel__indicator {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ==========================================================================
   DARK/LIGHT MODE ENHANCEMENTS
   ========================================================================== */

/* Enhanced dark mode styles */
@media (prefers-color-scheme: dark) {
    :root {
        --ptr-glass-opacity: 0.1;
    }
    
    .ptr-glass-surface {
        background: 
            linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%),
            rgba(0, 0, 0, 0.3);
    }
    
    .ptr-animated-list,
    .ptr-pixel-card,
    .ptr-carousel__item,
    .ptr-card-swap__side {
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.03) 0%, 
            rgba(var(--primary-color-rgb), 0.08) 100%);
    }
}

/* Enhanced light mode styles */
@media (prefers-color-scheme: light) {
    :root {
        --ptr-glass-opacity: 0.2;
    }
    
    .ptr-glass-surface {
        background: 
            linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%),
            rgba(255, 255, 255, 0.1);
    }
    
    .ptr-animated-list,
    .ptr-pixel-card,
    .ptr-carousel__item,
    .ptr-card-swap__side {
        background: linear-gradient(135deg, 
            rgba(255, 255, 255, 0.9) 0%, 
            rgba(var(--primary-color-rgb), 0.05) 100%);
        border-color: rgba(0, 0, 0, 0.1);
    }
}
    .performance-ultra *,
    .performance-high *,
    .performance-medium *,
    .performance-low * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Preserve essential functionality while removing motion */
    .scroll-velocity-sensitive {
        will-change: auto !important;
        transform: none !important;
    }
    
    /* Keep interactive feedback for accessibility */
    button,
    .btn,
    [role="button"],
    input,
    select,
    textarea {
        transition: background-color 0.01ms ease !important;
    }
    
    /* Preserve settings UI functionality */
    button[title="Animation Settings"],
    .toggle-switch,
    .animation-control-panel * {
        transition: background-color 0.15s ease !important;
    }
    
    /* Override any remaining transform animations */
    .transform-preserve,
    .scale-on-hover,
    .rotate-on-hover,
    .translate-on-hover {
        transform: none !important;
        transition: none !important;
    }
}

/* =============================================================================
 * RESPONSIVE CSS STYLES FOR TEXT ANIMATION SHOWCASES
 * Ensures proper display on mobile (< 768px), tablet (768px-1024px), and desktop (> 1024px)
 * =============================================================================*/

/* Desktop Styles (> 1024px) - Default styles already optimized */
@media (min-width: 1025px) {
    .component-showcase {
        max-width: 1200px;
        padding: 3rem 2rem;
    }
    
    .showcase-title {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
    
    .showcase-content {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
    }
    
    /* ShinyText showcase responsive */
    .shiny-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .shiny-text-showcase .demo-item {
        padding: 2rem;
    }
    
    .shiny-text-showcase h3 {
        font-size: 1.5rem;
    }
    
    /* GradientText showcase responsive */
    .gradient-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 2rem;
    }
    
    /* ScrambleText showcase responsive */
    .scramble-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
    }
    
    .scramble-text-showcase .demo-item {
        min-height: 200px;
    }
    
    /* TrueFocus showcase responsive */
    .truefocus-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 2rem;
    }
    
    .truefocus-container {
        padding: 2rem;
    }
    
    /* RotatingText showcase responsive */
    .rotating-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
    }
    
    /* ScrollVelocity showcase responsive */
    .scroll-velocity-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    /* TextType showcase responsive */
    .text-type-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
    }
}

/* Tablet Styles (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .component-showcase {
        max-width: 100%;
        padding: 2rem 1.5rem;
    }
    
    .showcase-title {
        font-size: 2rem;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .showcase-content {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    /* ShinyText tablet styles */
    .shiny-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.25rem;
    }
    
    .shiny-text-showcase .demo-item {
        padding: 1.5rem;
    }
    
    .shiny-text-showcase h3 {
        font-size: 1.25rem;
    }
    
    .shiny-text-showcase .shiny-text {
        font-size: clamp(1rem, 3vw, 1.5rem);
    }
    
    /* GradientText tablet styles */
    .gradient-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    
    .gradient-text-showcase .gradient-text {
        font-size: clamp(1.25rem, 4vw, 2rem);
    }
    
    /* ScrambleText tablet styles */
    .scramble-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .scramble-text-showcase .demo-item {
        min-height: 180px;
        padding: 1.5rem;
    }
    
    .scramble-text-showcase .scramble-text {
        font-size: clamp(1rem, 3vw, 1.5rem);
    }
    
    /* TrueFocus tablet styles */
    .truefocus-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 1.5rem;
    }
    
    .truefocus-container {
        padding: 1.5rem;
    }
    
    .truefocus-container .truefocus-text {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }
    
    /* RotatingText tablet styles */
    .rotating-text-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }
    
    .rotating-text-showcase .rotating-text {
        font-size: clamp(1.25rem, 4vw, 2rem);
    }
    
    /* ScrollVelocity tablet styles */
    .scroll-velocity-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .scroll-velocity-showcase .scroll-velocity-text {
        font-size: clamp(2rem, 6vw, 4rem);
    }
    
    /* TextType tablet styles */
    .text-type-showcase .demo-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.5rem;
    }
    
    .text-type-showcase .text-type {
        font-size: clamp(1rem, 3vw, 1.25rem);
    }
}

/* Mobile Styles (< 768px) */
@media (max-width: 768px) {
    .component-showcase {
        max-width: 100%;
        padding: 1.5rem 1rem;
    }
    
    .showcase-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
        text-align: center;
        line-height: 1.2;
    }
    
    .showcase-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* ShinyText mobile styles */
    .shiny-text-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .shiny-text-showcase .demo-item {
        padding: 1rem;
        min-height: auto;
    }
    
    .shiny-text-showcase h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }
    
    .shiny-text-showcase .shiny-text {
        font-size: clamp(0.875rem, 4vw, 1.25rem);
        line-height: 1.4;
    }
    
    .shiny-text-showcase .controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .shiny-text-showcase .controls button {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* GradientText mobile styles */
    .gradient-text-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .gradient-text-showcase .gradient-text {
        font-size: clamp(1rem, 5vw, 1.5rem);
        line-height: 1.3;
    }
    
    .gradient-text-showcase .demo-item {
        padding: 1rem;
    }
    
    /* ScrambleText mobile styles */
    .scramble-text-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .scramble-text-showcase .demo-item {
        min-height: 150px;
        padding: 1rem;
    }
    
    .scramble-text-showcase .scramble-text {
        font-size: clamp(0.875rem, 4vw, 1.25rem);
        line-height: 1.4;
    }
    
    .scramble-text-showcase .controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .scramble-text-showcase .controls select,
    .scramble-text-showcase .controls button {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* TrueFocus mobile styles */
    .truefocus-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .truefocus-container {
        padding: 1rem;
    }
    
    .truefocus-container .truefocus-text {
        font-size: clamp(0.875rem, 4vw, 1.125rem);
        line-height: 1.5;
    }
    
    .truefocus-container .controls {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .truefocus-container .controls button,
    .truefocus-container .controls input {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* RotatingText mobile styles */
    .rotating-text-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .rotating-text-showcase .demo-item {
        padding: 1rem;
    }
    
    .rotating-text-showcase .rotating-text {
        font-size: clamp(1rem, 5vw, 1.5rem);
        line-height: 1.3;
    }
    
    .rotating-text-showcase .controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .rotating-text-showcase .controls button,
    .rotating-text-showcase .controls select {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
    
    /* ScrollVelocity mobile styles */
    .scroll-velocity-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .scroll-velocity-showcase .scroll-velocity-text {
        font-size: clamp(1.5rem, 8vw, 3rem);
        line-height: 1.2;
    }
    
    .scroll-velocity-showcase .demo-item {
        padding: 1rem;
        min-height: 200px;
    }
    
    /* TextType mobile styles */
    .text-type-showcase .demo-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .text-type-showcase .demo-item {
        padding: 1rem;
    }
    
    .text-type-showcase .text-type {
        font-size: clamp(0.875rem, 4vw, 1.125rem);
        line-height: 1.4;
        min-height: 2em;
    }
    
    .text-type-showcase .controls {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .text-type-showcase .controls button,
    .text-type-showcase .controls input {
        width: 100%;
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* Extra Small Mobile Styles (< 480px) */
@media (max-width: 480px) {
    .component-showcase {
        padding: 1rem 0.75rem;
    }
    
    .showcase-title {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    
    /* Further optimize text sizes for very small screens */
    .shiny-text-showcase .shiny-text,
    .scramble-text-showcase .scramble-text,
    .truefocus-container .truefocus-text,
    .text-type-showcase .text-type {
        font-size: clamp(0.75rem, 4vw, 1rem);
    }
    
    .gradient-text-showcase .gradient-text,
    .rotating-text-showcase .rotating-text {
        font-size: clamp(0.875rem, 5vw, 1.25rem);
    }
    
    .scroll-velocity-showcase .scroll-velocity-text {
        font-size: clamp(1.25rem, 7vw, 2rem);
    }
    
    /* Reduce padding on very small screens */
    .shiny-text-showcase .demo-item,
    .gradient-text-showcase .demo-item,
    .scramble-text-showcase .demo-item,
    .truefocus-container,
    .rotating-text-showcase .demo-item,
    .scroll-velocity-showcase .demo-item,
    .text-type-showcase .demo-item {
        padding: 0.75rem;
    }
    
    /* Optimize button and control sizes */
    .showcase-content .controls button,
    .showcase-content .controls select,
    .showcase-content .controls input {
        padding: 0.5rem;
        font-size: 0.75rem;
        min-height: 44px; /* Ensure touch target size */
    }
}

/* Touch device optimizations */
@media (pointer: coarse) {
    /* Ensure all interactive elements have adequate touch targets */
    .showcase-content .controls button,
    .showcase-content .controls select,
    .showcase-content .controls input {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem;
    }
    
    /* Increase spacing between interactive elements */
    .showcase-content .controls {
        gap: 0.75rem;
    }
}

/* High contrast mode support for showcases */
@media (prefers-contrast: high) {
    .component-showcase {
        border: 2px solid currentColor;
    }
    
    .showcase-title {
        border-bottom: 2px solid currentColor;
        padding-bottom: 0.5rem;
    }
    
    .demo-item {
        border: 1px solid currentColor;
    }
}

/* Reduced motion support for text animations */
@media (prefers-reduced-motion: reduce) {
    .shiny-text-showcase .shiny-text,
    .gradient-text-showcase .gradient-text,
    .scramble-text-showcase .scramble-text,
    .truefocus-container .truefocus-text,
    .rotating-text-showcase .rotating-text,
    .scroll-velocity-showcase .scroll-velocity-text,
    .text-type-showcase .text-type {
        animation: none !important;
        transition: none !important;
    }
    
    /* Show static fallback text styles */
    .shiny-text-showcase .shiny-text,
    .gradient-text-showcase .gradient-text {
        background: linear-gradient(90deg, var(--ptr-primary), var(--ptr-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
}

/* Print styles for showcases */
@media print {
    .component-showcase {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    .showcase-content {
        display: block;
    }
    
    .demo-item {
        page-break-inside: avoid;
        break-inside: avoid;
        margin-bottom: 1rem;
    }
    
    .controls {
        display: none;
    }
}

/* =================================================================
   PTERODACTYL UI COMPONENTS STYLES
   Six sophisticated UI components with animations and 3D transforms
   ================================================================= */

/* Stack Component - 3D card stack with perspective effects */
.ptr-stack {
    --stack-perspective: 1000px;
    --stack-card-width: 280px;
    --stack-card-height: 180px;
    --stack-offset: 8px;
    --stack-rotation-range: 15deg;
    --stack-background: var(--brand-background, #ffffff);
    --stack-border: var(--brand-outline, #e5e7eb);
    --stack-text: var(--brand-text, #1f2937);
    --stack-shadow: rgba(0, 0, 0, 0.1);
    
    position: relative;
    width: var(--stack-card-width);
    height: var(--stack-card-height);
    perspective: var(--stack-perspective);
    margin: 60px auto;
}

.ptr-stack-container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ptr-stack-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--stack-background);
    border: 2px solid var(--stack-border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    
    box-shadow: 
        0 4px 6px var(--stack-shadow),
        0 1px 3px rgba(0, 0, 0, 0.08);
}

.ptr-stack-card:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 
        0 20px 40px var(--stack-shadow),
        0 8px 16px rgba(0, 0, 0, 0.12);
}

.ptr-stack-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--stack-text);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.ptr-stack-card-content {
    font-size: 14px;
    color: var(--brand-text-secondary, #6b7280);
    line-height: 1.5;
    opacity: 0.8;
}

.ptr-stack-card.dragging {
    z-index: 1000;
    transform: scale(1.05) rotateX(10deg) rotateY(5deg);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.25),
        0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Stack animations */
@keyframes ptr-stack-shuffle {
    0% { transform: translateY(0) rotateZ(0deg); }
    25% { transform: translateY(-20px) rotateZ(5deg); }
    75% { transform: translateY(-20px) rotateZ(-5deg); }
    100% { transform: translateY(0) rotateZ(0deg); }
}

.ptr-stack.shuffling .ptr-stack-card {
    animation: ptr-stack-shuffle 0.8s ease-in-out;
}

/* Stepper Component - Multi-step progress indicator with animations */
.ptr-stepper {
    --stepper-primary: var(--brand-primary, #3580F6);
    --stepper-secondary: var(--brand-secondary, #E83326);
    --stepper-background: var(--brand-background, #ffffff);
    --stepper-border: var(--brand-outline, #e5e7eb);
    --stepper-text: var(--brand-text, #1f2937);
    --stepper-text-secondary: var(--brand-text-secondary, #6b7280);
    --stepper-step-size: 40px;
    --stepper-connector-height: 2px;
    
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.ptr-stepper-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.ptr-stepper-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    z-index: 2;
}

.ptr-stepper-step-circle {
    width: var(--stepper-step-size);
    height: var(--stepper-step-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    cursor: pointer;
    border: 2px solid var(--stepper-border);
    background: var(--stepper-background);
    color: var(--stepper-text-secondary);
}

.ptr-stepper-step-circle.completed {
    background: var(--stepper-primary);
    border-color: var(--stepper-primary);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(53, 128, 246, 0.3);
}

.ptr-stepper-step-circle.current {
    background: var(--stepper-secondary);
    border-color: var(--stepper-secondary);
    color: white;
    transform: scale(1.2);
    box-shadow: 0 6px 16px rgba(232, 51, 38, 0.4);
    animation: ptr-stepper-pulse 2s infinite;
}

.ptr-stepper-step-circle:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ptr-stepper-step-label {
    margin-top: 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--stepper-text-secondary);
    text-align: center;
    transition: color 0.3s ease;
    max-width: 80px;
    line-height: 1.3;
}

.ptr-stepper-step.completed .ptr-stepper-step-label,
.ptr-stepper-step.current .ptr-stepper-step-label {
    color: var(--stepper-text);
    font-weight: 600;
}

.ptr-stepper-connector {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: var(--stepper-connector-height);
    background: var(--stepper-border);
    transform: translateY(-50%);
    z-index: 1;
}

.ptr-stepper-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--stepper-primary), var(--stepper-secondary));
    border-radius: 1px;
    transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 0%;
}

/* Stepper animations */
@keyframes ptr-stepper-pulse {
    0%, 100% { 
        box-shadow: 0 6px 16px rgba(232, 51, 38, 0.4); 
    }
    50% { 
        box-shadow: 0 6px 16px rgba(232, 51, 38, 0.6), 
                    0 0 20px rgba(232, 51, 38, 0.3); 
    }
}

@keyframes ptr-stepper-complete {
    0% { transform: scale(1.2); }
    50% { transform: scale(1.4); }
    100% { transform: scale(1.1); }
}

.ptr-stepper-step-circle.just-completed {
    animation: ptr-stepper-complete 0.6s ease-out;
}

/* DecayCard Component - Card with particle decay animation */
.ptr-decay-card {
    --decay-card-width: 320px;
    --decay-card-height: 200px;
    --decay-particle-size: 4px;
    --decay-duration: 2s;
    --decay-background: var(--brand-background, #ffffff);
    --decay-border: var(--brand-outline, #e5e7eb);
    --decay-text: var(--brand-text, #1f2937);
    --decay-primary: var(--brand-primary, #3580F6);
    
    position: relative;
    width: var(--decay-card-width);
    height: var(--decay-card-height);
    background: var(--decay-background);
    border: 2px solid var(--decay-border);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 1px 3px rgba(0, 0, 0, 0.06);
}

.ptr-decay-card:hover {
    transform: translateY(-4px);
    box-shadow: 
        0 12px 24px rgba(0, 0, 0, 0.15),
        0 4px 8px rgba(0, 0, 0, 0.1);
}

.ptr-decay-card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ptr-decay-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--decay-text);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.ptr-decay-card-description {
    font-size: 14px;
    color: var(--brand-text-secondary, #6b7280);
    line-height: 1.5;
    flex: 1;
}

.ptr-decay-card-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}

.ptr-decay-particle {
    position: absolute;
    width: var(--decay-particle-size);
    height: var(--decay-particle-size);
    background: var(--decay-primary);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.ptr-decay-card.decaying .ptr-decay-particle {
    animation: ptr-particle-decay var(--decay-duration) ease-out forwards;
}

/* Decay particle animations */
@keyframes ptr-particle-decay {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-dx, 100px), var(--particle-dy, 100px)) scale(0);
    }
}

.ptr-decay-card.regenerating {
    animation: ptr-decay-regenerate 1s ease-out;
}

@keyframes ptr-decay-regenerate {
    0% { 
        opacity: 0.3; 
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.02);
    }
    100% { 
        opacity: 1; 
        transform: scale(1);
    }
}

/* TiltedCard Component - 3D tilting card with mouse tracking */
.ptr-tilted-card {
    --tilt-max-rotation: 20deg;
    --tilt-perspective: 1000px;
    --tilt-scale: 1.02;
    --tilt-background: var(--brand-background, #ffffff);
    --tilt-border: var(--brand-outline, #e5e7eb);
    --tilt-text: var(--brand-text, #1f2937);
    --tilt-shadow: rgba(0, 0, 0, 0.1);
    
    position: relative;
    width: 300px;
    height: 200px;
    perspective: var(--tilt-perspective);
    cursor: pointer;
    transition: transform 0.1s ease-out;
}

.ptr-tilted-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: var(--tilt-background);
    border: 2px solid var(--tilt-border);
    border-radius: 16px;
    padding: 24px;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    box-shadow: 
        0 4px 6px var(--tilt-shadow),
        0 1px 3px rgba(0, 0, 0, 0.08);
}

.ptr-tilted-card:hover .ptr-tilted-card-inner {
    transform: scale(var(--tilt-scale));
    box-shadow: 
        0 20px 40px var(--tilt-shadow),
        0 8px 16px rgba(0, 0, 0, 0.12);
}

.ptr-tilted-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--tilt-text);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.ptr-tilted-card-description {
    font-size: 14px;
    color: var(--brand-text-secondary, #6b7280);
    line-height: 1.5;
}

.ptr-tilted-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
                                rgba(53, 128, 246, 0.1) 0%, 
                                transparent 50%);
}

.ptr-tilted-card:hover .ptr-tilted-card-glow {
    opacity: 1;
}

/* Tilt animations */
@keyframes ptr-tilt-shimmer {
    0% { 
        background-position: -200% 0; 
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% { 
        background-position: 200% 0; 
        opacity: 0;
    }
}

.ptr-tilted-card.shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
                                transparent 25%, 
                                rgba(255, 255, 255, 0.4) 50%, 
                                transparent 75%);
    background-size: 200% 100%;
    animation: ptr-tilt-shimmer 2s ease-in-out;
    border-radius: inherit;
    pointer-events: none;
}

/* ElasticCarousel Component - Smooth elastic slider with animations */
.ptr-elastic-slider {
    --slider-width: 300px;
    --slider-height: 6px;
    --slider-thumb-size: 20px;
    --slider-track-color: var(--brand-outline, #e5e7eb);
    --slider-fill-color: var(--brand-primary, #3580F6);
    --slider-thumb-color: var(--brand-background, #ffffff);
    --slider-thumb-border: var(--brand-primary, #3580F6);
    --slider-shadow: rgba(53, 128, 246, 0.3);
    
    position: relative;
    width: var(--slider-width);
    height: 40px;
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.ptr-elastic-slider-track {
    position: relative;
    width: 100%;
    height: var(--slider-height);
    background: var(--slider-track-color);
    border-radius: calc(var(--slider-height) / 2);
    overflow: hidden;
}

.ptr-elastic-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--slider-fill-color), var(--brand-secondary, #E83326));
    border-radius: inherit;
    transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 50%;
}

.ptr-elastic-slider-thumb {
    position: absolute;
    top: 50%;
    width: var(--slider-thumb-size);
    height: var(--slider-thumb-size);
    background: var(--slider-thumb-color);
    border: 2px solid var(--slider-thumb-border);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    left: 50%;
    
    box-shadow: 0 2px 8px var(--slider-shadow);
}

.ptr-elastic-slider-thumb:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 4px 16px var(--slider-shadow);
}

.ptr-elastic-slider-thumb:active,
.ptr-elastic-slider-thumb.dragging {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 6px 20px var(--slider-shadow);
}

.ptr-elastic-slider-labels {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--brand-text-secondary, #6b7280);
}

.ptr-elastic-slider-value {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand-text, #1f2937);
    color: var(--brand-background, #ffffff);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ptr-elastic-slider:hover .ptr-elastic-slider-value,
.ptr-elastic-slider.active .ptr-elastic-slider-value {
    opacity: 1;
}

/* Elastic animations */
@keyframes ptr-elastic-bounce {
    0% { transform: translate(-50%, -50%) scale(1.3); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
}

.ptr-elastic-slider-thumb.released {
    animation: ptr-elastic-bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ptr-elastic-slider-fill.elastic {
    transition: width 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Responsive Design for All Components */
@media (max-width: 768px) {
    .ptr-counter {
        --counter-font-size: 60px;
    }
    
    .ptr-stack {
        --stack-card-width: 240px;
        --stack-card-height: 160px;
        margin: 40px auto;
    }
    
    .ptr-stepper {
        --stepper-step-size: 32px;
    }
    
    .ptr-stepper-step-label {
        font-size: 11px;
        max-width: 60px;
    }
    
    .ptr-decay-card {
        --decay-card-width: 280px;
        --decay-card-height: 180px;
    }
    
    .ptr-tilted-card {
        width: 260px;
        height: 180px;
    }
    
    .ptr-elastic-slider {
        --slider-width: 240px;
    }
}

@media (max-width: 480px) {
    .ptr-counter {
        --counter-font-size: 40px;
        --counter-gap: 4px;
    }
    
    .ptr-stack {
        --stack-card-width: 200px;
        --stack-card-height: 140px;
        margin: 30px auto;
    }
    
    .ptr-stepper {
        --stepper-step-size: 28px;
    }
    
    .ptr-decay-card {
        --decay-card-width: 240px;
        --decay-card-height: 160px;
    }
    
    .ptr-tilted-card {
        width: 220px;
        height: 160px;
    }
    
    .ptr-elastic-slider {
        --slider-width: 200px;
    }
}

/* Reduced Motion Support for All Components */
@media (prefers-reduced-motion: reduce) {
    .ptr-counter-digit .digit-span,
    .ptr-stack-card,
    .ptr-stepper-step-circle,
    .ptr-decay-card,
    .ptr-tilted-card-inner,
    .ptr-elastic-slider-thumb {
        transition: none !important;
        animation: none !important;
    }
    
    .ptr-stepper-step-circle.current {
        animation: none !important;
    }
    
    .ptr-decay-card.decaying .ptr-decay-particle {
        animation: none !important;
        opacity: 0;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .ptr-counter,
    .ptr-stack-card,
    .ptr-stepper-step-circle,
    .ptr-decay-card,
    .ptr-tilted-card-inner,
    .ptr-elastic-slider-track {
        border-width: 3px;
    }
    
    .ptr-counter-button,
    .ptr-stepper-step-circle {
        border-width: 3px;
    }
}

/* Print Styles for Components */
@media print {
    .ptr-counter,
    .ptr-stack,
    .ptr-stepper,
    .ptr-decay-card,
    .ptr-tilted-card,
    .ptr-elastic-slider {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .ptr-decay-card-particles,
    .ptr-tilted-card-glow {
        display: none;
    }
}

/* Background Components Responsive Styles */
/* Base Background Component Container */
.background-component {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    pointer-events: none;
    z-index: -10; /* Behind all content by default */
}

/* Background Component Canvas */
.background-component canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Z-Index Management for Background Components */
.background-component.darkveil {
    z-index: -1; /* Top overlay layer */
}

.background-component.aurora {
    z-index: -2;
}

.background-component.particles {
    z-index: -3;
}

.background-component.orb {
    z-index: -4;
}

.background-component.galaxy {
    z-index: -5;
}

.background-component.dotgrid {
    z-index: -6;
}

.background-component.dither {
    z-index: -7;
}

.background-component.iridescence {
    z-index: -8;
}

.background-component.lightrays {
    z-index: -9; /* Bottom background layer */
}

/* Container Sizing for Background Components */
.background-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

.background-container.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -10;
}

.background-container.section {
    min-height: 50vh;
    overflow: hidden;
}

/* Mobile Optimizations for Background Components */
@media (max-width: 768px) {
    .background-component {
        /* Reduce performance impact on mobile */
        will-change: auto;
    }
    
    .background-component canvas {
        /* Lower resolution on mobile for performance */
        image-rendering: optimizeSpeed;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
    }
    
    /* Specific mobile optimizations for each component */
    .background-component.particles canvas {
        /* Reduce particle density on mobile */
        transform: scale(0.8);
        transform-origin: center;
    }
    
    .background-component.aurora canvas {
        /* Simplify aurora complexity on mobile */
        filter: blur(1px);
    }
    
    .background-component.galaxy canvas {
        /* Reduce galaxy detail on mobile */
        opacity: 0.8;
    }
}

/* Extra Small Mobile Optimizations */
@media (max-width: 480px) {
    .background-component {
        /* Further optimize for small screens */
        transform: scale3d(1, 1, 1);
        -webkit-transform: scale3d(1, 1, 1);
    }
    
    .background-component canvas {
        /* Lower quality for performance */
        image-rendering: pixelated;
    }
    
    /* Reduce visual complexity on small screens */
    .background-component.particles,
    .background-component.dither {
        opacity: 0.6;
    }
    
    .background-component.dotgrid {
        opacity: 0.4;
    }
}

/* Tablet Optimizations */
@media (min-width: 768px) and (max-width: 1024px) {
    .background-component canvas {
        /* Balanced quality for tablets */
        image-rendering: auto;
    }
    
    .background-component.particles canvas {
        transform: scale(0.9);
    }
}

/* Desktop Optimizations */
@media (min-width: 1024px) {
    .background-component {
        /* Full quality on desktop */
        will-change: transform;
    }
    
    .background-component canvas {
        image-rendering: auto;
    }
}

/* High DPI Display Support */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .background-component canvas {
        /* Crisp rendering on retina displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Reduced Motion Support for Background Components */
@media (prefers-reduced-motion: reduce) {
    .background-component {
        /* Disable all animations and transforms */
        animation: none !important;
        transition: none !important;
    }
    
    .background-component canvas {
        /* Static background for reduced motion */
        animation: none !important;
        transform: none !important;
    }
    
    /* Specific reduced motion handling */
    .background-component.particles,
    .background-component.aurora,
    .background-component.orb,
    .background-component.lightrays {
        /* Completely static for motion-sensitive components */
        opacity: 0.3;
        filter: none !important;
    }
    
    .background-component.darkveil,
    .background-component.galaxy,
    .background-component.dotgrid,
    .background-component.dither,
    .background-component.iridescence {
        /* Keep subtle static backgrounds */
        opacity: 0.5;
    }
}

/* Dark Mode Support for Background Components */
@media (prefers-color-scheme: dark) {
    .background-component.darkveil {
        opacity: 0.9; /* More prominent in dark mode */
    }
    
    .background-component.aurora {
        filter: brightness(1.2) contrast(1.1);
    }
    
    .background-component.galaxy {
        filter: brightness(0.8) contrast(1.2);
    }
    
    .background-component.dotgrid {
        opacity: 0.3; /* Subtle grid in dark mode */
    }
}

/* Light Mode Support for Background Components */
@media (prefers-color-scheme: light) {
    .background-component.darkveil {
        opacity: 0.2; /* Less prominent in light mode */
    }
    
    .background-component.aurora {
        filter: brightness(0.8) contrast(0.9);
    }
    
    .background-component.dotgrid {
        opacity: 0.6; /* More visible grid in light mode */
    }
    
    .background-component.dither {
        filter: contrast(0.8);
    }
}

/* Performance Optimization Classes */
.background-component.gpu-accelerated {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.background-component.low-performance {
    /* For devices with limited GPU */
    animation-duration: 2s !important;
    animation-iteration-count: 1 !important;
    filter: none !important;
    opacity: 0.4;
}

/* Container Responsive Behavior */
.background-container.responsive {
    /* Responsive container that adjusts to content */
    position: relative;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

.background-container.responsive .background-component {
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Accessibility Support */
@media (prefers-contrast: high) {
    .background-component {
        /* High contrast mode - make backgrounds less prominent */
        opacity: 0.1 !important;
        filter: contrast(2) !important;
    }
}

/* Print Styles for Background Components */
@media print {
    .background-component {
        /* Hide all background components in print */
        display: none !important;
    }
    
    .background-container {
        background: white !important;
    }
}

/* Landscape vs Portrait Optimizations */
@media (orientation: landscape) {
    .background-component.particles canvas {
        /* Optimize particle spread for landscape */
        transform: scaleX(1.2);
    }
    
    .background-component.aurora canvas {
        /* Stretch aurora effect for wide screens */
        transform: scaleX(1.1);
    }
}

@media (orientation: portrait) {
    .background-component.particles canvas {
        /* Optimize particle density for portrait */
        transform: scaleY(1.1);
    }
    
    .background-component.galaxy canvas {
        /* Adjust galaxy positioning for tall screens */
        transform: scaleY(1.05);
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .background-component {
        /* Touch devices - optimize for battery life */
        animation-duration: 3s !important;
        opacity: 0.7;
    }
    
    .background-component.particles,
    .background-component.aurora {
        /* Reduce intensive effects on touch devices */
        filter: blur(0.5px);
    }
}

/* Hover-capable Device Enhancements */
@media (hover: hover) and (pointer: fine) {
    .background-component {
        /* Desktop with mouse - full effects */
        opacity: 1;
    }
    
    .background-component.interactive {
        /* Allow interactive background effects on hover devices */
        pointer-events: auto;
    }
}

/* Background Component Animations */
@keyframes aurora-flow {
    0%, 100% { 
        transform: translateY(0) scale(1); 
        filter: hue-rotate(0deg);
    }
    50% { 
        transform: translateY(-10px) scale(1.05); 
        filter: hue-rotate(30deg);
    }
}

@keyframes galaxy-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes iridescence-shift {
    0%, 100% { 
        background-position: 0% 50%; 
        filter: hue-rotate(0deg);
    }
    50% { 
        background-position: 100% 50%; 
        filter: hue-rotate(180deg);
    }
}

@keyframes light-rays-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes orb-float {
    0%, 100% { 
        transform: translateY(0) translateX(0); 
        opacity: 0.8;
    }
    33% { 
        transform: translateY(-20px) translateX(10px); 
        opacity: 1;
    }
    66% { 
        transform: translateY(10px) translateX(-10px); 
        opacity: 0.6;
    }
}

/* FlowingMenu Component Styles */
.flowing-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 8vh;
    min-height: 60px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.flowing-menu.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.flowing-menu-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.flowing-menu-track {
    display: flex;
    align-items: center;
    height: 100%;
    animation: marquee-flow 30s linear infinite;
    white-space: nowrap;
}

.flowing-menu-track.paused {
    animation-play-state: paused;
}

.flowing-menu-item {
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 2vw;
    min-width: max-content;
    font-size: clamp(14px, 2.5vw, 18px);
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 4px;
    margin: 0 1vw;
}

.flowing-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
    transform: scale(1.05);
}

.flowing-menu-item.active {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    font-weight: 600;
}

.flowing-menu-item .icon {
    margin-right: 0.5vw;
    font-size: clamp(16px, 3vw, 20px);
    opacity: 0.8;
}

.flowing-menu-separator {
    width: 1px;
    height: 50%;
    background: rgba(0, 0, 0, 0.2);
    margin: 0 2vw;
}

/* Marquee Animation */
@keyframes marquee-flow {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Loading Spinner Styles */
.ptr-loading-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@keyframes ptr-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Loading Spinner Dots Pattern Animation */
@keyframes ptr-pulse {
  0%, 80%, 100% { 
    opacity: 0.3; 
    transform: scale(0.8); 
  }
  40% { 
    opacity: 1; 
    transform: scale(1); 
  }
}

/* Sequential animation delays for dots */
.ptr-dot:nth-child(1) { animation-delay: 0s; }
.ptr-dot:nth-child(2) { animation-delay: 0.2s; }
.ptr-dot:nth-child(3) { animation-delay: 0.4s; }

/* Loading Spinner Bars Pattern Animation */
@keyframes ptr-bars {
  0%, 40%, 100% { 
    transform: scaleY(0.4); 
    opacity: 0.5; 
  }
  20% { 
    transform: scaleY(1); 
    opacity: 1; 
  }
}

/* Sequential animation delays for bars */
.ptr-bar:nth-child(1) { animation-delay: 0s; }
.ptr-bar:nth-child(2) { animation-delay: 0.1s; }
.ptr-bar:nth-child(3) { animation-delay: 0.2s; }
.ptr-bar:nth-child(4) { animation-delay: 0.3s; }
.ptr-bar:nth-child(5) { animation-delay: 0.4s; }

/* Responsive Design */
@media (max-width: 768px) {
    .flowing-menu {
        height: 10vh;
        min-height: 50px;
    }
    
    .flowing-menu-item {
        padding: 0 3vw;
        font-size: clamp(12px, 3.5vw, 16px);
        margin: 0 0.5vw;
    }
    
    .flowing-menu-item .icon {
        font-size: clamp(14px, 4vw, 18px);
        margin-right: 1vw;
    }
    
    .flowing-menu-separator {
        margin: 0 1vw;
    }
    
    .flowing-menu-track {
        animation-duration: 40s;
    }
}

@media (max-width: 480px) {
    .flowing-menu {
        height: 12vh;
        min-height: 45px;
    }
    
    .flowing-menu-item {
        padding: 0 4vw;
        font-size: clamp(11px, 4vw, 14px);
        margin: 0 0.25vw;
    }
    
    .flowing-menu-item .icon {
        font-size: clamp(13px, 4.5vw, 16px);
        margin-right: 1.5vw;
    }
    
    .flowing-menu-track {
        animation-duration: 50s;
    }
}

@media (min-width: 1200px) {
    .flowing-menu {
        height: 6vh;
        min-height: 70px;
    }
    
    .flowing-menu-item {
        padding: 0 1.5vw;
        font-size: clamp(16px, 2vw, 20px);
        margin: 0 1.5vw;
    }
    
    .flowing-menu-track {
        animation-duration: 25s;
    }
}

/* Theme Integration */
.flowing-menu.dark-theme {
    background: rgba(30, 30, 30, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.flowing-menu.dark-theme .flowing-menu-item {
    color: #e0e0e0;
}

.flowing-menu.dark-theme .flowing-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.flowing-menu.dark-theme .flowing-menu-item.active {
    background: rgba(0, 123, 255, 0.2);
    color: #4da3ff;
}

.flowing-menu.dark-theme .flowing-menu-separator {
    background: rgba(255, 255, 255, 0.2);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .flowing-menu-track {
        animation: none;
    }
    
    .flowing-menu-item {
        transition: none;
    }
}

/* Focus styles for keyboard navigation */
.flowing-menu-item:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    background: rgba(0, 123, 255, 0.1);
}

.flowing-menu.dark-theme .flowing-menu-item:focus {
    outline-color: #4da3ff;
    background: rgba(0, 123, 255, 0.2);
}

/* ===== PTERODACTYL FLOWING MENU COMPONENT ===== */

.flowing-menu-item {
    position: relative;
    overflow: hidden;
}

.flowing-menu-link {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    text-transform: none !important;
}

.flowing-menu-link:hover {
    color: var(--hover-text-color, #0b0b0b) !important;
}

/* Animations handled by GSAP for better performance */

/* Responsive font sizes */
@media (max-width: 768px) {
    .flowing-menu-link {
        font-size: 3vh !important;
    }
    
    .flowing-menu-marquee span {
        font-size: 3vh !important;
    }
}

@media (max-width: 480px) {
    .flowing-menu-link {
        font-size: 2.5vh !important;
    }
    
    .flowing-menu-marquee span {
        font-size: 2.5vh !important;
    }
    
    .flowing-menu-marquee div {
        width: 150px !important;
        height: 5vh !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .flowing-menu-marquee {
        animation: none;
    }
}

/* Simple Background Component Styles */
.ptr-simple-background {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.ptr-simple-background:hover {
    transform: translateY(-1px);
}

/* Text Component Styles */
.ptr-text {
    transition: color 0.2s ease;
    line-height: 1.5;
}

/* Ad Display Component Styles */
.ptr-ad-display {
    display: block;
    margin: 20px auto;
    text-align: center;
    max-width: 100%;
}

.ptr-ad-display__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    opacity: 0.7;
}

.ptr-ad-display__wrapper {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.ptr-ad-display__house-content {
    text-align: center;
}

.ptr-ad-display__house-content h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
}

.ptr-ad-display__house-content p {
    margin: 0 0 12px 0;
    opacity: 0.9;
}

/* Responsive ad sizing */
@media (max-width: 768px) {
    .ptr-ad-display .adsbygoogle[style*="728px"] {
        width: 320px !important;
        height: 50px !important;
    }
    
    .ptr-ad-display__wrapper {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Hide ads for premium users */
.user-premium .ptr-ad-display {
    display: none !important;
}

/* Carbon ads specific styling */
#carbonads {
    display: block;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
    border-radius: 4px;
}

#carbonads a {
    color: inherit;
    text-decoration: none;
}

#carbonads span {
    display: block;
    overflow: hidden;
}

.carbon-img {
    display: block;
    margin: 0 auto 8px;
    line-height: 1;
}

.carbon-text {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.carbon-poweredby {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: .5px;
}

.ptr-text:hover {
    opacity: 0.8;
}

/* Responsive adjustments for foundational components */
@media (max-width: 768px) {
    .ptr-simple-background {
        transform: none !important;
    }
    
    .ptr-simple-background:hover {
        transform: none !important;
    }
}

/* ====== COLOR PICKER STYLES ====== */

/* Color Picker Container */
.ptr-color-picker {
    position: relative;
    display: inline-block;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.ptr-color-picker--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.ptr-color-picker--readonly {
    pointer-events: none;
}

/* Color Preview Button */
.ptr-color-picker__preview {
    width: 120px;
    height: 40px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.ptr-color-picker__preview:hover:not(.ptr-color-picker--disabled .ptr-color-picker__preview) {
    box-shadow: 0 2px 8px var(--shadow-medium);
    transform: translateY(-1px);
}

.ptr-color-picker__preview-color {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--border-radius-md) - 2px);
}

/* Dropdown */
.ptr-color-picker__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 32px var(--shadow-medium);
    padding: var(--spacing-lg);
    min-width: 280px;
    z-index: 1000;
}

/* Spectrum Container */
.ptr-color-picker__spectrum-container {
    margin-bottom: var(--spacing-lg);
}

.ptr-color-picker__spectrum {
    position: relative;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
    cursor: crosshair;
}

.ptr-color-picker__spectrum-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, white 0%, transparent 100%), 
                linear-gradient(to bottom, transparent 0%, black 100%);
    border-radius: calc(var(--border-radius-md) - 1px);
}

/* Slider Container */
.ptr-color-picker__sliders {
    margin-bottom: var(--spacing-lg);
}

.ptr-color-picker__slider-group {
    margin-bottom: var(--spacing-md);
}

.ptr-color-picker__slider-group:last-child {
    margin-bottom: 0;
}

.ptr-color-picker__slider-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ptr-color-picker__slider-container {
    position: relative;
}

/* Slider Track */
.ptr-color-picker__slider-track {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
}

.ptr-color-picker__slider-track:hover {
    box-shadow: 0 2px 8px var(--shadow-light);
    border-color: var(--brand-primary);
}

/* Alpha slider special background for transparency visualization */
.ptr-color-picker__slider-track--alpha {
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%), 
        linear-gradient(-45deg, #ccc 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #ccc 75%), 
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.ptr-color-picker__slider-track--alpha::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    z-index: 1;
}

/* Slider Thumb */
.ptr-color-picker__slider-thumb {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid white;
    border-radius: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.ptr-color-picker__slider-thumb:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ptr-color-picker__slider-track--alpha .ptr-color-picker__slider-thumb {
    z-index: 3;
}

/* Input Section */
.ptr-color-picker__input-section {
    margin-bottom: var(--spacing-lg);
}

.ptr-color-picker__input-group {
    display: flex;
    gap: var(--spacing-xs);
}

.ptr-color-picker__text-input {
    flex: 1;
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.2s ease;
}

.ptr-color-picker__text-input:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 2px rgba(53, 128, 246, 0.1);
}

.ptr-color-picker__format-select {
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    font-size: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ptr-color-picker__format-select:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.ptr-color-picker__error {
    margin-top: var(--spacing-xs);
    color: var(--secondary-color);
    font-size: 11px;
    font-weight: 500;
}

/* History Section */
.ptr-color-picker__history {
    border-top: 1px solid var(--border-color);
    padding-top: var(--spacing-md);
}

.ptr-color-picker__history-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ptr-color-picker__history-grid {
    display: flex;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.ptr-color-picker__history-color {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ptr-color-picker__history-color:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px var(--shadow-medium);
}

/* Size Variants */
.ptr-color-picker--small .ptr-color-picker__preview {
    width: 80px;
    height: 32px;
}

.ptr-color-picker--small .ptr-color-picker__dropdown {
    min-width: 240px;
}

.ptr-color-picker--large .ptr-color-picker__preview {
    width: 160px;
    height: 48px;
}

.ptr-color-picker--large .ptr-color-picker__dropdown {
    min-width: 320px;
}

/* Responsive Design */
@media (max-width: 640px) {
    .ptr-color-picker__dropdown {
        left: 50%;
        transform: translateX(-50%);
        min-width: calc(100vw - 40px);
        max-width: 320px;
    }
    
    .ptr-color-picker__spectrum {
        width: 180px;
        height: 180px;
        margin: 0 auto;
    }
    
    .ptr-color-picker__history-grid {
        justify-content: center;
    }
}

/* Dark theme support (when available) */
@media (prefers-color-scheme: dark) {
    .ptr-color-picker__dropdown {
        background: var(--background-dark, #1f2937);
        border-color: var(--border-color, #374151);
        color: white;
    }
    
    .ptr-color-picker__text-input,
    .ptr-color-picker__format-select {
        background: var(--background-dark, #1f2937);
        color: white;
        border-color: var(--border-color, #374151);
    }
    
    .ptr-color-picker__slider-label {
        color: var(--text-secondary, #9ca3af);
    }
}

/* ====== PTR PERCENTAGE ANIMATIONS ====== */

/* Animation for percentage fill from 0% to specified width */
@keyframes ptr-percentage-fill {
    0% { 
        width: 0%; 
    }
    100% { 
        width: var(--target-width, 100%); 
    }
}

/* Animation for percentage slide for centered mode */
@keyframes ptr-percentage-slide {
    0% { 
        transform: translateX(-50%); 
    }
    100% { 
        transform: translateX(var(--slide-distance, 0)); 
    }
}

/* Helper classes to apply the animations with 0.5s ease-out timing */
.ptr-percentage-fill-animation {
    animation: ptr-percentage-fill 0.5s ease-out;
}

.ptr-percentage-slide-animation {
    animation: ptr-percentage-slide 0.5s ease-out;
}