/*
Theme Name: respondlyticsaillc-website-main
Text Domain: respondlyticsaillc-website-main
Version: 1.0.0
Description: Converted from React/Lovable project
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* =======================
   CSS Custom Properties
   ======================= */
:root {
  --background: 0 0% 3%;
  --foreground: 180 20% 96%;
  --card: 180 10% 6%;
  --card-foreground: 180 20% 96%;
  --card-elevated: 180 12% 9%;
  --popover: 180 10% 6%;
  --popover-foreground: 180 20% 96%;
  --primary: 174 72% 49%;
  --primary-foreground: 174 30% 6%;
  --primary-hover: 174 80% 58%;
  --primary-deep: 174 60% 22%;
  --accent: 174 72% 49%;
  --accent-foreground: 174 30% 6%;
  --accent-glow: 174 85% 62%;
  --secondary: 174 8% 12%;
  --secondary-foreground: 174 10% 92%;
  --muted: 174 8% 10%;
  --muted-foreground: 174 6% 62%;
  --destructive: 0 75% 55%;
  --destructive-foreground: 0 0% 98%;
  --border: 174 30% 14%;
  --input: 174 25% 12%;
  --ring: 174 72% 49%;
  --radius: 0.875rem;
  --gradient-hero: radial-gradient(ellipse at 50% 0%, hsl(174 72% 22% / 0.55), hsl(0 0% 3%) 65%);
  --gradient-accent: linear-gradient(135deg, hsl(174 72% 49%), hsl(174 85% 62%));
  --gradient-soft: linear-gradient(180deg, hsl(174 10% 5%), hsl(0 0% 3%));
  --gradient-radial-teal: radial-gradient(ellipse at center, hsl(174 72% 49% / 0.32), transparent 60%);
  --gradient-radial-navy: radial-gradient(ellipse at center, hsl(174 72% 30% / 0.45), transparent 65%);
  --gradient-card: linear-gradient(180deg, hsl(174 10% 7%), hsl(0 0% 4%));
  --glow-teal: 0 0 32px hsl(174 80% 50% / 0.55), 0 0 72px hsl(174 80% 45% / 0.25);
  --glow-navy: 0 12px 40px -12px hsl(174 70% 30% / 0.55);
  --shadow-card: 0 1px 0 0 hsl(174 60% 35% / 0.06) inset, 0 8px 24px -12px hsl(0 0% 0% / 0.6);
  --shadow-glass: 0 1px 0 0 hsl(174 72% 49% / 0.14) inset, 0 8px 32px -10px hsl(0 0% 0% / 0.7);
  --transition-base: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =======================
   Font Face Declarations
   ======================= */
/* Load Cinzel and Inter from Google Fonts - see @import in header.php or add to theme enqueue if needed */

/* =======================
   Keyframes & Animations
   ======================= */

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.55); }
  70% { box-shadow: 0 0 0 12px hsl(var(--primary) / 0); }
  100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); }
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

/* =======================
   Utility Classes & Global Styles
   ======================= */

/* Reset for all elements */
* {
  box-sizing: border-box;
  border-color: hsl(var(--border));
}

/* Core body and typography */
html {
  scroll-behavior: smooth;
}
body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2 {
  font-family: 'Cinzel', Georgia, serif;
  letter-spacing: 0.01em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}
h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}

/* Utility: Font Display */
.font-display {
  font-family: 'Cinzel', Georgia, serif;
}

/* Section Gradient Background Utilities */
.bg-hero-gradient {
  background-image: var(--gradient-hero);
}
.bg-accent-gradient {
  background-image: var(--gradient-accent);
}
.bg-soft-gradient {
  background-image: var(--gradient-soft);
}
.bg-radial-teal {
  background-image: var(--gradient-radial-teal);
}
.bg-radial-navy {
  background-image: var(--gradient-radial-navy);
}
.bg-card-gradient {
  background-image: var(--gradient-card);
}

/* Text Gradient / Accent Glow */
.text-gradient-accent {
  color: hsl(var(--accent-glow));
  text-shadow: 0 0 24px hsl(var(--primary) / 0.6), 0 0 48px hsl(var(--primary) / 0.35);
}

/* Glassmorphic Card Utilities */
.glass-card {
  background: hsl(150 10% 7% / 0.7);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid hsl(142 30% 16% / 0.9);
  box-shadow: var(--shadow-glass);
}
.glass-card-dark {
  background: hsl(150 10% 6% / 0.7);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid hsl(142 35% 18% / 0.9);
}

/* Glow and Shadow Utilities */
.glow-teal {
  box-shadow: var(--glow-teal);
}
.glow-navy {
  box-shadow: var(--glow-navy);
}
.shadow-card {
  box-shadow: var(--shadow-card);
}

/* Lift card hover */
.lift {
  transition: var(--transition-base);
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -16px hsl(142 90% 35% / 0.35), 0 0 0 1px hsl(var(--primary) / 0.35);
  border-color: hsl(var(--primary) / 0.45);
}

/* Pulse dot (online, new, etc) */
.pulse-dot::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 0 hsl(var(--primary) / 0.6);
  animation: pulse-ring 2s ease-out infinite;
  margin-right: 8px;
  vertical-align: middle;
}

/* Shimmer accent on important text */
.shimmer {
  background: linear-gradient(110deg, hsl(var(--primary)) 30%, hsl(var(--accent-glow)) 50%, hsl(var(--primary)) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3.5s linear infinite;
}

/* =======================
   Scroll Animation Helpers
   ======================= */

[data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
[data-animate].animated { opacity: 1; transform: translateY(0); }
[data-animate="fade-in"] { opacity: 0; transform: none; }
[data-animate="fade-in"].animated { opacity: 1; }
[data-animate="scale"] { opacity: 0; transform: scale(0.95); }
[data-animate="scale"].animated { opacity: 1; transform: scale(1); }
[data-animate="slide-left"] { opacity: 0; transform: translateX(-30px); }
[data-animate="slide-left"].animated { opacity: 1; transform: translateX(0); }
[data-animate="slide-right"] { opacity: 0; transform: translateX(30px); }
[data-animate="slide-right"].animated { opacity: 1; transform: translateX(0); }
[data-animate="rotate"] { opacity: 0; transform: rotate(-5deg); }
[data-animate="rotate"].animated { opacity: 1; transform: rotate(0); }

/* =======================
   Carousel/Slider Styles
   ======================= */
.carousel-container { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-behavior: smooth; }
.carousel-container::-webkit-scrollbar { display: none; }
.carousel-slide { scroll-snap-align: start; flex-shrink: 0; }
.carousel-dot { width: 12px; height: 12px; border-radius: 9999px; border: none; padding: 0; cursor: pointer; transition: all 0.3s ease; }
.carousel-dot.active { transform: scale(1.25); }
/* Marquee wrapper: hide scrollbar */
.marquee-wrapper { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.marquee-wrapper::-webkit-scrollbar { display: none; }

/* Fade effect variant */
.carousel-container[data-carousel-effect="fade"] { position: relative; }
.carousel-container[data-carousel-effect="fade"] .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s ease; }
.carousel-container[data-carousel-effect="fade"] .carousel-slide.active { opacity: 1; position: relative; }

/* =======================
   Interactive Component Styles
   ======================= */

/* Accordion */
[data-accordion-content] { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
[data-accordion-content].open { max-height: 2000px; }
[data-accordion-trigger] svg { transition: transform 0.3s; }
[data-accordion-trigger].open svg { transform: rotate(180deg); }

/* Tabs */
[data-tab-panel] { display: none; }
[data-tab-panel].active { display: block; }
[data-tab].active { border-bottom: 2px solid hsl(var(--primary)); color: hsl(var(--primary)); }

/* Modal */
[data-modal] { transition: opacity 0.3s; }
[data-modal].open { display: flex !important; }

/* Tooltip */
.tooltip { visibility: hidden; opacity: 0; transition: opacity 0.2s; position: absolute; z-index: 50; }
.group:hover .tooltip { visibility: visible; opacity: 1; }

/* Back to top */
[data-back-to-top] { transition: opacity 0.3s, transform 0.3s; }
[data-back-to-top].hidden { opacity: 0; pointer-events: none; transform: translateY(10px); }

/* Counter animation */
[data-counter] { font-variant-numeric: tabular-nums; }

/* =======================
   Decorative & Demo Styles
   ======================= */

#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}