/* ===== Amino Research Marketplace — Custom Styles ===== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ─── JS-rendered utility classes (Tailwind can't scan JS files) ───────── */
.text-\[11px\] { font-size: 11px; }
.text-\[10px\] { font-size: 10px; }
.text-\[9px\] { font-size: 9px; }
.min-w-\[18px\] { min-width: 18px; }
.h-\[18px\] { height: 18px; }
.min-w-\[36px\] { min-width: 36px; }
.min-w-\[40px\] { min-width: 40px; }
.min-w-\[50px\] { min-width: 50px; }
.min-w-\[260px\] { min-width: 260px; }
.max-w-\[85vw\] { max-width: 85vw; }
.z-\[70\] { z-index: 70; }
.bg-\[\#0f172a\] { background-color: #0f172a; }
.aspect-\[2\/1\] { aspect-ratio: 2/1; }

/* Molecular background pattern */
.molecular-bg {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231e40af' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-bg {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(30, 64, 175, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(13, 148, 136, 0.06) 0%, transparent 50%),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231e40af' stroke-opacity='0.06' stroke-width='1'%3E%3Ccircle cx='20' cy='20' r='3'/%3E%3Ccircle cx='80' cy='20' r='3'/%3E%3Ccircle cx='50' cy='70' r='3'/%3E%3Cline x1='20' y1='20' x2='80' y2='20'/%3E%3Cline x1='80' y1='20' x2='50' y2='70'/%3E%3Cline x1='50' y1='70' x2='20' y2='20'/%3E%3Ccircle cx='50' cy='30' r='2'/%3E%3Cline x1='50' y1='30' x2='20' y2='20'/%3E%3Cline x1='50' y1='30' x2='80' y2='20'/%3E%3C/g%3E%3C/svg%3E");
}

/* Add-to-cart button success flash */
@keyframes addedFlash {
  0%   { background-color: #1e40af; }
  30%  { background-color: #22c55e; }
  100% { background-color: #1e40af; }
}

.cart-added-flash {
  animation: addedFlash 0.8s ease;
}

/* Cart icon bounce when item added */
@keyframes cartBounce {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.35); }
  40%  { transform: scale(0.9); }
  60%  { transform: scale(1.15); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.cart-bounce {
  animation: cartBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* Floating +1 tag */
@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-48px) scale(0.8); }
}

.float-tag {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  animation: floatUp 0.7s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: #22c55e;
  padding: 4px 10px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
  white-space: nowrap;
}

/* Cart badge pulse */
@keyframes badgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.badge-pulse {
  animation: badgePulse 0.3s ease-in-out;
}

/* Toast animations */
@keyframes toastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

.toast-enter {
  animation: toastSlideIn 0.3s ease-out forwards;
}

.toast-exit {
  animation: toastSlideOut 0.3s ease-in forwards;
}

/* Modal backdrop */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

.modal-backdrop {
  animation: fadeIn 0.2s ease-out forwards;
}

.modal-content {
  animation: slideUp 0.3s ease-out forwards;
}

/* Card hover lift */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

/* Image zoom on hover */
.img-zoom {
  transition: transform 0.3s ease;
}

.img-zoom:hover {
  transform: scale(1.05);
}

/* Smooth scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* Horizontal scroll with snap */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.scroll-snap-x > * {
  scroll-snap-align: start;
}

/* Hide scrollbar for carousels */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Star rating */
.star-rating .star {
  color: #d1d5db;
  transition: color 0.15s;
}

.star-rating .star.filled {
  color: #3b82f6;
}

/* Dropdown animation */
.dropdown-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}

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

/* Mobile drawer */
.mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-drawer.open {
  transform: translateX(0);
}

/* Accordion */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.open {
  max-height: 500px;
}

/* Product gallery thumbnail active */
.thumb-active {
  ring: 2px solid #1e40af;
}

/* Checkout step indicator */
.step-line {
  height: 2px;
  transition: background-color 0.3s ease;
}

/* Price update flash */
@keyframes priceFlash {
  0% { background-color: rgba(34, 197, 94, 0.2); }
  100% { background-color: transparent; }
}

.price-flash {
  animation: priceFlash 0.5s ease-out;
}

/* Print styles */
@media print {
  #site-header, #ruo-banner, #site-footer, #toast-container, #quick-view-modal {
    display: none !important;
  }
}

/* ─── Modern Design Tokens ─────────────────────────────────────────── */

/* Spline 3D hero scene — right panel on desktop, full-bg on mobile */
.hero-spline-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Prevent Spline viewer from rendering visible borders or seams */
spline-viewer,
spline-viewer canvas {
  display: block;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hero content wrapper — responsive padding */
.hero-content-wrap {
  padding: 6rem 1.25rem 3rem;
}

.hero-content-col {
  width: 100%;
  padding: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-content-wrap {
    padding: 7rem 2rem 5rem 7rem;
  }

  .hero-content-col {
    width: 50%;
    padding: 0 1rem;
    text-align: left;
  }
}

@media (max-width: 767px) {
  .hero-spline-wrap {
    left: -60%;
    opacity: 1;
    pointer-events: none;
  }
}

/* Gradient backgrounds */
.gradient-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
}

.gradient-blue {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

.gradient-text {
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Modern card styles */
.card-modern {
  background: white;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.card-modern:hover {
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

/* Glass effect for overlays */
.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Subtle grid pattern background */
.bg-grid {
  background-image: radial-gradient(circle, #e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Modern button styles */
.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: white;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 32px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px -3px rgba(37, 99, 235, 0.4);
}

.btn-primary:hover {
  box-shadow: 0 6px 20px -3px rgba(37, 99, 235, 0.5);
  transform: translateY(-1px);
}

.btn-secondary {
  background: white;
  color: #2563eb;
  font-weight: 600;
  border-radius: 12px;
  padding: 12px 32px;
  border: 1.5px solid #2563eb;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: #2563eb;
  color: white;
}

/* Stat counter animation */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

/* Hero staggered entrance animation */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-fade-up {
  opacity: 0;
  animation: heroFadeUp 1.2s ease-out forwards;
}

/* Glow effect for hero elements */
.glow-blue {
  box-shadow: 0 0 60px -15px rgba(37, 99, 235, 0.3);
}

/* Staggered fade-in for lists */
.stagger-in > * {
  opacity: 0;
  animation: countUp 0.4s ease-out forwards;
}
.stagger-in > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-in > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-in > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-in > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-in > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-in > *:nth-child(6) { animation-delay: 0.3s; }
.stagger-in > *:nth-child(7) { animation-delay: 0.35s; }
.stagger-in > *:nth-child(8) { animation-delay: 0.4s; }

/* ─── React Homepage: Marquee animations ────────────────────────────── */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.animate-marquee {
  animation: marquee var(--duration, 30s) linear infinite;
}

.animate-marquee-reverse {
  animation: marquee-reverse var(--duration, 30s) linear infinite;
}

/* Neon Gradient Card — animated border */
@keyframes neon-gradient-spin {
  0% { background-position: 0% 0%; }
  50% { background-position: 200% 100%; }
  100% { background-position: 0% 0%; }
}

/* Border Beam — spinning conic gradient */
@property --border-beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes border-beam-spin {
  from { --border-beam-angle: 0deg; }
  to { --border-beam-angle: 360deg; }
}