/* 
 * Bpt.UI.Web.Theming - Enterprise CSS Utilities
 * Provides advanced visual effects, animations, and utilities for world-class UIs
 */

/* ==========================================
   GRADIENT UTILITIES
   ========================================== */

.bpt-gradient-primary {
    background: linear-gradient(135deg, #1B4796 0%, #00A7D8 100%);
}

.bpt-gradient-secondary {
    background: linear-gradient(90deg, #172C4B 0%, #1B4796 100%);
}

.bpt-gradient-accent {
    background: linear-gradient(120deg, #00A7D8 0%, #4FC3F7 100%);
}

.bpt-gradient-overlay {
    background: linear-gradient(180deg, rgba(27, 71, 150, 0.05) 0%, rgba(0, 167, 216, 0.05) 100%);
}

/* ==========================================
   GLASSMORPHISM EFFECTS
   ========================================== */

.bpt-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.bpt-glass-dark {
    background: rgba(30, 30, 30, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bpt-glass-strong {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ==========================================
   ELEVATION & SHADOWS
   ========================================== */

.bpt-elevation-0 {
    box-shadow: none;
}

.bpt-elevation-1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.bpt-elevation-2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.bpt-elevation-3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10);
}

.bpt-elevation-4 {
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05);
}

.bpt-elevation-5 {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Color-branded shadows for depth with brand identity */
.bpt-shadow-primary {
    box-shadow: 0 8px 16px rgba(27, 71, 150, 0.2), 0 4px 8px rgba(27, 71, 150, 0.12);
}

.bpt-shadow-accent {
    box-shadow: 0 8px 16px rgba(0, 167, 216, 0.2), 0 4px 8px rgba(0, 167, 216, 0.12);
}

/* ==========================================
   SMOOTH ANIMATIONS
   ========================================== */

.bpt-transition-instant {
    transition: all 100ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-transition-fast {
    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-transition-standard {
    transition: all 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-transition-emphasis {
    transition: all 400ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-transition-complex {
    transition: all 600ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

/* Transform-specific transitions for better performance */
.bpt-transition-transform {
    transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-transition-opacity {
    transition: opacity 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

/* ==========================================
   HOVER EFFECTS
   ========================================== */

.bpt-hover-lift {
    transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0), 
                box-shadow 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.12);
}

.bpt-hover-glow:hover {
    box-shadow: 0 0 20px rgba(0, 167, 216, 0.4), 0 0 40px rgba(0, 167, 216, 0.2);
}

.bpt-hover-scale {
    transition: transform 150ms cubic-bezier(0.4, 0.0, 0.6, 1.0);
}

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

/* ==========================================
   LOADING & SHIMMER EFFECTS
   ========================================== */

@keyframes bpt-shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.bpt-shimmer {
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.3) 50%, 
        rgba(255, 255, 255, 0) 100%);
    background-size: 1000px 100%;
    animation: bpt-shimmer 2s infinite;
}

@keyframes bpt-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.bpt-pulse {
    animation: bpt-pulse 2s cubic-bezier(0.4, 0.0, 0.6, 1.0) infinite;
}

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

.bpt-spin {
    animation: bpt-spin 1s linear infinite;
}

/* ==========================================
   GRID & LAYOUT UTILITIES
   ========================================== */

/* Full-width MudDataGrid/MudTable utility — keeps grids fluid on every host */
.bpt-grid {
    width: 100%;
}

/* Sparse/few-column grids: MudBlazor's ColumnResizeMode="ResizeMode.Container"
   inlines `width: max-content` on the .mud-table-container element (the grid's
   scroll wrapper — see MudDataGrid TableStyle). That makes the container
   shrink-wrap to the columns' intrinsic width, so a grid with few columns ends
   up narrower than its host and leaves whitespace on the right. Because the
   value is applied INLINE, only an `!important` author rule can override it.
   Forcing the container to 100% (while keeping MudBlazor's inline overflow-x:auto)
   makes the grid edge-to-edge; genuinely wide grids whose content exceeds 100%
   simply scroll inside the container as before — so this is a floor, never a
   ceiling, and does not regress wide grids. */
.bpt-grid .mud-table-container {
    width: 100% !important;
}

.bpt-grid .mud-table-root {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
}

.bpt-grid-auto-fill {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.bpt-grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.bpt-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   SCROLLBAR STYLING
   ========================================== */

.bpt-scrollbar::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.bpt-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.bpt-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(27, 71, 150, 0.3);
    border-radius: 4px;
}

.bpt-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(27, 71, 150, 0.5);
}

/* ==========================================
   TEXT GRADIENTS
   ========================================== */

.bpt-text-gradient-primary {
    background: linear-gradient(135deg, #1B4796 0%, #00A7D8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bpt-text-gradient-accent {
    background: linear-gradient(120deg, #00A7D8 0%, #4FC3F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */

.bpt-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .bpt-hide-mobile {
        display: block;
    }
    .bpt-hide-desktop {
        display: none;
    }
}

/* ==========================================
   ACCESSIBILITY ENHANCEMENTS
   ========================================== */

.bpt-focus-ring:focus {
    outline: 2px solid #00A7D8;
    outline-offset: 2px;
}

.bpt-focus-visible:focus-visible {
    outline: 2px solid #00A7D8;
    outline-offset: 2px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Loading/progress indicators convey operation status, so they must keep
       animating even under reduced motion (WCAG 2.3.3 permits motion that is
       essential to functionality). Without this exemption the universal rule
       above freezes MudBlazor's indeterminate spinner and progress bar — they
       render but never move (e.g. the "Download PDF" progress bar on Quotes). */
    .mud-progress-circular.mud-progress-indeterminate,
    .mud-progress-circular-indeterminate-child,
    .mud-progress-circular-circle.mud-progress-indeterminate {
        animation-duration: 1.4s !important;
        animation-iteration-count: infinite !important;
    }

    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-1-indeterminate,
    .mud-progress-linear .mud-progress-linear-bar.mud-progress-linear-2-indeterminate,
    .mud-progress-linear.mud-progress-indeterminate .mud-progress-linear-bar {
        animation-duration: 2.1s !important;
        animation-iteration-count: infinite !important;
    }
}

/* ==========================================
   3D CARD EFFECTS
   ========================================== */

.bpt-card-3d {
    transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
    transform-style: preserve-3d;
}

.bpt-card-3d:hover {
    transform: perspective(1000px) rotateX(var(--rotate-x, 0deg)) rotateY(var(--rotate-y, 0deg)) scale3d(1.02, 1.02, 1.02);
}

/* ==========================================
   NEON EFFECTS
   ========================================== */

.bpt-neon-primary {
    color: #00A7D8;
    text-shadow: 0 0 10px #00A7D8,
                 0 0 20px #00A7D8,
                 0 0 30px #00A7D8,
                 0 0 40px #00A7D8;
}

.bpt-neon-accent {
    color: #4FC3F7;
    text-shadow: 0 0 10px #4FC3F7,
                 0 0 20px #4FC3F7,
                 0 0 30px #4FC3F7;
}

.bpt-neon-border {
    border: 2px solid #00A7D8;
    box-shadow: 0 0 5px #00A7D8,
                0 0 10px #00A7D8,
                inset 0 0 5px #00A7D8,
                inset 0 0 10px #00A7D8;
}

.bpt-neon-button {
    background: transparent;
    border: 2px solid #00A7D8;
    color: #00A7D8;
    box-shadow: 0 0 10px #00A7D8;
    transition: all 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-neon-button:hover {
    background: #00A7D8;
    color: white;
    box-shadow: 0 0 20px #00A7D8,
                0 0 40px #00A7D8;
}

/* ==========================================
   NEUMORPHISM
   ========================================== */

.bpt-neomorph-light {
    background: #e0e5ec;
    box-shadow: 9px 9px 16px rgba(163, 177, 198, 0.6),
               -9px -9px 16px rgba(255, 255, 255, 0.5);
    border-radius: 16px;
}

.bpt-neomorph-light-pressed {
    background: #e0e5ec;
    box-shadow: inset 9px 9px 16px rgba(163, 177, 198, 0.6),
                inset -9px -9px 16px rgba(255, 255, 255, 0.5);
    border-radius: 16px;
}

.bpt-neomorph-dark {
    background: #2d3748;
    box-shadow: 9px 9px 16px rgba(0, 0, 0, 0.4),
               -9px -9px 16px rgba(76, 89, 115, 0.4);
    border-radius: 16px;
}

/* ==========================================
   MORPHING ANIMATIONS
   ========================================== */

.bpt-morph {
    transition: all 400ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-morph-shape {
    transition: border-radius 400ms cubic-bezier(0.4, 0.0, 0.2, 1.0),
                transform 400ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-morph-shape:hover {
    border-radius: 50%;
    transform: rotate(90deg);
}

.bpt-morph-color {
    transition: background 400ms cubic-bezier(0.4, 0.0, 0.2, 1.0),
                color 400ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

/* ==========================================
   LIQUID ANIMATIONS
   ========================================== */

@keyframes bpt-liquid-wave {
    0%, 100% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    50% {
        border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
    }
}

.bpt-liquid {
    animation: bpt-liquid-wave 10s ease-in-out infinite;
}

.bpt-liquid-fast {
    animation: bpt-liquid-wave 5s ease-in-out infinite;
}

/* ==========================================
   AMBIENT ANIMATIONS
   ========================================== */

@keyframes bpt-ambient-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes bpt-ambient-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes bpt-ambient-breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

.bpt-float {
    animation: bpt-ambient-float 6s ease-in-out infinite;
}

.bpt-rotate-slow {
    animation: bpt-ambient-rotate 20s linear infinite;
}

.bpt-breathe {
    animation: bpt-ambient-breathe 4s ease-in-out infinite;
}

/* ==========================================
   CINEMATIC TRANSITIONS
   ========================================== */

.bpt-cinematic-fade {
    animation: bpt-fade-in 600ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

@keyframes bpt-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.bpt-cinematic-slide-up {
    animation: bpt-slide-up 600ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

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

.bpt-cinematic-scale {
    animation: bpt-scale-in 600ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

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

/* ==========================================
   PARALLAX EFFECTS
   ========================================== */

.bpt-parallax-layer {
    will-change: transform;
}

.bpt-parallax-slow {
    transform: translateZ(-1px) scale(1.1);
}

.bpt-parallax-medium {
    transform: translateZ(-2px) scale(1.2);
}

.bpt-parallax-fast {
    transform: translateZ(-3px) scale(1.3);
}

/* ==========================================
   PARTICLE EFFECTS (CSS-based)
   ========================================== */

.bpt-particles {
    position: relative;
    overflow: hidden;
}

.bpt-particles::before,
.bpt-particles::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(0, 167, 216, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: bpt-particle-float 15s infinite;
}

.bpt-particles::before {
    top: 20%;
    left: 30%;
    animation-delay: 0s;
}

.bpt-particles::after {
    top: 60%;
    left: 70%;
    animation-delay: 7s;
}

@keyframes bpt-particle-float {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translate(100px, -100px);
        opacity: 0;
    }
}

/* ==========================================
   PREMIUM BUTTON EFFECTS
   ========================================== */

.bpt-button-premium {
    position: relative;
    overflow: hidden;
    transition: all 250ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
}

.bpt-button-premium::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 600ms ease-out, height 600ms ease-out;
}

.bpt-button-premium:hover::before {
    width: 300px;
    height: 300px;
}

/* ==========================================
   HOLOGRAPHIC EFFECTS
   ========================================== */

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

.bpt-holographic {
    background: linear-gradient(
        45deg,
        #1B4796 0%,
        #00A7D8 25%,
        #4FC3F7 50%,
        #00A7D8 75%,
        #1B4796 100%
    );
    background-size: 200% 200%;
    animation: bpt-holographic 3s ease infinite;
}

.bpt-holographic-text {
    background: linear-gradient(
        45deg,
        #1B4796 0%,
        #00A7D8 25%,
        #4FC3F7 50%,
        #00A7D8 75%,
        #1B4796 100%
    );
    background-size: 200% 200%;
    animation: bpt-holographic 3s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================
   AURORA BOREALIS EFFECT
   ========================================== */

@keyframes bpt-aurora {
    0%, 100% {
        background-position: 0% 50%;
        filter: hue-rotate(0deg);
    }
    25% {
        background-position: 50% 25%;
        filter: hue-rotate(15deg);
    }
    50% {
        background-position: 100% 50%;
        filter: hue-rotate(30deg);
    }
    75% {
        background-position: 50% 75%;
        filter: hue-rotate(15deg);
    }
}

.bpt-aurora-effect {
    position: relative;
    overflow: hidden;
}

.bpt-aurora-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        rgba(139, 92, 246, 0.3) 0%,
        rgba(6, 182, 212, 0.3) 25%,
        rgba(236, 72, 153, 0.3) 50%,
        rgba(6, 182, 212, 0.3) 75%,
        rgba(139, 92, 246, 0.3) 100%
    );
    background-size: 400% 400%;
    animation: bpt-aurora 15s ease-in-out infinite;
    z-index: -1;
    opacity: 0.6;
}

/* ==========================================
   MATRIX RAIN EFFECT
   ========================================== */

@keyframes bpt-matrix-fall {
    0% {
        transform: translateY(-100%);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

.bpt-matrix-effect {
    position: relative;
    overflow: hidden;
}

.bpt-matrix-effect::before,
.bpt-matrix-effect::after {
    content: '01001001';
    position: absolute;
    color: rgba(34, 197, 94, 0.3);
    font-family: 'Courier New', monospace;
    font-size: 12px;
    white-space: nowrap;
    animation: bpt-matrix-fall 8s linear infinite;
}

.bpt-matrix-effect::before {
    left: 20%;
    animation-delay: 0s;
}

.bpt-matrix-effect::after {
    left: 70%;
    animation-delay: 3s;
}

/* ==========================================
   WAVE DISTORTION EFFECT
   ========================================== */

@keyframes bpt-wave {
    0%, 100% {
        clip-path: polygon(
            0% 45%,
            15% 44%,
            33% 50%,
            54% 60%,
            70% 61%,
            84% 59%,
            100% 52%,
            100% 100%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 60%,
            16% 65%,
            34% 66%,
            51% 62%,
            67% 50%,
            84% 45%,
            100% 46%,
            100% 100%,
            0% 100%
        );
    }
}

.bpt-wave-effect {
    position: relative;
    overflow: hidden;
}

.bpt-wave-effect::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(6, 182, 212, 0.2));
    animation: bpt-wave 8s ease-in-out infinite;
}

/* ==========================================
   SPARKLE/STAR EFFECT
   ========================================== */

@keyframes bpt-sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

.bpt-sparkle-effect {
    position: relative;
}

.bpt-sparkle-effect::before,
.bpt-sparkle-effect::after {
    content: '✨';
    position: absolute;
    font-size: 20px;
    animation: bpt-sparkle 4s infinite;
    pointer-events: none;
}

.bpt-sparkle-effect::before {
    top: 10%;
    right: 15%;
    animation-delay: 0s;
}

.bpt-sparkle-effect::after {
    bottom: 15%;
    left: 10%;
    animation-delay: 2s;
}

/* ==========================================
   TYPEWRITER EFFECT
   ========================================== */

@keyframes bpt-typewriter {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes bpt-blink-caret {
    from, to {
        border-color: transparent;
    }
    50% {
        border-color: currentColor;
    }
}

.bpt-typewriter {
    overflow: hidden;
    border-right: 2px solid;
    white-space: nowrap;
    animation: 
        bpt-typewriter 3s steps(40, end),
        bpt-blink-caret 0.75s step-end infinite;
}

/* ==========================================
   GLITCH EFFECT
   ========================================== */

@keyframes bpt-glitch-1 {
    0% {
        clip-path: inset(40% 0 61% 0);
        transform: translate(0);
    }
    20% {
        clip-path: inset(92% 0 1% 0);
        transform: translate(-2px, 2px);
    }
    40% {
        clip-path: inset(43% 0 1% 0);
        transform: translate(2px, -2px);
    }
    60% {
        clip-path: inset(25% 0 58% 0);
        transform: translate(-2px, 2px);
    }
    80% {
        clip-path: inset(54% 0 7% 0);
        transform: translate(2px, -2px);
    }
    100% {
        clip-path: inset(58% 0 43% 0);
        transform: translate(0);
    }
}

@keyframes bpt-glitch-2 {
    0% {
        clip-path: inset(65% 0 15% 0);
        transform: translate(0);
    }
    20% {
        clip-path: inset(17% 0 50% 0);
        transform: translate(2px, -2px);
    }
    40% {
        clip-path: inset(99% 0 1% 0);
        transform: translate(-2px, 2px);
    }
    60% {
        clip-path: inset(26% 0 60% 0);
        transform: translate(2px, -2px);
    }
    80% {
        clip-path: inset(95% 0 5% 0);
        transform: translate(-2px, 2px);
    }
    100% {
        clip-path: inset(36% 0 48% 0);
        transform: translate(0);
    }
}

.bpt-glitch-effect {
    position: relative;
    display: inline-block;
}

.bpt-glitch-effect::before,
.bpt-glitch-effect::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bpt-glitch-effect::before {
    animation: bpt-glitch-1 2.5s infinite;
    color: #00FFFF;
    z-index: -1;
}

.bpt-glitch-effect::after {
    animation: bpt-glitch-2 2s infinite;
    color: #FF00FF;
    z-index: -2;
}

/* ==========================================
   SMOKE/FOG EFFECT
   ========================================== */

@keyframes bpt-smoke {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-50px) translateX(20px) scale(1.2);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-100px) translateX(-10px) scale(1);
        opacity: 0;
    }
}

.bpt-smoke-effect {
    position: relative;
    overflow: hidden;
}

.bpt-smoke-effect::before,
.bpt-smoke-effect::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: bpt-smoke 10s infinite;
}

.bpt-smoke-effect::before {
    left: 20%;
    animation-delay: 0s;
}

.bpt-smoke-effect::after {
    left: 60%;
    animation-delay: 5s;
}

/* ==========================================
   RIPPLE EFFECT (on click)
   ========================================== */

@keyframes bpt-ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.bpt-ripple-container {
    position: relative;
    overflow: hidden;
}

.bpt-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    width: 100px;
    height: 100px;
    margin-left: -50px;
    margin-top: -50px;
    animation: bpt-ripple 1s;
    pointer-events: none;
}

/* ==========================================
   TILT CARD (3D Parallax Tilt)
   ========================================== */

.bpt-tilt-card {
    transition: transform 200ms cubic-bezier(0.4, 0.0, 0.2, 1.0);
    transform-style: preserve-3d;
}

.bpt-tilt-card:hover {
    transform: perspective(1000px) 
               rotateX(var(--tilt-x, 0deg)) 
               rotateY(var(--tilt-y, 0deg))
               scale3d(1.05, 1.05, 1.05);
}

.bpt-tilt-card > * {
    transform: translateZ(20px);
}

/* ==========================================
   STACKED CARDS EFFECT
   ========================================== */

.bpt-stacked-cards {
    position: relative;
}

.bpt-stacked-cards::before,
.bpt-stacked-cards::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: -1;
}

.bpt-stacked-cards::before {
    transform: translateY(-5px) translateX(-5px);
    opacity: 0.7;
}

.bpt-stacked-cards::after {
    transform: translateY(-10px) translateX(-10px);
    opacity: 0.4;
}

/* ==========================================
   PIXEL TRANSITION
   ========================================== */

@keyframes bpt-pixelate {
    0% {
        filter: blur(0px);
    }
    50% {
        filter: blur(5px);
    }
    100% {
        filter: blur(0px);
    }
}

.bpt-pixelate {
    animation: bpt-pixelate 2s ease-in-out;
}

/* ==========================================
   RAINBOW BORDER
   ========================================== */

@keyframes bpt-rainbow-border {
    0%, 100% {
        border-color: #FF0000;
    }
    14% {
        border-color: #FF7F00;
    }
    28% {
        border-color: #FFFF00;
    }
    42% {
        border-color: #00FF00;
    }
    57% {
        border-color: #0000FF;
    }
    71% {
        border-color: #4B0082;
    }
    85% {
        border-color: #9400D3;
    }
}

.bpt-rainbow-border {
    border: 3px solid;
    animation: bpt-rainbow-border 3s linear infinite;
}

/* ==========================================
   CHROME/METALLIC EFFECT
   ========================================== */

.bpt-chrome {
    background: linear-gradient(
        180deg,
        #E0E0E0 0%,
        #F5F5F5 25%,
        #FAFAFA 50%,
        #F5F5F5 75%,
        #E0E0E0 100%
    );
    background-size: 100% 400%;
    animation: bpt-holographic 3s ease infinite;
}

.bpt-chrome-text {
    background: linear-gradient(
        180deg,
        #D0D0D0 0%,
        #F0F0F0 25%,
        #FFFFFF 50%,
        #F0F0F0 75%,
        #D0D0D0 100%
    );
    background-size: 100% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: bpt-holographic 3s ease infinite;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

/* ==========================================
   ENTRANCE ANIMATIONS (Home Page & Landing)
   Designed for professional, sophisticated first-impression experiences.
   All classes use animation-fill-mode: both so elements start hidden
   and remain in their final state after the animation completes.
   ========================================== */

/* Keyframes */

@keyframes bpt-enter-fade-up {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bpt-enter-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bpt-enter-scale-up {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes bpt-enter-slide-left {
    from {
        opacity: 0;
        transform: translateX(-32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bpt-enter-slide-right {
    from {
        opacity: 0;
        transform: translateX(32px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes bpt-enter-hero {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Entrance utility classes */

.bpt-animate-fade-in-up {
    animation: bpt-enter-fade-up 600ms cubic-bezier(0.22, 1.0, 0.36, 1.0) both;
}

.bpt-animate-fade-in {
    animation: bpt-enter-fade-in 500ms cubic-bezier(0.4, 0.0, 0.2, 1.0) both;
}

.bpt-animate-scale-in {
    animation: bpt-enter-scale-up 500ms cubic-bezier(0.34, 1.56, 0.64, 1.0) both;
}

.bpt-animate-slide-in-left {
    animation: bpt-enter-slide-left 600ms cubic-bezier(0.22, 1.0, 0.36, 1.0) both;
}

.bpt-animate-slide-in-right {
    animation: bpt-enter-slide-right 600ms cubic-bezier(0.22, 1.0, 0.36, 1.0) both;
}

/* Hero section entrance — longer duration for dramatic impact */
.bpt-animate-hero-enter {
    animation: bpt-enter-hero 700ms cubic-bezier(0.22, 1.0, 0.36, 1.0) both;
}

/* Card entrance with spring overshoot for feature grids */
.bpt-animate-card-enter {
    animation: bpt-enter-scale-up 500ms cubic-bezier(0.34, 1.56, 0.64, 1.0) both;
}

/* ==========================================
   STAGGER DELAY UTILITIES
   Apply to successive elements for cascading entrance effects.
   Based on 80ms StaggerDelay increments from BptDefaultAnimations.
   ========================================== */

.bpt-delay-1 { animation-delay: 80ms; }
.bpt-delay-2 { animation-delay: 160ms; }
.bpt-delay-3 { animation-delay: 240ms; }
.bpt-delay-4 { animation-delay: 320ms; }
.bpt-delay-5 { animation-delay: 400ms; }
.bpt-delay-6 { animation-delay: 480ms; }
.bpt-delay-7 { animation-delay: 560ms; }
.bpt-delay-8 { animation-delay: 640ms; }

/* Fixed delays for hero sub-elements */
.bpt-delay-200  { animation-delay: 200ms; }
.bpt-delay-300  { animation-delay: 300ms; }
.bpt-delay-400  { animation-delay: 400ms; }
.bpt-delay-500  { animation-delay: 500ms; }
.bpt-delay-600  { animation-delay: 600ms; }

/* ==========================================
   HOME PAGE SECTION PATTERNS
   Composable classes that combine entrance animation + delay for
   common landing-page layout patterns.
   ========================================== */

/* Hero heading — enters first, no delay */
.bpt-hero-heading {
    animation: bpt-enter-hero 700ms cubic-bezier(0.22, 1.0, 0.36, 1.0) both;
}

/* Hero subtitle — arrives just after heading */
.bpt-hero-subtitle {
    animation: bpt-enter-fade-up 600ms cubic-bezier(0.22, 1.0, 0.36, 1.0) 150ms both;
}

/* Hero CTA button — springs into view after content is visible */
.bpt-hero-cta {
    animation: bpt-enter-scale-up 500ms cubic-bezier(0.34, 1.56, 0.64, 1.0) 300ms both;
}

/* Feature / info section header */
.bpt-section-heading {
    animation: bpt-enter-fade-up 550ms cubic-bezier(0.22, 1.0, 0.36, 1.0) both;
}

/* Feature card grid — use bpt-delay-1 … bpt-delay-6 to stagger */
.bpt-feature-card {
    animation: bpt-enter-scale-up 500ms cubic-bezier(0.34, 1.56, 0.64, 1.0) both;
}

/* Stat / KPI tiles — fade/slide up to imply data arriving */
.bpt-stat-tile {
    animation: bpt-enter-fade-up 550ms cubic-bezier(0.22, 1.0, 0.36, 1.0) both;
}

/* ==========================================
   FILLED SURFACE BUTTON (missing MudBlazor variant)
   ========================================== */

/*
 * MudBlazor 9.x does NOT ship a Filled variant for Color.Surface — it only
 * generates .mud-button-filled-{primary,secondary,tertiary,info,success,
 * warning,error,dark}. A Filled + Color.Surface button therefore gets no
 * colour-specific rule and falls back to the base .mud-button-filled, which is
 * dark text (text-primary) on a near-transparent grey (action-default-hover).
 * On a coloured DashboardHeader gradient that reads as illegible dark-on-blue.
 *
 * Provide the missing treatment: a solid surface-coloured button with primary
 * text — the standard Material "white filled button on a coloured app-bar"
 * look, high contrast in BOTH light and dark themes. This makes the
 * style-guide-sanctioned ButtonColor="Color.Surface" header CTA render
 * correctly. The double-class selector (.mud-button-root.mud-button-filled-
 * surface) beats the base .mud-button-filled on specificity, so no !important
 * is required. Theme tokens only — no hardcoded colours.
 */
.mud-button-root.mud-button-filled-surface {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.mud-button-root.mud-button-filled-surface:focus-visible {
    background-color: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-primary);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-root.mud-button-filled-surface:hover {
        background-color: var(--mud-palette-background-grey);
        color: var(--mud-palette-text-primary);
    }
}