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

/* Global input styles for better readability */
@layer base {
  input,
  select,
  textarea {
    @apply text-gray-900;
  }
  
  input::placeholder,
  textarea::placeholder {
    @apply text-gray-500;
  }
  
  /* Ensure select options have proper contrast */
  select option {
    @apply text-gray-900 bg-white;
  }
  
  /* Autofill styles */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: rgb(17 24 39) !important;
    -webkit-box-shadow: 0 0 0px 1000px rgb(249 250 251) inset !important;
    transition: background-color 5000s ease-in-out 0s;
  }
}

@layer utilities {
  /* Safe area padding for mobile devices with notches */
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .pt-safe {
    padding-top: env(safe-area-inset-top);
  }
  
  /* Hide scrollbar for category tabs on mobile */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 2rem;
}

*, *::before, *::after {
  scroll-behavior: smooth !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  
  *, *::before, *::after {
    scroll-behavior: auto !important;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-feature-settings: "rlig" 1, "calt" 1, "kern" 1, "liga" 1;
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Premium font classes */
.font-display {
  font-family: var(--font-montserrat), sans-serif;
}


.font-body {
  font-family: var(--font-montserrat), sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Mobile-first responsive typography */
  .text-responsive-hero {
    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl;
  }
  
  .text-responsive-subheading {
    @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl;
  }
  
  .text-responsive-body {
    @apply text-base sm:text-lg md:text-xl;
  }
  
  .text-responsive-small {
    @apply text-sm sm:text-base;
  }
  
  /* Mobile touch targets */
  .touch-target {
    @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
  }
  
  /* Smooth scroll utilities */
  .scroll-smooth {
    scroll-behavior: smooth;
  }
  
  .scroll-auto {
    scroll-behavior: auto;
  }
  
  /* Custom scroll padding for navigation */
  .scroll-pt-header {
    scroll-padding-top: 6rem;
  }
  
  /* Mobile safe area */
  .safe-area-padding {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Motion preferences */
  .animate-on-scroll {
    @apply motion-safe:animate-fade-in motion-reduce:opacity-100;
  }
  
  /* Mobile-first modal optimization */
  .modal-mobile-slide {
    @apply transform transition-transform duration-300 ease-out;
  }
  
  /* Iframe mobile optimization */
  .iframe-mobile-wrapper {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
  }
  
  /* Touch interaction optimization */
  .touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Mobile modal backdrop */
  .modal-backdrop-mobile {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* Custom terminal styles */
.terminal-window {
  background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.terminal-header {
  background: linear-gradient(135deg, #3a3a3a 0%, #2d2d2d 100%);
  border-radius: 8px 8px 0 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot.red {
  background: #ff5f56;
}

.terminal-dot.yellow {
  background: #ffbd2e;
}

.terminal-dot.green {
  background: #27ca3f;
}

.ascii-art {
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.2;
  color: #ff9500;
  white-space: pre;
  text-shadow: 0 0 10px rgba(255, 149, 0, 0.3);
}

/* Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}

@media (max-width: 768px) {
  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
}

/* Slow spin animation for OneScribe Engine */
@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin-slow {
  animation: spin-slow 6s linear infinite;
}

/* Standard spin animation for card borders */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Smooth animations for neural network */
@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.8s ease-out;
}

.animate-fade-in {
  animation: fade-in 1s ease-out;
}

@keyframes marching-ants {
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.4),
      0 0 30px rgba(234, 179, 8, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(234, 179, 8, 0.7),
      0 0 60px rgba(234, 179, 8, 0.5);
  }
}

@keyframes text-glow {
  0%,
  100% {
    text-shadow: 0 0 2px rgba(253, 230, 138, 0.8);
  }
  50% {
    text-shadow: 0 0 10px rgba(253, 230, 138, 1);
  }
}

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

@keyframes core-pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(234, 88, 12, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0);
  }
}

@keyframes label-glow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
    box-shadow: none;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: 0 0 12px rgba(253, 230, 138, 0.6),
      0 0 20px rgba(249, 115, 22, 0.4);
  }
}

/* Hide scrollbar for horizontal scroll tabs */
.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}

/* Mobile-specific iframe optimizations */
@media (max-width: 640px) {
  /* Improve iframe interaction on mobile */
  iframe {
    pointer-events: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Modal on mobile should use native scroll */
  .modal-content-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  
  /* Prevent body scroll when modal is open */
  body.modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }
  
  /* Better touch targets for iframe controls */
  iframe[src*="arcade"] {
    min-height: 400px;
  }
}

/* Touch-friendly navigation dots */
@media (pointer: coarse) {
  /* Ensure touch targets are at least 44x44px */
  button, a, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Increase hit area for small buttons */
  .small-button::before {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
  }
}