/* Starich Recycling Technology Co., Ltd. - Non-Blue Eco-Green & Amber Palette & Advanced 3D Animations Stylesheet */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Green, Lime, Amber, and White Non-Blue Palette */
  --brand-50: #f7fee7;
  --brand-100: #ecfccb;
  --brand-400: #a3e635; /* Eco Lime Highlight */
  --brand-500: #84cc16; /* Vibrant Eco Lime Green */
  --brand-600: #216744; /* STARICH Official Logo Deep Emerald Green */
  --brand-700: #1b593a;
  --brand-800: #164a2f;
  --brand-900: #0f3521; /* Dark Forest Base */
  --amber-gold: #f59e0b; /* Warm Gold Warmth Accent */
  --lime-accent: #84cc16;
  --lime-hover: #65a30d;
}

html {
  scroll-behavior: smooth;
  font-family: 'Montserrat', 'Plus Jakarta Sans', sans-serif;
}

/* Glassmorphism Navigation */
.glass-nav {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.bg-brand-dark {
  background-color: #0f3521;
}

.bg-brand-600 {
  background-color: #216744;
}

.bg-brand-500 {
  background-color: #84cc16;
}

.text-brand-600 {
  color: #216744;
}

.text-lime-500 {
  color: #84cc16;
}

.text-lime-400 {
  color: #a3e635;
}

.border-brand-600 {
  border-color: #216744;
}

.border-lime-500 {
  border-color: #84cc16;
}

/* Hero Background Track & Animated Background Image Slider */
.hero-bg-overlay {
  position: relative;
  overflow: hidden;
  background-color: #0f3521;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.8s ease-out;
  pointer-events: none;
  z-index: 0;
}

.hero-bg-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-bg-slide-1 {
  background-image: linear-gradient(135deg, rgba(15, 53, 33, 0.94) 0%, rgba(11, 35, 22, 0.92) 50%, rgba(33, 103, 68, 0.94) 100%),
                    url('assets/images/hero-factory.jpg');
}

.hero-bg-slide-2 {
  background-image: linear-gradient(135deg, rgba(15, 53, 33, 0.94) 0%, rgba(11, 35, 22, 0.92) 50%, rgba(33, 103, 68, 0.94) 100%),
                    url('assets/images/3d-fiber.jpg');
}

.hero-bg-slide-3 {
  background-image: linear-gradient(135deg, rgba(15, 53, 33, 0.94) 0%, rgba(11, 35, 22, 0.92) 50%, rgba(33, 103, 68, 0.94) 100%),
                    url('assets/images/baby-mat.jpg');
}

.hero-bg-slide-4 {
  background-image: linear-gradient(135deg, rgba(15, 53, 33, 0.94) 0%, rgba(11, 35, 22, 0.92) 50%, rgba(33, 103, 68, 0.94) 100%),
                    url('assets/images/pillow.jpg');
}

.hero-bg-slide-5 {
  background-image: linear-gradient(135deg, rgba(15, 53, 33, 0.94) 0%, rgba(11, 35, 22, 0.92) 50%, rgba(33, 103, 68, 0.94) 100%),
                    url('assets/images/needle-cotton.jpg');
}

.hero-bg-slide-6 {
  background-image: linear-gradient(135deg, rgba(15, 53, 33, 0.94) 0%, rgba(11, 35, 22, 0.92) 50%, rgba(33, 103, 68, 0.94) 100%),
                    url('assets/images/woven-sacks.jpg');
}

/* Beautiful Non-Blue Background Mesh Gradients */
.bg-mesh-eco {
  background-color: #0f3521;
  background-image: 
    radial-gradient(at 10% 20%, rgba(132, 204, 22, 0.22) 0px, transparent 50%),
    radial-gradient(at 90% 80%, rgba(245, 158, 11, 0.18) 0px, transparent 50%),
    radial-gradient(at 50% 50%, rgba(33, 103, 68, 0.40) 0px, transparent 70%);
}

.bg-dots-pattern {
  background-color: #f7fee7;
  background-image: radial-gradient(rgba(33, 103, 68, 0.15) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* 3D Perspective & Card Tilt Utilities */
.perspective-1000 {
  perspective: 1000px;
}

.tilt-card-3d {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
  will-change: transform, box-shadow;
  position: relative;
}

.tilt-card-3d:hover {
  border-color: rgba(132, 204, 22, 0.7) !important;
  box-shadow: 0 25px 50px -12px rgba(33, 103, 68, 0.4), 0 0 30px rgba(132, 204, 22, 0.3);
}

.tilt-card-3d .card-3d-content {
  transform: translateZ(40px);
  transform-style: preserve-3d;
}

.tilt-card-3d .card-3d-bg {
  transform: translateZ(15px);
}

/* 3D Floating Animation Keyframes */
@keyframes float3D {
  0%, 100% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateY(-12px) rotateX(4deg) rotateY(-4deg);
  }
}

.animate-float-3d {
  animation: float3D 6s infinite ease-in-out;
}

/* Dynamic Animated Glowing Borders & Shadows */
@keyframes pulseLimeGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(132, 204, 22, 0.25), 0 10px 30px rgba(0, 0, 0, 0.4);
    border-color: rgba(132, 204, 22, 0.5);
  }
  50% {
    box-shadow: 0 0 45px rgba(132, 204, 22, 0.65), 0 20px 45px rgba(245, 158, 11, 0.3);
    border-color: rgba(245, 158, 11, 0.7);
  }
}

.glow-3d-box {
  animation: pulseLimeGlow 4s infinite ease-in-out;
}

/* Button Shimmer & Shine Sweep Effect */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.50) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: rotate(30deg);
  animation: shineSweep 4s infinite ease-in-out;
}

@keyframes shineSweep {
  0% { left: -60%; }
  35%, 100% { left: 140%; }
}

/* Interactive Hover Lift on Buttons & Div Cards */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 15px 30px -5px rgba(33, 103, 68, 0.35);
}

/* Three.js Hero Canvas Container - Subtle ambient background behind everything */
#threeCanvasContainer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}

/* Slide-out Cart Drawer */
.cart-drawer-backdrop {
  background-color: rgba(11, 35, 22, 0.78);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cart-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer-content {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.cart-drawer-backdrop.active .cart-drawer-content {
  transform: translateX(0);
}

/* Modal Windows */
.modal-backdrop {
  background-color: rgba(11, 35, 22, 0.80);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  transform: translateY(20px) scale(0.96) rotateX(4deg);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
.modal-backdrop.active .modal-content {
  transform: translateY(0) scale(1) rotateX(0deg);
}

/* 3D Product Interactive Cube in Lime & Emerald Green */
.cube-wrapper {
  width: 160px;
  height: 160px;
  perspective: 600px;
  margin: 0 auto;
}

.cube-3d {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-20deg);
  animation: rotateCube 14s infinite linear;
}

@keyframes rotateCube {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

.cube-face {
  position: absolute;
  width: 160px;
  height: 160px;
  border: 2px solid rgba(132, 204, 22, 0.8);
  background: rgba(33, 103, 68, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  box-shadow: inset 0 0 25px rgba(132, 204, 22, 0.45);
}

.cube-face-front  { transform: rotateY(0deg) translateZ(80px); }
.cube-face-back   { transform: rotateY(180deg) translateZ(80px); }
.cube-face-right  { transform: rotateY(90deg) translateZ(80px); }
.cube-face-left   { transform: rotateY(-90deg) translateZ(80px); }
.cube-face-top    { transform: rotateX(90deg) translateZ(80px); }
.cube-face-bottom { transform: rotateX(-90deg) translateZ(80px); }

/* Custom Scrollbars in Green & Lime */
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: #f7fee7;
}
::-webkit-scrollbar-thumb {
  background: #216744;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #84cc16;
}

/* Floating WhatsApp / Live Chat Widget in Vibrant Lime Green with Pulse Animation */
.floating-chat-btn {
  background-color: #84cc16;
  color: #0f3521;
  box-shadow: 0 10px 25px -5px rgba(132, 204, 22, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: floatChatPulse 3s infinite ease-in-out;
}

@keyframes floatChatPulse {
  0%, 100% {
    transform: translateY(0px) scale(1);
    box-shadow: 0 10px 25px -5px rgba(132, 204, 22, 0.6);
  }
  50% {
    transform: translateY(-6px) scale(1.06);
    box-shadow: 0 18px 35px -5px rgba(132, 204, 22, 0.85);
  }
}

/* Product Card Hover Effects */
.prod-card-img {
  transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1);
}
.prod-card:hover .prod-card-img {
  transform: scale(1.08);
}