/* ============================================
   Profile Image with 3D Sphere Orbiting Icons
   Clean White + Indigo Theme
============================================ */

.profile-image-container {
  position: relative;
  width: 100%;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  overflow: visible;
}

/* Advanced floating particles with multiple layers */
.profile-image-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(3px 3px at 15% 25%, rgba(79, 70, 229, 0.6), transparent),
    radial-gradient(2px 2px at 35% 65%, rgba(99, 102, 241, 0.5), transparent),
    radial-gradient(1px 1px at 85% 35%, rgba(129, 140, 248, 0.4), transparent),
    radial-gradient(2px 2px at 65% 15%, rgba(165, 180, 252, 0.5), transparent),
    radial-gradient(3px 3px at 75% 75%, rgba(79, 70, 229, 0.6), transparent),
    radial-gradient(1px 1px at 25% 85%, rgba(199, 210, 254, 0.4), transparent);
  background-size: 180px 180px, 250px 250px, 120px 120px, 200px 200px, 160px 160px, 300px 300px;
  animation: advancedParticles 25s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Secondary particle layer */
.profile-image-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 45% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 70% 50%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 20% 70%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 90% 80%, rgba(255, 255, 255, 0.5), transparent);
  background-size: 100px 100px, 150px 150px, 80px 80px, 120px 120px;
  animation: sparkleParticles 15s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 1;
}

@keyframes advancedParticles {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 1;
  }

  25% {
    transform: translateY(-15px) rotate(90deg) scale(1.1);
    opacity: 0.8;
  }

  50% {
    transform: translateY(-30px) rotate(180deg) scale(0.9);
    opacity: 0.6;
  }

  75% {
    transform: translateY(-15px) rotate(270deg) scale(1.1);
    opacity: 0.8;
  }

  100% {
    transform: translateY(0px) rotate(360deg) scale(1);
    opacity: 1;
  }
}

@keyframes sparkleParticles {

  0%,
  100% {
    transform: translateX(0px) translateY(0px) scale(1);
    opacity: 0.3;
  }

  33% {
    transform: translateX(10px) translateY(-10px) scale(1.5);
    opacity: 1;
  }

  66% {
    transform: translateX(-5px) translateY(5px) scale(0.8);
    opacity: 0.6;
  }
}

/* Background Circles - Genius Creative Design */
.profile-bg-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
  animation: geniusMotion 12s ease-in-out infinite;
}

.circle-1 {
  width: 450px;
  height: 450px;
  background: conic-gradient(from 0deg,
      #4f46e5 0deg,
      #6366f1 60deg,
      #818cf8 120deg,
      #a5b4fc 180deg,
      #c7d2fe 240deg,
      #e0e7ff 300deg,
      #4f46e5 360deg);
  animation-delay: 0s;
  animation-duration: 20s;
  filter: blur(1px);
}

.circle-2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(ellipse at 25% 25%,
      #6366f1 0%,
      #818cf8 25%,
      #a5b4fc 50%,
      #c7d2fe 75%,
      transparent 100%);
  animation-delay: 3s;
  animation-duration: 16s;
  filter: blur(0.5px);
}

.circle-3 {
  width: 320px;
  height: 320px;
  background: linear-gradient(45deg,
      #818cf8 0%,
      #a5b4fc 20%,
      #c7d2fe 40%,
      #e0e7ff 60%,
      #f0f4ff 80%,
      #818cf8 100%);
  animation-delay: 6s;
  animation-duration: 18s;
}

/* Additional creative circles */
.profile-image-container .circle-4 {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: conic-gradient(from 45deg,
      transparent 0deg,
      rgba(79, 70, 229, 0.1) 90deg,
      transparent 180deg,
      rgba(99, 102, 241, 0.1) 270deg,
      transparent 360deg);
  animation: reverseRotate 14s linear infinite;
  opacity: 0.6;
}

.profile-image-container .circle-5 {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 30%,
      transparent 40%,
      rgba(129, 140, 248, 0.05) 50%,
      rgba(165, 180, 252, 0.08) 60%,
      transparent 70%);
  animation: slowPulse 22s ease-in-out infinite;
  opacity: 0.8;
}

@keyframes geniusMotion {

  0%,
  100% {
    transform: scale(1) rotate(0deg) translateX(0px) translateY(0px);
    opacity: 0.1;
  }

  20% {
    transform: scale(1.05) rotate(72deg) translateX(5px) translateY(-5px);
    opacity: 0.15;
  }

  40% {
    transform: scale(1.1) rotate(144deg) translateX(-3px) translateY(8px);
    opacity: 0.2;
  }

  60% {
    transform: scale(1.15) rotate(216deg) translateX(8px) translateY(3px);
    opacity: 0.18;
  }

  80% {
    transform: scale(1.08) rotate(288deg) translateX(-5px) translateY(-8px);
    opacity: 0.12;
  }
}

@keyframes reverseRotate {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes slowPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.4;
  }
}

/* Profile Image Wrapper - Genius Design */
.profile-image-wrapper {
  position: relative;
  z-index: 10;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  overflow: visible;
  animation: masterFloat 10s ease-in-out infinite;
}

/* Multi-layered background with holographic effect */
.profile-image-wrapper::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  background: conic-gradient(from 0deg,
      #4f46e5 0deg,
      #6366f1 60deg,
      #818cf8 120deg,
      #a5b4fc 180deg,
      #c7d2fe 240deg,
      #e0e7ff 300deg,
      #4f46e5 360deg);
  border-radius: 50%;
  z-index: 1;
  animation: holographicRotate 8s linear infinite;
  filter: blur(2px);
}

/* Inner glow layer */
.profile-image-wrapper .inner-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center,
      transparent 60%,
      rgba(79, 70, 229, 0.3) 70%,
      rgba(99, 102, 241, 0.5) 80%,
      rgba(129, 140, 248, 0.3) 90%,
      transparent 100%);
  border-radius: 50%;
  z-index: 2;
  animation: innerPulse 6s ease-in-out infinite;
}

/* Rotating border with multiple colors */
.profile-image-wrapper::after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      #4f46e5 45deg,
      transparent 90deg,
      #6366f1 135deg,
      transparent 180deg,
      #818cf8 225deg,
      transparent 270deg,
      #a5b4fc 315deg,
      transparent 360deg);
  z-index: 0;
  animation: masterBorderRotate 12s linear infinite;
  opacity: 0.8;
}

@keyframes holographicRotate {
  from {
    transform: rotate(0deg);
    filter: blur(2px) hue-rotate(0deg);
  }

  to {
    transform: rotate(360deg);
    filter: blur(2px) hue-rotate(360deg);
  }
}

@keyframes innerPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes masterBorderRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes masterFloat {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }

  20% {
    transform: translateY(-8px) rotate(1deg) scale(1.01);
  }

  40% {
    transform: translateY(-15px) rotate(0deg) scale(1.02);
  }

  60% {
    transform: translateY(-20px) rotate(-1deg) scale(1.01);
  }

  80% {
    transform: translateY(-8px) rotate(0.5deg) scale(1);
  }
}

/* Animation مخصوص للبطاقة - نفس الحركة مع الحفاظ على الموضع الجديد */
@keyframes badgeRightFloat {

  0%,
  100% {
    transform: translateY(-50%) translateX(0px) rotate(0deg) scale(1);
  }

  20% {
    transform: translateY(-50%) translateX(-8px) rotate(1deg) scale(1.01);
  }

  40% {
    transform: translateY(-50%) translateX(-15px) rotate(0deg) scale(1.02);
  }

  60% {
    transform: translateY(-50%) translateX(-20px) rotate(-1deg) scale(1.01);
  }

  80% {
    transform: translateY(-50%) translateX(-8px) rotate(0.5deg) scale(1);
  }
}

.profile-image {
  width: 130%;
  height: 130%;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: -15%;
  left: 3%;
  /* Moved slightly to the right from -15% */
  z-index: 5;
  object-position: center top;
  filter:
    drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4)) drop-shadow(0 8px 20px rgba(79, 70, 229, 0.3)) drop-shadow(0 0 30px rgba(99, 102, 241, 0.2)) contrast(1.15) saturate(1.2) brightness(1.05);
  animation: imageBreathing 8s ease-in-out infinite;
}

@keyframes imageBreathing {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    filter:
      drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4)) drop-shadow(0 8px 20px rgba(79, 70, 229, 0.3)) contrast(1.15) saturate(1.2) brightness(1.05);
  }

  50% {
    transform: scale(1.02) rotate(0.5deg);
    filter:
      drop-shadow(0 25px 50px rgba(0, 0, 0, 0.5)) drop-shadow(0 10px 25px rgba(79, 70, 229, 0.4)) drop-shadow(0 0 40px rgba(99, 102, 241, 0.3)) contrast(1.2) saturate(1.3) brightness(1.1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-8px) rotate(0.5deg);
  }

  50% {
    transform: translateY(-15px) rotate(0deg);
  }

  75% {
    transform: translateY(-8px) rotate(-0.5deg);
  }
}

/* Experience Badge - Positioned to the Right of Image */
.experience-badge {
  position: absolute;
  top: 100%;
  /* وسط الصورة عمودياً */
  right: -120px;
  /* خارج الصورة ناحية اليمين */
  transform: translateY(-50%);
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 30%, #818cf8 60%, #a5b4fc 100%);
  color: white;
  padding: 15px 25px;
  border-radius: 20px;
  box-shadow:
    0 10px 30px rgba(79, 70, 229, 0.4),
    0 5px 15px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.2),
    0 0 0 4px rgba(79, 70, 229, 0.1);
  z-index: 100;
  animation: badgeRightFloat 10s ease-in-out infinite;
  overflow: hidden;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 140px;
  text-align: center;
}

/* Holographic background animation */
.experience-badge::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255, 255, 255, 0.1) 45deg,
      transparent 90deg,
      rgba(255, 255, 255, 0.15) 135deg,
      transparent 180deg,
      rgba(255, 255, 255, 0.1) 225deg,
      transparent 270deg,
      rgba(255, 255, 255, 0.15) 315deg,
      transparent 360deg);
  animation: holographicSpin 8s linear infinite;
  z-index: -1;
}

/* Floating particles inside badge */
.experience-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 60% 20%, rgba(255, 255, 255, 0.7), transparent);
  background-size: 30px 30px, 40px 40px, 25px 25px;
  animation: badgeSparkle 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes holographicSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes badgeSparkle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.experience-badge .badge-number {
  font-size: 28px;
  font-weight: 900;
  display: block;
  line-height: 1;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 255, 255, 0.3);
  background: linear-gradient(45deg, #ffffff, #f0f4ff, #ffffff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: numberShimmer 4s ease-in-out infinite;
}

@keyframes numberShimmer {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.experience-badge .badge-text {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  margin-top: 5px;
}

/* 3D Sphere Orbiting Icons Container - HIDDEN */
.orbiting-icons {
  display: none !important;
}

/* Rotate the entire sphere faster */
@keyframes rotateSphere {
  from {
    transform: translate(-50%, -50%) rotateY(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotateY(360deg);
  }
}

/* Individual Orbiting Icon - Flat, No Rotation, No Hover */
.orbit-icon {
  position: absolute;
  width: 65px;
  height: 65px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.2);
  font-size: 30px;
  top: 50%;
  left: 50%;
  margin: -32.5px 0 0 -32.5px;
  border: 2px solid rgba(79, 70, 229, 0.1);
  z-index: 25;
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
  cursor: default;
}

/* 3D Sphere Positions - Icons closer together (180px radius instead of 250px) */
/* Using spherical coordinates: x = r*sin(θ)*cos(φ), y = r*sin(θ)*sin(φ), z = r*cos(θ) */

.orbit-icon:nth-child(1) {
  transform: rotateY(0deg) rotateX(0deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(2) {
  transform: rotateY(45deg) rotateX(30deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(3) {
  transform: rotateY(90deg) rotateX(0deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(4) {
  transform: rotateY(135deg) rotateX(-30deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(5) {
  transform: rotateY(180deg) rotateX(0deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(6) {
  transform: rotateY(225deg) rotateX(30deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(7) {
  transform: rotateY(270deg) rotateX(0deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(8) {
  transform: rotateY(315deg) rotateX(-30deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(9) {
  transform: rotateY(60deg) rotateX(60deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(10) {
  transform: rotateY(120deg) rotateX(-60deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(11) {
  transform: rotateY(180deg) rotateX(60deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(12) {
  transform: rotateY(240deg) rotateX(-60deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(13) {
  transform: rotateY(300deg) rotateX(60deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(14) {
  transform: rotateY(30deg) rotateX(-45deg) translateZ(180px) !important;
}

.orbit-icon:nth-child(15) {
  transform: rotateY(150deg) rotateX(45deg) translateZ(180px) !important;
}

/* Hover effects removed - icons are non-interactive */

/* Icon Colors */
.orbit-icon.flutter i {
  color: #02569B;
}

.orbit-icon.android i {
  color: #3DDC84;
}

.orbit-icon.ios i {
  color: #000;
}

.orbit-icon.dart i {
  color: #0175C2;
}

.orbit-icon.laravel i {
  color: #FF2D20;
}

.orbit-icon.php i {
  color: #777BB4;
}

.orbit-icon.firebase i {
  color: #FFCA28;
}

.orbit-icon.html i {
  color: #E34F26;
}

.orbit-icon.css i {
  color: #1572B6;
}

.orbit-icon.js i {
  color: #F7DF1E;
}

.orbit-icon.git i {
  color: #F05032;
}

.orbit-icon.github i {
  color: #181717;
}

.orbit-icon.figma i {
  color: #F24E1E;
}

.orbit-icon.mysql i {
  color: #4479A1;
}

.orbit-icon.bootstrap i {
  color: #7952B3;
}

/* Glow effect - disabled */
@keyframes iconGlow {

  0%,
  100% {
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.2);
  }

  50% {
    box-shadow: 0 8px 35px rgba(79, 70, 229, 0.4);
  }
}

/* Keep icons in their sphere positions */
.orbiting-icons .orbit-icon {
  transform-origin: center center;
}

/* Prevent any transform changes */
.orbit-icon[style*="transform"] {
  transform: none !important;
}

/* Ensure icons appear above profile image */
@media (min-width: 992px) {
  .orbiting-icons {
    z-index: 30 !important;
  }

  .orbit-icon {
    z-index: 35 !important;
  }

  .profile-image-wrapper {
    z-index: 10 !important;
  }

  .experience-badge {
    z-index: 50 !important;
  }
}

/* Performance optimization */
.profile-image-container * {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Responsive Design - Enhanced for All Screen Sizes */
@media (max-width: 1199px) and (min-width: 992px) {
  .profile-image-container {
    height: 650px;
    margin-top: 30px;
  }

  .profile-image-wrapper {
    width: 300px;
    height: 300px;
  }

  .profile-image {
    width: 130%;
    height: 130%;
    top: -15%;
    left: 3%;
    /* Moved slightly to the right from -15% */
  }

  .circle-1 {
    width: 380px;
    height: 380px;
  }

  .circle-2 {
    width: 320px;
    height: 320px;
  }

  .circle-3 {
    width: 280px;
    height: 280px;
  }

  .circle-4 {
    width: 240px;
    height: 240px;
  }

  .circle-5 {
    width: 420px;
    height: 420px;
  }

  .experience-badge {
    right: -60px;
    padding: 14px 22px;
  }

  .experience-badge .badge-number {
    font-size: 22px;
  }

  .experience-badge .badge-text {
    font-size: 11px;
  }
}

@media (max-width: 991px) {
  .profile-image-container {
    height: 600px;
    margin-top: 40px;
  }

  .profile-image-wrapper {
    width: 280px;
    height: 280px;
  }

  .profile-image {
    width: 130%;
    height: 130%;
    top: -15%;
    left: 3%;
    /* Moved slightly to the right from -15% */
  }

  .circle-1 {
    width: 360px;
    height: 360px;
  }

  .circle-2 {
    width: 300px;
    height: 300px;
  }

  .circle-3 {
    width: 260px;
    height: 260px;
  }

  .circle-4 {
    width: 220px;
    height: 220px;
  }

  .circle-5 {
    width: 400px;
    height: 400px;
  }

  .experience-badge {
    right: -50px;
    padding: 12px 20px;
  }

  .experience-badge .badge-number {
    font-size: 20px;
  }

  .experience-badge .badge-text {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .profile-image-container {
    height: 550px;
  }

  .profile-image-wrapper {
    width: 250px;
    height: 250px;
  }

  .profile-image {
    width: 130%;
    height: 130%;
    top: -15%;
    left: 3%;
    /* Moved slightly to the right from -15% */
  }

  .circle-1 {
    width: 320px;
    height: 320px;
  }

  .circle-2 {
    width: 260px;
    height: 260px;
  }

  .circle-3 {
    width: 220px;
    height: 220px;
  }

  .circle-4 {
    width: 180px;
    height: 180px;
  }

  .circle-5 {
    width: 350px;
    height: 350px;
  }

  .experience-badge {
    right: -40px;
    padding: 10px 18px;
  }

  .experience-badge .badge-number {
    font-size: 18px;
  }

  .experience-badge .badge-text {
    font-size: 9px;
  }

  .orbit-icon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .profile-image-container {
    height: 500px;
  }

  .profile-image-wrapper {
    width: 220px;
    height: 220px;
  }

  .profile-image {
    width: 130%;
    height: 130%;
    top: -15%;
    left: 3%;
    /* Moved slightly to the right from -15% */
  }

  .circle-1 {
    width: 280px;
    height: 280px;
  }

  .circle-2 {
    width: 230px;
    height: 230px;
  }

  .circle-3 {
    width: 190px;
    height: 190px;
  }

  .circle-4 {
    width: 150px;
    height: 150px;
  }

  .circle-5 {
    width: 300px;
    height: 300px;
  }

  .experience-badge {
    right: -30px;
    padding: 8px 15px;
  }

  .experience-badge .badge-number {
    font-size: 16px;
  }

  .experience-badge .badge-text {
    font-size: 8px;
  }
}

/* للشاشات الصغيرة جداً - تقريب البطاقة أكثر */
@media (max-width: 360px) {
  .experience-badge {
    right: -20px !important;
    padding: 6px 12px !important;
    min-width: 120px !important;
  }

  .experience-badge .badge-number {
    font-size: 14px !important;
  }

  .experience-badge .badge-text {
    font-size: 7px !important;
  }
}