/* ===== CYBERPUNK THEME OVERRIDE ===== */
/* Custom theme for Federico Massarelli portfolio */
/* Created to harmonize with Matrix-style language skills section */

:root {
  --matrix-green: #00ff41;
  --cyber-orange: #ff6b35;
  --cyber-blue: #00d4ff;
  --cyber-purple: #c77dff;
  --dark-bg: #0d1117;
  --darker-bg: #000000;
}

/* ===== MATRIX LANGUAGE SKILLS SECTION ===== */
.matrix-lang-skills {
  background: linear-gradient(135deg, #000000, #0d1117);
  border: 1px solid #00ff41;
  border-radius: 8px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  font-family: 'Courier New', monospace;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
}

.matrix-header {
  text-align: center;
  margin-bottom: 25px;
  position: relative;
}

.matrix-title {
  color: #00ff41;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 0 10px #00ff41;
}

.matrix-bracket {
  color: #ff6b35;
  font-size: 18px;
  animation: matrixGlow 2s ease-in-out infinite alternate;
}

.matrix-text {
  animation: matrixTypewriter 3s steps(20) infinite;
}

.matrix-cursor {
  display: inline-block;
  background: #00ff41;
  width: 2px;
  height: 20px;
  margin-left: 5px;
  animation: matrixBlink 1s infinite;
}

.matrix-lang-item {
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 255, 65, 0.05);
  border: 1px solid rgba(0, 255, 65, 0.2);
  border-radius: 5px;
  transition: all 0.3s ease;
}

.matrix-lang-item:hover {
  background: rgba(0, 255, 65, 0.1);
  border-color: #00ff41;
  box-shadow: 0 0 15px rgba(0, 255, 65, 0.3);
  transform: translateX(5px);
}

.matrix-lang-header {
  margin-bottom: 10px;
  font-size: 12px;
}

.matrix-prompt {
  color: #00ff41;
  font-weight: bold;
}

.matrix-command {
  color: #ff6b35;
  margin: 0 5px;
}

.matrix-param {
  color: #ffffff;
}

.matrix-progress-container {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.matrix-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 255, 65, 0.1);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-right: 10px;
}

.matrix-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #00ff41, #00cc33);
  border-radius: 4px;
  position: relative;
  animation: matrixProgressLoad 2s ease-out forwards;
  box-shadow: 0 0 10px #00ff41;
}

.matrix-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: matrixShine 2s infinite;
}

.italian-progress { width: 100%; }
.spanish-progress { width: 85%; }
.english-progress { width: 90%; }

.matrix-percentage {
  color: #00ff41;
  font-size: 12px;
  font-weight: bold;
  min-width: 35px;
  text-shadow: 0 0 5px #00ff41;
}

.matrix-output {
  font-size: 11px;
  color: #cccccc;
}

.matrix-success {
  color: #00ff41;
  font-weight: bold;
}

.matrix-rain-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.1;
}

.matrix-canvas {
  width: 100%;
  height: 100%;
}

/* ===== SITE-WIDE COLOR OVERRIDES ===== */

/* Replace old yellow/orange (#FFC107) with cyberpunk colors */

/* Progress bars and accents - Matrix green */
.art-line-progress > div,
.art-circle-progress,
.art-progress svg path:last-child {
  stroke: var(--matrix-green) !important;
}

/* Buttons and CTAs - Cyber orange gradient */
.art-btn,
.art-submit,
.art-btn-md,
.art-btn-lg {
  background: linear-gradient(135deg, var(--cyber-orange), #f7931e) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3) !important;
}

.art-btn:hover,
.art-submit:hover {
  background: linear-gradient(135deg, #ff5722, var(--cyber-orange)) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4) !important;
}

/* Links and highlights - Cyber blue */
.art-link,
.art-subtitle,
.art-lg-text .txt-rotate,
.art-banner-title h1 span {
  color: var(--cyber-blue) !important;
}

/* Accent elements - Matrix green */
.art-counter,
.art-timeline-mark,
.art-available-lamp {
  color: var(--matrix-green) !important;
  background: var(--matrix-green) !important;
  border-color: var(--matrix-green) !important;
}

/* Card borders and frames - Subtle cyber glow */
.art-a,
.art-card,
.art-service-icon-box {
  border: 1px solid rgba(0, 255, 65, 0.1) !important;
  background: linear-gradient(135deg, rgba(13, 17, 23, 0.8), rgba(0, 0, 0, 0.9)) !important;
  box-shadow: 0 4px 20px rgba(0, 255, 65, 0.1) !important;
  transition: all 0.3s ease;
}

.art-a:hover,
.art-card:hover,
.art-service-icon-box:hover {
  border-color: var(--matrix-green) !important;
  box-shadow: 0 6px 30px rgba(0, 255, 65, 0.2) !important;
  transform: translateY(-3px);
}

/* Timeline and special elements */
.art-timeline-mark {
  background: var(--cyber-blue) !important;
}

.art-timeline-mark-light {
  background: rgba(0, 212, 255, 0.3) !important;
}

/* Form elements - Cyberpunk style */
.art-input,
.art-input:focus {
  background: rgba(13, 17, 23, 0.8) !important;
  border: 1px solid rgba(0, 255, 65, 0.3) !important;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.1) !important;
}

.art-input:focus {
  border-color: var(--matrix-green) !important;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.3) !important;
}

/* Fix textarea positioning and padding */
.art-form-field textarea.art-input {
  padding-left: 65px !important;
  padding-top: 15px !important;
  border-left: solid 50px rgba(13, 17, 23, 0.9) !important;
  background: rgba(13, 17, 23, 0.8) !important;
}

.art-form-field textarea.art-input:focus {
  border-left-color: rgba(0, 255, 65, 0.3) !important;
}

/* Fix placeholder text positioning */
.art-form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Form labels - better positioning and cyberpunk style */
.art-contact-form label {
  background: rgba(13, 17, 23, 0.9) !important;
  color: var(--matrix-green) !important;
  border-right: 1px solid rgba(0, 255, 65, 0.3) !important;
}

.art-contact-form .art-input.art-active + label,
.art-contact-form .art-input:focus + label {
  background: var(--matrix-green) !important;
  color: var(--darker-bg) !important;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.5) !important;
}

/* Ensure textarea label is properly positioned */
.art-form-field textarea + label {
  z-index: 10 !important;
}

/* Banner and main title effects */
.art-banner {
  background: linear-gradient(135deg, var(--darker-bg), var(--dark-bg)) !important;
}

.art-banner-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(0, 255, 65, 0.1), transparent 50%);
  pointer-events: none;
}

/* Info bar - Darker cyberpunk theme */
.art-info-bar {
  background: linear-gradient(135deg, var(--dark-bg), var(--darker-bg)) !important;
  border-right: 1px solid rgba(0, 255, 65, 0.2) !important;
}

/* Main content area */
.art-content {
  background: linear-gradient(135deg, #111319, var(--dark-bg)) !important;
}

/* Counters - Cyber glow effect */
.art-counter-frame {
  background: rgba(13, 17, 23, 0.8) !important;
  border: 1px solid rgba(0, 212, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1) !important;
}

.art-counter {
  color: #000 !important;
  text-shadow: 0 0 10px var(--cyber-blue) !important;
}

/* Service boxes - Special styling */
.art-service-icon-box h6 {
  color: var(--matrix-green) !important;
  text-shadow: 0 0 5px var(--matrix-green) !important;
}

/* Section titles */
.art-section-title h4 {
  color: var(--cyber-blue) !important;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

/* Table elements */
.art-table li h6 {
  color: var(--matrix-green) !important;
}

/* Knowledge list */
.art-knowledge-list li {
  background: rgba(0, 255, 65, 0.1) !important;
  border-left: 3px solid var(--matrix-green) !important;
  color: #ffffff !important;
}

/* Success messages */
.art-success {
  background: linear-gradient(135deg, var(--matrix-green), #00cc33) !important;
  color: var(--darker-bg) !important;
  text-shadow: none !important;
}

/* Preloader */
.art-preloader {
  background: var(--darker-bg) !important;
}

.art-preloader h4 {
  color: var(--matrix-green) !important;
  text-shadow: 0 0 20px var(--matrix-green) !important;
}

/* Avatar glow effect */
.art-avatar img {
  box-shadow: 0 0 30px rgba(0, 255, 65, 0.3) !important;
  border: 2px solid rgba(0, 255, 65, 0.5) !important;
}

/* Scrollbar styling */
.art-scroll-frame::-webkit-scrollbar-thumb {
  background: var(--matrix-green) !important;
}

/* Add cyberpunk grid pattern overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 2px 2px, rgba(0, 255, 65, 0.05) 1px, transparent 0);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: -1;
}

/* ===== ANIMATIONS ===== */

/* Matrix animations */
@keyframes matrixGlow {
  0% { text-shadow: 0 0 5px #ff6b35; }
  100% { text-shadow: 0 0 15px #ff6b35, 0 0 25px #ff6b35; }
}

@keyframes matrixBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes matrixProgressLoad {
  0% { width: 0; }
}

@keyframes matrixShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes matrixTypewriter {
  0% { width: 0; }
  50% { width: 100%; }
  100% { width: 0; }
}

/* Cyberpunk glow animations */
@keyframes cyberGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(0, 255, 65, 0.3); }
  50% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.5), 0 0 30px rgba(0, 212, 255, 0.3); }
}

.art-a:hover,
.art-card:hover {
  animation: cyberGlow 2s ease-in-out infinite;
}

/* Text glow for important elements */
.art-name,
.art-banner-title h1 {
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5) !important;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Responsive adjustments */
@media (max-width: 768px) {
  .matrix-lang-skills {
    margin: 10px 0;
    padding: 15px;
  }
  
  .matrix-header {
    margin-bottom: 15px;
  }
  
  .matrix-title {
    font-size: 14px;
  }
  
  .matrix-lang-header {
    font-size: 11px;
  }
  
  .matrix-progress-container {
    margin-bottom: 6px;
  }
}

@media (max-width: 480px) {
  .matrix-title {
    font-size: 12px;
    letter-spacing: 1px;
  }
  
  .matrix-bracket {
    font-size: 14px;
  }
  
  .matrix-lang-item {
    padding: 10px;
    margin-bottom: 15px;
  }
  
  .matrix-lang-header {
    font-size: 10px;
  }
}