/* ============================================================
   KATA SAI KRANTHU REDDY – Advanced AI Control Room CSS
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --bg-main: #04040a;
  --bg-card: rgba(12, 12, 22, 0.75);
  --bg-nav: rgba(4, 4, 10, 0.85);
  --neon: #00f3ff;
  --neon-dim: rgba(0, 243, 255, 0.2);
  --purple: #b53cff;
  --purple-dim: rgba(181, 60, 255, 0.2);
  --green: #00ff9d;
  --green-dim: rgba(0, 255, 157, 0.2);
  --warning: #ffb800;
  --danger: #ff003c;
  --text-main: #ffffff;
  --text-muted: #cbd5e1;
  --text-dim: rgba(255, 255, 255, 0.6);
  --border: rgba(255, 255, 255, 0.12);
  --glow-cyan: 0 0 15px rgba(0, 243, 255, 0.5);
  --glow-purple: 0 0 15px rgba(181, 60, 255, 0.5);
  --glow-green: 0 0 15px rgba(0, 255, 157, 0.5);
  --glow-danger: 0 0 15px rgba(255, 0, 60, 0.5);
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- Global Reset & Cursor ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }

/* Hide default cursor on desktop, show it on touch if needed, but we use custom dot */
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  overflow-x: hidden;
  line-height: 1.6;
  cursor: none;
}

/* Disable custom cursor on touch/mobile devices for better UX */
@media (pointer: coarse), (max-width: 991px) {
  body { cursor: auto !important; }
  .cursor-dot, .cursor-trail { display: none !important; opacity: 0 !important; visibility: hidden !important; }
  a, button, input, textarea, .magnetic-btn, .cursor-pointer { cursor: auto !important; }
}

/* Prevent avatar-root from blocking the loader */
body.booting #avatar-root {
  pointer-events: none !important;
}

a, button, input, textarea, .magnetic-btn, .cursor-pointer { cursor: none !important; }

/* Typography */
.font-orbitron { font-family: 'Orbitron', sans-serif; letter-spacing: 1px; }
.font-fira { font-family: 'Fira Code', monospace; }
.font-inter { font-family: 'Inter', sans-serif; }
.neon-text { color: var(--neon); text-shadow: var(--glow-cyan); }
.text-neon { color: var(--neon); }
.text-purple { color: var(--purple); }
.neon-link { color: var(--neon); text-decoration: none; font-weight: 500; transition: var(--transition); }
.neon-link:hover { color: #fff; text-shadow: var(--glow-cyan); }

/* ---------- Custom Glowing Cursor ---------- */
.cursor-dot {
  position: fixed; width: 6px; height: 6px; background: var(--neon); border-radius: 50%;
  pointer-events: none; z-index: 10000; transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--neon); transition: width 0.2s, height 0.2s, background 0.2s;
}
.cursor-trail {
  position: fixed; width: 34px; height: 34px; border: 1px solid var(--neon-dim); border-radius: 50%;
  pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s; box-shadow: var(--glow-cyan);
}
.cursor-hover .cursor-dot { width: 10px; height: 10px; background: #fff; box-shadow: 0 0 15px #fff; }
.cursor-hover .cursor-trail { width: 45px; height: 45px; border-color: var(--neon); background: rgba(0, 243, 255, 0.1); }

/* ---------- Scroll Progress Bar ---------- */
#scroll-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.05); z-index: 2000; }
#scroll-progress-bar { height: 100%; background: var(--neon); width: 0%; box-shadow: var(--glow-cyan); }

/* ---------- Text Muted Overrides ---------- */
.text-muted { color: var(--text-muted) !important; opacity: 0.9 !important; }
.small.text-muted, .font-fira.text-muted { opacity: 1 !important; color: #cbd5e1 !important; }

/* ---------- Scrollbar (CSS overrides) ---------- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-main); border-left: 1px solid var(--border); }
::-webkit-scrollbar-thumb { background: rgba(0, 243, 255, 0.3); border-radius: 4px; border: 1px solid var(--neon-dim); }
::-webkit-scrollbar-thumb:hover { background: var(--neon); }

/* ---------- Advanced Loading Screen ---------- */
#loader-screen {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  background: #020204; z-index: 1000000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  pointer-events: auto; /* Allow clicks during boot */
  transition: opacity 0.5s ease;
}
#loader-screen.hidden {
  pointer-events: none;
  opacity: 0;
}
.loader-content { max-width: 600px; width: 90%; }
.typing-container { font-size: 1.5rem; color: var(--neon); height: 35px; }
.cursor { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.loader-progress { background: rgba(255, 255, 255, 0.05); border-radius: 2px; overflow: hidden; }

/* ---------- Glitch Easter Egg Overlay ---------- */
#glitch-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(10, 0, 0, 0.95); z-index: 10000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  backdrop-filter: blur(5px) contrast(1.2);
}
.glitch-text {
  font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; position: relative;
  text-shadow: 2px 0 var(--neon), -2px 0 var(--purple); animation: glitch-anim 2s infinite linear alternate-reverse;
}
.glitch-text::before, .glitch-text::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
  background: rgba(10, 0, 0, 0.95); clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
.glitch-text::before { transform: translate(-4px, 2px); text-shadow: -2px 0 var(--neon); animation: glitch-anim-2 3s infinite linear alternate-reverse; }
.glitch-text::after { transform: translate(4px, -2px); text-shadow: 2px 0 var(--purple); clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); animation: glitch-anim-3 2.5s infinite linear alternate-reverse; }
@keyframes glitch-anim { 0% { transform: skew(0deg); } 20% { transform: skew(-5deg); } 40% { transform: skew(5deg); } 60% { transform: skew(0deg); } 100% { transform: skew(0deg); } }

/* ---------- Fullscreen Modals (iframes) ---------- */
.cyber-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; }
.modal-bg-blur { position: absolute; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(15px); }
.cyber-modal-content {
  position: relative; z-index: 3001; width: 90%; max-width: 1200px; height: 85vh;
  background: var(--bg-card); border: 1px solid var(--neon-dim); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--glow-cyan), 0 20px 50px rgba(0,0,0,0.8);
  transform: scale(0.95); opacity: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}
.cyber-modal.show .cyber-modal-content { transform: scale(1); opacity: 1; }
.modal-body { flex: 1; overflow: hidden; background: #000; }
.modal-body iframe { position: relative; z-index: 2; opacity: 0; transition: opacity 0.5s ease; }
.modal-body iframe.loaded { opacity: 1; }

/* ---------- Glass Panels & Common ---------- */
.glass-panel { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.bg-darker { background: rgba(0, 0, 0, 0.4); }
.shrink-0 { flex-shrink: 0; }

/* ---------- Navbar ---------- */
.glass-nav { background: var(--bg-nav); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 1rem 0; transition: var(--transition); }
.glass-nav.scrolled { padding: 0.5rem 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); border-bottom: 1px solid var(--neon-dim); }
.brand-highlight { color: #fff; opacity: 0.5; }
.navbar-brand { font-size: 1.25rem; color: var(--neon) !important; text-shadow: var(--glow-cyan); }
.nav-link { color: var(--text-muted) !important; font-size: 0.85rem; transition: var(--transition); text-transform: lowercase; }
.nav-link:hover, .nav-link.active { color: var(--neon) !important; text-shadow: var(--glow-cyan); }

/* Sound Toggle Specific */
#sound-toggle { 
  transition: var(--transition); 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  border: 1px solid rgba(0, 243, 255, 0.2) !important;
  padding: 4px 12px;
  border-radius: 4px;
  margin-left: 10px;
  background: rgba(0, 243, 255, 0.05) !important;
}
#sound-toggle:hover { 
  color: #fff !important; 
  text-shadow: var(--glow-cyan); 
  border-color: var(--neon) !important;
  background: rgba(0, 243, 255, 0.1) !important;
}
#sound-toggle i { width: 18px; text-align: center; }
@media (max-width: 991px) {
  #sound-toggle { margin-left: 0; margin-top: 10px; width: fit-content; }
}

/* ---------- Buttons ---------- */
.btn-neon { background: rgba(0, 243, 255, 0.1); color: var(--neon); border: 1px solid var(--neon); position: relative; overflow: hidden; z-index: 1; transition: var(--transition); box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); }
.btn-neon::before { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: var(--neon); z-index: -1; transition: var(--transition); }
.btn-neon:hover { color: #000; box-shadow: var(--glow-cyan); transform: translateY(-3px); }
.btn-neon:hover::before { width: 100%; }

.btn-outline-neon { background: transparent; color: var(--neon); border: 1px dashed var(--neon); transition: var(--transition); }
.btn-outline-neon:hover { background: var(--neon-dim); color: var(--neon); box-shadow: var(--glow-cyan); transform: translateY(-3px); border-style: solid; }
.btn-outline-danger { background: transparent; color: var(--danger); border: 1px dashed var(--danger); transition: var(--transition); }
.btn-outline-danger:hover { background: rgba(255,0,60,0.1); color: var(--danger); box-shadow: var(--glow-danger); border-style: solid; }

.btn-icon-pulse { display: flex; align-items: center; justify-content: center; position: relative; }
.btn-icon-pulse::after { content:''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--neon); animation: pulse-ring 2s infinite; pointer-events: none; }
.btn-icon-pulse.purple::after { border-color: var(--purple); }

@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.3); opacity: 0; } }

/* ---------- Semantic Classes ---------- */
.section-pad { padding: 120px 0; position: relative; z-index: 5; }
.section-dark { background: rgba(10, 10, 16, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.02); }
.section-tag { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 2px; }
.section-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: #fff; margin-top: 0.5rem; }
.border-top-neon { border-top: 1px solid var(--neon-dim); }
.border-bottom-neon { border-bottom: 1px solid var(--neon-dim); }

/* ---------- Hero & Live Clock ---------- */
.hero { min-height: 100vh; position: relative; overflow: hidden; padding-top: 80px; }
.hero-bg-grid { position: absolute; inset: -200px; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(500px) rotateX(60deg) scale(1.5); transform-origin: top; opacity: 0.3; pointer-events: none; transition: transform 0.1s ease-out; }
.hero-content-wrapper { padding-top: 4rem; pointer-events: none; }
.hero-content-wrapper > *, .hero-content-wrapper .magnetic-btn { pointer-events: auto; }
.hero-name { font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -1px; line-height: 1.2; text-shadow: 0 4px 20px rgba(0,0,0,0.8); }
.glow-text-anim { animation: color-cycle 8s infinite alternate; }
@keyframes color-cycle { 0% { color: var(--neon); text-shadow: var(--glow-cyan); } 50% { color: var(--purple); text-shadow: var(--glow-purple); } 100% { color: var(--green); text-shadow: var(--glow-green); } }

/* Status Panel */
.system-status-panel { border-color: var(--neon-dim); box-shadow: 0 0 20px rgba(0,0,0,0.8); }
.status-divider { width: 4px; height: 4px; background: rgba(255,255,255,0.2); border-radius: 50%; }

/* Avatar */
.hero-avatar-glow { position: relative; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.avatar-inner { z-index: 2; background: rgba(0, 0, 0, 0.8); width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--neon); box-shadow: inset 0 0 20px rgba(0, 243, 255, 0.2), var(--glow-cyan); transform: translateZ(20px); }
.avatar-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 1px solid transparent; border-top-color: var(--neon); animation: spin 4s linear infinite; opacity: 0.6; }
.avatar-ring.ring-2 { width: 130%; height: 130%; border: 1px dashed transparent; border-right-color: var(--purple); animation: spin-reverse 8s linear infinite; opacity: 0.4; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-reverse { 100% { transform: rotate(-360deg); } }

/* Floating Icons */
.hero-floating-icons { position: relative; height: 60px; display: flex; justify-content: center; gap: 3rem; font-size: 2rem; }
.tech-icon { filter: drop-shadow(0 0 10px rgba(255,255,255,0.2)); transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28); }
.tech-icon:hover { filter: drop-shadow(0 0 15px rgba(255,255,255,0.6)); }
.floating-1 { animation: float 4s ease-in-out infinite; }
.floating-2 { animation: float 5s ease-in-out 1s infinite; }
.floating-3 { animation: float 4.5s ease-in-out 0.5s infinite; }
.floating-4 { animation: float 5.5s ease-in-out 1.5s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.animate-bounce { animation: bounce 2s infinite; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }

/* ---------- Interactive Terminal ---------- */
.terminal-window { overflow: hidden; border: 1px solid var(--neon-dim); box-shadow: var(--glow-cyan), 0 15px 35px rgba(0,0,0,0.5); transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.terminal-window.fs { position: fixed; inset: 2%; z-index: 2000; width: 96%; height: 96%; display: flex; flex-direction: column; }
.terminal-header { background: rgba(0,0,0,0.6); border-bottom: 1px solid rgba(255,255,255,0.05); }
.t-btn { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.t-btn.red { background: #ff5f56; }
.t-btn.yellow { background: #ffbd2e; }
.t-btn.green { background: #27c93f; }
.terminal-body { font-size: 0.95rem; min-height: 250px; background: rgba(5, 5, 10, 0.85); overflow-y: auto; scroll-behavior: smooth; }
.terminal-window.fs .terminal-body { flex-grow: 1; }
.terminal-line { margin-bottom: 0.25rem; }
.terminal-input-row { background: rgba(5, 5, 10, 0.85); border-top: 1px dashed rgba(255,255,255,0.05); }

/* ---------- Skills ---------- */
.skill-container { transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.skill-container:hover { transform: translateY(-5px); box-shadow: var(--glow-cyan); border-color: var(--neon-dim); }
.neon-bar { background: var(--neon); box-shadow: var(--glow-cyan); transition: width 1.5s cubic-bezier(0.1, 0.7, 0.1, 1); }
.glass-badge { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; transition: var(--transition); }
.glass-badge:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--neon); box-shadow: 0 0 10px rgba(0, 243, 255, 0.2); }

/* ---------- Showcase 3D Cards ---------- */
/* --- Timeline / Logs --- */
.timeline-container {
    position: relative;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
    padding-left: 2rem;
    margin-left: 1rem;
}

.timeline-item {
    position: relative;
}

.timeline-dot {
    position: absolute;
    left: calc(-2rem - 9px);
    top: 5px;
    width: 16px;
    height: 16px;
    background: var(--bg-dark);
    border: 2px solid var(--neon-cyan);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--neon-cyan);
    z-index: 1;
}

.timeline-dot.border-purple { border-color: var(--purple); box-shadow: 0 0 10px var(--purple); }
.timeline-dot.border-success { border-color: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); }

/* --- Filters --- */
.project-filters {
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap; /* Fallback */
}

@media (max-width: 768px) {
    .project-filters {
        justify-content: flex-start;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0.5rem 1rem 1.5rem;
        -webkit-overflow-scrolling: touch;
        gap: 0.8rem;
    }
    .filter-btn {
        flex: 0 0 auto;
        display: inline-block;
    }
}
.filter-btn:hover, .filter-btn.active {
    background: rgba(0, 212, 255, 0.1);
    color: var(--neon-cyan);
    border-color: var(--neon-cyan);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* --- Enhanced Cards --- */
.project-3d-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    transform-style: preserve-3d;
    cursor: pointer;
}
.project-3d-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 212, 255, 0.2);
    z-index: 10;
}
.project-card-inner {
    transform: translateZ(5px);
}

.project-3d-card.hidden {
    display: none !important;
}

.category-tag {
    font-size: 0.7rem;
    letter-spacing: 1px;
    opacity: 0.7;
    margin-bottom: 0.5rem;
    display: block;
}

/* --- Action Buttons --- */
.btn-icon-pulse {
    position: relative;
    overflow: visible;
}
.btn-icon-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    transition: all 0.5s ease;
}
.btn-icon-pulse:hover::after {
    width: 140%;
    height: 140%;
    opacity: 1;
}

/* --- Modals Mobile --- */
@media (max-width: 576px) {
    .cyber-modal-content {
        width: 100%;
        height: 100vh;
        border: none;
        border-radius: 0;
    }
    #modal-close-btn {
        padding: 0.8rem 1.2rem;
        font-size: 0.7rem;
    }
}
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 212, 255, 0.2);
    border-top: 3px solid var(--neon-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 1rem;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* View More */
.view-more-container {
    margin-top: 4rem;
}
.project-icon-large { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(255, 255, 255, 0.05); font-size: 1.5rem; }
.glow-purple { color: var(--purple); text-shadow: var(--glow-purple); border: 1px solid var(--purple-dim); background: rgba(181, 60, 255, 0.05) !important; }
.glow-cyan { color: var(--neon); text-shadow: var(--glow-cyan); border: 1px solid var(--neon-dim); background: rgba(0, 243, 255, 0.05) !important; }
.glow-green { color: var(--green); text-shadow: var(--glow-green); border: 1px solid var(--green-dim); }

.cyber-badge { font-size: 0.7rem; padding: 4px 10px; border-radius: 4px; border: 1px solid; letter-spacing: 1px; text-transform: uppercase; font-family: 'Fira Code', monospace; background: rgba(0,0,0,0.5); }
.cyber-badge.py { color: #ffe873; border-color: rgba(255, 232, 115, 0.3); }
.cyber-badge.ai { color: var(--purple); border-color: var(--purple-dim); }
.cyber-badge.cyan { color: var(--neon); border-color: var(--neon-dim); }

/* ---------- Chatbot Interface ---------- */
.cyber-chat-interface { border: 1px solid var(--neon-dim); box-shadow: var(--glow-cyan); }
.status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: var(--glow-green); animation: pulse 2s infinite; }
.chat-body { height: 350px; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; scroll-behavior: smooth; }
.chat-message { display: flex; gap: 1rem; max-width: 85%; }
.chat-message.bot { align-self: flex-start; }
.chat-message.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 243, 255, 0.1); border: 1px solid var(--neon); display: flex; align-items: center; justify-content: center; color: var(--neon); flex-shrink: 0; }
.chat-message.user .msg-avatar { background: rgba(181, 60, 255, 0.1); border-color: var(--purple); color: var(--purple); }
.glass-bubble { padding: 12px 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.02); }
.chat-message.bot .glass-bubble { border-top-left-radius: 0; border-left: 2px solid var(--neon); }
.chat-message.user .glass-bubble { border-top-right-radius: 0; border-right: 2px solid var(--purple); background: rgba(181, 60, 255, 0.05); }

.cyber-pill-btn { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-muted); padding: 6px 14px; border-radius: 20px; white-space: nowrap; transition: var(--transition); border-style: solid; }
.cyber-pill-btn:hover { border-color: var(--neon); color: var(--neon); background: rgba(0, 243, 255, 0.05); box-shadow: var(--glow-cyan); }

.cyber-input { background: transparent; border: none; color: #fff; outline: none; padding: 8px; }
.cyber-input::placeholder { color: rgba(255,255,255,0.3); }
.cyber-send-btn { background: transparent; border: none; color: var(--neon); transition: var(--transition); }
.cyber-send-btn:hover { text-shadow: var(--glow-cyan); }

/* ---------- Contact Form ---------- */
.endpoint-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; background: rgba(255, 255, 255, 0.05); transition: var(--transition); }
.contact-endpoint:hover .endpoint-icon { transform: scale(1.1); }
.cyber-input-group { position: relative; }
.cyber-form-input { width: 100%; background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 1rem; color: #fff; outline: none; transition: var(--transition); }
.cyber-form-input:focus { border-color: transparent; }
.cyber-label { position: absolute; left: 1rem; top: 1rem; color: var(--text-muted); pointer-events: none; transition: 0.2s ease all; }
.cyber-form-input:focus ~ .cyber-label, .cyber-form-input:not(:placeholder-shown) ~ .cyber-label { top: -0.5rem; left: 0.5rem; font-size: 0.75rem; color: var(--neon); background: var(--bg-main); padding: 0 4px; }
.cyber-border { position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--neon); transition: 0.4s ease all; box-shadow: var(--glow-cyan); }
.cyber-form-input:focus ~ .cyber-border { width: 100%; }

/* Scroll GSAP Utilities */
.gs-reveal-up { opacity: 0; transform: translateY(50px); }
.gs-reveal-left { opacity: 0; transform: translateX(-50px); }
.gs-reveal-right { opacity: 0; transform: translateX(50px); }