/* ========================================================
   STYLE.CSS – Timebox Nostalgic Memory Neumorphism (Soft Warm Memory UI)
   Base: Warm Memory Parchment Linen (#ded0bf) | Dual Umber Shadows | Deep Espresso Text | Sunset Amber CTA
   ======================================================== */

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background-color: #ded0bf;
}

[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible,
h1:focus,
h2:focus,
h3:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------- Nostalgic Memory Neumorphism Design Tokens ---------- */
:root {
    /* 70% Base Canvas Color: Warm Antique Parchment / Memory Linen */
    --canvas-bg: #ded0bf;
    --card-bg: #ded0bf;
    --surface-sunken: #d4c5b3;

    /* 15% Dual Shadows: Sunlit Cream Highlight & Warm Umber Earth Shadow */
    --shadow-light: rgba(255, 252, 245, 0.95);
    --shadow-dark: rgba(135, 110, 88, 0.52);
    --shadow-dark-soft: rgba(135, 110, 88, 0.32);

    /* Extruded / Raised Surfaces */
    --neu-extruded: 12px 12px 24px var(--shadow-dark),
                   -12px -12px 24px var(--shadow-light);
    --neu-extruded-sm: 6px 6px 14px var(--shadow-dark),
                      -6px -6px 14px var(--shadow-light);
    --neu-extruded-hover: 14px 14px 28px rgba(135, 110, 88, 0.58),
                         -14px -14px 28px rgba(255, 252, 245, 0.98);
    --neu-floating: 15px 15px 32px rgba(135, 110, 88, 0.45),
                   -15px -15px 32px rgba(255, 252, 245, 0.9);

    /* Inset / Sunken Surfaces (Inputs, Pressed States) */
    --neu-inset: inset 4px 4px 8px rgba(120, 95, 75, 0.50),
                 inset -4px -4px 8px rgba(255, 252, 245, 0.92);
    --neu-inset-deep: inset 6px 6px 12px rgba(120, 95, 75, 0.58),
                      inset -6px -6px 12px rgba(255, 252, 245, 0.95);
    --neu-inset-focus: inset 4px 4px 8px rgba(120, 95, 75, 0.60),
                       inset -4px -4px 8px rgba(255, 252, 245, 0.95),
                       0 0 0 2px rgba(217, 119, 6, 0.50);

    /* 10% Typography Colors: Deep Antique Ink & Warm Sepia */
    --text-primary: #281b12;
    --text-secondary: #5c4331;
    --text-muted: #8a6f59;
    --text-light: #ffffff;

    /* 5% Vibrant Nostalgic CTA Accent: Sunset Amber & Warm Terracotta */
    --cta-gradient: linear-gradient(135deg, #d97706 0%, #b45309 50%, #8c2e0b 100%);
    --cta-gradient-hover: linear-gradient(135deg, #b45309 0%, #92400e 50%, #782406 100%);
    --cta-shadow: 0 10px 24px rgba(217, 119, 6, 0.45),
                  6px 6px 14px rgba(135, 110, 88, 0.4),
                  -6px -6px 14px rgba(255, 252, 245, 0.85);
    --cta-shadow-active: inset 2px 2px 5px rgba(0, 0, 0, 0.35),
                         0 4px 12px rgba(217, 119, 6, 0.35);

    /* Curated Nostalgic Theme Accents */
    --accent-family: #c85a32;
    --accent-friends: #d97706;
    --accent-campus: #3b5b88;
    --accent-cooking: #6b7f3b;
    --accent-keepsakes: #b25e2e;
    --accent-thoughts: #8b4b9e;
    --accent-upload: #2d7a5b;
    --accent-feedback: #7a6251;

    --accent-blue: #3b5b88;
    --accent-indigo: #4f46e5;
    --accent-purple: #8b4b9e;
    --accent-emerald: #2d7a5b;
    --accent-amber: #d97706;
    --accent-rose: #c85a32;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    --font-family: 'Inter', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Body & Canvas ---------- */
body {
    font-family: var(--font-family);
    background-color: var(--canvas-bg);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px 16px;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-modal-open {
    overflow: hidden;
}

/* ---------- Floating Background Soft Spheres (.bg-circle) ---------- */
.bg-circle {
    position: fixed;
    border-radius: 50%;
    background: var(--canvas-bg);
    box-shadow: var(--neu-floating);
    z-index: -5;
    pointer-events: none;
    animation: floatingSphere 8s ease-in-out infinite;
}

.bg-circle--1 {
    width: 240px;
    height: 240px;
    top: -60px;
    left: -80px;
    animation-delay: 0s;
}

.bg-circle--2 {
    width: 180px;
    height: 180px;
    top: 40%;
    right: -60px;
    animation-delay: -3s;
}

.bg-circle--3 {
    width: 200px;
    height: 200px;
    bottom: -50px;
    left: 15%;
    animation-delay: -5s;
}

.bg-circle--4 {
    width: 120px;
    height: 120px;
    bottom: 25%;
    left: -30px;
    animation-delay: -1.5s;
}

@keyframes floatingSphere {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-16px) scale(1.03);
    }
}

/* Legacy Blobs fallback */
.blob {
    display: none;
}

/* ---------- Base Interactions & Focus ---------- */
a,
button,
input,
textarea {
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--accent-amber);
    outline-offset: 3px;
}

/* ---------- SPA Shell & Structure ---------- */
.spa-shell {
    position: relative;
    width: 100%;
    max-width: 580px;
    margin: auto;
    z-index: 10;
}

.spa-view {
    width: 100%;
}

.spa-view.is-hidden {
    display: none;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-24px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.spa-view.anim-enter-right {
    animation: slideInRight 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.spa-view.anim-enter-left {
    animation: slideInLeft 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ---------- Neumorphic Bio Card Container ---------- */
.bio-card {
    position: relative;
    width: 100%;
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    box-shadow: var(--neu-extruded);
    padding: 32px 28px;
    transition: var(--transition-smooth);
}

/* ---------- Neumorphic Common Controls & Buttons ---------- */
.neu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--canvas-bg);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--neu-extruded-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    user-select: none;
    text-decoration: none;
}

.neu-btn:hover {
    box-shadow: var(--neu-extruded-hover);
    transform: translateY(-2px);
    color: var(--accent-amber);
}

.neu-btn:active {
    box-shadow: var(--neu-inset);
    transform: translateY(0);
}

/* Primary Vibrant Sunset Amber CTA Button */
.neu-btn--primary,
.cta-button,
.join-form__submit,
.upload-modal__send,
.key-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--cta-gradient) !important;
    color: var(--text-light) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: var(--cta-shadow) !important;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: center;
    user-select: none;
    text-decoration: none;
}

.neu-btn--primary:hover,
.cta-button:hover,
.join-form__submit:hover,
.upload-modal__send:hover,
.key-form button[type="submit"]:hover {
    background: var(--cta-gradient-hover) !important;
    box-shadow: 0 12px 28px rgba(217, 119, 6, 0.52),
                6px 6px 16px rgba(135, 110, 88, 0.4),
                -6px -6px 16px rgba(255, 252, 245, 0.9) !important;
    transform: translateY(-2px);
}

.neu-btn--primary:active,
.cta-button:active,
.join-form__submit:active,
.upload-modal__send:active,
.key-form button[type="submit"]:active {
    box-shadow: var(--cta-shadow-active) !important;
    transform: translateY(1px);
}

/* Circular Tactile Icon Button */
.neu-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: var(--canvas-bg);
    color: var(--text-secondary);
    font-size: 18px;
    box-shadow: var(--neu-extruded-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.neu-icon-btn:hover {
    color: var(--accent-amber);
    box-shadow: var(--neu-extruded-hover);
    transform: translateY(-2px);
}

.neu-icon-btn:active {
    box-shadow: var(--neu-inset);
    transform: translateY(0);
}

/* Inset / Concave Form Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
textarea {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--canvas-bg);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    box-shadow: var(--neu-inset);
    transition: var(--transition-smooth);
}

input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

input:focus,
textarea:focus {
    box-shadow: var(--neu-inset-focus);
}

/* ---------- Toast Notification ---------- */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--canvas-bg);
    color: var(--text-primary);
    padding: 14px 26px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--neu-floating);
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.toast.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ---------- Responsive Adjustments ---------- */
@media (max-width: 640px) {
    body {
        padding: 14px 10px;
    }

    .bio-card {
        padding: 24px 18px;
        border-radius: var(--radius-lg);
    }
}