/* rust.quest - Skeuomorphic Rust Tutorial Platform */
/* Colors: #1a1a2e (deep base), #4a90d9 (primary blue), #f5f0e8 (warm off-white), #e8b84b (accent gold), #6c757d (muted gray) */
/* Fonts: Inter (sans-grotesk), JetBrains Mono (monospace) */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
--deep-base:#1a1a2e;
--primary-blue:#4a90d9;
--warm-white:#f5f0e8;
--accent-gold:#e8b84b;
--muted-gray:#6c757d;
--dark-surface:#2a2a3e;
--darker-surface:#12121f;
}

html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',sans-serif;background:var(--deep-base);color:var(--warm-white);overflow-x:hidden;line-height:1.6}

/* Parallax Sections */
.parallax-section{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:4rem 2rem}

.parallax-bg{position:absolute;inset:0;z-index:0;will-change:transform}

/* City Skyline Background */
.city-skyline{position:absolute;bottom:0;left:0;right:0;height:300px;display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:0 2rem;opacity:0.12}
.city-skyline.city-mid{opacity:0.08;height:250px}
.city-skyline.city-far{opacity:0.06;height:200px}
.city-skyline.city-close{opacity:0.15;height:350px}

.building{background:var(--primary-blue);border-radius:2px 2px 0 0;flex-shrink:0}
.building.b1{width:40px;height:180px}
.building.b2{width:55px;height:240px}
.building.b3{width:35px;height:140px}
.building.b4{width:60px;height:200px}
.building.b5{width:30px;height:260px}
.building.b6{width:50px;height:160px}
.building.b7{width:45px;height:220px}
.building.b8{width:65px;height:190px}
.building.b9{width:38px;height:280px}
.building.b10{width:52px;height:170px}
.building.b11{width:42px;height:230px}
.building.b12{width:48px;height:150px}

/* Fade Reveal */
.fade-reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease}
.fade-reveal.visible{opacity:1;transform:translateY(0)}

/* Hero Section */
.hero-content{position:relative;z-index:1;text-align:center;max-width:800px}

.rust-logo-mark{margin-bottom:1.5rem}
.rust-logo-mark svg{filter:drop-shadow(0 0 20px rgba(232,184,75,0.3))}

.hero-title{font-size:4rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:0.5rem}
.hero-title .accent{color:var(--accent-gold)}

.hero-subtitle{font-size:1.25rem;color:var(--muted-gray);font-weight:300;margin-bottom:2.5rem}

/* Terminal / Code Editor (Skeuomorphic) */
.terminal-window{background:var(--darker-surface);border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08)}

.terminal-chrome{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(180deg,#2d2d42,#252538);border-bottom:1px solid rgba(255,255,255,0.06)}

.dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.dot.red{background:#ff5f57;box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2)}
.dot.yellow{background:#febc2e;box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2)}
.dot.green{background:#28c840;box-shadow:inset 0 -1px 2px rgba(0,0,0,0.2)}

.terminal-title{margin-left:auto;margin-right:auto;font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--muted-gray);opacity:0.7}

.terminal-body,.code-body{padding:1.25rem 1.5rem;font-family:'JetBrains Mono',monospace;font-size:0.875rem;line-height:1.8}

.terminal-line{white-space:nowrap}
.prompt{color:var(--accent-gold);font-weight:600}
.cmd{color:var(--warm-white)}
.compile{color:var(--accent-gold)}
.finished{color:var(--primary-blue)}
.running{color:#28c840}
.result{color:var(--accent-gold);font-weight:500}
.output{color:var(--muted-gray)}

.cursor.blink{animation:blink 1s step-end infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

.hero-terminal{margin-bottom:2.5rem;text-align:left;max-width:600px;margin-left:auto;margin-right:auto}

/* Code Syntax Highlighting */
.code-body pre{margin:0}
.code-body code{font-family:'JetBrains Mono',monospace;font-size:0.85rem;line-height:1.9;color:var(--warm-white)}
.kw{color:var(--primary-blue);font-weight:600}
.fn-name{color:var(--accent-gold)}
.str{color:#e06c75}
.comment{color:var(--muted-gray);font-style:italic}
.lifetime{color:#c678dd;font-weight:600}

/* CTA Button */
.cta-btn{display:inline-block;padding:14px 36px;border-radius:6px;font-family:'Inter',sans-serif;font-size:1rem;font-weight:600;text-decoration:none;transition:all 0.3s ease;cursor:pointer}
.cta-btn:not(.secondary){background:var(--accent-gold);color:var(--deep-base);box-shadow:0 4px 20px rgba(232,184,75,0.3)}
.cta-btn:not(.secondary):hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(232,184,75,0.4)}
.cta-btn.secondary{background:transparent;color:var(--primary-blue);border:2px solid var(--primary-blue)}
.cta-btn.secondary:hover{background:var(--primary-blue);color:var(--deep-base)}
.cta-btn.primary{margin-right:1rem}

/* Chapter Sections */
.chapter .chapter-header{position:relative;z-index:1;text-align:center;margin-bottom:3rem}
.chapter-number{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--accent-gold);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:0.5rem;padding:4px 16px;border:1px solid rgba(232,184,75,0.3);border-radius:20px}
.chapter h2{font-size:3rem;font-weight:700;letter-spacing:-0.02em;margin-bottom:0.5rem}
.chapter-desc{font-size:1.1rem;color:var(--muted-gray);max-width:500px;margin:0 auto}

.chapter-content{position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto}

/* Split Layout */
.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.split-layout.reverse{direction:rtl}
.split-layout.reverse>*{direction:ltr}

.code-panel .terminal-window{width:100%}

/* Visualization Panels */
.viz-panel{padding:2rem;background:rgba(26,26,46,0.8);border-radius:12px;border:1px solid rgba(74,144,217,0.15)}
.viz-title{font-size:1.1rem;font-weight:600;color:var(--primary-blue);margin-bottom:1.5rem;text-align:center}
.viz-caption{margin-top:1.25rem;font-size:0.9rem;color:var(--muted-gray);text-align:center}
.viz-caption code{font-family:'JetBrains Mono',monospace;color:var(--accent-gold);font-size:0.85rem}

/* SVG Viz containers */
.ownership-viz,.borrowing-viz,.lifetime-viz{width:100%;min-height:280px}
.ownership-viz svg,.borrowing-viz svg,.lifetime-viz svg{width:100%;height:auto}

/* Performance Section */
.perf-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;max-width:1100px;margin:0 auto}

.perf-card{background:var(--dark-surface);border-radius:12px;padding:2rem;border:1px solid rgba(255,255,255,0.06);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.perf-card-title{font-size:1.2rem;font-weight:600;margin-bottom:1.5rem;color:var(--warm-white)}

.perf-bar-container{display:flex;align-items:center;gap:12px;margin-bottom:1rem}
.perf-label{width:60px;font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--muted-gray);text-align:right}
.perf-bar-wrap{flex:1;height:24px;background:rgba(255,255,255,0.05);border-radius:4px;overflow:hidden}
.perf-bar{height:100%;border-radius:4px;width:0;transition:width 1.5s ease}
.rust-bar{background:linear-gradient(90deg,var(--accent-gold),#d4a23a)}
.c-bar{background:linear-gradient(90deg,var(--primary-blue),#3a7bc8)}
.go-bar{background:linear-gradient(90deg,#00ADD8,#0090b8)}
.java-bar{background:linear-gradient(90deg,#f89820,#d68018)}
.python-bar{background:linear-gradient(90deg,#3776AB,#2d5f87)}
.perf-value{width:50px;font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--muted-gray)}
.perf-caption{margin-top:0.5rem;font-size:0.8rem;color:var(--muted-gray);text-align:center}

/* Safety Card */
.safety-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.safety-item{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(74,144,217,0.08);border-radius:8px;border:1px solid rgba(74,144,217,0.15)}
.safety-item span:last-child{font-size:0.9rem;color:var(--warm-white)}
.check-icon{display:inline-block;width:28px;height:28px;border-radius:50%;border:2px solid var(--primary-blue);position:relative;flex-shrink:0}
.check-icon::after{content:'';position:absolute;left:7px;top:4px;width:8px;height:13px;border:solid var(--primary-blue);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Pulse border animation for ownership viz */
@keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(232,184,75,0.4)}50%{box-shadow:0 0 0 6px rgba(232,184,75,0)}}
.pulse-border{animation:pulse-border 2s ease infinite}

/* CTA Section */
.cta-content{position:relative;z-index:1;text-align:center;max-width:700px}
.cta-terminal{margin-bottom:2.5rem;text-align:left}
.cta-heading{font-size:2.5rem;font-weight:700;margin-bottom:1rem}
.cta-text{font-size:1.1rem;color:var(--muted-gray);margin-bottom:2rem;line-height:1.7}
.cta-buttons{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}

/* Footer */
.site-footer{position:absolute;bottom:2rem;left:0;right:0;text-align:center;z-index:1}
.site-footer p{font-size:0.85rem;color:var(--muted-gray);opacity:0.6}

/* Navigation Dots */
#nav-dots{position:fixed;right:2rem;top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:14px}
.nav-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);transition:all 0.3s ease;display:block}
.nav-dot:hover{background:rgba(232,184,75,0.4);border-color:var(--accent-gold)}
.nav-dot.active{background:var(--accent-gold);border-color:var(--accent-gold);box-shadow:0 0 8px rgba(232,184,75,0.4)}

/* Responsive */
@media(max-width:900px){
.split-layout{grid-template-columns:1fr;gap:2rem}
.split-layout.reverse{direction:ltr}
.perf-grid{grid-template-columns:1fr}
.hero-title{font-size:2.5rem}
.chapter h2{font-size:2rem}
#nav-dots{right:1rem;gap:10px}
.nav-dot{width:8px;height:8px}
.safety-grid{grid-template-columns:1fr}
}

@media(max-width:600px){
.parallax-section{padding:3rem 1rem}
.hero-title{font-size:2rem}
.terminal-body,.code-body{padding:1rem;font-size:0.75rem}
.cta-heading{font-size:1.8rem}
}