/* ═══════════════════════════════════════════════════════════════
   UMMAH.CITY — Unified Design System
   Dark midnight palette, gold/teal accents, Outfit font
   ═══════════════════════════════════════════════════════════════ */

/* ===== CSS CUSTOM PROPERTIES (THEME TOKENS) ===== */
:root {
    /* Night mode (default) */
    --city-bg: #060B18;
    --city-bg-deep: #0A1128;
    --city-surface: #0F1A33;
    --city-border: #1A2744;
    --city-text: #C8D0E0;
    --city-text-muted: #6B7280;
    --city-text-dim: #4B5563;
    --city-gold: #DFA032;
    --city-gold-light: #F0C96E;
    --city-teal: #14B8A6;
    --city-nav-bg: rgba(15, 26, 51, 0.8);
    --city-nav-border: rgba(26, 39, 68, 0.6);
    --city-card-bg: linear-gradient(145deg, rgba(15, 26, 51, 0.8), rgba(6, 11, 24, 0.9));
    --city-card-border: rgba(26, 39, 68, 0.8);
    --city-overlay-bg: rgba(6, 11, 24, 0.7);
    --city-heading: #FFFFFF;
    --city-star-opacity: 1;
    --city-grain-opacity: 0.03;
    --city-geo-opacity: 0.025;
    --city-shooting-opacity: 1;
    --city-scrollbar-track: #060B18;
    --city-scrollbar-thumb: linear-gradient(180deg, #1A2744, #DFA032);
}

/* Day mode overrides */
.day-mode {
    --city-bg: #F5EDE0;
    --city-bg-deep: #EDE3D4;
    --city-surface: #E8DDD0;
    --city-border: #D4C4B0;
    --city-text: #3D2B1F;
    --city-text-muted: #7A6B5D;
    --city-text-dim: #9A8B7D;
    --city-gold: #C4841D;
    --city-gold-light: #DFA032;
    --city-teal: #0D9488;
    --city-nav-bg: rgba(245, 237, 224, 0.85);
    --city-nav-border: rgba(212, 196, 176, 0.6);
    --city-card-bg: linear-gradient(145deg, rgba(232, 221, 208, 0.9), rgba(245, 237, 224, 0.95));
    --city-card-border: rgba(212, 196, 176, 0.8);
    --city-overlay-bg: rgba(245, 237, 224, 0.7);
    --city-heading: #1A0F08;
    --city-star-opacity: 0;
    --city-grain-opacity: 0.015;
    --city-geo-opacity: 0.04;
    --city-shooting-opacity: 0;
    --city-scrollbar-track: #F5EDE0;
    --city-scrollbar-thumb: linear-gradient(180deg, #D4C4B0, #C4841D);
}

/* Day mode transition */
body {
    transition: background-color 0.8s ease, color 0.6s ease;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }

body {
    font-family: 'Outfit', system-ui, sans-serif;
    background: var(--city-bg);
    color: var(--city-text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--city-bg); }
::-webkit-scrollbar-thumb {
    background: var(--city-scrollbar-thumb);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2A3A5E, #F0C96E); }

/* ===== GEOMETRIC UNDERLAY ===== */
.geo-underlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: var(--city-geo-opacity);
    transition: opacity 0.8s ease;
    background-image:
        linear-gradient(30deg, #DFA032 12%, transparent 12.5%, transparent 87%, #DFA032 87.5%),
        linear-gradient(150deg, #DFA032 12%, transparent 12.5%, transparent 87%, #DFA032 87.5%),
        linear-gradient(30deg, #DFA032 12%, transparent 12.5%, transparent 87%, #DFA032 87.5%),
        linear-gradient(150deg, #DFA032 12%, transparent 12.5%, transparent 87%, #DFA032 87.5%),
        linear-gradient(60deg, #DFA03255 25%, transparent 25.5%, transparent 75%, #DFA03255 75%),
        linear-gradient(60deg, #DFA03255 25%, transparent 25.5%, transparent 75%, #DFA03255 75%);
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

/* ===== GRAIN OVERLAY ===== */
.grain {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: var(--city-grain-opacity);
    transition: opacity 0.8s ease;
    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");
}

/* ===== STARFIELD ===== */
.starfield {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: var(--city-star-opacity);
    transition: opacity 0.8s ease;
}
.star-dot {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: starPulse var(--dur) ease-in-out infinite;
    animation-delay: var(--del);
}
@keyframes starPulse {
    0%, 100% { opacity: var(--min-o); transform: scale(1); }
    50% { opacity: var(--max-o); transform: scale(1.4); }
}

/* ===== AMBIENT GLOW ORBS ===== */
.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    mix-blend-mode: screen;
}
.orb-gold {
    background: rgba(223, 160, 50, 0.06);
    animation: orbFloat 20s ease-in-out infinite;
}
.orb-teal {
    background: rgba(20, 184, 166, 0.04);
    animation: orbFloat 25s ease-in-out infinite reverse;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.1); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

/* ===== CURSOR GLOW (wow factor) ===== */
.cursor-glow {
    position: fixed;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 160, 50, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    will-change: left, top;
}

/* ===== SECTION REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ===== HERO STAGGER ===== */
.hero-fade {
    opacity: 0;
    transform: translateY(30px);
    animation: heroReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-fade-1 { animation-delay: 0.2s; }
.hero-fade-2 { animation-delay: 0.4s; }
.hero-fade-3 { animation-delay: 0.6s; }
.hero-fade-4 { animation-delay: 0.8s; }
.hero-fade-5 { animation-delay: 1.0s; }
.hero-fade-6 { animation-delay: 1.2s; }
.hero-fade-7 { animation-delay: 1.4s; }
@keyframes heroReveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== GOLD LINE DIVIDER ===== */
.gold-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(223, 160, 50, 0.15), transparent);
    max-width: 700px;
    margin: 0 auto;
}

/* ===== COUNTDOWN BLOCK ===== */
.countdown-block {
    position: relative;
    background: rgba(15, 26, 51, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(223, 160, 50, 0.12);
}
.countdown-block::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(223, 160, 50, 0.2), transparent 50%, rgba(223, 160, 50, 0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cd-digit {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
    line-height: 1;
}

/* ===== GLASS CARD ===== */
.glass-card {
    position: relative;
    background: linear-gradient(145deg, rgba(15, 26, 51, 0.8), rgba(6, 11, 24, 0.9));
    border: 1px solid rgba(26, 39, 68, 0.8);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.glass-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent, rgba(223, 160, 50, 0.3)), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}
.glass-card:hover::before { opacity: 1; }
.glass-card:hover {
    transform: translateY(-6px);
    border-color: rgba(223, 160, 50, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 40px rgba(223, 160, 50, 0.05);
}

/* ===== 3D TILT CARD (wow factor) ===== */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
.tilt-card:hover {
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5), 0 0 50px rgba(223, 160, 50, 0.08);
}

/* ===== UNIFIED NAV ===== */
.city-nav-pill {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.city-nav-pill .nav-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--city-nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--city-nav-border);
    transition: background 0.6s ease, border-color 0.6s ease;
    border-radius: 9999px;
    padding: 4px 6px;
    overflow-x: auto;
    max-width: calc(100vw - 1.5rem);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.city-nav-pill .nav-inner::-webkit-scrollbar { display: none; }
.city-nav-pill a {
    color: var(--city-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 9999px;
    transition: all 0.3s ease;
    text-decoration: none;
    white-space: nowrap;
}
.city-nav-pill a:hover { color: var(--city-heading); }
.city-nav-pill a.nav-active {
    color: var(--city-heading);
    background: rgba(223, 160, 50, 0.15);
}
.day-mode .city-nav-pill a.nav-active {
    background: rgba(196, 132, 29, 0.15);
}
.city-nav-pill a.nav-active-teal { color: #fff; background: rgba(20, 184, 166, 0.15); }
.city-nav-pill a.nav-active-purple { color: #fff; background: rgba(139, 92, 246, 0.15); }
.city-nav-pill .nav-logo {
    color: var(--city-heading);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding: 6px 12px;
    text-decoration: none;
}

/* ===== SCROLL INDICATOR ===== */
.scroll-hint {
    animation: scrollBounce 2.5s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(10px); opacity: 0.8; }
}

/* ===== HADITH QUOTE ===== */
.hadith-border {
    border-image: linear-gradient(90deg, transparent, rgba(223, 160, 50, 0.15), transparent) 1;
}

/* ===== LIVE PULSE ===== */
.live-pulse {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.live-pulse::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #DFA032;
    animation: liveBlink 2s ease-in-out infinite;
}
@keyframes liveBlink {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px #DFA032; }
    50% { opacity: 0.4; box-shadow: none; }
}

/* ===== SHIMMER TEXT (wow factor) ===== */
.shimmer-text {
    background: linear-gradient(
        105deg,
        #DFA032 0%,
        #F0C96E 25%,
        #DFA032 50%,
        #F0C96E 75%,
        #DFA032 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== GLOW BUTTON ===== */
.btn-glow {
    position: relative;
    overflow: hidden;
}
.btn-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, rgba(223, 160, 50, 0.4), rgba(20, 184, 166, 0.4));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
    filter: blur(12px);
}
.btn-glow:hover::after {
    opacity: 1;
}

/* ===== PARTICLE SYSTEM ===== */
.particle {
    position: absolute;
    width: 3px; height: 3px;
    background: #DFA032;
    border-radius: 50%;
    opacity: 0;
    animation: particleRise var(--p-dur) ease-out infinite;
    animation-delay: var(--p-del);
}
@keyframes particleRise {
    0% { opacity: 0; transform: translateY(0) scale(0.5); }
    20% { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-120px) scale(0); }
}

/* ===== ANIMATED COUNTER ===== */
.counter-animate {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.counter-animate.counting {
    animation: counterPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes counterPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ===== FLOATING SHAPES (decorative) ===== */
.floating-diamond {
    position: absolute;
    border: 1px solid rgba(223, 160, 50, 0.06);
    border-radius: 3px;
    pointer-events: none;
    animation: floatDrift var(--float-dur, 20s) ease-in-out infinite;
    animation-delay: var(--float-del, 0s);
}
@keyframes floatDrift {
    0%, 100% { transform: rotate(var(--float-rot, 45deg)) translateY(0) translateX(0); }
    33% { transform: rotate(var(--float-rot, 45deg)) translateY(-20px) translateX(10px); }
    66% { transform: rotate(var(--float-rot, 45deg)) translateY(10px) translateX(-15px); }
}

/* ===== SECTION LABEL ===== */
.section-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(223, 160, 50, 0.5);
    margin-bottom: 1rem;
}

/* ===== FOOTER ===== */
.city-footer {
    border-top: 1px solid var(--city-border);
    padding: 3rem 1rem 2rem;
    transition: border-color 0.6s ease;
}
.city-footer a {
    color: var(--city-text-muted);
    font-size: 0.75rem;
    transition: color 0.3s ease;
    text-decoration: none;
}
.city-footer a:hover { color: var(--city-gold); }

/* ===== DAY/NIGHT TOGGLE ===== */
.sky-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 101;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--city-border);
    background: var(--city-nav-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: heroReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.sky-toggle:hover {
    transform: scale(1.1);
    border-color: var(--city-gold);
    box-shadow: 0 0 20px rgba(223, 160, 50, 0.15);
}
.sky-toggle:active { transform: scale(0.95); }
.sky-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.sky-toggle .icon-sun,
.sky-toggle .icon-moon { position: absolute; }
.sky-toggle .icon-sun {
    color: #C4841D;
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
.sky-toggle .icon-moon {
    color: #DFA032;
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
/* When in day mode, show sun, hide moon */
.day-mode .sky-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.day-mode .sky-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* ===== DAY MODE — SKYLINE GRADIENT ===== */
.day-mode .sky-gradient {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg,
        #87CEEB 0%,
        #B8E0F0 20%,
        #E8D8C4 50%,
        #F5EDE0 70%,
        #F5EDE0 100%
    );
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* Day mode: warm cursor glow */
.day-mode .cursor-glow {
    background: radial-gradient(circle, rgba(196, 132, 29, 0.06) 0%, transparent 70%);
}

/* Day mode: warm gold line */
.day-mode .gold-line {
    background: linear-gradient(90deg, transparent, rgba(196, 132, 29, 0.25), transparent);
}

/* Day mode: glass card adjustments */
.day-mode .glass-card {
    background: var(--city-card-bg);
    border-color: var(--city-card-border);
}
.day-mode .glass-card:hover {
    border-color: rgba(196, 132, 29, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 40px rgba(196, 132, 29, 0.08);
}

/* Day mode: countdown block */
.day-mode .countdown-block {
    background: rgba(232, 221, 208, 0.7);
    border-color: rgba(196, 132, 29, 0.2);
}

/* Day mode: section label */
.day-mode .section-label {
    color: rgba(196, 132, 29, 0.6);
}

/* Day mode: shimmer uses darker gold */
.day-mode .shimmer-text {
    background: linear-gradient(105deg, #8B5E0F 0%, #C4841D 25%, #8B5E0F 50%, #C4841D 75%, #8B5E0F 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}

/* Day mode: floating diamond darker */
.day-mode .floating-diamond {
    border-color: rgba(196, 132, 29, 0.1);
}

/* Day mode: orbs warmer */
.day-mode .orb-gold {
    background: rgba(196, 132, 29, 0.08);
}
.day-mode .orb-teal {
    background: rgba(13, 148, 136, 0.06);
}

/* Day mode: hadith border */
.day-mode .hadith-border {
    border-image: linear-gradient(90deg, transparent, rgba(196, 132, 29, 0.25), transparent) 1;
}

/* Day mode: live pulse */
.day-mode .live-pulse::before {
    background: #C4841D;
    box-shadow: 0 0 4px #C4841D;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .starfield, .shooting-star, .grain, .cursor-glow,
    .orb, .floating-diamond, .floating-shape { display: none !important; }
    .reveal { opacity: 1; transform: none; }
    .hero-fade { opacity: 1; transform: none; }
    .tilt-card { transform: none !important; }
}

/* ===== MOBILE RESPONSIVENESS ===== */
@media (max-width: 640px) {
    .city-nav-pill .nav-inner {
        gap: 1px;
        padding: 3px 4px;
    }
    .city-nav-pill a {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
    .city-nav-pill .nav-logo {
        padding: 5px 8px;
        font-size: 0.6875rem;
    }
}