/* ==========================================================================
   PAKALA SOFTWARE — VIBRANT 3D ISOMETRIC MOTIONS & COLOR TRANSFORMATIONS
   Ultra-smooth 60fps hardware-accelerated animations & dynamic color shifting.
   ========================================================================== */

/* 1. Global Micro-Interactions */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.12); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* 2. 3D Isometric Scene Styling */
.scene {
  display: block;
  width: 100%;
  height: auto;
  max-height: 16rem;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 12px 24px rgba(11, 27, 61, 0.08));
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), filter 0.45s ease;
  perspective: 800px;
}

.scene:hover {
  transform: scale(1.04) translateY(-5px);
  filter: drop-shadow(0 18px 36px rgba(0, 82, 204, 0.22));
}

.scene * {
  transform-box: fill-box;
  transform-origin: center;
}

/* 3. Radial Ambient Glow with Dynamic Spectrum Color Transformation */
.scene .sc-ambient-glow {
  animation: sc-glow-transform 7s ease-in-out infinite alternate;
  transform-origin: 210px 165px;
  pointer-events: none;
}

@keyframes sc-glow-transform {
  0% {
    transform: scale(0.92);
    filter: hue-rotate(0deg);
    opacity: 0.35;
  }
  33% {
    transform: scale(1.18);
    filter: hue-rotate(55deg) drop-shadow(0 0 16px rgba(124, 58, 237, 0.4));
    opacity: 0.65;
  }
  66% {
    transform: scale(1.05);
    filter: hue-rotate(130deg) drop-shadow(0 0 20px rgba(255, 0, 122, 0.45));
    opacity: 0.75;
  }
  100% {
    transform: scale(1.14);
    filter: hue-rotate(200deg) drop-shadow(0 0 18px rgba(0, 245, 160, 0.4));
    opacity: 0.55;
  }
}

/* 4. Continuous Hue & Color Transformation on Accent 3D Elements */
.scene .sc-color-transform {
  animation: sc-color-morph 6s ease-in-out infinite alternate;
}

@keyframes sc-color-morph {
  0% {
    filter: hue-rotate(0deg) drop-shadow(0 4px 10px rgba(255, 0, 122, 0.4));
  }
  50% {
    filter: hue-rotate(60deg) drop-shadow(0 6px 14px rgba(124, 58, 237, 0.45));
  }
  100% {
    filter: hue-rotate(140deg) drop-shadow(0 6px 14px rgba(0, 229, 255, 0.45));
  }
}

/* 5. Floating Isometric Elements (Code Chips, Cloud, Accent Rings) */
.scene .sc-float {
  animation: sc-float 4.5s ease-in-out infinite alternate;
}

.scene .sc-float-1 {
  animation-duration: 4.2s;
  animation-delay: -0.5s;
}

.scene .sc-float-2 {
  animation-duration: 5.2s;
  animation-delay: -2.1s;
}

@keyframes sc-float {
  0% { transform: translateY(-8px) rotateZ(-0.5deg); }
  100% { transform: translateY(8px) rotateZ(0.8deg); }
}

/* 6. Layered 3D Elevation & Breathing */
.scene .sc-lift {
  animation: sc-breathe 5.5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.scene .sc-lift-1 { animation-delay: -0.8s; }
.scene .sc-lift-2 { animation-delay: -1.8s; }
.scene .sc-lift-3 { animation-delay: -2.8s; }
.scene .sc-lift-4 { animation-delay: -3.8s; }

@keyframes sc-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Ground Shadow Synchronized Breathing */
.scene .sc-ground-shadow {
  animation: sc-shadow-pulse 5.5s ease-in-out infinite;
  transform-origin: 210px 274px;
}

@keyframes sc-shadow-pulse {
  0%, 100% { transform: scale(1); opacity: 0.14; }
  50% { transform: scale(0.92); opacity: 0.08; }
}

/* 7. Traveling Multi-Color Laser Dashes (Electric Blue -> Magenta -> Emerald) */
.scene .sc-dash {
  animation: sc-dash-move 1.6s linear infinite, sc-dash-color 5s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.8));
}

@keyframes sc-dash-move {
  to { stroke-dashoffset: -36; }
}

@keyframes sc-dash-color {
  0% {
    stroke: #00e5ff;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.85));
  }
  50% {
    stroke: #ff007a;
    filter: drop-shadow(0 0 7px rgba(255, 0, 122, 0.9));
  }
  100% {
    stroke: #00f5a0;
    filter: drop-shadow(0 0 7px rgba(0, 245, 160, 0.85));
  }
}

/* 8. Sliding Data Packets Across Bridges with Luminous Trails */
.scene .sc-slide-1 {
  animation: sc-slide 2.8s ease-in-out infinite alternate;
}

.scene .sc-slide-2 {
  animation: sc-slide 3.4s ease-in-out infinite alternate-reverse;
}

@keyframes sc-slide {
  0% { transform: translate(-10px, -6px); }
  100% { transform: translate(12px, 7px); }
}

/* 9. Glowing Multi-Color Server LEDs */
.scene .sc-led {
  animation: sc-led 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px #00f5a0);
}

.scene .sc-led-1 { animation-delay: 0s; }
.scene .sc-led-2 { animation-delay: -0.5s; }
.scene .sc-led-3 { animation-delay: -1.0s; }

@keyframes sc-led {
  0%, 100% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 8px #00f5a0); }
  50% { opacity: 0.35; transform: scale(0.8); filter: drop-shadow(0 0 2px #00f5a0); }
}

/* 10. Luminous Flow Arrows with Gradient Shifting */
.scene .sc-arrow-1 {
  animation: sc-down 2.2s ease-in-out infinite;
}

.scene .sc-arrow-2 {
  animation: sc-up 2.2s ease-in-out infinite;
}

@keyframes sc-down {
  0%, 100% { transform: translateY(-5px); opacity: 0.6; stroke: #00e5ff; }
  50% { transform: translateY(7px); opacity: 1; stroke: #0088ff; filter: drop-shadow(0 4px 8px rgba(0, 136, 255, 0.45)); }
}

@keyframes sc-up {
  0%, 100% { transform: translateY(5px); opacity: 0.6; stroke: #ff007a; }
  50% { transform: translateY(-7px); opacity: 1; stroke: #c084fc; filter: drop-shadow(0 -4px 8px rgba(255, 0, 122, 0.45)); }
}

/* 11. Sleek Floating Code & Tech Chips */
.scene .sc-chip {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.scene .sc-chip-rect {
  transition: all 0.35s ease;
  filter: drop-shadow(0 4px 10px rgba(11, 27, 61, 0.08));
}

.scene .sc-chip-text {
  transition: all 0.35s ease;
}

/* 12. Exploded 3D Elevation & Color Transformation on Card Hover */
.card:hover .scene,
.bento-card:hover .scene {
  transform: scale(1.05) translateY(-6px);
  filter: drop-shadow(0 20px 40px rgba(0, 82, 204, 0.22));
}

.card:hover .scene .sc-ambient-glow,
.bento-card:hover .scene .sc-ambient-glow {
  opacity: 0.9;
  transform: scale(1.28);
  filter: hue-rotate(65deg) drop-shadow(0 0 24px rgba(0, 229, 255, 0.5));
  transition: all 0.5s ease;
}

.card:hover .scene .sc-lift-1,
.bento-card:hover .scene .sc-lift-1 {
  transform: translateY(-10px);
}

.card:hover .scene .sc-lift-2,
.bento-card:hover .scene .sc-lift-2 {
  transform: translateY(-19px);
}

.card:hover .scene .sc-lift-3,
.bento-card:hover .scene .sc-lift-3 {
  transform: translateY(-29px);
}

.card:hover .scene .sc-lift-4,
.bento-card:hover .scene .sc-lift-4 {
  transform: translateY(-38px);
}

.card:hover .scene .sc-chip-rect,
.bento-card:hover .scene .sc-chip-rect {
  fill: #0b1b3d;
  stroke: #00e5ff;
  stroke-width: 2;
  filter: drop-shadow(0 6px 14px rgba(0, 229, 255, 0.4));
}

.card:hover .scene .sc-chip-text,
.bento-card:hover .scene .sc-chip-text {
  fill: #00e5ff;
  font-weight: 800;
}

/* 13. Accessibility / Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}