/* css/style.css — Gemini-Inspired Global Design System */

/* Import Cairo font */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ========================================
   🎨 Gemini Color System (CSS Variables)
======================================== */
:root {
    --g-bg: #fdfcfc;
    --g-surface: #ffffff;
    --g-text: #1f1f1f;
    --g-muted: #444746;
    --g-border: #e8eaed;
    --g-hover: #f0f4f9;
    --g-user-bubble: #f2f0f0;
    --g-send-ready: #d3e3fd;
    --g-send-text: #062e6f;
    --g-glow: #a9d1fb;
    --g-code-bg: #f5f5f5;
    --g-card-shadow: 0 1px 3px rgba(0,0,0,0.06);
    --g-card-shadow-hover: 0 4px 16px rgba(0,0,0,0.1);
    --g-radius: 16px;
    --g-radius-lg: 24px;
    --g-radius-pill: 28px;
    --g-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark {
    --g-bg: #131314;
    --g-surface: #1e1f20;
    --g-text: #e3e3e3;
    --g-muted: #c4c7c5;
    --g-border: #3c4043;
    --g-hover: #2a2b2d;
    --g-user-bubble: #333537;
    --g-send-ready: #1f3760;
    --g-send-text: #a8c7fa;
    --g-glow: #1d4068;
    --g-code-bg: #282a2c;
    --g-card-shadow: 0 1px 3px rgba(0,0,0,0.2);
    --g-card-shadow-hover: 0 4px 16px rgba(0,0,0,0.3);
}

/* ========================================
   🏗️ Base Reset & Body
======================================== */
* { box-sizing: border-box; }

body {
    font-family: 'Cairo', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--g-text);
    background-color: var(--g-bg);
    transition: background-color 0.3s, color 0.3s;
}

/* Light mode overrides for Tailwind pages */
html:not(.dark) body {
    color: var(--g-text);
    background-color: var(--g-bg);
}

html:not(.dark) h1, html:not(.dark) h2, html:not(.dark) h3, html:not(.dark) h4 {
    color: var(--g-text);
}

html:not(.dark) p, html:not(.dark) span, html:not(.dark) li, html:not(.dark) label {
    color: var(--g-muted);
}

html:not(.dark) a:not([class*="bg-"]):not([class*="btn"]) {
    color: #4285f4;
}

html.dark body {
    color: var(--g-text);
    background-color: var(--g-bg);
}

/* ========================================
   📜 Custom Scrollbar (Gemini-style)
======================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--g-muted); }

/* ========================================
   ✨ Animations
======================================== */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
.slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-up-sheet { animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideUpSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Gemini pulse animation */
@keyframes geminiPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
}

/* Card hover lift */
.card-hover {
    transition: transform var(--g-transition), box-shadow var(--g-transition);
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--g-card-shadow-hover);
}

/* ========================================
   🦴 Skeleton Loaders
======================================== */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton {
    background: var(--g-border);
    background-image: linear-gradient(90deg, var(--g-border) 0px, var(--g-hover) 40px, var(--g-border) 80px);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 12px;
}

/* ========================================
   🎨 Gradient Text (Gemini-style)
======================================== */
.gemini-gradient-text {
    background: linear-gradient(135deg, #4285f4, #ea4335, #fbbc05, #34a853);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradient 6s ease infinite;
}

/* ========================================
   🏠 Landing Page Premium Styles
======================================== */
.hero-gradient {
    background: linear-gradient(135deg, #020617 0%, #0f172a 25%, #1e3a5f 50%, #0f172a 75%, #020617 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

.hero-gradient-text {
    background: linear-gradient(135deg, #60a5fa, #3b82f6, #f59e0b, #fbbf24);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textGradient 6s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 0%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

@keyframes textGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ========================================
   🔲 Floating Shapes
======================================== */
.floating-shapes {
    position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}

.shape {
    position: absolute; border-radius: 50%; opacity: 0.06;
}

.shape-1 {
    width: 500px; height: 500px;
    background: radial-gradient(circle, #4285f4, transparent 70%);
    top: -10%; right: -10%;
    animation: floatShape1 20s ease-in-out infinite;
}

.shape-2 {
    width: 350px; height: 350px;
    background: radial-gradient(circle, #fbbc05, transparent 70%);
    bottom: -5%; left: -5%;
    animation: floatShape2 25s ease-in-out infinite;
}

.shape-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #ea4335, transparent 70%);
    top: 40%; left: 15%;
    animation: floatShape3 18s ease-in-out infinite;
}

.shape-4 {
    width: 150px; height: 150px;
    background: radial-gradient(circle, #34a853, transparent 70%);
    top: 20%; right: 20%;
    animation: floatShape4 22s ease-in-out infinite;
}

.shape-5 { width: 100px; height: 100px; background: radial-gradient(circle, #ea4335, transparent 70%); bottom: 30%; right: 10%; animation: floatShape5 16s ease-in-out infinite; }
.shape-6 { width: 250px; height: 250px; background: radial-gradient(circle, #4285f4, transparent 70%); top: 60%; left: 50%; animation: floatShape6 28s ease-in-out infinite; }
.shape-7 { width: 80px; height: 80px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; background: linear-gradient(135deg, #4285f4, #ea4335); top: 15%; left: 40%; opacity: 0.04; animation: floatShape7 14s ease-in-out infinite, morphShape 10s ease-in-out infinite; }

@keyframes floatShape1 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-40px, 30px) scale(1.1); } 66% { transform: translate(20px, -20px) scale(0.95); } }
@keyframes floatShape2 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -40px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(1.1); } }
@keyframes floatShape3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px); } }
@keyframes floatShape4 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 40px); } }
@keyframes floatShape5 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(20px, -30px) rotate(180deg); } }
@keyframes floatShape6 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, -30px) scale(1.15); } }
@keyframes floatShape7 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(30px, 40px) rotate(120deg); } }
@keyframes morphShape { 0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } }

/* ========================================
   📌 Header Scroll Effect
======================================== */
.header-scrolled {
    background: rgba(19, 19, 20, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

html:not(.dark) .header-scrolled {
    background: rgba(253, 252, 252, 0.9) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid var(--g-border);
}

/* ========================================
   🎞️ Scroll-Triggered Animations
======================================== */
.animate-on-scroll {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
.animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.animate-on-scroll:nth-child(4) { transition-delay: 0.3s; }
.animate-on-scroll:nth-child(5) { transition-delay: 0.15s; }
.animate-on-scroll:nth-child(6) { transition-delay: 0.25s; }

/* Scroll Indicator */
.scroll-indicator { animation: fadeInUp 1s ease 1.5s both; }
@keyframes fadeInUp { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes scrollDot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
.animate-scroll-dot { animation: scrollDot 1.8s ease-in-out infinite; }

/* Step Icons */
.step-icon { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.step-icon:hover { transform: scale(1.15) rotate(-5deg); }

/* ========================================
   🃏 Feature Cards — Gemini Glow
======================================== */
.feature-card {
    position: relative;
    background: var(--g-surface);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    transition: all var(--g-transition);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--g-card-shadow-hover);
    border-color: var(--g-muted);
}
.feature-card::before {
    content: ''; position: absolute; inset: 0; border-radius: var(--g-radius-lg);
    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(66, 133, 244, 0.06), transparent 40%);
    opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.feature-card:hover::before { opacity: 1; }

/* Stats Bar */
.stats-bar { position: relative; }
.stats-bar::before {
    content: ''; position: absolute; inset: -1px; border-radius: var(--g-radius-lg); padding: 1px;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.3), transparent 40%, transparent 60%, rgba(251, 188, 5, 0.3));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ========================================
   ☀️ Light Mode Overrides for Landing
======================================== */
html:not(.dark) #hero .hero-gradient {
    background: linear-gradient(135deg, #fdfcfc 0%, #f0f4f9 25%, #e8eaed 50%, #f0f4f9 75%, #fdfcfc 100%);
    background-size: 400% 400%; animation: gradientShift 15s ease infinite;
}
html:not(.dark) #hero h1 { color: var(--g-text); }
html:not(.dark) #hero p { color: var(--g-muted); }
html:not(.dark) #hero .text-slate-300, html:not(.dark) #hero .text-slate-400 { color: var(--g-muted); }
html:not(.dark) .shape { opacity: 0.03; }
html:not(.dark) #stats .stats-bar { background: var(--g-surface); border-color: var(--g-border); }
html:not(.dark) .stat-item .text-white, html:not(.dark) .stat-item .font-black { color: var(--g-text) !important; }
html:not(.dark) #features h3, html:not(.dark) #how-it-works h3 { color: var(--g-text); }
html:not(.dark) .feature-card p, html:not(.dark) #features .text-slate-400, html:not(.dark) #how-it-works .text-slate-400 { color: var(--g-muted); }
html:not(.dark) #cta .text-white { color: var(--g-text); }
html:not(.dark) #cta > div > div { background: var(--g-surface); border-color: var(--g-border); }
html:not(.dark) footer { border-color: var(--g-border); }
html:not(.dark) footer .text-slate-500 { color: var(--g-muted); }
html:not(.dark) footer a { background: var(--g-hover); border-color: var(--g-border); color: var(--g-muted); }
html:not(.dark) footer a:hover { background: var(--g-border); color: var(--g-text); }

/* Header buttons in light mode */
html:not(.dark) #main-header:not(.header-scrolled) #auth-login { color: #4285f4; background: rgba(66, 133, 244, 0.08); border-color: rgba(66, 133, 244, 0.2); }
html:not(.dark) #main-header:not(.header-scrolled) #theme-toggle { background: rgba(66, 133, 244, 0.08); color: #4285f4; }
html:not(.dark) #hero .bg-white\/10 { background: rgba(66, 133, 244, 0.08); border-color: rgba(66, 133, 244, 0.2); color: #4285f4; }
html:not(.dark) #hero .border-white\/30 { border-color: rgba(66, 133, 244, 0.3); color: #4285f4; }
html:not(.dark) #hero .border-white\/20 { border-color: rgba(66, 133, 244, 0.15); }
html:not(.dark) .scroll-indicator .border-white\/30 { border-color: rgba(66, 133, 244, 0.3); }
html:not(.dark) .scroll-indicator .bg-white\/60 { background: rgba(66, 133, 244, 0.5); }

/* ========================================
   🔘 Gemini-style Buttons
======================================== */
.btn-gradient {
    background: linear-gradient(135deg, #4285f4, #1a73e8);
    border: none; border-radius: var(--g-radius-pill);
    padding: 12px 28px; font-weight: 700; color: white;
    transition: all var(--g-transition); cursor: pointer;
    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
}
.btn-gradient:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(66, 133, 244, 0.4);
}
.btn-gradient:active { transform: translateY(0); }

/* ========================================
   🪟 Gemini Glass Effect
======================================== */
.glass {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
html.dark .glass {
    background: rgba(30, 31, 32, 0.6);
    border: 1px solid rgba(60, 64, 67, 0.3);
}

/* ========================================
   🔔 Bottom Navigation (Gemini-style)
======================================== */
.bottom-nav {
    background: var(--g-surface);
    border-top: 1px solid var(--g-border);
    box-shadow: 0 -1px 6px rgba(0,0,0,0.06);
}
.bottom-nav a, .bottom-nav button {
    color: var(--g-muted);
    transition: color var(--g-transition);
}
.bottom-nav a:hover, .bottom-nav button:hover,
.bottom-nav a.active, .bottom-nav button.active {
    color: #4285f4;
}

/* ========================================
   📱 Responsive
======================================== */
@media (max-width: 640px) {
    .shape-1 { width: 250px; height: 250px; }
    .shape-2 { width: 180px; height: 180px; }
    .shape-3, .shape-4, .shape-5, .shape-6, .shape-7 { display: none; }
}