/* ============================================================================
   AURORA 3D — Depth & dimension layer
   Loads AFTER aurora.css. Adds perspective tilt, layered shadows,
   glassmorphism, floating elements, and 3D hover/press interactions.
   Pure CSS — no JS required. Respects prefers-reduced-motion.
   ============================================================================ */

/* ---- Global 3D context ---- */
.feature-card,
.skp-dc-card,
.pricing-card,
.skp-tb-item,
.testimonial-card,
.skp-intro,
.skp-why-stat {
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}

/* ============================================================================
   FEATURE CARDS — 3D lift + tilt on hover
   ============================================================================ */
.feature-card {
  position: relative;
  box-shadow:
    0 1px 2px rgba(28,25,23,0.04),
    0 4px 8px rgba(28,25,23,0.04) !important;
}
.feature-card:hover {
  transform: translateY(-10px) perspective(900px) rotateX(4deg) scale(1.02) !important;
  box-shadow:
    0 2px 4px rgba(28,25,23,0.04),
    0 12px 20px rgba(249,115,22,0.10),
    0 24px 48px rgba(217,70,239,0.12),
    0 40px 80px rgba(28,25,23,0.14) !important;
}
/* Icon pops forward in 3D space */
.feature-card .fs-1,
.feature-card [class*="ri-"]:first-child {
  transition: transform 0.45s cubic-bezier(0.22,1,0.36,1);
  transform: translateZ(0);
}
.feature-card:hover .fs-1,
.feature-card:hover [class*="ri-"]:first-child {
  transform: translateZ(30px) scale(1.12);
}

/* ============================================================================
   PRICING CARDS — deep 3D float, featured card raised highest
   ============================================================================ */
.pricing-card {
  box-shadow:
    0 4px 12px rgba(28,25,23,0.06),
    0 12px 32px rgba(28,25,23,0.05) !important;
}
.pricing-card:hover {
  transform: translateY(-14px) perspective(1000px) rotateX(3deg) !important;
  box-shadow:
    0 12px 24px rgba(249,115,22,0.12),
    0 28px 56px rgba(28,25,23,0.12),
    0 48px 90px rgba(28,25,23,0.10) !important;
}
/* Featured / popular card sits elevated by default with a glow base */
.pricing-card.featured,
.pricing-card.popular,
.pricing-card.best,
.pricing-card.highlight {
  transform: perspective(1000px) translateZ(20px) scale(1.03);
  box-shadow:
    0 20px 50px rgba(28,25,23,0.18),
    0 8px 20px rgba(249,115,22,0.15) !important;
  z-index: 2;
}
.pricing-card.featured:hover,
.pricing-card.popular:hover,
.pricing-card.best:hover {
  transform: perspective(1000px) translateZ(30px) translateY(-10px) scale(1.05) !important;
}

/* ============================================================================
   DATACENTER CARDS — 3D flip-lift
   ============================================================================ */
.skp-dc-card {
  box-shadow: 0 2px 6px rgba(28,25,23,0.05) !important;
}
.skp-dc-card:hover {
  transform: translateY(-8px) perspective(800px) rotateY(6deg) scale(1.04) !important;
  box-shadow:
    0 16px 32px rgba(34,211,238,0.14),
    0 28px 56px rgba(28,25,23,0.12) !important;
}
.skp-dc-flag {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.skp-dc-card:hover .skp-dc-flag {
  transform: translateZ(24px) scale(1.15);
}

/* ============================================================================
   GLASSMORPHISM — frosted depth on key panels
   ============================================================================ */
.skp-intro {
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 4px 16px rgba(28,25,23,0.06),
    0 16px 48px rgba(217,70,239,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6) !important;
}
.skp-intro:hover {
  transform: perspective(1200px) rotateX(1.5deg) translateY(-4px) !important;
}

/* Trust badge items — subtle 3D press */
.skp-tb-item {
  box-shadow: 0 2px 6px rgba(28,25,23,0.05) !important;
}
.skp-tb-item:hover {
  transform: translateY(-5px) perspective(700px) rotateX(5deg) !important;
  box-shadow: 0 14px 28px rgba(28,25,23,0.10) !important;
}

/* ============================================================================
   STAT BOXES — floating 3D depth (in comparison widget)
   ============================================================================ */
.skp-why-stat {
  box-shadow:
    0 4px 12px rgba(28,25,23,0.10),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.skp-why-stat:hover {
  transform: translateY(-8px) perspective(800px) rotateX(6deg) scale(1.04) !important;
  box-shadow:
    0 18px 40px rgba(28,25,23,0.22),
    0 0 30px rgba(251,191,36,0.12) !important;
}

/* ============================================================================
   BUTTONS — 3D press / lift
   ============================================================================ */
.btn, .buy-now, .btn-buy, button[type="submit"], .cta-dark .btn {
  transition: transform 0.18s cubic-bezier(0.22,1,0.36,1), box-shadow 0.18s ease !important;
}
.btn:hover, .buy-now:hover, .btn-buy:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 24px rgba(249,115,22,0.28) !important;
}
.btn:active, .buy-now:active, .btn-buy:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 6px rgba(249,115,22,0.2) !important;
}

/* ============================================================================
   HERO — floating layered depth
   ============================================================================ */
.main-banner .container,
.main-banner img,
.inner-banner img {
  animation: aur3d-float 6s ease-in-out infinite;
}
@keyframes aur3d-float {
  0%, 100% { transform: translateY(0) perspective(1000px) rotateY(0deg); }
  50%      { transform: translateY(-12px) perspective(1000px) rotateY(-1.5deg); }
}

/* Hero image gets a 3D tilt + deep shadow */
.main-banner img,
.inner-banner img {
  border-radius: 18px;
  box-shadow:
    0 20px 50px rgba(28,25,23,0.18),
    0 8px 20px rgba(217,70,239,0.10);
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
.main-banner img:hover {
  transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) scale(1.02);
}

/* ============================================================================
   SUPPORT WIDGET — 3D depth
   ============================================================================ */
.skp-support-btn {
  box-shadow: 0 8px 28px rgba(28,25,23,0.3), 0 2px 6px rgba(28,25,23,0.2) !important;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease !important;
}
.skp-support-btn:hover {
  transform: translateY(-4px) perspective(600px) rotateX(8deg) !important;
  box-shadow: 0 16px 36px rgba(249,115,22,0.4) !important;
}

/* ============================================================================
   ACCORDION — subtle 3D on open item
   ============================================================================ */
.accordion-item {
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}
.accordion-item:hover {
  transform: translateZ(0) translateX(3px);
}

/* ============================================================================
   SECTION DEPTH — soft layered separation between sections
   ============================================================================ */
.section-white { position: relative; z-index: 1; }
.section-light {
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(28,25,23,0.03);
}

/* ============================================================================
   COMPARISON TABLE — featured column pops
   ============================================================================ */
.skp-compare {
  box-shadow: 0 8px 30px rgba(28,25,23,0.08) !important;
}
.skp-compare tbody td:nth-child(2) {
  position: relative;
}

/* ============================================================================
   Accessibility — honour reduced motion
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .feature-card, .skp-dc-card, .pricing-card, .skp-tb-item,
  .skp-why-stat, .skp-intro, .btn, .buy-now, .skp-support-btn,
  .main-banner img, .main-banner .container, .accordion-item {
    animation: none !important;
    transition: box-shadow 0.2s ease !important;
  }
  .feature-card:hover, .skp-dc-card:hover, .pricing-card:hover,
  .skp-why-stat:hover, .skp-tb-item:hover {
    transform: translateY(-4px) !important;
  }
}

/* Mobile — soften 3D so it doesn't feel jittery on touch */
@media (max-width: 767px) {
  .feature-card:hover, .skp-dc-card:hover, .pricing-card:hover {
    transform: translateY(-5px) !important;
  }
  .main-banner .container, .main-banner img { animation: none; }
}