:root {
    --primary-color: #f4ebee;
    --gray-100: #e5e5e5;
    --gray-200: #c8c8c8;
    --gray-300: #9a9a9a;
    --gray-400: #6b6b6b;
    --gray-500: #3a3a3a;
    --gray-600: #1f1f1f;
    --gray-700: #141414;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
body:not(.touch-device) { cursor: none; }
body:not(.touch-device), body:not(.touch-device) * { cursor: none !important; }

.custom-cursor { position: fixed; width: 40px; height: 40px; background: url('assets/cursor.png') no-repeat center center; background-size: contain; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); display: block; }
body { background-color: #000; color: #fff; overflow-x: hidden; min-height: 100vh; }
.hidden { display: none !important; }
.page-scroll { position: relative; z-index: 10; width: 100%; }

.hero-section { min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; padding: 40px 20px; background-image: url('assets/background.jpg'); background-size: cover; background-position: center; }
.hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 60%, #000 100%); z-index: 0; pointer-events: none; }
.container { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; min-height: 332px; z-index: 2; }
#profile-block { position: relative; width: 820px; max-width: 90vw; min-height: 332px; background: rgba(0, 0, 0, 0); border: 1px solid rgba(255, 255, 255, 0.15); padding: 20px; border-radius: 12px; display: flex; flex-direction: column; gap: 15px; backdrop-filter: blur(10px); transition: transform 0.5s ease-out; }
.profile-header { display: flex; align-items: flex-start; gap: 15px; }
.profile-container { position: relative; width: 150px; height: 150px; }
.profile-container::after { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 50%; background: radial-gradient(circle at 10px 10px, var(--primary-color) 10%, transparent 15%); animation: orbit 3s linear infinite; z-index: -1; filter: blur(1px); }
.profile-picture { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; cursor: pointer; }
.profile-info { flex: 1; display: flex; flex-direction: column; }
.name-and-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }

@font-face { font-family: 'Angel Wish'; src: url('assets/Angel_wish.ttf') format('truetype'); }
#profile-name { font-family: 'Angel Wish', sans-serif; font-size: 32px; font-weight: bold; letter-spacing: 3px; color: #fff; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); }
#profile-bio { color: rgba(255, 255, 255, 0.8); font-size: 18px; line-height: 1.5; margin-bottom: 10px; min-height: 28px; font-family: 'Courier New', monospace; }
.bio-separator { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); margin: 20px 0; }
.profile-footer { display: flex; flex-direction: column; gap: 5px; width: 100%; margin-top: auto; }

.visitor-counter { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.1); padding: 8px 15px; border-radius: 20px; font-size: 14px; align-self: flex-start; position: relative; font-family: 'Courier New', monospace; }
.visitor-icon { width: 18px; height: 18px; color: white; }
.visitor-counter .tooltip { visibility: hidden; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background: #000; border: 1px solid var(--gray-500); padding: 5px 10px; border-radius: 4px; font-size: 11px; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
.visitor-counter:hover .tooltip { visibility: visible; opacity: 1; }

.social-links { display: flex; justify-content: center; gap: 12px; width: 100%; }
.social-icon { width: 36px; height: 36px; object-fit: contain; transition: transform 0.3s; filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); }
.social-icon:hover { transform: scale(1.3); }

.scroll-indicator { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.5); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; animation: bounce 2s infinite; z-index: 100; pointer-events: none; transition: opacity 0.3s ease; font-family: 'Courier New', monospace; }
.scroll-indicator svg { width: 18px; height: 18px; }

.spacer { height: 50vh; width: 100%; background-color: #000; pointer-events: none; }

.bottom-custom-section { width: 100%; display: flex; justify-content: center; padding: 50px 20px 200px; min-height: 150vh; background-color: #000; }
.bottom-layout { display: flex; align-items: flex-start; gap: 40px; width: 820px; max-width: 90vw; position: relative; }
.left-side { flex-shrink: 0; width: 240px; height: max-content; }
.left-card { background: #0a0a0a; border: 1px solid var(--gray-600); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; }
.left-card:hover { border-color: var(--gray-400); }
.card-pfp { width: 130px; height: 130px; object-fit: cover; border-radius: 12px; border: 1px solid var(--gray-500); margin-bottom: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); align-self: center; }
.left-card h3 { font-family: 'Angel Wish', sans-serif; font-size: 24px; color: #fff; letter-spacing: 2px; margin-bottom: 4px; }
.left-card > p { font-size: 12px; color: var(--gray-400); text-transform: uppercase; }

.right-lines { flex: 1; display: flex; flex-direction: column; gap: 35px; min-width: 0; }
.list-block { display: flex; flex-direction: column; }
.block-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dot { width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; box-shadow: 0 0 8px rgba(244, 235, 238, 0.4); }
.block-header h2 { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gray-100); }
.list-block p { font-size: 14px; line-height: 1.7; color: #d1d5db; white-space: pre-line; }
.list-block > p[style] { margin-top: -5px; margin-bottom: 8px !important; }

.mini-tags span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--gray-200); padding: 5px 12px; border: 1px solid var(--gray-600); border-radius: 6px; background: #050505; transition: all 0.2s; }
.mini-tags span:hover { border-color: var(--gray-400); color: #fff; transform: translateY(-1px); }
.mini-tags span img { width: 14px; height: 14px; object-fit: contain; display: block; }

.projects-grid { display: flex; flex-direction: column; gap: 20px; }
.project-item { display: flex; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--gray-700); }
.project-item:last-child { border-bottom: none; padding-bottom: 0; }
.project-year { font-size: 11px; color: var(--gray-500); letter-spacing: 2px; min-width: 40px; padding-top: 3px; font-family: 'Courier New', monospace; }
.project-info h3 { font-size: 15px; color: var(--gray-100); margin-bottom: 6px; font-weight: 600; }
.project-info p { font-size: 13px; color: var(--gray-400); line-height: 1.6; white-space: pre-line; }

.contact-links { display: flex; flex-direction: column; gap: 12px; }
.contact-links a { display: flex; align-items: center; justify-content: flex-start; gap: 20px; color: var(--gray-300); text-decoration: none; font-size: 14px; padding: 10px 14px; border-radius: 6px; background: #050505; border: 1px solid transparent; transition: all 0.2s; }
.contact-links a span { font-size: 11px; color: var(--gray-500); text-transform: uppercase; font-family: 'Courier New', monospace; width: 70px; flex-shrink: 0; display: inline-block; }

.page-footer { padding: 40px 20px; text-align: center; color: var(--gray-500); font-size: 11px; letter-spacing: 2px; border-top: 1px solid var(--gray-600); font-family: 'Courier New', monospace; }

#start-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 100; cursor: pointer; }
#start-screen.hidden { display: none; }
#start-text { font-size: 24px; color: #fff; text-align: center; font-family: 'Courier New', monospace; }

@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }
@keyframes orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fast-orbit { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.profile-container.fast-orbit::after { animation: fast-orbit 0.5s linear forwards; }
.glitch { animation: glitch 0.2s ease-in-out; }
@keyframes glitch { 0% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); } }

@media (max-width: 768px) {
    .hero-section { min-height: 100vh; padding-bottom: 60px; }
    .profile-header { flex-direction: column; align-items: center; gap: 10px; text-align: center; }
    #profile-name { font-size: 24px; }
    .bottom-layout { flex-direction: column; gap: 30px; }
    .left-side { width: 100%; }
    .project-item, .contact-links a { flex-direction: column; align-items: flex-start; gap: 4px; }
    .bottom-custom-section { padding: 40px 20px 80px; min-height: auto; }
    .spacer { height: 50vh; }
    .custom-cursor { display: none !important; }
}