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

:root {
  --purple-border: rgba(180, 140, 255, 0.35);
  --purple-accent: rgba(160, 110, 255, 0.7);
  --glass-bg: rgba(80, 40, 140, 0.15);
  --text-primary: #f0eaff;
  --text-secondary: rgba(220, 200, 255, 0.7);
  --text-dim: rgba(180, 160, 220, 0.5);
}

body {
  min-height: 100vh;
  background: #050310;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#ascii-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.blob { position: fixed; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.blob-1 { width: 500px; height: 500px; background: rgba(100,40,220,0.2); top:-120px; left:-100px; }
.blob-2 { width: 400px; height: 400px; background: rgba(60,20,160,0.15); bottom:-80px; right:-80px; }

.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(120,80,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(120,80,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}

#splash {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #020208; cursor: pointer; transition: opacity 0.8s ease;
}
#splash.hidden { opacity: 0; pointer-events: none; }

.splash-name {
  font-family: 'Rajdhani', sans-serif; font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 600; letter-spacing: 0.12em;
  background: linear-gradient(90deg, #a855f7, #6366f1, #3b82f6);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 1rem; animation: splashPulse 3s ease-in-out infinite;
}
@keyframes splashPulse { 0%,100% { opacity: 0.85; } 50% { opacity: 1; } }

.splash-divider { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, rgba(160,110,255,0.8), transparent); margin-bottom: 1.2rem; }

.splash-prompt {
  font-family: 'Rajdhani', sans-serif; font-size: 12px; letter-spacing: 0.3em;
  text-transform: uppercase; color: rgba(160,130,255,0.5);
  animation: blink 1.8s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

#splash::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(2,2,8,0.8) 100%); pointer-events: none; }

.scene { perspective: 800px; z-index: 1; position: relative; padding: 2rem; }

.panel {
  width: min(560px, 90vw);
  background: var(--glass-bg);
  border: none;
  outline: 4px solid rgba(80, 120, 255, 0.2);
  outline-offset: 7px;
  border-radius: 20px;
  padding: 3rem 3.5rem;
  position: relative;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: 0 8px 60px rgba(80,30,200,0.3), 0 2px 20px rgba(140,80,255,0.2), 0 0 20px rgba(100,80,255,0.3), 0 0 40px rgba(80,120,255,0.15);
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out, box-shadow 0.3s ease;
  opacity: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.panel::before {
  content: ''; position: absolute; top: 0; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(220,180,255,0.9) 50%, transparent);
  animation: scanPulse 3s ease-in-out infinite;
}
@keyframes scanPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.panel-wrap { position: relative; display: inline-block; }

#beam-canvas { position: absolute; inset: -2px; border-radius: 22px; pointer-events: none; z-index: 2; }

.corner { position: absolute; width: 14px; height: 14px; border-color: var(--purple-accent); border-style: solid; z-index: 11; }
.corner-tl { top:12px; left:12px; border-width:2px 0 0 2px; border-radius:3px 0 0 0; }
.corner-tr { top:12px; right:12px; border-width:2px 2px 0 0; border-radius:0 3px 0 0; }
.corner-bl { bottom:12px; left:12px; border-width:0 0 2px 2px; border-radius:0 0 0 3px; }
.corner-br { bottom:12px; right:12px; border-width:0 2px 2px 0; border-radius:0 0 3px 0; }

.avatar {
  width: 90px; height: 90px; border-radius: 50%;
  border: 1px solid var(--purple-border);
  margin-bottom: 1.5rem;
  box-shadow: 0 0 24px rgba(120,60,255,0.4);
  object-fit: cover;
  object-position: center 30%;
}

h1 { font-family:'Outfit',sans-serif; font-size:clamp(2rem,5vw,2.8rem); font-weight:600; letter-spacing:0.04em; line-height:1.1; margin-bottom:0.4rem; min-height:1.2em; }

.subtitle { font-family:'Outfit',sans-serif; font-size:13px; letter-spacing:0.1em; color:var(--purple-accent); margin-bottom:1.8rem; }

.divider { width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--purple-border), transparent); margin-bottom:1.8rem; }

.typewriter-wrap { font-size:15px; line-height:1.75; color:var(--text-secondary); margin-bottom:2rem; min-height:1.75em; display:flex; align-items:center; justify-content:center; }
#typewriter-text { display:inline; }

.cursor { display:inline-block; width:2px; height:1em; background:var(--purple-accent); margin-left:2px; vertical-align:middle; animation:cursorBlink 0.8s step-end infinite; }
@keyframes cursorBlink { 0%,100% { opacity:1; } 50% { opacity:0; } }

.links { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.link-btn { font-family:'Rajdhani',sans-serif; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; padding:10px 22px; border-radius:8px; text-decoration:none; transition:all 0.25s; }
.link-btn-primary { background:rgba(120,70,240,0.4); border:1px solid rgba(160,110,255,0.5); color:var(--text-primary); }
.link-btn-primary:hover { background:rgba(140,90,255,0.55); box-shadow:0 0 20px rgba(120,70,240,0.35); }
.link-btn-ghost { background:transparent; border:1px solid var(--purple-border); color:var(--text-secondary); }
.link-btn-ghost:hover { background:rgba(100,60,200,0.15); border-color:var(--purple-accent); color:var(--text-primary); }