/* Omniatix Components V2 */

/* Hero Glow (Subtle Technical) */
.hero-glow-v2 {
   position: absolute;
   top: -20%;
   left: 50%;
   transform: translateX(-50%);
   width: 60vw;
   height: 60vw;
   background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(2, 6, 23, 0) 70%);
   filter: blur(80px);
   pointer-events: none;
   z-index: 0;
}

/* Feature Ticker / Marquee */
.ticker-wrap {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   border-top: 1px solid var(--color-border-subtle);
   border-bottom: 1px solid var(--color-border-subtle);
   padding: 1rem 0;
   margin: 4rem 0;
   font-family: var(--font-mono);
   color: var(--color-text-secondary);
   font-size: 0.875rem;
   text-transform: uppercase;
}

.ticker-item {
   display: inline-block;
   padding-left: 3rem;
   animation: ticker 30s linear infinite;
}

@keyframes ticker {
   0% {
      transform: translate3d(0, 0, 0);
   }

   100% {
      transform: translate3d(-100%, 0, 0);
   }
}

/* Technical Grid Overlay */
.tech-grid-overlay {
   background-size: 40px 40px;
   background-image:
      linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: -1;
}

/* Code Snippet Block */
.code-block {
   font-family: var(--font-mono);
   background: #0f172a;
   border: 1px solid var(--color-border-subtle);
   border-radius: 8px;
   padding: 1.5rem;
   font-size: 0.875rem;
   color: #cbd5e1;
   position: relative;
   overflow: hidden;
}

.code-block::before {
   content: "TERMINAL";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   background: #1e293b;
   color: #64748b;
   font-size: 0.65rem;
   padding: 0.25rem 1rem;
   border-bottom: 1px solid var(--color-border-subtle);
}

.code-line {
   display: block;
   margin-bottom: 0.25rem;
}

.code-line::before {
   content: ">";
   color: var(--color-accent);
   margin-right: 0.5rem;
}

/* Nav Link Hover Effect (Underline slide) */
.nav-link {
   position: relative;
   text-decoration: none;
   color: var(--color-text-secondary);
   transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
   color: var(--color-text-primary);
}

.nav-link::after {
   content: '';
   position: absolute;
   width: 0;
   height: 1px;
   bottom: -4px;
   left: 0;
   background-color: var(--color-accent);
   transition: width 0.3s ease;
}

.nav-link:hover::after {
   width: 100%;
}