* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { transition: background-color 0.4s ease, color 0.4s ease; }

/* Language Font Handling */
body.lang-fa { font-family: 'Vazirmatn', sans-serif; }
body.lang-en { font-family: 'Space Grotesk', sans-serif; }
.font-en-fixed { font-family: 'Space Grotesk', sans-serif; direction: ltr; display: inline-block; }

/* --- Monumental Neomorphism Variables (Neutral Gray / Warm Gold) --- */
:root {
    --bg-color: #e9e9e8;
    --shadow-light: #ffffff;
    --shadow-dark: #cfcfce;
    --text-main: #232322;
    --text-muted: #6d6d6a;
    --accent-color: #9c7a3c;
    --border-glow: rgba(156, 122, 60, 0.35);
    --line-color: rgba(35, 35, 34, 0.09);
    --grid-color: rgba(35, 35, 34, 0.05);
}

.dark {
    --bg-color: #18181a;
    --shadow-light: #232326;
    --shadow-dark: #0c0c0d;
    --text-main: #ededec;
    --text-muted: #9c9c98;
    --accent-color: #d9b36b;
    --border-glow: rgba(217, 179, 107, 0.3);
    --line-color: rgba(237, 237, 236, 0.09);
    --grid-color: rgba(237, 237, 236, 0.035);
}

body { background-color: var(--bg-color); color: var(--text-main); }

.bg-grid {
    position: fixed; inset: 0; z-index: -10;
    background-image:
        linear-gradient(var(--grid-color) 1px, transparent 1px),
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
}

.neu-flat {
    background: var(--bg-color);
    box-shadow: 8px 8px 16px var(--shadow-dark), -8px -8px 16px var(--shadow-light);
    border: 1px solid rgba(255,255,255,0.02);
    transition: all 0.3s ease;
}
.neu-pressed {
    background: var(--bg-color);
    box-shadow: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
    transition: all 0.3s ease;
}
.neu-btn {
    background: var(--bg-color);
    box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.neu-btn:hover { box-shadow: 2px 2px 5px var(--shadow-dark), -2px -2px 5px var(--shadow-light); }
.neu-btn:active { box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); }

.border-glow { border: 1px solid var(--border-glow); }
.text-glow { text-shadow: 0 0 12px var(--border-glow); }
.text-muted { color: var(--text-muted); }
.glass { background: rgba(231, 231, 228, 0.8); backdrop-filter: blur(12px); }
.dark .glass { background: rgba(25, 24, 21, 0.8); }

::-webkit-scrollbar { display: none; }

.logo-mark { width: 48px; height: 27px; overflow: visible; flex-shrink: 0; transition: transform .2s ease; }
html[dir="rtl"] .logo-mark { transform: scaleX(-1); }
html[dir="rtl"] #brandLink .flex-col { align-items: flex-start; text-align: left; }
.logo-word { font-family: 'M PLUS Rounded 1c', 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: .02em; text-transform: uppercase; direction: ltr; unicode-bidi: isolate; line-height: 1; }
.logo-sub { font-size: 9px; text-transform: uppercase; letter-spacing: .14em; }
html[lang="fa"] .logo-sub { font-size: 10.5px; text-transform: none; letter-spacing: 0; font-family: 'Vazirmatn', sans-serif; }


/* --- Spatial 2D map (index only) --- */
.map-container { will-change: transform; }
.map-container.animating { transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); }
.physical-left { left: 0vw; } .physical-center-x { left: 100vw; } .physical-right { left: 200vw; }
.physical-top { top: 0dvh; } .physical-center-y { top: 100dvh; } .physical-bottom { top: 200dvh; }

@keyframes swipe-hint-h { 0%,100%{opacity:.3;transform:translateX(0);} 50%{opacity:.8;transform:translateX(5px);} }
@keyframes swipe-hint-v { 0%,100%{opacity:.3;transform:translateY(0);} 50%{opacity:.8;transform:translateY(5px);} }
.swipe-hint-right { animation: swipe-hint-h 1.5s ease-in-out infinite reverse; }
.swipe-hint-left { animation: swipe-hint-h 1.5s ease-in-out infinite; }
.swipe-hint-down { animation: swipe-hint-v 1.5s ease-in-out infinite; }
.swipe-hint-up { animation: swipe-hint-v 1.5s ease-in-out infinite reverse; }

@media (prefers-reduced-motion: reduce) {
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}