/* =========================================== */
/* TEMPLATE-OPTIONAL-2026-BUNDLE */
/* Generated: 2025-12-12T21:47:52.867Z */
/* Combines 3 CSS files for optimized loading */
/* =========================================== */

/* =========================================== */
/* 1. template/shared/css/button-glow-pulse-2026.css */
/* =========================================== */

/* =========================================== */
/* BUTTON GLOW & PULSE EFFECTS 2026 */
/* Gradient glow on hover + pulsing animation */
/* =========================================== */

/* =========================================== */
/* GLOW EFFECT - Gradient glow on hover */
/* =========================================== */

.btn-glow {
  position: relative;
  overflow: visible !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.btn-glow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  transform: translate(-50%, -50%);
  border-radius: inherit;
  background: inherit;
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}

.btn-glow:hover::before,
.btn-glow:focus::before {
  opacity: 0.8;
}

.btn-glow:active::before {
  opacity: 0.6;
}

/* Glow color variations for different button types */
.btn-primary.btn-glow::before {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  filter: blur(16px);
}

.btn-secondary.btn-glow::before {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  filter: blur(16px);
}

.btn-success.btn-glow::before {
  background: linear-gradient(135deg, #10b981, #34d399);
  filter: blur(16px);
}

.btn-danger.btn-glow::before {
  background: linear-gradient(135deg, #ef4444, #f87171);
  filter: blur(16px);
}

.btn-warning.btn-glow::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  filter: blur(16px);
}

.btn-info.btn-glow::before {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  filter: blur(16px);
}

.btn-outline-primary.btn-glow::before {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.6));
  filter: blur(14px);
}

.btn-outline-secondary.btn-glow::before {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.6), rgba(156, 163, 175, 0.6));
  filter: blur(14px);
}

.btn-outline-success.btn-glow::before {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(52, 211, 153, 0.6));
  filter: blur(14px);
}

.btn-outline-danger.btn-glow::before {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(248, 113, 113, 0.6));
  filter: blur(14px);
}

.btn-outline-warning.btn-glow::before {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.6), rgba(251, 191, 36, 0.6));
  filter: blur(14px);
}

.btn-outline-info.btn-glow::before {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.6), rgba(96, 165, 250, 0.6));
  filter: blur(14px);
}

.btn-light.btn-glow::before {
  background: linear-gradient(135deg, #f9fafb, #ffffff);
  filter: blur(16px);
}

.btn-dark.btn-glow::before {
  background: linear-gradient(135deg, #1f2937, #374151);
  filter: blur(16px);
}

/* =========================================== */
/* PULSE EFFECT - Continuous pulsing animation */
/* =========================================== */

.btn-pulse {
  position: relative;
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
    transform: scale(1.02);
  }
}

/* Pulse color variations for different button types */
.btn-primary.btn-pulse {
  animation: pulse-glow-primary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-primary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
    transform: scale(1.02);
  }
}

.btn-secondary.btn-pulse {
  animation: pulse-glow-secondary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-secondary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(107, 114, 128, 0);
    transform: scale(1.02);
  }
}

.btn-success.btn-pulse {
  animation: pulse-glow-success 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-success {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
    transform: scale(1.02);
  }
}

.btn-danger.btn-pulse {
  animation: pulse-glow-danger 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-danger {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
    transform: scale(1.02);
  }
}

.btn-warning.btn-pulse {
  animation: pulse-glow-warning 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-warning {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(245, 158, 11, 0);
    transform: scale(1.02);
  }
}

.btn-info.btn-pulse {
  animation: pulse-glow-info 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-info {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(59, 130, 246, 0);
    transform: scale(1.02);
  }
}

.btn-outline-primary.btn-pulse {
  animation: pulse-glow-outline-primary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-outline-primary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
    transform: scale(1.02);
  }
}

.btn-outline-secondary.btn-pulse {
  animation: pulse-glow-outline-secondary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow-outline-secondary {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(107, 114, 128, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(107, 114, 128, 0);
    transform: scale(1.02);
  }
}

/* =========================================== */
/* GLOW + PULSE - Combined effect */
/* =========================================== */

.btn-glow-pulse {
  position: relative;
  overflow: visible;
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.btn-glow-pulse::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  transform: translate(-50%, -50%);
  border-radius: inherit;
  background: inherit;
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  pointer-events: none;
}

.btn-glow-pulse:hover::before,
.btn-glow-pulse:focus::before {
  opacity: 0.8;
}

.btn-glow-pulse:active::before {
  opacity: 0.6;
}

/* Combined effect color variations */
.btn-primary.btn-glow-pulse::before {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  filter: blur(16px);
}

.btn-primary.btn-glow-pulse {
  animation: pulse-glow-primary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-secondary.btn-glow-pulse::before {
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  filter: blur(16px);
}

.btn-secondary.btn-glow-pulse {
  animation: pulse-glow-secondary 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-success.btn-glow-pulse::before {
  background: linear-gradient(135deg, #10b981, #34d399);
  filter: blur(16px);
}

.btn-success.btn-glow-pulse {
  animation: pulse-glow-success 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-danger.btn-glow-pulse::before {
  background: linear-gradient(135deg, #ef4444, #f87171);
  filter: blur(16px);
}

.btn-danger.btn-glow-pulse {
  animation: pulse-glow-danger 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-warning.btn-glow-pulse::before {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  filter: blur(16px);
}

.btn-warning.btn-glow-pulse {
  animation: pulse-glow-warning 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.btn-info.btn-glow-pulse::before {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  filter: blur(16px);
}

.btn-info.btn-glow-pulse {
  animation: pulse-glow-info 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* =========================================== */
/* CONTAINER OVERFLOW FIXES */
/* =========================================== */

/* Ensure parent containers allow glow to show */
.collection-card-wrapper,
.collection-card,
.collection-card .card-body {
  overflow: visible !important;
}

.collection-cards-row {
  overflow: visible !important;
  padding: 16px 0 !important;
}

.collection-cards-row > [class*="col-"] {
  overflow: visible !important;
}

/* Ensure buttons in cards can show glow */
.collection-card-btn.btn-glow {
  margin: 8px !important;
  position: relative;
  z-index: 20;
}

/* =========================================== */
/* PERFORMANCE OPTIMIZATIONS */
/* =========================================== */

.btn-glow,
.btn-pulse,
.btn-glow-pulse {
  will-change: transform, box-shadow, filter;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

/* =========================================== */
/* ACCESSIBILITY - Respect reduced motion */
/* =========================================== */

@media (prefers-reduced-motion: reduce) {
  .btn-pulse,
  .btn-glow-pulse {
    animation: none !important;
  }
  
  .btn-glow::before,
  .btn-glow-pulse::before {
    transition: none !important;
    opacity: 0 !important;
  }
}



/* =========================================== */
/* 2. template/shared/css/retro-nostalgic-2026.css */
/* =========================================== */

/* =========================================== */
/* RETRO-NOSTALGIC DESIGN ELEMENTS 2026 */
/* Vintage aesthetics with modern execution */
/* Award-winning UX/UI enhancement */
/* =========================================== */

/* ===== RETRO COLOR PALETTE ===== */
:root {
  --retro-orange: #ff6b35;
  --retro-yellow: #f7b801;
  --retro-teal: #00a8cc;
  --retro-pink: #ff6b9d;
  --retro-purple: #9b59b6;
  --retro-brown: #8b4513;
  --retro-cream: #fef5e7;
  --retro-paper: #f5f5dc;
  
  /* Vintage textures */
  --retro-texture-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ===== HAND-DRAWN BORDERS ===== */
.retro-border-hand-drawn {
  position: relative;
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  background: var(--retro-cream);
}

.retro-border-hand-drawn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed var(--retro-orange);
  pointer-events: none;
  animation: handDrawnWiggle 3s ease-in-out infinite;
}

@keyframes handDrawnWiggle {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(1px, -1px) rotate(0.5deg);
  }
  50% {
    transform: translate(-1px, 1px) rotate(-0.5deg);
  }
  75% {
    transform: translate(1px, 1px) rotate(0.3deg);
  }
}

/* ===== VINTAGE TYPOGRAPHY ===== */
.retro-typewriter {
  font-family: 'Courier New', 'Monaco', monospace;
  font-size: 18px;
  line-height: 1.6;
  color: var(--retro-brown);
  background: var(--retro-paper);
  padding: 24px;
  border-left: 4px solid var(--retro-orange);
  position: relative;
}

.retro-typewriter::before {
  content: '>';
  position: absolute;
  left: 8px;
  top: 24px;
  color: var(--retro-orange);
  animation: typewriterBlink 1s step-end infinite;
}

@keyframes typewriterBlink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Vintage serif headings */
.retro-heading {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
  font-style: italic;
  color: var(--retro-brown);
  text-shadow: 2px 2px 0px var(--retro-yellow),
               4px 4px 0px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.05em;
}

/* ===== ANALOG-STYLE PROGRESS INDICATORS ===== */
.retro-progress-analog {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 20px auto;
}

.retro-progress-analog::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 8px solid var(--retro-brown);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    var(--retro-orange) 0%,
    var(--retro-orange) var(--progress, 0%),
    var(--retro-cream) var(--progress, 0%),
    var(--retro-cream) 100%
  );
  mask: radial-gradient(circle, transparent 60%, black 60%);
  -webkit-mask: radial-gradient(circle, transparent 60%, black 60%);
}

.retro-progress-analog::after {
  content: attr(data-progress);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
  font-weight: bold;
  color: var(--retro-brown);
  font-family: 'Courier New', monospace;
}

/* Vintage meter style */
.retro-meter {
  position: relative;
  height: 40px;
  background: var(--retro-cream);
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  overflow: hidden;
}

.retro-meter::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--meter-value, 0%);
  background: repeating-linear-gradient(
    90deg,
    var(--retro-orange) 0px,
    var(--retro-orange) 10px,
    var(--retro-yellow) 10px,
    var(--retro-yellow) 20px
  );
  transition: width 0.5s ease;
}

.retro-meter::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--retro-texture-noise);
  opacity: 0.1;
  pointer-events: none;
}

/* ===== VINTAGE BADGE DESIGNS ===== */
.retro-badge {
  display: inline-block;
  padding: 8px 16px;
  background: var(--retro-yellow);
  color: var(--retro-brown);
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
  transition: transform 0.2s ease;
}

.retro-badge:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
}

.retro-badge::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px dashed var(--retro-orange);
  opacity: 0.5;
}

/* Vintage stamp style */
.retro-stamp {
  display: inline-block;
  padding: 12px 20px;
  background: var(--retro-cream);
  border: 4px dashed var(--retro-brown);
  border-radius: 0;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  color: var(--retro-brown);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  position: relative;
  transform: rotate(5deg);
}

.retro-stamp::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--retro-brown);
  opacity: 0.3;
}

/* ===== RETRO CARD DESIGNS ===== */
.retro-card {
  background: var(--retro-paper);
  border: 4px solid var(--retro-brown);
  border-radius: 0;
  padding: 24px;
  position: relative;
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.retro-card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0px rgba(0, 0, 0, 0.3);
}

.retro-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px dashed var(--retro-orange);
  opacity: 0.3;
  pointer-events: none;
}

/* Vintage photo frame effect */
.retro-photo-frame {
  position: relative;
  padding: 16px;
  background: var(--retro-cream);
  border: 8px solid var(--retro-brown);
  border-radius: 0;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1),
              4px 4px 0px rgba(0, 0, 0, 0.2);
}

.retro-photo-frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 2px solid var(--retro-brown);
  opacity: 0.5;
}

/* ===== HAND-DRAWN ILLUSTRATIONS ===== */
.retro-hand-drawn {
  position: relative;
  filter: url(#rough-paper);
}

.retro-hand-drawn svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Wobbly text effect */
.retro-wobbly-text {
  display: inline-block;
  transform: rotate(-1deg);
  animation: wobblyText 3s ease-in-out infinite;
}

@keyframes wobblyText {
  0%, 100% {
    transform: rotate(-1deg) translateY(0);
  }
  25% {
    transform: rotate(1deg) translateY(-2px);
  }
  50% {
    transform: rotate(-1deg) translateY(0);
  }
  75% {
    transform: rotate(1deg) translateY(2px);
  }
}

/* ===== VINTAGE BUTTONS ===== */
.btn-retro {
  background: var(--retro-yellow);
  color: var(--retro-brown);
  border: 3px solid var(--retro-brown);
  border-radius: 0;
  padding: 12px 24px;
  font-family: 'Courier New', monospace;
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
}

.btn-retro::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px dashed var(--retro-orange);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn-retro:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.3);
  background: var(--retro-orange);
  color: #ffffff;
}

.btn-retro:hover::before {
  opacity: 0.5;
}

.btn-retro:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
}

/* ===== RETRO TEXTURE OVERLAYS ===== */
.retro-texture {
  position: relative;
}

.retro-texture::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--retro-texture-noise);
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ===== VINTAGE COLOR SCHEME OPTION ===== */
body.retro-theme {
  --bg-primary: var(--retro-cream);
  --bg-secondary: var(--retro-paper);
  --text-primary: var(--retro-brown);
  --text-secondary: #6b4423;
  --accent-color: var(--retro-orange);
}

body.retro-theme .card,
body.retro-theme .card-premium {
  background: var(--retro-paper);
  border: 2px solid var(--retro-brown);
  border-radius: 0;
}

body.retro-theme .btn-primary {
  background: var(--retro-yellow);
  color: var(--retro-brown);
  border: 3px solid var(--retro-brown);
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .retro-border-hand-drawn::before,
  .retro-typewriter::before,
  .retro-wobbly-text {
    animation: none !important;
  }
  
  .retro-badge,
  .retro-card,
  .btn-retro {
    transform: none !important;
  }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .retro-progress-analog {
    width: 150px;
    height: 150px;
  }
  
  .retro-progress-analog::after {
    font-size: 24px;
  }
  
  .retro-card {
    padding: 16px;
  }
}







/* =========================================== */
/* 3. template/shared/css/immersive-3d-2026.css */
/* =========================================== */

/* =========================================== */
/* IMMERSIVE 3D ELEMENTS 2026 */
/* WebGL/Three.js enhancements for existing 3D cards */
/* Award-winning UX/UI enhancement */
/* =========================================== */

/* ===== 3D CONTAINER SETUP ===== */
.card-3d-enhanced {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== PARALLAX DEPTH LAYERS ===== */
.parallax-container {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.parallax-layer-back {
  transform: translateZ(-100px) scale(1.1);
  opacity: 0.6;
}

.parallax-layer-middle {
  transform: translateZ(0px) scale(1);
  opacity: 0.8;
}

.parallax-layer-front {
  transform: translateZ(50px) scale(0.95);
  opacity: 1;
}

/* ===== 3D CARD TILT EFFECT ===== */
.card-3d-tilt {
  transform-style: preserve-3d;
  transition: transform 0.1s ease-out;
}

.card-3d-tilt:hover {
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale3d(1.02, 1.02, 1.02);
}

/* ===== WEBGL PARTICLE BACKGROUND ===== */
.webgl-particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}

.webgl-particle-container canvas {
  width: 100%;
  height: 100%;
}

/* ===== 3D HERO BACKGROUND ===== */
.hero-3d-background {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.hero-3d-background::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(102, 126, 234, 0.1) 0%,
    transparent 50%
  );
  transform: translateZ(-50px);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hero-3d-background:hover::before {
  opacity: 0.8;
}

/* ===== FLOATING 3D ELEMENTS ===== */
.float-3d {
  animation: float3D 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes float3D {
  0%, 100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateY(-20px) rotateX(5deg) rotateY(-5deg);
  }
  50% {
    transform: translateY(-10px) rotateX(0deg) rotateY(0deg);
  }
  75% {
    transform: translateY(-20px) rotateX(-5deg) rotateY(5deg);
  }
}

/* ===== 3D TRANSFORM ON SCROLL ===== */
.scroll-3d-transform {
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-3d-transform.in-view {
  transform: translateZ(0) rotateX(0deg);
}

.scroll-3d-transform:not(.in-view) {
  transform: translateZ(-100px) rotateX(10deg);
  opacity: 0.5;
}

/* ===== INTERACTIVE 3D PRODUCT SHOWCASE ===== */
.product-3d-showcase {
  position: relative;
  width: 100%;
  height: 400px;
  transform-style: preserve-3d;
  perspective: 1200px;
}

.product-3d-showcase .product-model {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(var(--rotate-y, 0deg)) rotateX(var(--rotate-x, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* ===== 3D NAVIGATION ELEMENTS ===== */
.nav-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-3d:hover {
  transform: translateZ(20px) rotateY(5deg);
}

.nav-3d::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
  transform: translateZ(-10px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-3d:hover::before {
  opacity: 1;
}

/* ===== DEPTH OF FIELD EFFECT ===== */
.depth-of-field {
  position: relative;
}

.depth-of-field::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at var(--focus-x, 50%) var(--focus-y, 50%),
    transparent 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.depth-of-field:hover::before {
  opacity: 1;
}

/* ===== 3D SHADOW SYSTEM ===== */
.shadow-3d-enhanced {
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 -10px 30px rgba(102, 126, 234, 0.1);
}

.shadow-3d-enhanced:hover {
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset,
    0 -20px 50px rgba(102, 126, 234, 0.2),
    0 0 100px rgba(102, 126, 234, 0.1);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.card-3d-enhanced,
.parallax-layer,
.float-3d,
.scroll-3d-transform {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduce 3D effects on low-end devices */
@media (prefers-reduced-motion: reduce) {
  .card-3d-enhanced,
  .parallax-layer,
  .float-3d,
  .scroll-3d-transform,
  .nav-3d {
    transform: none !important;
    animation: none !important;
  }
}

/* Disable 3D on mobile for performance */
@media (max-width: 768px) {
  .card-3d-enhanced,
  .parallax-layer,
  .float-3d {
    transform: none !important;
    animation: none !important;
  }
  
  .hero-3d-background::before {
    display: none;
  }
}

/* ===== WEBGL CANVAS CONTAINER ===== */
.webgl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

.webgl-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}