/*
Theme Name: Bugstrix
Theme URI: https://example.com/bugstrix
Author: Your Name
Author URI: https://example.com
Description: A premium, futuristic cybersecurity WordPress theme. Fully dynamic, customizer-ready, and optimized for Elementor.
Version: 1.0.1
Text Domain: bugstrix
Tags: custom-background, custom-logo, custom-menu, featured-images, full-width-template, theme-options
*/

:root {
  --bg0: #04050a;
  --bg1: #070a14;
  --card: rgba(255, 255, 255, 0.03);
  --stroke: rgba(255, 255, 255, 0.12);
  --stroke2: rgba(255, 255, 255, 0.18);
  --text: rgba(255, 255, 255, 0.95);
  /* Increased for visibility */
  --muted: rgba(255, 255, 255, 0.72);
  /* Increased for visibility */
  --muted2: rgba(255, 255, 255, 0.58);

  /* Fallbacks, actuals injected in header.php */
  --cyan: #22d3ee;
  --blue: #3b82f6;
  --purple: #a855f7;
  --green: #22c55e;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% -10%, rgba(59, 130, 246, 0.22), transparent 65%), radial-gradient(900px 700px at 90% 10%, rgba(168, 85, 247, 0.18), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1) 60%, #050812);
  color: var(--text);
  line-height: 1.6;
}

/* Premium Typography Refinements */
.font-display {
  font-family: "Space Grotesk", Inter, ui-sans-serif;
  letter-spacing: -0.02em;
  font-weight: 600;
  /* Bolder by default for visibility */
}

.font-condensed {
  letter-spacing: -0.04em;
}

h1,
h2,
h3 {
  color: #fff;
}

/* Subtle grid + glow lines */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 35% 25%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 35% 25%, black 20%, transparent 70%);
  opacity: 0.5;
}

.scanlines {
  background: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 6px);
  opacity: 0.15;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.glow-orb {
  filter: blur(60px);
  opacity: 0.4;
  will-change: transform;
}

/* Neon border effect */
.neon-border {
  position: relative;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  transition: border-color 0.3s ease;
}

.neon-border:before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--purple));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.neon-border:hover:before {
  opacity: 0.6;
}

.neon-border:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Buttons */
.btn {
  border: 1px solid var(--stroke2);
  background: rgba(255, 255, 255, 0.04);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.btn-primary {
  border-color: rgba(34, 211, 238, 0.3);
  background: radial-gradient(120% 180% at 20% 20%, rgba(34, 211, 238, 0.3), rgba(59, 130, 246, 0.15) 55%, rgba(168, 85, 247, 0.1));
}

.btn-primary:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.15);
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1), filter .8s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity, filter;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Animated headline glow */
.headline {
  background: linear-gradient(90deg, #fff, var(--cyan), var(--purple), #fff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 8s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(34, 211, 238, 0.05);
}

.flex.items-center.justify-between .font-display.text-xl {
  width: 70%;
}

@keyframes sheen {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Improved Micro-glitch (Premium RGB Shift + Clip-path) */
.glitch {
  position: relative;
  display: inline-block;
  color: #fff;
}

.glitch:before,
.glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

.glitch.glitch-active:before {
  left: -2px;
  text-shadow: 2px 0 var(--cyan);
  animation: glitch-anim-1 0.4s infinite linear alternate-reverse;
  opacity: 0.8;
}

.glitch.glitch-active:after {
  left: 2px;
  text-shadow: -2px 0 var(--purple);
  animation: glitch-anim-2 0.4s infinite linear alternate-reverse;
  opacity: 0.8;
}

@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(10% 0 85% 0);
  }

  20% {
    clip-path: inset(80% 0 5% 0);
  }

  40% {
    clip-path: inset(30% 0 60% 0);
  }

  60% {
    clip-path: inset(55% 0 15% 0);
  }

  80% {
    clip-path: inset(15% 0 75% 0);
  }

  100% {
    clip-path: inset(70% 0 20% 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(85% 0 10% 0);
  }

  20% {
    clip-path: inset(5% 0 80% 0);
  }

  40% {
    clip-path: inset(60% 0 30% 0);
  }

  60% {
    clip-path: inset(15% 0 55% 0);
  }

  80% {
    clip-path: inset(75% 0 15% 0);
  }

  100% {
    clip-path: inset(20% 0 70% 0);
  }
}

/* Typography Visibility Boost */
:root {
  --text: rgba(255, 255, 255, 0.98);
  --muted: rgba(255, 255, 255, 0.78);
}

/* Animated circuit line icon */
.stroke-anim path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.5s ease;
}

.in-view .stroke-anim path {
  stroke-dashoffset: 0;
}

/* Hover shine */
.shine {
  position: relative;
  overflow: hidden;
}

.shine:after {
  content: "";
  position: absolute;
  inset: -50% -80%;
  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.12) 50%, transparent 65%);
  transform: translateX(-35%) rotate(10deg);
  opacity: 0;
  transition: opacity .2s ease;
}

.shine:hover:after {
  opacity: 1;
  animation: sweep 1.1s ease forwards;
}

@keyframes sweep {
  from {
    transform: translateX(-40%) rotate(10deg);
  }

  to {
    transform: translateX(40%) rotate(10deg);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }

  .headline {
    animation: none;
  }

  .glitch:before,
  .glitch:after {
    display: none;
  }

  .shine:after {
    display: none;
  }
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* Sticky nav backdrop */
.nav-blur {
  background: rgba(4, 5, 10, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Toast */
.toast {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* WordPress Alignment Classes for standard page content */
.alignnone {
  margin: 5px 20px 20px 0;
}

.aligncenter,
div.aligncenter {
  display: block;
  margin: 5px auto 5px auto;
}

.alignright {
  float: right;
  margin: 5px 0 20px 20px;
}

.alignleft {
  float: left;
  margin: 5px 20px 20px 0;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%;
  padding: 5px 3px 10px;
  text-align: center;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

.entry-content p {
  margin-bottom: 1.25rem;
}