/* quietjoon.net -- Glassmorphism Frost Garden */
:root {
    --deep-violet: #1B1145;
    --midnight-teal: #0F2B3C;
    --plum: #2D1B4E;
    --lavender: #6C63FF;
    --rose: #FF6B9D;
    --seafoam: #4ECDC4;
    --lilac: #C9B1FF;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 16px; line-height: 1.85; color: rgba(255,255,255,0.7); overflow-x: hidden; background: var(--deep-violet); }

/* Aurora background */
.aurora-bg {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 40% 60%, var(--deep-violet) 0%, var(--midnight-teal) 50%, var(--plum) 100%);
    background-size: 200% 200%;
    animation: aurora-shift 30s ease-in-out infinite;
    z-index: 0;
}
@keyframes aurora-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Color orbs */
.orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 1; opacity: 0; }
.orb-lavender { width: 350px; height: 350px; background: radial-gradient(circle, rgba(108,99,255,0.6) 0%, transparent 70%); top: 20%; left: 30%; animation: drift-1 22s ease-in-out infinite; }
.orb-rose { width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,107,157,0.5) 0%, transparent 70%); top: 10%; right: 15%; animation: drift-2 28s ease-in-out infinite; }
.orb-seafoam { width: 320px; height: 320px; background: radial-gradient(circle, rgba(78,205,196,0.5) 0%, transparent 70%); bottom: 20%; left: 10%; animation: drift-3 35s ease-in-out infinite; }
.orb-lilac { width: 240px; height: 240px; background: radial-gradient(circle, rgba(201,177,255,0.4) 0%, transparent 70%); bottom: 30%; right: 25%; animation: drift-4 19s ease-in-out infinite; }

.orb.visible { opacity: 1; transition: opacity 1.5s ease-out; }

@keyframes drift-1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(40px, -30px); } }
@keyframes drift-2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-50px, 20px); } }
@keyframes drift-3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -40px); } }
@keyframes drift-4 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, 30px); } }

/* Bokeh particles */
.bokeh-field { position: fixed; inset: 0; pointer-events: none; z-index: 2; }
.bokeh {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
    opacity: 0;
    animation: bokeh-drift 30s ease-in-out infinite;
}
@keyframes bokeh-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, -15px); } }

/* Refraction line */
.refraction-line { position: fixed; top: 40vh; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.06); z-index: 3; pointer-events: none; }

/* Glass garden */
.glass-garden { position: relative; z-index: 4; padding: 0 24px 50vh; }

.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 40px;
    max-width: 520px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.1);
    opacity: 0;
    filter: blur(8px);
    transition: opacity 1.2s ease-out, filter 1.2s ease-out;
}
.glass-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0.3), transparent);
    border-radius: 20px 20px 0 0;
}
.glass-panel.visible { opacity: 1; filter: blur(0); }

.panel-1 { margin: 100vh auto 0; text-align: center; max-width: 480px; }
.panel-2 { margin: 200px 0 0 15%; max-width: 580px; }
.panel-3 { margin: 200px 0 0 25%; max-width: 380px; }
.panel-pair { display: flex; gap: 40px; margin: 200px auto 0; max-width: 600px; justify-content: center; flex-wrap: wrap; }
.panel-4a, .panel-4b { max-width: 280px; flex: 1 1 240px; }
.panel-5 { margin: 200px auto 0; text-align: center; max-width: 360px; }

.panel-heading { font-family: 'DM Sans', sans-serif; font-weight: 500; font-size: 38px; color: rgba(255,255,255,0.9); letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 12px; }
.panel-heading-sm { font-size: 28px; }
.panel-sub { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 16px; color: rgba(255,255,255,0.5); }
.panel-body { color: rgba(255,255,255,0.7); }
.panel-meta { font-family: 'IBM Plex Mono', monospace; font-weight: 300; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); display: block; margin-bottom: 12px; }
.panel-timestamp { margin-top: 8px; margin-bottom: 0; }

.void-end { height: 50vh; position: relative; z-index: 1; }

@media (max-width: 768px) {
    .glass-panel { max-width: 100%; }
    .panel-2, .panel-3 { margin-left: auto; margin-right: auto; }
    .panel-heading { font-size: 28px; }
    .panel-pair { flex-direction: column; align-items: center; }
    .panel-4a, .panel-4b { max-width: 100%; }
    .orb { display: block; }
}