@charset "UTF-8";

/* ==============================================================================
 * SOLVETA — Authentic Design System (Replicated 1:1 from Next.js)
 * ============================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Glass & Spotlight Utilities */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(229, 231, 235, 0.8);
}

.dark .glass-card {
  background: rgba(18, 19, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(220, 38, 38, 0.06), transparent 80%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

.dark .spotlight-card::before {
  background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(220, 38, 38, 0.18), transparent 80%);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(156, 163, 175, 0.4);
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.4);
}
::-webkit-scrollbar-thumb:hover {
  background: #8B0021;
}

/* Infinite Marquee Animations */
@keyframes marqueeFlowRight {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

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

/* Prevent horizontal scrolling on mobile */
html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  position: relative;
}

/* Hide scrollbar utility for clean mobile scrolling rows */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.marquee-row-right {
  display: flex;
  width: max-content;
  animation: marqueeFlowRight var(--marquee-speed, 35s) linear infinite;
}

.marquee-row-left {
  display: flex;
  width: max-content;
  animation: marqueeFlowLeft var(--marquee-speed, 35s) linear infinite;
}

.marquee-row-right:hover,
.marquee-row-left:hover {
  animation-play-state: paused;
}

/* 3D Coverflow Container & Card Styles */
#coverflow-section {
  overflow: hidden;
  max-width: 100vw;
  position: relative;
}

.coverflow-container {
  perspective: 1200px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.coverflow-ring {
  transform-style: preserve-3d;
  will-change: transform;
}

.coverflow-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(520px, 82vw);
  aspect-ratio: 16 / 10;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
  background-color: #0d0e14;
  border-width: 2px;
  border-style: solid;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: box-shadow 300ms ease, border-color 300ms ease;
}

@media (min-width: 640px) {
  .coverflow-card {
    border-radius: 18px;
    border-width: 2.5px;
  }
}

/* Opening Screen Transition Styles */
#opening-screen.opening-fade-out {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(24px);
  pointer-events: none;
}

#opening-screen.opening-hidden {
  display: none !important;
}

#opening-content.opening-content-fade-out {
  opacity: 0;
  transform: translateY(-18px) scale(0.96);
  filter: blur(14px);
}