/*
Theme Name:   My Custom Theme
Theme URI:    https://yoursite.com
Author:       AI Theme Converter
Description:  WordPress theme converted from react-vite project. All compiled styles, assets, and page content preserved.
Version:      1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License:      GNU General Public License v2 or later
Text Domain:  my-custom-theme
*/

/* ══════════════════════════════════
   ALL COMPILED PROJECT STYLES
   ══════════════════════════════════ */

/* ══ src/index.css ══ */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Nextora Vision Brand Colors */
    --deep-violet: 270 60% 40%;
    --deep-violet-light: 270 60% 50%;
    --deep-violet-dark: 270 60% 30%;
    --neon-cyan: 185 94% 43%;
    --neon-cyan-light: 185 94% 53%;
    --neon-cyan-glow: 185 100% 50%;
    --matte-black: 0 0% 4%;
    --matte-black-light: 0 0% 8%;
    --metallic-silver: 220 9% 46%;
    --metallic-silver-light: 220 9% 70%;
    --pure-white: 0 0% 100%;
    
    /* Semantic Tokens - Dark Theme Primary */
    --background: 0 0% 4%;
    --foreground: 0 0% 98%;
    
    --card: 0 0% 7%;
    --card-foreground: 0 0% 98%;
    
    --popover: 0 0% 7%;
    --popover-foreground: 0 0% 98%;
    
    --primary: 185 94% 43%;
    --primary-foreground: 0 0% 4%;
    
    --secondary: 270 60% 40%;
    --secondary-foreground: 0 0% 98%;
    
    --muted: 0 0% 12%;
    --muted-foreground: 220 9% 60%;
    
    --accent: 270 60% 50%;
    --accent-foreground: 0 0% 98%;
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 0 0% 14%;
    --input: 0 0% 14%;
    --ring: 185 94% 43%;
    
    --radius: 0.75rem;
    
    /* Custom Properties */
    --glow-cyan: 0 0 40px hsl(185 94% 43% / 0.4);
    --glow-violet: 0 0 40px hsl(270 60% 50% / 0.4);
    --gradient-hero: linear-gradient(135deg, hsl(270 60% 40%) 0%, hsl(185 94% 43%) 100%);
    --gradient-card: linear-gradient(180deg, hsl(0 0% 10%) 0%, hsl(0 0% 6%) 100%);
    --gradient-text: linear-gradient(90deg, hsl(185 94% 50%) 0%, hsl(270 60% 60%) 100%);
    
    /* Sidebar */
    --sidebar-background: 0 0% 6%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 185 94% 43%;
    --sidebar-primary-foreground: 0 0% 4%;
    --sidebar-accent: 270 60% 40%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 14%;
    --sidebar-ring: 185 94% 43%;
  }

  .dark {
    --background: 0 0% 4%;
    --foreground: 0 0% 98%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold tracking-tight;
  }
}

@layer components {
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: var(--gradient-text);
  }

  .glow-cyan {
    box-shadow: var(--glow-cyan);
  }

  .glow-violet {
    box-shadow: var(--glow-violet);
  }

  .glass-card {
    @apply bg-card/50 backdrop-blur-xl border border-border/50;
  }

  .geometric-pattern {
    background-image: 
      linear-gradient(30deg, hsl(var(--border)) 12%, transparent 12.5%, transparent 87%, hsl(var(--border)) 87.5%, hsl(var(--border))),
      linear-gradient(150deg, hsl(var(--border)) 12%, transparent 12.5%, transparent 87%, hsl(var(--border)) 87.5%, hsl(var(--border))),
      linear-gradient(30deg, hsl(var(--border)) 12%, transparent 12.5%, transparent 87%, hsl(var(--border)) 87.5%, hsl(var(--border))),
      linear-gradient(150deg, hsl(var(--border)) 12%, transparent 12.5%, transparent 87%, hsl(var(--border)) 87.5%, hsl(var(--border)));
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px;
  }

  .gradient-border {
    position: relative;
  }

  .gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--gradient-hero);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .hover-lift {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
  }

  .section-padding {
    @apply py-20 md:py-32;
  }

  .container-narrow {
    @apply max-w-5xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .container-wide {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
}

@layer utilities {
  .animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .animate-gradient {
    animation: gradient 8s linear infinite;
    background-size: 200% 200%;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out forwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.6s ease-out forwards;
  }

  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s ease-out forwards;
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 20px hsl(185 94% 43% / 0.3), 0 0 40px hsl(185 94% 43% / 0.2);
  }
  to {
    box-shadow: 0 0 30px hsl(185 94% 43% / 0.5), 0 0 60px hsl(185 94% 43% / 0.3);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--matte-black));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--metallic-silver));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--neon-cyan));
}


/* ══════════════════════════════════
   HOVER & INTERACTION STATES
   ══════════════════════════════════ */
a,button,.btn,[class*="btn"]{transition:all .22s ease;}
button:hover,.btn:hover,[class*="btn"]:hover{filter:brightness(1.08);transform:translateY(-1px);}
.card:hover,[class*="card"]:hover{transform:translateY(-3px);}
input:focus,textarea:focus,select:focus{outline:2px solid var(--wp-primary,#7c6dfa);outline-offset:2px;}
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s;}
[data-reveal].revealed{opacity:1;transform:none;}

/* ══════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ══════════════════════════════════ */
@media(max-width:768px){[class*="grid"]:not([class*="grid-1"]),[class*="flex-row"]{flex-direction:column!important;grid-template-columns:1fr!important;}section{padding:3rem 1rem!important;}}
@media(max-width:480px){.container{padding:0 1rem;}}

/* ══════════════════════════════════
   WORDPRESS CORE
   ══════════════════════════════════ */
img{max-width:100%;height:auto;}
.site-main{min-height:60vh;}
.screen-reader-text{position:absolute;left:-9999px;}
:root{
  --wp-primary:#7c6dfa;--wp-secondary:#4ecca3;
  --wp-text:#1a1a2e;--wp-bg:#ffffff;
  --wp-container:1200px;--wp-radius:8px;
}