/* Premium CSS for Xingling Cultural Group Corporate Website */

:root {
  --color-star-night: #0B1437;
  --color-star-deep: #0F2354;
  --color-star-space: #1E3A8A;
  --color-star-sky: #3B82F6;
  --color-opc-blue: #1B4FD8;
  --color-opc-cyan: #06B6D4;
  --color-study-purple: #6D28D9;
  --color-study-violet: #7C3AED;
  --color-work-orange: #EA6A1E;
  --color-work-amber: #FBB130;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Premium gradient text */
.gradient-text {
  background: linear-gradient(135deg, #3B82F6 0%, #ffffff 50%, #3B82F6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass morphism utilities */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-light {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 3D card transforms with combined rotations */
.perspective-1000 {
  perspective: 1000px;
}

.card-3d-opc {
  transform: rotateY(12deg) rotateZ(6deg);
}

.card-3d-opc:hover {
  transform: rotateY(0deg) rotateZ(0deg) scale(1.05);
}

.card-3d-study {
  transform: rotateY(-6deg) rotateZ(3deg);
}

.card-3d-study:hover {
  transform: rotateY(0deg) rotateZ(0deg) scale(1.05);
}

.card-3d-work {
  transform: rotateY(8deg) rotateZ(-3deg);
}

.card-3d-work:hover {
  transform: rotateY(0deg) rotateZ(0deg) scale(1.05);
}

/* Magnetic hover effect */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.magnetic:hover {
  transform: scale(1.05) translateY(-2px);
}

/* Smooth scroll animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Hero visual card shadows */
.hero-visual > div > div {
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

/* Button glow effects */
.btn-glow {
  position: relative;
  overflow: hidden;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-glow:hover::before {
  left: 100%;
}

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

::-webkit-scrollbar-track {
  background: var(--color-star-night);
}

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

::-webkit-scrollbar-thumb:hover {
  background: var(--color-star-space);
}

/* Selection color */
::selection {
  background: rgba(59, 130, 246, 0.3);
  color: white;
}

/* Starfield canvas */
#starfield {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Business card hover enhancements */
.business-card {
  position: relative;
  overflow: hidden;
}

.business-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, 0.1), transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.business-card:hover::before {
  opacity: 1;
}

/* Flow step connector enhancement */
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -12px;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), transparent);
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  .flow-step:not(:last-child)::after {
    display: none;
  }
}

/* Stat card counter animation */
.stat-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(11, 20, 55, 0.15);
}

.dark .stat-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Responsive typography adjustments */
@media (max-width: 640px) {
  .hero-content h1 {
    font-size: 2.25rem;
    line-height: 1.2;
  }
}

/* Alpine.js hidden elements fix */
[x-cloak] {
  display: none !important;
}

/* Reduce 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;
  }
}

/* Eco node pulse animation */
.eco-node {
  position: relative;
}

.eco-node::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
  opacity: 0;
  animation: nodePulse 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes nodePulse {
  0%, 100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}