body.loading {
        overflow: hidden;
    }
    
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .animate-spin {
        animation: spin 1.2s linear infinite;
    }
    #innovator-bot {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 90px;
            height: 90px;
            z-index: 1000;
            cursor: pointer;
            
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

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

.bot-body {
            width: 100px;
            height: 100px;
            background: black;
            border-radius: 50%;
            position: relative;
            box-shadow: inset -10px -10px 20px rgba(255,255,255,0.1), 0 10px 30px rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            border-top: 1px solid #333333;
            align-items: center;
            z-index: 2;
            overflow: hidden; /* Eyes bahar na niklen */
            
        }
        .eyes-container {
    display: flex;
    gap: 12px; 
}

.eye {
    width: 10px; 
    height: 30px; 
    background: #b3ffff;
    border-radius: 20px;
    box-shadow: 0 0 7px #b3ffff;
    position: relative;
    transition: height 0.1s ease-in-out;
}
/* Blink Animation Class */
        .blinking {
            height: 2px !important;
            margin-top: 18px;
            margin-bottom: 18px;
        }

        #bulb {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) scale(0);
            font-size: 40px;
            z-index: 1;
            opacity: 0;
        }

        #innovator-bot:hover #bulb {
            animation: bulbBlast 0.8s forwards;
        }

        @keyframes bulbBlast {
            0% { top: 0; transform: translateX(-50%) scale(0.5); opacity: 1; }
            50% { top: -60px; transform: translateX(-50%) scale(1.5); filter: brightness(2) drop-shadow(0 0 20px yellow); opacity: 1; }
            100% { top: -70px; transform: translateX(-50%) scale(2); opacity: 0; filter: blur(10px); }
        }

        #chat-bubble {
            position: absolute;
            bottom: 120px;
            right: 0;
            width: fit-content;
            background: rgba(15, 23, 42, 0.95);
            color: #0092FD;
            padding: 12px 20px;
            border-radius: 20px;
            border: 2px solid #0092FD;
            box-shadow: 0 0 20px #0092FD;
            opacity: 0;
            visibility: hidden;
            transform-origin: bottom right;
            transform: scale(0.5);
            transition: opacity 0.3s ease, transform 0.3s ease;
            /* Space fix here */
            white-space: pre; 
            display: flex;
            align-items: center;
        }

        #innovator-bot:hover #chat-bubble {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            transition-delay: 0.7s;
        }

        #chat-bubble::after {
            content: '';
            position: absolute;
            bottom: -9px;
            right: 30px;
            width: 15px;
            height: 15px;
            background: #0f172a;
            border-right: 2px solid #0092FD;
            border-bottom: 2px solid #0092FD;
            transform: rotate(45deg);
        }

        .cursor {
            display: inline-block;
            width: 3px;
            height: 18px;
            background: #00d2ff;
            margin-left: 2px;
            animation: blink 0.7s infinite;
        }

        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        body { background-color: #000; color: #fff; font-family: "Space Grotesk", sans-serif; margin: 0; overflow-x: hidden; scroll-behavior: smooth; }
        .glass-nav { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
        .text-clarity { color: #0092FD; text-shadow: 0 0 15px rgba(0, 136, 255, 0.4); }

  .cursor1 {
    display: inline-block;
    margin-left: 2px;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
  }
        #galaxy { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; }
        .font-handwritten { font-family: "Sue Ellen Francisco", cursive; }
        #canvas-container { position: relative; background-image: url('../img/pills-bg.png'); background-size: cover; background-position: center; border-radius: 20px; overflow: hidden; }
        #blur-bg { position: absolute; top:0; left:0; width:100%; height:100%; backdrop-filter: blur(2px); z-index:0; }


        .tab-underline {
            position: absolute;
            bottom: -1px;
            left: 0;
            height: 1px;
            background: white;
            width: 0;
            transition: width 0.4s ease;
        }
        .active .tab-underline { width: 100%; }
        .active { color: white !important; }

        /* Image Sizing and Layering */
        .project-image-wrapper {
            position: absolute;
            top: 50%;
            left: 55%;
            transform: translate(-50%, -50%) scale(0.85);
            width: 100%; /* Image width adjusted */
            height: 100%; /* Image height adjusted to be smaller */
            opacity: 0;
            visibility: hidden;
            z-index: 1;
        }
        .project-image-wrapper.active {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
            visibility: visible;
            z-index: 2;
        }
        .project-image-wrapper img {
            width: 100%;
            height: 100%;
            
           
        }
        /* Flip Card Section */
        .perspective-1000 {
            perspective: 1000px;
        }
        
 /* Deck Vibration Animation */
    @keyframes vibrate {
      0% { transform: translate(0,0) rotate(0); }
      25% { transform: translate(3px, -3px) rotate(1.5deg); }
      50% { transform: translate(-3px, 3px) rotate(-1.5deg); }
      75% { transform: translate(3px, 3px) rotate(0.5deg); }
      100% { transform: translate(0,0) rotate(0); }
    }
    .animate-vibrate { animation: vibrate 0.15s linear 3; }

    /* Card Flying from Deck to Slot */
    @keyframes flyFromDeck {
      0% {
        opacity: 0;
        transform: translate(-130%, -10%) rotate(-20deg) scale(0.4);
      }
      100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
      }
    }
    .animate-fly { animation: flyFromDeck 0.65s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }

    /* Card Flip Logic */
    .card-inner {
      transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
      transform-style: preserve-3d;
    }
    .is-flipped .card-inner { transform: rotateY(180deg); }
    .backface-hidden { backface-visibility: hidden; }