/* koomimi.com - Y2K Futurism Chrome */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#1A1A2E;color:#D0D0E0;font-family:'Lexend',sans-serif;font-size:15px;line-height:1.7;overflow-x:hidden}

/* Iridescent background */
body::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(ellipse at 30% 20%,rgba(255,105,180,0.08),transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(0,229,255,0.06),transparent 50%),radial-gradient(ellipse at 50% 50%,rgba(179,128,255,0.05),transparent 40%);z-index:0;pointer-events:none}

/* Loading screen */
#loading-screen{position:fixed;inset:0;z-index:9999;background:#1A1A2E;display:flex;align-items:center;justify-content:center;transition:opacity 0.4s ease}
#loading-screen.hidden{opacity:0;pointer-events:none}
#chrome-bubble{width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#FFFFFF,#C0C0D8 40%,#4A4A6A 80%,#1A1A2E);display:flex;align-items:center;justify-content:center;transform:scale(0);animation:bubbleGrow 0.6s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards;overflow:hidden}
#bubble-text{font-family:'Orbitron',sans-serif;font-weight:700;font-size:24px;letter-spacing:0.08em;background:linear-gradient(135deg,#FFFFFF,#C0C0D8,#4A4A6A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transform:rotateY(90deg);animation:textSpin 0.6s ease-out 0.7s forwards}
@keyframes bubbleGrow{0%{transform:scale(0)}70%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes textSpin{from{transform:rotateY(90deg)}to{transform:rotateY(0deg)}}
@keyframes bubblePop{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(0);opacity:0}}

/* Site content */
#site-content{position:relative;z-index:1;opacity:0;transition:opacity 0.4s ease}
#site-content.visible{opacity:1}

/* Navigation */
#main-nav{position:sticky;top:0;z-index:100;display:flex;justify-content:center;padding:16px 24px;background:rgba(26,26,46,0.8);backdrop-filter:blur(12px)}
.nav-pills{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.nav-pill{font-family:'Share Tech',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:#A0A0C0;text-decoration:none;padding:8px 20px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.12);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.1);transition:all 0.2s ease;opacity:0;transform:translateY(-20px)}
.nav-pill.visible{opacity:1;transform:translateY(0)}
.nav-pill:hover{background:linear-gradient(180deg,rgba(255,255,255,0.15),rgba(255,255,255,0.04));color:#FFFFFF;box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(0,0,0,0.15),0 0 15px rgba(179,128,255,0.15)}

/* Bento grid */
.bento-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;max-width:1200px;margin:0 auto;padding:16px 24px}
.grid-cell{border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,0.12),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.15);box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.1);padding:32px;position:relative;overflow:hidden;transition:transform 0.2s ease,box-shadow 0.2s ease}
.grid-cell:hover{transform:scale(1.02);box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),inset 0 -1px 0 rgba(0,0,0,0.15),0 4px 20px rgba(179,128,255,0.1)}

/* Cell tints */
.grid-cell[data-tint="pink"]{background:linear-gradient(145deg,rgba(255,105,180,0.08),rgba(255,255,255,0.02))}
.grid-cell[data-tint="lavender"]{background:linear-gradient(145deg,rgba(179,128,255,0.08),rgba(255,255,255,0.02))}
.grid-cell[data-tint="cyan"]{background:linear-gradient(145deg,rgba(0,229,255,0.08),rgba(255,255,255,0.02))}

/* Morph animation */
.morph-cell{opacity:0;border-radius:50%;width:40px;height:40px;transform:scale(0.5)}
.morph-cell.morphed{opacity:1;border-radius:20px;width:auto;height:auto;transform:scale(1);transition:all 0.5s ease-out}

/* Span classes */
.span-2{grid-column:span 2}
.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-6{grid-column:span 6}

/* Chrome text */
.chrome-text{font-family:'Orbitron',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;background:linear-gradient(135deg,#FFFFFF,#C0C0D8,#FFFFFF,#4A4A6A);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:chromeShift 4s ease-in-out infinite}
@keyframes chromeShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* Headings */
h1.chrome-text{font-size:56px}
.section-heading{font-size:32px;margin-bottom:16px}

/* Hero */
.hero-cell{text-align:center;padding:60px 32px;min-height:50vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.hero-tagline{font-family:'Lexend',sans-serif;font-size:17px;color:#D0D0E0;max-width:400px}

/* Chrome bubbles */
.chrome-bubble-deco{border-radius:50%;background:radial-gradient(circle at 30% 30%,#FFFFFF,#C0C0D8 40%,#4A4A6A 80%,#1A1A2E);position:absolute;pointer-events:none;opacity:0.4}
.bubble-1{width:80px;height:80px;top:20px;left:40px}
.bubble-2{width:50px;height:50px;bottom:40px;right:60px}
.bubble-3{width:30px;height:30px;top:40%;left:15%}
.bubble-4{width:60px;height:60px;top:20px;right:40px}
.bubble-5{width:40px;height:40px;bottom:30px;left:50px}
.bubble-small{width:40px;height:40px;bottom:16px;right:16px}
.bubble-gallery{width:100px;height:100px;top:50%;left:50%;transform:translate(-50%,-50%)}
.bubble-gallery-sm{width:50px;height:50px;top:30%;left:30%}

/* CD disc */
.cd-disc{border-radius:50%;background:conic-gradient(from 0deg,rgba(255,105,180,0.3),rgba(179,128,255,0.3),rgba(0,229,255,0.3),rgba(255,0,255,0.3),rgba(255,105,180,0.3));position:relative}
.cd-disc::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;background:#1A1A2E;transform:translate(-50%,-50%)}
.cd-disc-hero{width:80px;height:80px;margin:0 auto}
.cd-disc-section{width:60px;height:60px;margin:0 auto 12px}
.cd-disc-gallery{width:80px;height:80px}
.cd-disc-contact{width:60px;height:60px;position:absolute;top:16px;left:16px}
.cd-disc:hover{animation:discSpin 2s linear infinite}
@keyframes discSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Iridescent ring */
.iridescent-ring{width:80px;height:80px;border-radius:50%;border:4px solid transparent;background-image:conic-gradient(from 0deg,#FF69B4,#B380FF,#00E5FF,#FF00FF,#FF69B4);background-origin:border-box;background-clip:border-box;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),black calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),black calc(100% - 4px))}

/* Interface labels */
.interface-label{font-family:'Share Tech',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:0.1em;color:#A0A0C0}

/* Features */
.feature-icon{margin-bottom:16px}
h3.chrome-text{font-size:18px;margin-bottom:8px}

/* Specs */
.spec-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.spec-list li{font-size:14px;color:#D0D0E0;display:flex;gap:12px;align-items:baseline}
.spec-list li .interface-label{min-width:100px;flex-shrink:0}

/* Color swatches */
.color-swatches{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.swatch{height:80px;border-radius:12px;display:flex;align-items:flex-end;justify-content:center;padding:8px}

/* Gallery */
.gallery-visual{height:160px;display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}
.gallery-item{text-align:center}

/* Contact */
.contact-cell{text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.chrome-btn{font-family:'Share Tech',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:#FFFFFF;padding:12px 28px;border-radius:999px;border:1px solid rgba(255,255,255,0.2);background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.02));box-shadow:inset 0 1px 0 rgba(255,255,255,0.3),inset 0 -1px 0 rgba(0,0,0,0.1);cursor:pointer;transition:all 0.2s}
.chrome-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,0.2),rgba(255,255,255,0.06));box-shadow:inset 0 1px 0 rgba(255,255,255,0.4),0 0 20px rgba(179,128,255,0.2)}
.chrome-btn-secondary{color:#A0A0C0;border-color:rgba(255,255,255,0.1)}

/* Footer */
#footer{text-align:center;padding:32px 24px;border-top:1px solid rgba(255,255,255,0.05)}

/* Sparkle container */
#sparkle-container{position:fixed;inset:0;pointer-events:none;z-index:9998}
.sparkle{position:absolute;width:4px;height:4px;background:currentColor;transform:rotate(45deg);pointer-events:none;animation:sparkleFade 0.4s ease-out forwards}
@keyframes sparkleFade{0%{opacity:1;transform:rotate(45deg) scale(1)}100%{opacity:0;transform:rotate(45deg) scale(0)}}

/* Responsive */
@media(max-width:768px){
.bento-grid{grid-template-columns:repeat(2,1fr)}
.span-2,.span-3,.span-4,.span-6{grid-column:span 2}
h1.chrome-text{font-size:32px}
.section-heading{font-size:24px}
.hero-cell{min-height:40vh;padding:40px 16px}
.color-swatches{grid-template-columns:1fr}
}
@media(max-width:480px){
.bento-grid{grid-template-columns:1fr;padding:12px}
.span-2,.span-3,.span-4,.span-6{grid-column:span 1}
}