/* General Body & Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow-x: hidden;
    background-color: #f9fafb; /* Lighter gray for a cleaner look */
}

/* --- Animations --- */

/* Enhanced Gradient Text Animation */
.animated-gradient-text {
    background: linear-gradient(-45deg, #c026d3, #DC2626, #4B5563, #111827, #c026d3);
    background-size: 500% 500%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 12s ease infinite;
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Fade-in on Scroll Animation */
.fade-in-section {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Interactive Card & Element Effects --- */

/* Lift effect on hover for cards */
.hover-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.1), 0 5px 8px -3px rgba(0, 0, 0, 0.06);
}

/* Service Card Icon Animation */
.service-card:hover .service-icon {
    transform: scale(1.15) rotate(-8deg);
    color: #c026d3;
}

/* --- Advanced Decorative Animations --- */

/* Circuit Card Background and Trace Animation */
.circuit-card {
    position: relative;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.circuit-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(192, 38, 211, 0.1) 1px, transparent 1px),
        radial-gradient(circle at 85% 85%, rgba(192, 38, 211, 0.1) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 1;
}

.circuit-card .trace {
    position: absolute;
    background-color: rgba(217, 70, 239, 0.6);
    box-shadow: 0 0 5px rgba(217, 70, 239, 0.8);
    border-radius: 1px;
    animation: trace-flow 12s linear infinite;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.6s ease-in;
}

.circuit-card:hover .trace {
    opacity: 1;
}

.trace-1 { height: 2px; width: 0; top: 20%; left: -100%; animation-delay: 0s; }
.trace-2 { width: 2px; height: 0; top: -100%; left: 45%; animation-delay: 2.5s; }
.trace-3 { height: 2px; width: 0; bottom: 30%; right: -100%; animation-name: trace-flow-reverse; animation-delay: 4.5s; }
.trace-4 { width: 2px; height: 0; bottom: -100%; left: 75%; animation-delay: 6.5s; }

@keyframes trace-flow {
    0% { width: 0; left: 0%; transform: scaleX(0); }
    30% { width: 65%; left: 0%; transform: scaleX(1); }
    50% { width: 2px; left: 65%; top: 20%; transform: scaleY(0); }
    80% { width: 2px; left: 65%; height: 60%; top: 20%; transform: scaleY(1); }
    100% { width: 0; left: 65%; height: 2px; top: 80%; }
}

@keyframes trace-flow-reverse {
    0% { width: 0; right: 0%; transform: scaleX(0); }
    30% { width: 55%; right: 0%; transform: scaleX(1); }
    50% { width: 2px; right: 55%; bottom: 30%; transform: scaleY(0); }
    80% { width: 2px; right: 55%; height: 45%; bottom: 30%; transform: scaleY(1); }
    100% { width: 0; right: 55%; height: 2px; bottom: 75%; }
}

/* Glitch Effect for Headers */
.glitch-header {
    position: relative;
    color: #1a202c;
}

.glitch-header::before,
.glitch-header::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.circuit-card:hover .glitch-header::before {
    left: 3px;
    text-shadow: -3px 0 #d946ef;
    animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}

.circuit-card:hover .glitch-header::after {
    left: -3px;
    text-shadow: -3px 0 #4c51bf, 3px 3px #d946ef;
    animation: glitch-anim-2 3.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(42px, 9999px, 44px, 0); }
  10% { clip: rect(12px, 9999px, 60px, 0); }
  20% { clip: rect(30px, 9999px, 22px, 0); }
  40% { clip: rect(45px, 9999px, 100px, 0); }
  60% { clip: rect(80px, 9999px, 5px, 0); }
  80% { clip: rect(25px, 9999px, 70px, 0); }
  100% { clip: rect(50px, 9999px, 35px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(90px, 9999px, 20px, 0); }
  15% { clip: rect(35px, 9999px, 75px, 0); }
  30% { clip: rect(65px, 9999px, 10px, 0); }
  50% { clip: rect(5px, 9999px, 85px, 0); }
  70% { clip: rect(70px, 9999px, 40px, 0); }
  85% { clip: rect(20px, 9999px, 60px, 0); }
  100% { clip: rect(40px, 9999px, 5px, 0); }
}