/* =============================================================================
   COMING SOON PAGE - Liquid Glass + Animated Background

   Design inspired by:
   - Apple Liquid Glass aesthetic (with SVG distortion filter)
   - Microsoft Fluent Design / Acrylic material

   Features:
   - Customizable color palette via CSS variables
   - Light/Dark mode support (auto-detect + manual toggle)
   - Animated gradient background with visible motion
   - Liquid glass card effect with distortion
============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Custom Properties - Color Palette
   Easily customize the look by changing these values
----------------------------------------------------------------------------- */
:root {
    /* Background gradient colors - Light Mode (extremely subtle, high luminance pastels) */
    --cs-bg-gradient-1: rgba(147, 197, 253, 0.22);   /* Sky Blue - soft pastel */
    --cs-bg-gradient-2: rgba(196, 181, 253, 0.18);   /* Lavender - soft pastel */
    --cs-bg-gradient-3: rgba(165, 180, 252, 0.20);   /* Light Indigo - soft pastel */
    --cs-bg-gradient-4: rgba(153, 246, 228, 0.16);   /* Mint - soft pastel */

    /* Base background */
    --cs-bg-base: #f8fafc;
    --cs-bg-base-rgb: 248, 250, 252;

    /* Liquid Glass card - Light Mode */
    --cs-glass-bg: rgba(255, 255, 255, 0.25);
    --cs-glass-bg-hover: rgba(255, 255, 255, 0.35);
    --cs-glass-border: rgba(255, 255, 255, 0.5);
    --cs-glass-shadow: rgba(0, 0, 0, 0.12);
    --cs-glass-blur: 6px;

    /* Text colors - Light Mode */
    --cs-text-primary: #1e293b;
    --cs-text-secondary: #475569;
    --cs-text-muted: #64748b;

    /* Accent colors - Microsoft Blue to match primary buttons */
    --cs-accent: #0078d4;
    --cs-accent-hover: #106ebe;

    /* Animation timing - slow and subtle */
    --cs-animation-duration: 20s;
}

/* Dark Mode - Auto Detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Background gradient colors - Dark Mode (darker, more muted) */
        --cs-bg-gradient-1: rgba(55, 65, 81, 0.35);     /* Dark gray-blue */
        --cs-bg-gradient-2: rgba(75, 59, 93, 0.30);     /* Dark purple */
        --cs-bg-gradient-3: rgba(49, 67, 96, 0.32);     /* Dark blue */
        --cs-bg-gradient-4: rgba(39, 78, 74, 0.28);     /* Dark teal */

        /* Base background */
        --cs-bg-base: #030712;
        --cs-bg-base-rgb: 3, 7, 18;

        /* Glass card - Dark Mode */
        --cs-glass-bg: rgba(30, 41, 59, 0.4);
        --cs-glass-bg-hover: rgba(30, 41, 59, 0.5);
        --cs-glass-border: rgba(255, 255, 255, 0.15);
        --cs-glass-shadow: rgba(0, 0, 0, 0.4);

        /* Text colors - Dark Mode */
        --cs-text-primary: #f1f5f9;
        --cs-text-secondary: #cbd5e1;
        --cs-text-muted: #94a3b8;

        /* Accent colors - lighter blue for dark mode */
        --cs-accent: #60a5fa;
        --cs-accent-hover: #3b82f6;
    }
}

/* Manual Dark Mode Override */
[data-theme="dark"] {
    --cs-bg-gradient-1: rgba(55, 65, 81, 0.35);
    --cs-bg-gradient-2: rgba(75, 59, 93, 0.30);
    --cs-bg-gradient-3: rgba(49, 67, 96, 0.32);
    --cs-bg-gradient-4: rgba(39, 78, 74, 0.28);
    --cs-bg-base: #030712;
    --cs-bg-base-rgb: 3, 7, 18;
    --cs-glass-bg: rgba(30, 41, 59, 0.4);
    --cs-glass-bg-hover: rgba(30, 41, 59, 0.5);
    --cs-glass-border: rgba(255, 255, 255, 0.15);
    --cs-glass-shadow: rgba(0, 0, 0, 0.4);
    --cs-text-primary: #f1f5f9;
    --cs-text-secondary: #cbd5e1;
    --cs-text-muted: #94a3b8;
    --cs-accent: #60a5fa;
    --cs-accent-hover: #3b82f6;
}

/* -----------------------------------------------------------------------------
   Coming Soon Layout Container
----------------------------------------------------------------------------- */
.coming-soon-layout {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background-color: var(--cs-bg-base);
    font-family:
        "Segoe UI",
        -apple-system,
        BlinkMacSystemFont,
        "Roboto",
        "Helvetica Neue",
        Arial,
        sans-serif;
}

/* -----------------------------------------------------------------------------
   Animated Gradient Background
   More visible floating color blobs with noticeable motion
   Can be used via .coming-soon-background or .animated-background
----------------------------------------------------------------------------- */
.coming-soon-background,
.animated-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Primary animated layer - free wandering movement */
.coming-soon-background::before,
.animated-background::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background:
        radial-gradient(circle 500px at 30% 30%, var(--cs-bg-gradient-1), transparent 70%),
        radial-gradient(circle 450px at 70% 25%, var(--cs-bg-gradient-2), transparent 65%),
        radial-gradient(circle 550px at 65% 75%, var(--cs-bg-gradient-3), transparent 70%),
        radial-gradient(circle 480px at 25% 70%, var(--cs-bg-gradient-4), transparent 65%);
    filter: blur(100px);
    animation: gradient-wander var(--cs-animation-duration) ease-in-out infinite;
}

/* Secondary animated layer - offset timing for depth */
.coming-soon-background::after,
.animated-background::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background:
        radial-gradient(circle 420px at 55% 45%, var(--cs-bg-gradient-2), transparent 60%),
        radial-gradient(circle 380px at 20% 55%, var(--cs-bg-gradient-3), transparent 55%),
        radial-gradient(circle 460px at 80% 60%, var(--cs-bg-gradient-1), transparent 60%);
    filter: blur(120px);
    animation: gradient-wander-alt calc(var(--cs-animation-duration) * 1.4) ease-in-out infinite;
    animation-delay: calc(var(--cs-animation-duration) * -0.3);
}

/* Noise texture overlay for subtle grain effect */
.coming-soon-background .noise-overlay,
.animated-background .noise-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Free wandering animation - larger movement range */
@keyframes gradient-wander {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
    }
    20% {
        transform: translate(15%, -20%) rotate(5deg) scale(1.1);
    }
    40% {
        transform: translate(-10%, 25%) rotate(-3deg) scale(0.9);
    }
    60% {
        transform: translate(-25%, -10%) rotate(4deg) scale(1.05);
    }
    80% {
        transform: translate(20%, 15%) rotate(-2deg) scale(0.95);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
    }
}

@keyframes gradient-wander-alt {
    0% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(-20%, 18%) rotate(-4deg) scale(0.92);
    }
    50% {
        transform: translate(18%, -15%) rotate(3deg) scale(1.08);
    }
    75% {
        transform: translate(12%, 22%) rotate(-2deg) scale(0.96);
    }
    100% {
        transform: translate(0%, 0%) rotate(0deg) scale(1);
    }
}

/* -----------------------------------------------------------------------------
   Liquid Glass Card
   Apple-style with SVG distortion filter
----------------------------------------------------------------------------- */
.liquid-glass {
    position: relative;
    z-index: 1;
    display: flex;
    overflow: hidden;
    border-radius: 28px;
    max-width: 520px;
    width: 90%;
    box-shadow: 0 8px 32px var(--cs-glass-shadow), 0 0 40px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.liquid-glass:hover {
    box-shadow: 0 12px 48px var(--cs-glass-shadow), 0 0 60px rgba(0, 0, 0, 0.08);
}

/* Glass effect layer - uses SVG filter for distortion */
.liquid-glass-effect {
    position: absolute;
    z-index: 0;
    inset: 0;
    backdrop-filter: blur(var(--cs-glass-blur));
    -webkit-backdrop-filter: blur(var(--cs-glass-blur));
    filter: url(#glass-distortion);
    overflow: hidden;
    isolation: isolate;
}

/* Tint overlay */
.liquid-glass-tint {
    z-index: 1;
    position: absolute;
    inset: 0;
    background: var(--cs-glass-bg);
}

/* Shine/reflection layer */
.liquid-glass-shine {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    box-shadow:
        inset 2px 2px 2px 0 rgba(255, 255, 255, 0.5),
        inset -1px -1px 2px 1px rgba(255, 255, 255, 0.3);
    border-radius: inherit;
}

/* Content container */
.liquid-glass-content {
    position: relative;
    z-index: 3;
    padding: 3rem 3.5rem;
    width: 100%;
    text-align: center;
}

/* Fallback for browsers without SVG filter support */
@supports not (filter: url(#glass-distortion)) {
    .liquid-glass-effect {
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
    }
}

/* -----------------------------------------------------------------------------
   Typography
----------------------------------------------------------------------------- */
.coming-soon-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.coming-soon-brand-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-hover));
    border-radius: 12px;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.3);
}

.coming-soon-brand-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--cs-text-primary);
    letter-spacing: -0.025em;
}

.coming-soon-headline {
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--cs-text-primary);
    margin: 0 0 1rem 0;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.coming-soon-tagline {
    font-size: 1.125rem;
    color: var(--cs-text-secondary);
    margin: 0 0 2rem 0;
    line-height: 1.6;
}

.coming-soon-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.coming-soon-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--cs-bg-base-rgb), 0.4);
    border-radius: 100px;
    font-size: 0.875rem;
    color: var(--cs-text-muted);
    border: 1px solid var(--cs-glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.coming-soon-feature-icon {
    font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   Call to Action Button
----------------------------------------------------------------------------- */
.coming-soon-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-hover));
    color: white;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
    box-shadow:
        0 4px 14px rgba(0, 120, 212, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.coming-soon-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 20px rgba(0, 120, 212, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.25);
    filter: brightness(1.05);
    color: white;
    text-decoration: none;
}

.coming-soon-cta:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(0, 120, 212, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

/* -----------------------------------------------------------------------------
   Footer / Additional Info
----------------------------------------------------------------------------- */
.coming-soon-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--cs-glass-border);
}

.coming-soon-footer-text {
    font-size: 0.875rem;
    color: var(--cs-text-muted);
    margin: 0;
}

.coming-soon-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.coming-soon-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(var(--cs-bg-base-rgb), 0.3);
    color: var(--cs-text-secondary);
    text-decoration: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    border: 1px solid var(--cs-glass-border);
}

.coming-soon-social-link:hover {
    background: rgba(var(--cs-bg-base-rgb), 0.5);
    color: var(--cs-accent);
    transform: translateY(-2px);
}

/* -----------------------------------------------------------------------------
   Responsive Adjustments
----------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .liquid-glass-content {
        padding: 2rem 1.5rem;
    }

    .liquid-glass {
        border-radius: 20px;
    }

    .coming-soon-headline {
        font-size: 2rem;
    }

    .coming-soon-tagline {
        font-size: 1rem;
    }

    .coming-soon-brand-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .coming-soon-brand-text {
        font-size: 1.25rem;
    }
}

/* -----------------------------------------------------------------------------
   MainLayout with Animated Background
   Styles for using the animated background within the main app layout
----------------------------------------------------------------------------- */
.layout-container.has-animated-bg {
    position: relative;
    background-color: var(--cs-bg-base);
}

.layout-container.has-animated-bg .right-pane {
    position: relative;
    z-index: 1;
}

.layout-container.has-animated-bg .content-wrapper {
    position: relative;
    z-index: 1;
}

/* -----------------------------------------------------------------------------
   Accessibility - Reduced Motion
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .coming-soon-background::before,
    .coming-soon-background::after,
    .animated-background::before,
    .animated-background::after {
        animation: none;
    }

    .liquid-glass,
    .coming-soon-cta,
    .coming-soon-social-link {
        transition: none;
    }
}