/* ==========================================================================
   styles.css - shared chrome for kirankota.com
   Base tokens, atmospheric background, layout, banner/logo, footer.
   NOTE: `nav` is intentionally kept per-page (mobile padding differs).
   Page-specific rules and per-page overrides remain in each page's inline <style>.
   ========================================================================== */

:root { --ice: #f2fbff; --ice-1: #cdeefb; --ice-2: #8fd4ef; --ice-3: #2f96c0; --display: 'Chakra Petch', sans-serif; --body: 'Sora', sans-serif; --ice-0: #f2fbff; --ice-glow: #9df09f; --deep-0: #03070f; --deep-1: #061421; --deep-2: #0a2438; --deep-3: #103a55; --line: rgba(126, 224, 255, 0.18); --text: #dff4fb; --text-dim: #88b2c6; --frost: #aef3ff; --glow-rgb: 125, 240, 255; --shadow-rgb: 3, 7, 15; --panel-rgb: 6, 20, 33; --on-accent: var(--deep-0); --input-bg: rgba(3, 7, 15, 0.6); --heading-hi: #ffffff; --card-grad-1a: #0a2438; --card-grad-1b: #103a55; --card-grad-2a: #0c2a30; --card-grad-2b: #0a3a4a; --card-grad-3a: #102236; --card-grad-3b: #1a3a52; --card-grad-4a: #08202e; --card-grad-4b: #0e3348; --grain-opacity: 0.04; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--body); background: var(--deep-0); color: var(--text); overflow-x: hidden; position: relative; min-height: 100vh; width: 100%; }
.swatch-glow { color: var(--ice-glow) }
.bg-layer { position: fixed; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 50% at 70% -5%, rgba(var(--glow-rgb), 0.10), transparent 60%), radial-gradient(ellipse 60% 50% at 10% 110%, rgba(var(--glow-rgb), 0.08), transparent 55%), linear-gradient(165deg, var(--deep-1) 0%, var(--deep-0) 55%, var(--deep-0) 100%); }
.bg-grid { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 100% 80% at 50% 0%, #000 30%, transparent 80%); opacity: 0.5; }
.grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.shard { position: fixed; z-index: -1; background: linear-gradient(135deg, rgba(var(--glow-rgb),0.10), rgba(var(--glow-rgb),0.02)); border: 1px solid rgba(var(--glow-rgb),0.12); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); animation: float 18s ease-in-out infinite; backdrop-filter: blur(2px); }
.shard.s1 { width: 140px; height: 160px; top: 12%; right: 8%; animation-delay: 0s; }
.shard.s2 { width: 80px; height: 92px; top: 62%; left: 5%; animation-delay: -6s; opacity: 0.7; }
.shard.s3 { width: 50px; height: 58px; top: 30%; left: 14%; animation-delay: -11s; opacity: 0.5; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-28px) rotate(8deg); } }
a { text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; position: relative; }
.banner { font-family: var(--display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ice-0); display: flex; align-items: center; gap: 10px; }
.banner a { text-decoration: none; color: inherit; }
.logo { width: var(--logo-size, 120px); height: var(--logo-size, 120px); display: inline-block; vertical-align: middle; }
html[lang="zh"] body { --body: 'Sora', 'PingFang SC', 'Microsoft YaHei', sans-serif; }
footer { border-top: 1px solid var(--line); padding: 32px 0; display: flex; justify-content: space-between; align-items: center; color: var(--text-dim); font-size: 0.82rem; flex-wrap: wrap; gap: 16px; }