/* ==========================================================================
   BULK RESIZER 2.0 — 3D PERSPECTIVE & SPATIAL DESIGN SYSTEM
   ========================================================================== */

:root {
  --perspective-depth: 1200px;
  --card-3d-bg: rgba(255, 255, 255, 0.95);
  --card-3d-border: rgba(9, 76, 178, 0.12);
  --card-3d-shadow: 0 20px 40px -15px rgba(9, 76, 178, 0.08), 0 0 1px 1px rgba(0, 0, 0, 0.04);
  --card-3d-hover-shadow: 0 30px 60px -12px rgba(9, 76, 178, 0.18), 0 12px 24px -8px rgba(0, 0, 0, 0.06);
  --glow-primary: rgba(9, 76, 178, 0.25);
  --glow-accent: rgba(51, 102, 204, 0.35);
}

.perspective-1000 {
  perspective: var(--perspective-depth);
  transform-style: preserve-3d;
}

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

.backface-hidden {
  backface-visibility: hidden;
}

/* 3D Hero Dropzone */
.dropzone-3d {
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.dropzone-3d:hover {
  transform: translateY(-4px) translateZ(8px);
  box-shadow: 0 25px 50px -12px rgba(9, 76, 178, 0.14), 0 0 0 1px rgba(9, 76, 178, 0.2);
}

.dropzone-3d.dragover {
  transform: scale(1.02) translateZ(16px);
  border-color: #094cb2 !important;
  background-color: rgba(9, 76, 178, 0.04) !important;
  box-shadow: 0 30px 60px -10px rgba(9, 76, 178, 0.25), 0 0 0 2px #094cb2;
}

/* Floating 3D Icon */
.floating-3d-badge {
  animation: floatBadge 4s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes floatBadge {
  0%, 100% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg) translateZ(10px);
  }
  50% {
    transform: translateY(-8px) rotateX(4deg) rotateY(-4deg) translateZ(20px);
  }
}

/* 3D ZIP Card */
.zip-card-3d {
  position: relative;
  background: var(--card-3d-bg);
  border: 1px solid var(--card-3d-border);
  box-shadow: var(--card-3d-shadow);
  border-radius: 1.25rem;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.zip-card-3d:hover {
  transform: translateY(-5px) translateZ(12px) scale(1.01);
  box-shadow: var(--card-3d-hover-shadow);
  border-color: rgba(9, 76, 178, 0.3);
}

.zip-card-3d.is-processing {
  border-color: #094cb2;
  box-shadow: 0 0 0 2px rgba(9, 76, 178, 0.2), 0 20px 45px -10px rgba(9, 76, 178, 0.2);
}

.zip-card-3d.is-completed {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.15);
}

.zip-card-3d.is-failed {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 10px 30px -10px rgba(239, 68, 68, 0.15);
}

/* 3D Status Pill */
.status-pill-3d {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* 3D Pipeline Stages */
.pipeline-stage {
  position: relative;
  transition: all 0.3s ease;
}

.pipeline-stage.active {
  transform: translateY(-2px) translateZ(8px);
}

.pipeline-stage.active .stage-icon {
  background: linear-gradient(135deg, #094cb2, #3366cc);
  color: #ffffff;
  box-shadow: 0 8px 20px -4px rgba(9, 76, 178, 0.4);
}

.pipeline-stage.completed .stage-icon {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

/* 3D Button Elevation */
.btn-3d {
  position: relative;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: translateZ(0);
}

.btn-3d:hover:not(:disabled) {
  transform: translateY(-2px) translateZ(6px);
  box-shadow: 0 12px 24px -6px rgba(9, 76, 178, 0.35);
}

.btn-3d:active:not(:disabled) {
  transform: translateY(1px) translateZ(2px);
  box-shadow: 0 4px 10px -2px rgba(9, 76, 178, 0.25);
}

/* Layered Glass Surface */
.glass-surface-3d {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
}

/* 3D Segmented Radio Controls */
.segment-3d-btn {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.segment-3d-btn.active {
  background: #ffffff;
  color: #094cb2;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(9, 76, 178, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Smooth Progress Bar Glow */
.progress-bar-glow {
  box-shadow: 0 0 15px rgba(9, 76, 178, 0.45);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .perspective-1000,
  .transform-style-3d,
  .zip-card-3d,
  .dropzone-3d,
  .btn-3d,
  .floating-3d-badge {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}