/**
 * Shine Border Animation CSS
 * WordPress-compatible version of shadcn/ui shine-border
 */

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

/* Base shine border styles - Only show when data-shine-border is present */
[data-shine-border] {
    position: relative;
    overflow: hidden;
}

/* DISABLE the default CSS border - let JavaScript handle everything */
[data-shine-border]::before {
    display: none !important;
}

/* Dark mode optimized shine colors */
.shine-border-white::before {
    background-image: radial-gradient(transparent, transparent, #ffffff, transparent, transparent);
}

.shine-border-silver::before {
    background-image: radial-gradient(transparent, transparent, #cbd5e1, transparent, transparent);
}

.shine-border-cyan::before {
    background-image: radial-gradient(transparent, transparent, #06b6d4, transparent, transparent);
}

.shine-border-blue::before {
    background-image: radial-gradient(transparent, transparent, #60a5fa, transparent, transparent);
}

.shine-border-purple::before {
    background-image: radial-gradient(transparent, transparent, #a78bfa, transparent, transparent);
}

.shine-border-pink::before {
    background-image: radial-gradient(transparent, transparent, #f472b6, transparent, transparent);
}

.shine-border-gold::before {
    background-image: radial-gradient(transparent, transparent, #fbbf24, transparent, transparent);
}

/* Dark mode gradient combinations */
.shine-border-gradient-neon::before {
    background-image: radial-gradient(transparent, transparent, #06b6d4, #a78bfa, #f472b6, transparent, transparent);
}

.shine-border-gradient-gold::before {
    background-image: radial-gradient(transparent, transparent, #fbbf24, #f59e0b, #ffffff, transparent, transparent);
}

.shine-border-gradient-cool::before {
    background-image: radial-gradient(transparent, transparent, #60a5fa, #06b6d4, #ffffff, transparent, transparent);
}

/* Different border widths */
.shine-border-thin::before {
    padding: 1px;
}

.shine-border-medium::before {
    padding: 2px;
}

.shine-border-thick::before {
    padding: 3px;
}

/* Different animation speeds */
.shine-border-slow::before {
    animation-duration: 20s;
}

.shine-border-fast::before {
    animation-duration: 8s;
}

/* Pause animation on hover */
.shine-border-hover-pause:hover::before {
    animation-play-state: paused;
}

/* Only show on hover */
.shine-border-hover-only::before {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.shine-border-hover-only:hover::before {
    opacity: 1;
}

/* Cursor-following magic card styles */
.shine-border-magic {
    position: relative;
    overflow: hidden;
}

/* Prefers reduced motion - disable cursor tracking for accessibility */
@media (prefers-reduced-motion: reduce) {
    .shine-border-magic {
        pointer-events: none;
    }
}

/* Gutenberg Block Specific Styles - Focus on Individual Elements */

/* Individual Column Styling - Main Focus */
.wp-block-column[data-shine-border] {
    position: relative;
    border-radius: 12px;
    padding: 2rem;
    margin: 0.5rem 0;
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(71, 85, 105, 0.3);
    transition: transform 0.2s ease;
}

.wp-block-column[data-shine-border]:hover {
    transform: translateY(-2px);
}

/* Magic border color variations for columns */
.wp-block-column.magic-border-white {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

.wp-block-column.magic-border-cyan {
    background: rgba(15, 23, 42, 0.8);
    border-color: rgba(6, 182, 212, 0.2);
}

.wp-block-column.magic-border-purple {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(167, 139, 250, 0.2);
}

.wp-block-column.magic-border-pink {
    background: rgba(30, 41, 59, 0.8);
    border-color: rgba(244, 114, 182, 0.2);
}

.wp-block-column.magic-border-gold {
    background: rgba(45, 35, 15, 0.8);
    border-color: rgba(251, 191, 36, 0.2);
}

.wp-block-column.magic-border-neon {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(6, 182, 212, 0.3);
}

/* Group blocks as containers */
.wp-block-group[data-shine-border] {
    position: relative;
    border-radius: 16px;
    padding: 2.5rem;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(51, 65, 85, 0.3);
}

/* Cover blocks for hero sections */
.wp-block-cover[data-shine-border] {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

/* Button blocks */
.wp-block-button .wp-block-button__link[data-shine-border] {
    position: relative;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* Button blocks with shine borders */
.wp-block-button .wp-block-button__link[data-shine-border] {
    position: relative;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

.wp-block-button .wp-block-button__link[data-shine-border]:hover {
    transform: translateY(-2px);
}

/* Image blocks with shine borders */
.wp-block-image[data-shine-border] img {
    border-radius: inherit;
}

/* Paragraph and heading blocks */
.wp-block-paragraph[data-shine-border],
.wp-block-heading[data-shine-border] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.3);
    backdrop-filter: blur(5px);
}

/* Editor-specific styles (only show in editor) */
.block-editor-block-list__layout .wp-block[data-shine-border] {
    position: relative;
}

/* Add subtle visual indicator in editor for shine-enabled blocks */
.block-editor-block-list__layout .wp-block[data-shine-border]::after {
    content: '✨';
    position: absolute;
    top: -8px;
    right: -8px;
    background: #3b82f6;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 1000;
    pointer-events: none;
}

/* Hide the indicator on frontend */
.wp-block[data-shine-border]::after {
    display: none;
}

/* Dark mode optimized example components */
.shine-card {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.shine-card-dark {
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: #0f172a;
    color: #f1f5f9;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.shine-button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    background: #1e293b;
    color: #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shine-button:hover {
    transform: translateY(-1px);
    background: #334155;
}

.shine-button-dark {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.375rem;
    background: #0f172a;
    color: #f1f5f9;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #334155;
}

.shine-button-dark:hover {
    transform: translateY(-1px);
    background: #1e293b;
    border-color: #475569;
}

/* Responsive animations - reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .shine-border::before {
        animation: none;
    }
    
    .shine-border-hover-only:hover::before {
        background-position: 50% 50%;
    }
}