/* nonri.xyz */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: linear-gradient(180deg, #1e1b4b, #312e81); color: #e2e8f0; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.7; min-height: 100vh; overflow-x: hidden; position: relative; }
.horizon-line { position: fixed; top: 50vh; left: 0; width: 100%; height: 1px; background: #818cf8; box-shadow: 0 0 30px rgba(129, 140, 248, 0.5); z-index: 0; pointer-events: none; }
.hero { text-align: center; padding: 8rem 2rem 6rem; position: relative; }
.brand { font-family: 'Sora', sans-serif; font-weight: 300; font-size: clamp(2.5rem, 6vw, 3.5rem); position: relative; z-index: 1; }
.coord { font-family: 'Fira Code', monospace; font-size: 0.55rem; color: #c084fc; opacity: 0.5; display: block; margin-bottom: 0.5rem; }
.dim-label { font-family: 'Fira Code', monospace; font-size: 0.6rem; color: #818cf8; opacity: 0.4; margin-top: 1rem; }
.float-obj { position: absolute; border-radius: 50%; background: #c084fc; opacity: 0.3; }
.float-obj.sphere { border-radius: 50%; }
.float-obj.cube { border-radius: 0; transform: rotate(45deg); }
.float-obj.far { width: 30px; height: 30px; transform: scale(0.5); opacity: 0.2; top: 20%; right: 15%; }
.float-obj.cube.near { width: 40px; height: 40px; transform: rotate(45deg) scale(1.2); opacity: 0.4; bottom: 20%; left: 10%; }
.float-obj.mid { width: 24px; height: 24px; transform: scale(0.8); right: 20%; top: 10%; }
.float-obj.large { width: 80px; height: 80px; opacity: 0.25; left: 50%; transform: translateX(-50%); top: 20%; box-shadow: 0 0 40px rgba(124, 58, 237, 0.3); background: #7c3aed; }
@keyframes drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
.drift { animation: drift 6s ease-in-out infinite; }
.dream { max-width: 480px; margin: 0 auto; padding: 2rem 2rem 4rem; position: relative; }
.dream-panel { background: #1e1e3f; padding: 2rem; margin-bottom: 2rem; position: relative; }
.dream-panel.tilt-right { transform: perspective(600px) rotateX(3deg) rotateY(2deg); }
.dream-panel.tilt-left { transform: perspective(600px) rotateX(2deg) rotateY(-3deg); }
.panel-text { font-size: 0.8rem; opacity: 0.8; }
.deep { text-align: center; padding: 6rem 2rem; position: relative; min-height: 200px; }
.deep-text { font-family: 'Sora', sans-serif; font-weight: 300; font-size: clamp(1.2rem, 3vw, 1.8rem); color: #f0abfc; position: relative; z-index: 1; }
.wake { text-align: center; padding: 4rem 2rem 6rem; }
.wake-brand { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 1rem; opacity: 0.4; margin-top: 0.5rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }