/*******************************************************************************
 * ParallelBar - Public Splash Page Styles
 * Design Philosophy: Calm, confident, inviting
 * A welcoming introduction to the product
 ******************************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* =============================================================================
   WebAwesome Token Overrides (matching parallel-suite.css)
   ============================================================================= */

:root {
    /* Brand → Cyan/Teal */
    --wa-color-brand-fill-quiet: var(--wa-color-cyan-95);
    --wa-color-brand-fill-normal: var(--wa-color-cyan-60);
    --wa-color-brand-fill-loud: var(--wa-color-cyan-50);
    --wa-color-brand-border-quiet: var(--wa-color-cyan-90);
    --wa-color-brand-border-normal: var(--wa-color-cyan-70);
    --wa-color-brand-border-loud: var(--wa-color-cyan-50);
    --wa-color-brand-on-quiet: var(--wa-color-cyan-50);
    --wa-color-brand-on-normal: var(--wa-color-cyan-40);
    --wa-color-brand-on-loud: white;

    /* Success → Muted sage green */
    --wa-color-success-fill-quiet: var(--wa-color-green-95);
    --wa-color-success-fill-normal: var(--wa-color-green-60);
    --wa-color-success-fill-loud: var(--wa-color-green-50);
    --wa-color-success-on-quiet: var(--wa-color-green-50);
    --wa-color-success-on-normal: var(--wa-color-green-40);

    /* Typography */
    --wa-font-family-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --wa-font-family-heading: var(--wa-font-family-body);

    /* Logo Styling Variable*/
    --logo-bar-left-start: #86B993;
    --logo-bar-left-end: #459687;
    --logo-bar-right-start: #D4915D;
    --logo-bar-right-end: #E8B89D;
    --logo-wordmark-color: #2D2D2D;

    /* Custom splash properties */
    --splash-max-width: 680px;

    /* Background gradient options - swap into --splash-bg-gradient to test */
    --splash-bg-neutral: linear-gradient(165deg, #FAFAF9 0%, #F0EFED 50%, #E8E6E3 100%);
    --splash-bg-tint: linear-gradient(165deg, #F5FAFA 0%, #EBF5F3 50%, #E3EFED 100%);
    --splash-bg-brand: linear-gradient(165deg, #F0F7F6 0%, #EFF6F3 50%, #E8F0EC 100%);
    --splash-bg-warm-cool: linear-gradient(135deg, #FAF9F7 0%, #F2F6F5 40%, #E8F0EF 100%);
    --splash-bg-radial: radial-gradient(ellipse at center, #FAFAFA 0%, #E8F2F0 70%, #D8EBE8 100%);

    /* Accent color variations (teal + coral) */
    --splash-bg-teal-coral: linear-gradient(135deg, #EBF5F3 0%, #FAF9F8 50%, #F8F0EB 100%);
    --splash-bg-coral-teal: linear-gradient(135deg, #F8F0EB 0%, #FAF9F8 50%, #EBF5F3 100%);
    --splash-bg-dual-corner: linear-gradient(135deg, #E5F0EE 0%, #FAFAFA 35%, #FAFAFA 65%, #F5EBE5 100%);
    --splash-bg-sunset: linear-gradient(165deg, #EEF4F2 0%, #FAF8F6 40%, #F5EDE8 100%);
    --splash-bg-dual-radial: radial-gradient(ellipse at center, #FAFAFA 0%, #F5F8F7 50%, #EDE8E5 85%, #E8E0DC 100%);

    --splash-bg-radial: radial-gradient(ellipse at center, #E8E0DC 0%, #ead5ca 70%, #e1b8a4 100%);

    /* Active background - change this to try different options */
    --splash-bg-gradient: var(--splash-bg-dual-radial);
}

/* =============================================================================
   Base Styles
   ============================================================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

.splash-body {
    font-family: var(--wa-font-family-body);
    color: var(--wa-color-text-normal);
    line-height: var(--wa-line-height-normal);
    background: var(--splash-bg-gradient);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================================================
   Login Corner Button
   ============================================================================= */

.splash-login-corner {
    position: fixed;
    top: var(--wa-space-l);
    right: var(--wa-space-l);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
}

.splash-login-corner wa-button::part(base) {
    font-weight: 500;
}

/* =============================================================================
   Main Content Area
   ============================================================================= */

.splash-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--wa-space-3xl) var(--wa-space-l);
    text-align: center;
    max-width: var(--splash-max-width);
    margin: 0 auto;
    width: 100%;
}

/* =============================================================================
   Logo
   ============================================================================= */

.splash-logo {
    margin-bottom: var(--wa-space-2xl);
    animation: fadeSlideDown 0.8s ease-out;
}

.splash-logo svg {
    height: 56px;
    width: auto;
}

/* =============================================================================
   Hero Content
   ============================================================================= */

.splash-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--wa-space-xl);
    animation: fadeSlideUp 0.8s ease-out 0.1s backwards;
}

.splash-headline {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--wa-color-text-normal);
    line-height: 1.2;
    margin: 0 0 var(--wa-space-m) 0;
    letter-spacing: -0.02em;
}

.splash-subhead {
    font-size: var(--wa-font-size-l);
    color: var(--wa-color-text-quiet);
    line-height: 1.6;
    margin: 0;
    max-width: 520px;
}

/* =============================================================================
   Beta Badge
   ============================================================================= */

.splash-beta-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-xs) var(--wa-space-m);
    background: var(--wa-color-brand-fill-quiet);
    color: var(--wa-color-brand-on-normal);
    border-radius: var(--wa-border-radius-pill);
    font-size: var(--wa-font-size-s);
    font-weight: 500;
    margin-bottom: var(--wa-space-xl);
    animation: fadeSlideUp 0.8s ease-out 0.2s backwards;
}

.splash-beta-badge wa-icon {
    font-size: 14px;
}

/* =============================================================================
   Waitlist CTA
   ============================================================================= */

.splash-cta {
    margin-bottom: var(--wa-space-3xl);
    animation: fadeSlideUp 0.8s ease-out 0.3s backwards;
    width: 100%;
    max-width: 420px;
}

.splash-cta-button {
    width: 100%;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.splash-cta-button:hover {
    transform: translateY(-2px);
}

.splash-cta-button::part(base) {
    font-size: var(--wa-font-size-l);
    padding: var(--wa-space-m) var(--wa-space-xl);
}

/* Expandable Form Container */
.splash-waitlist-form {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
    margin-top: 0;
}

.splash-waitlist-form.expanded {
    max-height: 300px;
    opacity: 1;
    margin-top: var(--wa-space-m);
}

.waitlist-form-inner {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
}

.waitlist-name-row {
    display: flex;
    gap: var(--wa-space-s);
    align-items: end;
}

.waitlist-name-row wa-input {
    flex: 1;
    min-width: 0;
}

.waitlist-form-inner > wa-input {
    width: 100%;
}

.waitlist-form-inner wa-button {
    flex-shrink: 0;
    align-self: auto;
}

.waitlist-hint {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    margin: var(--wa-space-s) 0 0 0;
}

/* Success State */
.waitlist-success {
    text-align: center;
    padding: var(--wa-space-l);
    background: var(--wa-color-success-fill-quiet);
    border-radius: var(--wa-border-radius-l);
    animation: scaleIn 0.3s ease-out;
}

.waitlist-success wa-icon {
    font-size: 48px;
    color: var(--wa-color-success-fill-normal);
    margin-bottom: var(--wa-space-s);
}

.waitlist-success h3 {
    font-size: var(--wa-font-size-l);
    font-weight: 600;
    color: var(--wa-color-text-normal);
    margin: 0 0 var(--wa-space-2xs) 0;
}

.waitlist-success p {
    font-size: var(--wa-font-size-m);
    color: var(--wa-color-text-quiet);
    margin: 0;
}

/* =============================================================================
   Feature Hints
   ============================================================================= */

.splash-features {
    display: flex;
    gap: var(--wa-space-xl);
    flex-wrap: wrap;
    justify-content: center;
    animation: fadeSlideUp 0.8s ease-out 0.4s backwards;
}

.splash-feature {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
    font-weight: 500;
}

.splash-feature wa-icon {
    color: var(--wa-color-brand-fill-normal);
    font-size: 16px;
}

/* =============================================================================
   Footer
   ============================================================================= */

.splash-footer {
    padding: var(--wa-space-l);
    text-align: center;
}

.splash-footer p {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    margin: 0;
}

/* =============================================================================
   Login Dialog
   ============================================================================= */

.login-dialog::part(panel) {
    max-width: 400px;
}

.login-form-fields {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
}

.login-error {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
    padding: var(--wa-space-s) var(--wa-space-m);
    background: var(--wa-color-danger-fill-quiet);
    color: var(--wa-color-danger-on-normal);
    border-radius: var(--wa-border-radius-m);
    font-size: var(--wa-font-size-s);
    margin-top: var(--wa-space-m);
    animation: shakeError 0.4s ease;
}

.login-error wa-icon {
    flex-shrink: 0;
}

.login-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--wa-space-s);
}

/* =============================================================================
   Animations
   ============================================================================= */

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

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* =============================================================================
   Responsive Adjustments
   ============================================================================= */

@media (max-width: 600px) {
    .splash-login-corner {
        top: var(--wa-space-m);
        right: var(--wa-space-m);
    }

    .splash-main {
        padding: var(--wa-space-2xl) var(--wa-space-m);
        justify-content: flex-start;
        padding-top: calc(var(--wa-space-4xl) + var(--wa-space-xl));
    }

    .splash-logo svg {
        height: 44px;
    }

    .splash-subhead {
        font-size: var(--wa-font-size-m);
    }

    .waitlist-form-inner {
        flex-direction: column;
    }

    .waitlist-form-inner wa-button {
        width: 100%;
    }

    .splash-features {
        gap: var(--wa-space-m);
    }

    .splash-feature span {
        display: none;
    }

    .splash-feature wa-icon {
        font-size: 20px;
    }
}

/* =============================================================================
   Reduced Motion
   ============================================================================= */

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