/* SynX Landing Page - Global Styles */

:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Force all accents to SynX green */
  --info: var(--primary);
  --warning: var(--primary);
  --success: var(--primary);
}

body {
  font-family: var(--font-sans);
}

/* Responsive helpers (avoid relying on missing Tailwind variants) */
.synx-only-mobile {
  display: block;
}

@media (min-width: 640px) {
  .synx-only-mobile {
    display: none;
  }
}

.synx-only-desktop {
  display: none;
}

@media (min-width: 640px) {
  .synx-only-desktop {
    display: block;
  }
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Scroll reveal (opt-in via data-reveal + JS) */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

html.js [data-reveal="left"] {
  transform: translate3d(-16px, 0, 0);
}

html.js [data-reveal="right"] {
  transform: translate3d(16px, 0, 0);
}

html.js [data-reveal="scale"] {
  transform: translate3d(0, 0, 0) scale(0.98);
}

html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html.js [data-reveal][style*="--reveal-delay"] {
  transition-delay: var(--reveal-delay);
}

/* Philosophy timeline: keep content from crossing the center divider */
@media (min-width: 1024px) {
  .philosophy-timeline-item {
    width: calc(50% - 2rem);
  }

  .philosophy-timeline-item--left {
    margin-right: auto;
    padding-right: 2.5rem;
  }

  .philosophy-timeline-item--right {
    margin-left: auto;
    padding-left: 2.5rem;
  }

  .philosophy-timeline-item .flex-1 {
    min-width: 0;
  }
}

/* Gradual Blur (vanilla adaptation) */
.gradual-blur {
  isolation: isolate;
  pointer-events: none;
}

.gradual-blur__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.gradual-blur__inner > div {
  -webkit-backdrop-filter: inherit;
  backdrop-filter: inherit;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .gradual-blur__inner > div {
    background: hsl(var(--background) / 0.28);
    opacity: 0.65;
  }
}

/* Remove default centering that breaks layouts */
.App {
  text-align: left;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--primary) / 0.5);
}

/* Focus visible for accessibility */
:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Remove focus outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* Selection highlight */
::selection {
  background: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
}

/* Prevent text selection on interactive elements */
.btn-neon,
.btn-ghost-neon,
button {
  user-select: none;
}

/* Ensure images don't break layout */
img {
  max-width: 100%;
  height: auto;
}

/* Smooth transitions for interactive elements */
a,
button {
  transition-property: color, background-color, border-color, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Canvas elements for particle effects */
canvas {
  display: block;
}

/* Prevent layout shift from scrollbar */
html {
  overflow-y: scroll;
}

/* Hide scrollbar but keep functionality on some sections */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Loading state for buttons */
.btn-neon:disabled,
.btn-ghost-neon:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ensure proper stacking context */
.App {
  position: relative;
  isolation: isolate;
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
  h1 {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }

  h2 {
    font-size: 1.875rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-float,
  .animate-pulse-glow,
  .animate-scan,
  .animate-orbit {
    animation: none !important;
  }
}

/* Service panels: subtle premium glow + top rule */
.synx-panel-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .synx-panel-card {
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .synx-panel-card {
    padding: 2.5rem;
  }
}

.synx-panel-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background:
    radial-gradient(800px circle at 12% 8%, hsl(var(--primary) / 0.14), transparent 42%),
    radial-gradient(700px circle at 88% 68%, hsl(var(--primary) / 0.10), transparent 46%);
  pointer-events: none;
}

.synx-panel-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 0;
  background: linear-gradient(to right, transparent, hsl(var(--primary) / 0.55), transparent);
  opacity: 0.85;
  pointer-events: none;
}

.synx-panel-card > * {
  position: relative;
  z-index: 1;
}

/* Services grid: enforce 1 column on <640px (prevents implicit columns/overflow) */
@media (max-width: 639px) {
  .synx-grid-mobile-1col {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Services: mobile hint */
.synx-services-hint {
  margin-bottom: 1rem;
}

.synx-services-hint__inner {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.synx-services-hint__badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.10);
  border: 1px solid hsl(var(--primary) / 0.25);
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
}

.synx-services-hint__text {
  font-size: 0.875rem;
  color: hsl(var(--foreground) / 0.78);
}

/* Services cards: consistent height + clear tap affordance */
.synx-service-card {
  min-height: 260px;
  transform: translateZ(0);
  will-change: transform, box-shadow;
  outline: none;
}

.synx-service-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(520px circle at 12% 10%, hsl(var(--primary) / 0.12), transparent 42%),
    radial-gradient(420px circle at 92% 80%, hsl(var(--primary) / 0.08), transparent 44%);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.synx-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
}

.synx-service-card:hover::before {
  opacity: 1;
}

.synx-service-card:active {
  transform: translateY(-1px) scale(0.995);
}

.synx-service-card:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

@media (max-width: 639px) {
  .synx-service-card {
    min-height: 0;
  }
}

/* Panel: highlight on mobile after selecting a service */
.synx-panel-flash {
  animation: synx-panel-flash 900ms cubic-bezier(0.16, 1, 0.3, 1) 1;
}

@keyframes synx-panel-flash {
  0% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  35% {
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.22), 0 0 28px hsl(var(--primary) / 0.18);
  }
  100% {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
}

/* Print styles */
@media print {
  .noise-overlay,
  canvas,
  .animate-float,
  .animate-pulse-glow {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }
}

/* AI Chat (fixed size + bubbles + typing dots) */
.ai-chat__card {
  display: flex;
  flex-direction: column;
  height: clamp(420px, 60vh, 560px);
}

.ai-chat__messages {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.ai-chat__row {
  display: flex;
  width: 100%;
}

.ai-chat__row--assistant {
  justify-content: flex-start;
}

.ai-chat__row--user {
  justify-content: flex-end;
}

.ai-chat__bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border));
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-chat__bubble--assistant {
  background: hsl(var(--background) / 0.35);
  color: hsl(var(--foreground));
  text-align: left;
}

.ai-chat__bubble--user {
  background: hsl(var(--primary) / 0.16);
  border-color: hsl(var(--primary) / 0.28);
  color: hsl(var(--foreground));
  text-align: right;
}

.ai-chat__bubble--typing {
  background: hsl(var(--background) / 0.35);
  color: hsl(var(--foreground));
}

.ai-chat__typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.25rem;
}

.ai-chat__dot {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  background: hsl(var(--foreground) / 0.6);
  transform: translateY(0);
  animation: ai-chat-dot-bounce 1.1s infinite ease-in-out;
}

.ai-chat__dot:nth-child(2) {
  animation-delay: 0.12s;
}

.ai-chat__dot:nth-child(3) {
  animation-delay: 0.24s;
}

@keyframes ai-chat-dot-bounce {
  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  40% {
    transform: translateY(-4px);
    opacity: 1;
  }
}