/* ===== KAIROX — 3D Universe ===== */

:root {
  --perspective: 1200px;
  --tilt-max: 14deg;
  --depth-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
                  0 0 60px rgba(0, 240, 255, 0.08);
}

/* Global 3D canvas */
#global3dCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
}

body.has-3d-bg .section,
body.has-3d-bg .footer,
body.has-3d-bg .marquee-section,
body.has-3d-bg .activity-bar,
body.has-3d-bg .hero-content,
body.has-3d-bg .preloader {
  position: relative;
  z-index: 1;
}

body.has-3d-bg .navbar {
  position: fixed;
  z-index: 1100;
}

body.has-3d-bg .hero { z-index: 2; }

/* Perspective containers */
.scene-3d {
  perspective: var(--perspective);
  transform-style: preserve-3d;
}

/* ─── Universal 3D Cards ─── */
.card-3d,
.product-card-3d,
.service-card,
.feature-card,
.portfolio-card,
.blog-card,
.testimonial-card,
.faq-item.faq-3d,
.contact-form,
.stat-item-3d {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.4s ease;
  will-change: transform;
}

.card-3d-wrap {
  perspective: var(--perspective);
  transform-style: preserve-3d;
}

.product-card-3d {
  perspective: var(--perspective);
}

.product-card-3d .product-card-inner {
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: var(--radius);
  position: relative;
}

.product-card-3d::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius) + 1px);
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
  filter: blur(0);
}

.product-card-3d:hover::before {
  opacity: 0.6;
  filter: blur(8px);
}

.product-card-3d .product-image {
  transform: translateZ(30px);
  position: relative;
  overflow: hidden;
}

.product-card-3d .product-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.6s ease;
}

.product-card-3d:hover .product-image::after {
  transform: translateX(100%) skewX(-15deg);
}

.product-card-3d .product-body {
  transform: translateZ(20px);
}

.product-card-3d .product-footer {
  transform: translateZ(40px);
}

/* Shine overlay */
.card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(0, 240, 255, 0.15) 0%,
    transparent 60%
  );
  z-index: 5;
}

.card-3d:hover .card-shine,
.product-card-3d:hover .card-shine,
.service-card:hover .card-shine {
  opacity: 1;
}

/* Service cards 3D */
.service-card {
  transform-style: preserve-3d;
}

.service-card .service-icon {
  transform: translateZ(40px);
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .service-icon {
  transform: translateZ(60px) scale(1.2) rotateY(15deg);
}

.service-card h3,
.service-card p,
.service-card .service-arrow {
  transform: translateZ(25px);
}

.service-card .service-arrow {
  transition: transform 0.3s ease, opacity 0.3s;
}

.service-card:hover .service-arrow {
  transform: translateZ(50px) translateX(-8px);
}

[dir="ltr"] .service-card:hover .service-arrow {
  transform: translateZ(50px) translateX(8px);
}

/* Feature cards — flip depth */
.feature-card {
  position: relative;
  overflow: visible;
}

.feature-card .feature-icon-wrap {
  transform: translateZ(35px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
}

.feature-card:hover .feature-icon-wrap {
  transform: translateZ(55px) rotateY(360deg);
}

.feature-card h3,
.feature-card p {
  transform: translateZ(20px);
}

/* Portfolio 3D depth */
.portfolio-card .portfolio-img {
  transform: translateZ(25px);
  transition: transform 0.4s ease;
}

.portfolio-card:hover .portfolio-img {
  transform: translateZ(45px) scale(1.03);
}

.portfolio-card .portfolio-body {
  transform: translateZ(15px);
}

/* Blog cards */
.blog-card {
  transform-style: preserve-3d;
}

.blog-card .blog-img {
  transform: translateZ(20px);
  transition: transform 0.4s ease;
}

.blog-card:hover .blog-img {
  transform: translateZ(40px) rotateX(5deg);
}

/* Testimonial 3D */
.testimonial-card {
  position: relative;
}

.testimonial-card::after {
  content: '"';
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 4rem;
  line-height: 1;
  color: var(--accent-cyan);
  opacity: 0.08;
  transform: translateZ(-10px);
  pointer-events: none;
}

[dir="ltr"] .testimonial-card::after {
  left: auto;
  right: 20px;
}

/* FAQ 3D accordion */
.faq-3d {
  transform-style: preserve-3d;
}

.faq-3d.open {
  transform: translateZ(10px);
  box-shadow: var(--depth-shadow);
}

.faq-3d .faq-question {
  transform: translateZ(15px);
}

/* Hero enhancements */
.hero-visual {
  perspective: var(--perspective);
  transform-style: preserve-3d;
}

.hero-card {
  transform-style: preserve-3d;
  animation: hero-float-3d 6s ease-in-out infinite;
}

@keyframes hero-float-3d {
  0%, 100% { transform: translateY(0) rotateX(2deg) rotateY(-2deg); }
  50% { transform: translateY(-12px) rotateX(-2deg) rotateY(2deg); }
}

.hero-card .code-window {
  transform: translateZ(30px);
  box-shadow: var(--depth-shadow);
}

.float-badge {
  transform-style: preserve-3d;
  animation: float-3d 4s ease-in-out infinite;
}

@keyframes float-3d {
  0%, 100% { transform: translateY(0) translateZ(20px) rotateX(0); }
  33% { transform: translateY(-10px) translateZ(40px) rotateX(5deg); }
  66% { transform: translateY(-5px) translateZ(30px) rotateX(-3deg); }
}

.badge-1 { animation-delay: 0s; }
.badge-2 { animation-delay: 1.3s; }
.badge-3 { animation-delay: 2.6s; }

/* Stats 3D */
.hero-stats .stat-item {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.hero-stats .stat-item:hover {
  transform: translateZ(20px) scale(1.05);
}

.stat-num {
  transform: translateZ(15px);
  display: inline-block;
}

/* 3D Buttons */
.btn-3d {
  transform-style: preserve-3d;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-3d:hover {
  transform: translateY(-3px) translateZ(10px);
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.35);
}

.btn-3d:active {
  transform: translateY(0) translateZ(2px);
}

/* Navbar glass 3D */
.navbar.scrolled {
  transform: translateZ(0);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 1px 0 rgba(0, 240, 255, 0.1) inset;
}

.logo-icon {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.logo:hover .logo-icon {
  transform: rotateY(180deg) scale(1.1);
}

/* Section floating orbs (CSS) */
.section-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.12;
  animation: orb-drift 20s ease-in-out infinite;
}

.section-orb.cyan { background: var(--accent-cyan); width: 300px; height: 300px; }
.section-orb.purple { background: var(--accent-purple); width: 250px; height: 250px; }
.section-orb.pink { background: var(--accent-pink); width: 200px; height: 200px; }

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.1); }
  50% { transform: translate(-20px, 30px) scale(0.9); }
  75% { transform: translate(20px, 20px) scale(1.05); }
}

/* Marquee 3D tilt */
.marquee-section {
  transform-style: preserve-3d;
  transform: rotateX(2deg);
  transform-origin: center;
}

.marquee-content span:nth-child(odd) {
  text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

/* Reveal 3D */
.reveal-3d {
  opacity: 0;
  transform: perspective(var(--perspective)) rotateX(25deg) translateY(60px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-3d.visible {
  opacity: 1;
  transform: perspective(var(--perspective)) rotateX(0) translateY(0);
}

.service-card:hover {
  transform: translateZ(24px) rotateX(2deg);
  box-shadow: var(--depth-shadow), 0 0 40px rgba(0, 240, 255, 0.12);
}

.service-card:hover .service-icon {
  transform: translateZ(40px) scale(1.15) rotateY(12deg);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
  transform-style: preserve-3d;
}

.feature-card:hover {
  transform: translateZ(20px) rotateY(-3deg);
}

.nav-link {
  transform-style: preserve-3d;
  transition: transform 0.25s, color 0.25s;
}

/* Chat widget 3D */
.chat-toggle {
  transform-style: preserve-3d;
  animation: chat-bob-3d 3s ease-in-out infinite;
}

@keyframes chat-bob-3d {
  0%, 100% { transform: translateZ(0) rotateZ(0); }
  50% { transform: translateZ(15px) rotateZ(3deg); }
}

.chat-panel {
  transform-style: preserve-3d;
}

/* Cart sidebar 3D slide */
.cart-sidebar {
  transform-style: preserve-3d;
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45),
              0 0 40px rgba(0, 240, 255, 0.05);
}

[dir="ltr"] .cart-sidebar {
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45),
              0 0 40px rgba(0, 240, 255, 0.05);
}

/* Preloader 3D */
.preloader-logo {
  transform-style: preserve-3d;
  animation: preloader-spin-3d 2s ease-in-out infinite;
}

@keyframes preloader-spin-3d {
  0% { transform: rotateY(0) scale(1); }
  50% { transform: rotateY(180deg) scale(1.1); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* Scroll indicator 3D */
.scroll-indicator {
  transform-style: preserve-3d;
  animation: scroll-bounce-3d 2s ease infinite;
}

@keyframes scroll-bounce-3d {
  0%, 100% { transform: translateX(-50%) translateZ(0); }
  50% { transform: translateX(-50%) translateZ(20px) translateY(5px); }
}

/* Contact form depth */
.contact-form {
  box-shadow: var(--depth-shadow);
}

.contact-link {
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-link:hover {
  transform: translateZ(15px) translateX(-6px);
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.15);
}

[dir="ltr"] .contact-link:hover {
  transform: translateZ(15px) translateX(6px);
}

/* Filter buttons 3D */
.filter-btn {
  transform-style: preserve-3d;
  transition: transform 0.2s ease, background 0.3s, color 0.3s;
}

.filter-btn:hover {
  transform: translateZ(8px);
}

.filter-btn.active {
  transform: translateZ(12px);
  box-shadow: 0 8px 25px rgba(0, 240, 255, 0.3);
}

/* Section title 3D text */
.section-title {
  transform-style: preserve-3d;
  text-shadow: 0 1px 0 rgba(0,240,255,0.1),
               0 2px 0 rgba(0,240,255,0.05),
               0 10px 30px rgba(0,0,0,0.3);
}

/* Auth card 3D */
.auth-card {
  transform-style: preserve-3d;
  box-shadow: var(--depth-shadow);
  transition: transform 0.2s ease-out, box-shadow 0.3s ease;
}

.auth-card:hover {
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 240, 255, 0.1);
}

.auth-logo .logo-icon {
  animation: orbit-3d 8s linear infinite;
  transform-style: preserve-3d;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-card,
  .float-badge,
  .chat-toggle,
  .scroll-indicator,
  .section-orb,
  .preloader-logo {
    animation: none !important;
  }
  .card-3d, .product-card-3d, .service-card, .feature-card {
    transform: none !important;
  }
}