/* ==========================================================================
   Premium 3D CSS Hero Illustration
   ========================================================================== */

/* The Stage */
.scene-3d-wrapper {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  transform-style: preserve-3d;
  z-index: 10;
  /* Shift up to align with heading */
  transform: translateY(-80px);
  /* Entrance Animation */
  animation: sceneEntrance 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.scene-3d-container {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  /* controlled by JS */
  --mouse-rot-x: 0deg;
  --mouse-rot-y: 0deg;
  transform: rotateX(var(--mouse-rot-x)) rotateY(var(--mouse-rot-y));
  transition: transform 0.1s linear;
}

/* Ambient Background Glow */
.ambient-glow {
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  transform: translate(-50%, -50%) translateZ(-300px);
  background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(37,99,235,0) 70%);
  border-radius: 50%;
  animation: pulseGlow 6s infinite ease-in-out alternate;
  pointer-events: none;
}
.light .ambient-glow { background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, rgba(37,99,235,0) 70%); }

/* The Phone Centerpiece */
.phone-3d {
  position: absolute;
  top: 50%; left: 50%;
  width: 260px; height: 530px;
  margin-left: -130px; margin-top: -265px;
  transform-style: preserve-3d;
  animation: floatAndRotatePhone 18s infinite ease-in-out;
}

.phone-chassis {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: rgba(15, 20, 30, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    inset 0 0 20px rgba(255,255,255,0.1),
    inset 0 0 3px rgba(255,255,255,0.4),
    0 30px 60px rgba(0,0,0,0.6),
    -15px -15px 40px rgba(37,99,235,0.2),
    0 0 0 2px rgba(100, 110, 140, 0.4); /* Metallic rim */
  backdrop-filter: blur(24px);
  transform-style: preserve-3d;
  overflow: hidden;
}
.light .phone-chassis {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 20px rgba(255,255,255,0.6), 0 30px 60px rgba(0,0,0,0.15), -15px -15px 40px rgba(37,99,235,0.1), 0 0 0 2px rgba(200, 210, 220, 0.5);
}

/* Glass Reflection sweeping across phone */
.phone-glass-reflection {
  position: absolute;
  inset: -100%;
  background: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 60%);
  animation: glassSweep 7s infinite linear;
  pointer-events: none;
  z-index: 10;
}
.light .phone-glass-reflection { background: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 60%); }

.phone-screen {
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  background: #0b0b0e;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,1);
  transform: translateZ(1px); /* Prevent z-fighting */
}
.light .phone-screen { background: #f9fafb; box-shadow: inset 0 0 10px rgba(0,0,0,0.05); }

/* Morphing UI Screens */
.ui-screen {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.ui-screen.active {
  opacity: 1;
  transform: scale(1);
}

/* Screen 1: Analytics */
.ui-analytics .ui-header { display: flex; gap: 12px; align-items: center; }
.ui-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #2563eb, #93c5fd); }
.ui-title-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ui-line-1 { height: 8px; width: 60%; background: rgba(255,255,255,0.2); border-radius: 4px; }
.ui-line-2 { height: 6px; width: 40%; background: rgba(255,255,255,0.1); border-radius: 4px; }
.light .ui-line-1 { background: rgba(0,0,0,0.1); }
.light .ui-line-2 { background: rgba(0,0,0,0.05); }

.ui-chart { flex: 1; display: flex; align-items: flex-end; gap: 8px; padding-top: 20px; }
.chart-bar { flex: 1; background: linear-gradient(to top, #2563eb, #60a5fa); border-radius: 4px 4px 0 0; opacity: 0.8; }

.ui-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 60px; }
.ui-stat-card { background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.light .ui-stat-card { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.stat-val { height: 10px; width: 80%; background: rgba(255,255,255,0.8); border-radius: 4px; }
.stat-lbl { height: 6px; width: 50%; background: rgba(255,255,255,0.3); border-radius: 4px; }
.light .stat-val { background: rgba(0,0,0,0.8); }
.light .stat-lbl { background: rgba(0,0,0,0.3); }

/* Screen 2: Chat */
.ui-chat .flex-center { display: flex; justify-content: center; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.5); padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.light .ui-chat .flex-center { color: rgba(0,0,0,0.5); border-bottom-color: rgba(0,0,0,0.1); }
.chat-bubble { border-radius: 16px; margin-bottom: 8px; font-size: 0; background: rgba(255,255,255,0.1); width: 70%; }
.light .chat-bubble { background: #e5e7eb; }
.chat-bubble.right { background: #2563eb; align-self: flex-end; border-bottom-right-radius: 4px; }
.light .chat-bubble.right { background: #2563eb; }
.chat-bubble.left { align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-bubble.long { height: 40px; width: 85%; }
.chat-bubble.short { height: 30px; width: 50%; }

.chat-typing { display: flex; gap: 4px; padding: 12px; background: rgba(255,255,255,0.05); width: fit-content; border-radius: 16px; border-bottom-left-radius: 4px; }
.light .chat-typing { background: #e5e7eb; }
.chat-typing span { width: 6px; height: 6px; background: rgba(255,255,255,0.4); border-radius: 50%; animation: typeBounce 1.4s infinite ease-in-out both; }
.light .chat-typing span { background: rgba(0,0,0,0.3); }
.chat-typing span:nth-child(1) { animation-delay: -0.32s; }
.chat-typing span:nth-child(2) { animation-delay: -0.16s; }

/* Screen 3: Shopping */
.ui-shopping .ui-header { font-size: 16px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.light .ui-shopping .ui-header { color: #111; border-bottom-color: rgba(0,0,0,0.1); }
.shop-card { display: flex; gap: 12px; background: rgba(255,255,255,0.03); padding: 12px; border-radius: 12px; }
.light .shop-card { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.shop-img { width: 48px; height: 48px; border-radius: 8px; background: rgba(255,255,255,0.1); }
.light .shop-img { background: rgba(0,0,0,0.05); }
.shop-details { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.shop-line { height: 6px; background: rgba(255,255,255,0.2); border-radius: 4px; }
.light .shop-line { background: rgba(0,0,0,0.1); }
.shop-btn { margin-top: auto; height: 44px; background: #2563eb; border-radius: 12px; display: flex; align-items: center; justify-content: center; }

/* Orbiting Ecosystem */
.orbit-system {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
}

.orbit-node {
  position: absolute;
  transform-style: preserve-3d;
  display: flex; align-items: center; justify-content: center;
}

/* Glass aesthetics for nodes */
.orbit-node > div, .orbit-node > svg {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  border-radius: 16px;
  padding: 12px;
}
.light .orbit-node > div, .light .orbit-node > svg {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Specific Node Positioning and Animations */
.node-flutter { animation: orbit1 14s infinite linear; }
.node-firebase { animation: orbit2 16s infinite linear reverse; }
.node-cloud { animation: orbit3 20s infinite linear; }
.node-ai { animation: orbit4 15s infinite linear; }
.node-analytics { animation: orbit5 18s infinite linear reverse; }
.node-code { animation: orbit6 22s infinite linear; }
.node-api { 
  animation: orbit7 17s infinite linear;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

/* API Nodes Custom */
.node-api { display: flex; gap: 8px; align-items: center; }
.api-dot { width: 10px; height: 10px; border-radius: 50%; background: #60a5fa; box-shadow: 0 0 10px #60a5fa; animation: pulseGlow 2s infinite alternate; }
.api-line { width: 20px; height: 2px; background: rgba(96,165,250,0.5); }

/* AI Orb Custom */
.ai-orb {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #3b82f6);
  box-shadow: 0 0 20px #3b82f6, inset -5px -5px 15px rgba(0,0,0,0.5);
  padding: 0 !important; border: none !important; backdrop-filter: none !important;
}

/* Mini Cards Custom */
.glass-mini-card { width: 100px; padding: 12px; display: flex; flex-direction: column; }
.glass-code-card { width: 120px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.code-line { height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; }
.light .code-line { background: rgba(0,0,0,0.2); }

/* Background Particles */
.particles-container {
  position: absolute; inset: -200px;
  transform-style: preserve-3d; pointer-events: none;
}
.particle {
  position: absolute; width: 4px; height: 4px;
  background: #93c5fd; border-radius: 50%;
  box-shadow: 0 0 8px #93c5fd;
  animation: floatParticle 12s infinite linear;
}
/* Randomly place 15 particles */
.p-1 { top: 10%; left: 20%; animation-delay: 0s; }
.p-2 { top: 80%; left: 10%; animation-delay: -2s; }
.p-3 { top: 30%; left: 80%; animation-delay: -4s; }
.p-4 { top: 70%; left: 85%; animation-delay: -6s; }
.p-5 { top: 15%; left: 60%; animation-delay: -1s; }
.p-6 { top: 50%; left: 15%; animation-delay: -5s; }
.p-7 { top: 85%; left: 60%; animation-delay: -3s; }
.p-8 { top: 40%; left: 90%; animation-delay: -7s; }
.p-9 { top: 5%;  left: 40%; animation-delay: -8s; }
.p-10{ top: 95%; left: 30%; animation-delay: -9s; }
.p-11{ top: 25%; left: 10%; animation-delay: -1.5s; }
.p-12{ top: 65%; left: 75%; animation-delay: -3.5s; }
.p-13{ top: 45%; left: 35%; animation-delay: -5.5s; }
.p-14{ top: 75%; left: 45%; animation-delay: -2.5s; }
.p-15{ top: 20%; left: 90%; animation-delay: -6.5s; }

/* ==========================================================================
   Animations (Keyframes)
   ========================================================================== */

@keyframes floatAndRotatePhone {
  0% { transform: translateY(0) rotateY(-18deg) rotateX(8deg) rotateZ(0deg) translateZ(50px); }
  25% { transform: translateY(-15px) rotateY(-15deg) rotateX(10deg) rotateZ(1deg) translateZ(50px); }
  50% { transform: translateY(0px) rotateY(-20deg) rotateX(6deg) rotateZ(0deg) translateZ(50px); }
  75% { transform: translateY(-15px) rotateY(-21deg) rotateX(9deg) rotateZ(-1deg) translateZ(50px); }
  100% { transform: translateY(0) rotateY(-18deg) rotateX(8deg) rotateZ(0deg) translateZ(50px); }
}

@keyframes orbit1 { 0% { transform: translateZ(120px) rotateZ(0deg) translateX(180px) rotateZ(0deg) rotateY(0deg); } 100% { transform: translateZ(120px) rotateZ(360deg) translateX(180px) rotateZ(-360deg) rotateY(360deg); } }
@keyframes orbit2 { 0% { transform: translateZ(30px) rotateZ(45deg) translateX(220px) rotateZ(-45deg) rotateX(0deg); } 100% { transform: translateZ(30px) rotateZ(405deg) translateX(220px) rotateZ(-405deg) rotateX(-360deg); } }
@keyframes orbit3 { 0% { transform: translateZ(-80px) rotateZ(90deg) translateX(260px) rotateZ(-90deg) rotateY(0deg); } 100% { transform: translateZ(-80px) rotateZ(450deg) translateX(260px) rotateZ(-450deg) rotateY(-360deg); } }
@keyframes orbit4 { 0% { transform: translateZ(60px) rotateZ(135deg) translateX(160px) rotateZ(-135deg) rotateX(0deg); } 100% { transform: translateZ(60px) rotateZ(495deg) translateX(160px) rotateZ(-495deg) rotateX(360deg); } }
@keyframes orbit5 { 0% { transform: translateZ(180px) rotateZ(200deg) translateX(240px) rotateZ(-200deg) rotateY(0deg); } 100% { transform: translateZ(180px) rotateZ(560deg) translateX(240px) rotateZ(-560deg) rotateY(360deg); } }
@keyframes orbit6 { 0% { transform: translateZ(-40px) rotateZ(270deg) translateX(200px) rotateZ(-270deg) rotateX(0deg); } 100% { transform: translateZ(-40px) rotateZ(630deg) translateX(200px) rotateZ(-630deg) rotateX(-360deg); } }
@keyframes orbit7 { 0% { transform: translateZ(-120px) rotateZ(315deg) translateX(190px) rotateZ(-315deg) rotateY(0deg); } 100% { transform: translateZ(-120px) rotateZ(675deg) translateX(190px) rotateZ(-675deg) rotateY(-360deg); } }

@keyframes pulseGlow {
  0% { opacity: 0.6; transform: translate(-50%, -50%) translateZ(-300px) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateZ(-300px) scale(1.1); }
}

@keyframes glassSweep {
  0% { transform: translateX(-150%) translateY(-150%) rotate(45deg); }
  20%, 100% { transform: translateX(150%) translateY(150%) rotate(45deg); }
}

@keyframes typeBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

@keyframes floatParticle {
  0% { transform: translate3d(0,0,0) scale(1); opacity: 0.2; }
  50% { transform: translate3d(20px, -20px, 50px) scale(1.5); opacity: 0.8; }
  100% { transform: translate3d(0,-40px, 100px) scale(1); opacity: 0; }
}

@keyframes sceneEntrance {
  0% { opacity: 0; transform: scale(0.8) translateY(40px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .phone-3d, .ambient-glow, .orbit-node, .phone-glass-reflection, .particle, .chat-typing span {
    animation: none !important;
  }
  .orbit-system { transform: none !important; }
  .scene-3d-wrapper { animation: none !important; }
  
  /* Static positions for nodes */
  .node-flutter { transform: translate3d(150px, -100px, 0); }
  .node-firebase { transform: translate3d(-160px, 80px, 20px); }
  .node-cloud { transform: translate3d(180px, 120px, -20px); }
  .node-ai { transform: translate3d(-120px, -120px, 50px); }
  .node-analytics { transform: translate3d(200px, 0px, 30px); }
  .node-code { transform: translate3d(-180px, -20px, -40px); }
  .node-api { transform: translate3d(0px, -180px, 10px); }
}

/* Tablet & Mobile Responsiveness */
@media (max-width: 1024px) {
  .orbit-node { display: none !important; } /* Hide heavy floating objects on tablet/mobile */
  .ambient-glow { width: 400px; height: 400px; }
  .phone-3d { transform: scale(0.85); }
}
@media (max-width: 640px) {
  .scene-3d-wrapper { height: 400px; margin-top: 2rem; }
  .phone-3d { transform: scale(0.7); }
}