/*
  globals.css
  Design system — menadawod.de
  Aesthetic: deep-space obsidian + electric violet + arctic cyan
*/

:root {
    --bg-color:        #07091a;
    --surface-color:   #0c0f28;
    --surface-raised:  #10143a;
    --primary-color:   #7c3aed;
    --primary-bright:  #a78bfa;
    --accent-color:    #06d6f0;
    --accent-dim:      rgba(6, 214, 240, 0.12);
    --border-color:    rgba(124, 58, 237, 0.18);
    --border-hover:    rgba(167, 139, 250, 0.5);
    --text-color:      #dde4f4;
    --text-muted:      #6476a0;
    --text-faint:      #2e3d5c;
    --shadow-color:    rgba(124, 58, 237, 0.3);
    --shadow-accent:   rgba(6, 214, 240, 0.18);
    --on-primary:      #ffffff;
    --gradient:        linear-gradient(135deg, #7c3aed 0%, #06d6f0 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(124,58,237,0.1) 0%, rgba(6,214,240,0.06) 100%);
    --scrollbar-bg:    #07091a;
    --scrollbar-thumb: #151b40;
    --section-border:  rgba(124, 58, 237, 0.1);
    --glow-primary:    0 0 40px rgba(124,58,237,0.3), 0 0 80px rgba(124,58,237,0.08);
    --glow-accent:     0 0 30px rgba(6,214,240,0.25);
    --radius-sm:       8px;
    --radius-md:       12px;
    --radius-lg:       18px;
}

[data-theme="light"] {
    --bg-color:        #f2f0fd;
    --surface-color:   #ffffff;
    --surface-raised:  #f7f5ff;
    --primary-color:   #5b21b6;
    --primary-bright:  #7c3aed;
    --accent-color:    #0369a1;
    --accent-dim:      rgba(3, 105, 161, 0.1);
    --border-color:    #ddd6fe;
    --border-hover:    #a78bfa;
    --text-color:      #0d0a2e;
    --text-muted:      #4b5068;
    --text-faint:      #9ca3af;
    --shadow-color:    rgba(91, 33, 182, 0.18);
    --shadow-accent:   rgba(3, 105, 161, 0.14);
    --on-primary:      #ffffff;
    --gradient:        linear-gradient(135deg, #5b21b6 0%, #0369a1 100%);
    --gradient-subtle: linear-gradient(135deg, rgba(91,33,182,0.07) 0%, rgba(3,105,161,0.04) 100%);
    --scrollbar-bg:    #f2f0fd;
    --scrollbar-thumb: #ddd6fe;
    --section-border:  #ede9fe;
    --glow-primary:    0 0 28px rgba(91,33,182,0.18);
    --glow-accent:     0 0 20px rgba(3,105,161,0.16);
}

*,
*::before,
*::after {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 90% 55% at 15% -5%,  rgba(124,58,237,0.07) 0%, transparent 65%),
        radial-gradient(ellipse 70% 45% at 85% 110%, rgba(6,214,240,0.04)  0%, transparent 60%),
        radial-gradient(ellipse 50% 30% at 50% 50%,  rgba(124,58,237,0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

::-webkit-scrollbar              { width: 4px; }
::-webkit-scrollbar-track        { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb        { background: var(--scrollbar-thumb); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: var(--primary-color); }

::selection {
    background: rgba(124, 58, 237, 0.4);
    color: #fff;
}

.fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity   0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.stagger-1 { transition-delay: 0.07s; }
.stagger-2 { transition-delay: 0.14s; }
.stagger-3 { transition-delay: 0.21s; }
.stagger-4 { transition-delay: 0.28s; }

.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
            mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-right: 3rem;
    width: max-content;
    animation: marquee-scroll 40s linear infinite;
}

.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-33.333%); }
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px var(--shadow-color), 0 0 45px rgba(124,58,237,0.1);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 35px var(--shadow-color), 0 0 80px rgba(124,58,237,0.14), 0 0 120px rgba(6,214,240,0.04);
        transform: scale(1.018);
    }
}

.profile-glow {
    animation: pulse-glow 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 1.5rem;
    display: flex;
    align-items: center;
}

.theme-toggle__track {
    width: 52px;
    height: 28px;
    background: var(--gradient);
    border-radius: 999px;
    display: flex;
    align-items: center;
    padding: 3px;
    box-shadow: 0 0 14px rgba(124,58,237,0.28);
}

.theme-toggle__thumb {
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7c3aed;
    transform: translateX(0);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-sun  { display: none; }
.icon-moon { display: block; }

[data-theme="light"] .theme-toggle__thumb { transform: translateX(24px); color: #0369a1; }
[data-theme="light"] .icon-sun            { display: block; }
[data-theme="light"] .icon-moon           { display: none; }

[data-i18n]                  { opacity: 0; }
body.i18n-ready [data-i18n]  { opacity: 1; }
#intro-overlay [data-i18n]   { opacity: 1; }

.lang-switch {
    position: relative;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.lang-switch.is-active {
    background: var(--gradient) !important;
    color: #fff !important;
    box-shadow: 0 2px 16px var(--shadow-color);
}

.lang-switch:not(.is-active):hover {
    color: var(--primary-bright);
    background: rgba(124, 58, 237, 0.1);
}

.nav-link-active { color: var(--primary-bright) !important; }

@media (min-width: 768px) {
    div.hidden.md\:flex a.nav-link-active {
        position: relative;
    }

    div.hidden.md\:flex a.nav-link-active::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--gradient);
        border-radius: 2px;
        box-shadow: var(--glow-accent);
        animation: nav-underline-in 0.3s ease-out forwards;
    }
}

@keyframes nav-underline-in {
    from { width: 0; opacity: 0; }
    to   { width: 100%; opacity: 1; }
}

#mobile-menu a.nav-link-active {
    background: var(--gradient);
    color: #fff !important;
    padding-left: 1rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px var(--shadow-color);
}

#mobile-menu a.nav-link-active i { color: #fff !important; }

#mobile-menu {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100vh;
    background-color: var(--surface-color);
    z-index: 1000;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    padding: 2rem;
    box-shadow: 20px 0 80px rgba(0, 0, 0, 0.5);
}

body.menu-open #mobile-menu { left: 0; }

#app-wrapper {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

body.menu-open #app-wrapper { transform: translateX(300px); }

#menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

body.menu-open #menu-backdrop { opacity: 1; pointer-events: auto; }

#mobile-menu-btn {
    position: relative;
    z-index: 50;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobile-menu-btn .hamburger-box {
    width: 24px;
    height: 18px;
    position: relative;
    display: block;
}

#mobile-menu-btn .hamburger-inner {
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0s 0.2s;
}

#mobile-menu-btn .hamburger-inner::before,
#mobile-menu-btn .hamburger-inner::after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--text-color);
    position: absolute;
    left: 0;
    transition: transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

#mobile-menu-btn .hamburger-inner::before { top: -8px; }
#mobile-menu-btn .hamburger-inner::after  { bottom: -8px; }

body.menu-open #mobile-menu-btn .hamburger-inner              { background-color: transparent !important; }
body.menu-open #mobile-menu-btn .hamburger-inner::before      { transform: translateY(8px) rotate(45deg); }
body.menu-open #mobile-menu-btn .hamburger-inner::after       { transform: translateY(-8px) rotate(-45deg); }

@media (min-width: 768px) {
    #mobile-menu,
    #menu-backdrop,
    #mobile-menu-btn  { display: none !important; }
    #app-wrapper      { transform: none !important; }
}

[data-theme="light"] .bg-navy-surface {
    background-color: #ffffff;
    box-shadow: 0 4px 30px rgba(91,33,182,0.06), 0 1px 4px rgba(0,0,0,0.04);
}

[data-theme="light"] .bg-navy-surface\/50 {
    background-color: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
}

[data-theme="light"] .bg-success-bg       { background-color: #eff6ff !important; border-color: #0369a1 !important; }
[data-theme="light"] .border-success\/30   { border-color: #0369a1 !important; }
[data-theme="light"] .text-success         { color: #1e3a8a !important; }
[data-theme="light"] .text-success\/90     { color: #1e3a8a !important; font-weight: 600; }

[data-theme="light"] .font-mono.text-primary,
[data-theme="light"] i.text-primary,
[data-theme="light"] svg.text-primary,
[data-theme="light"] i.text-success,
[data-theme="light"] svg.text-success,
[data-theme="light"] .hover\:text-primary:hover,
[data-theme="light"] .p-4 .text-primary,
[data-theme="light"] .p-3 .text-primary    { color: #0369a1 !important; }

[data-theme="light"] .bg-success,
[data-theme="light"] .bg-success.animate-pulse { background-color: #0369a1 !important; }

[data-theme="light"] .before\:from-primary:before {
    background-image: linear-gradient(to bottom, #0369a1, transparent) !important;
}

[data-theme="light"] .border-primary\/30   { border-color: rgba(3,105,161,0.3) !important; }