.glass {background: rgba(255, 255, 255, 0.75);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border: 1px solid rgba(255, 255, 255, 0.4);}
        .perspective-1000 { perspective: 1000px; }
        .slider-image-fade { transition: opacity 0.8s ease-in-out; }
        .scroll-reveal {opacity: 0;transform: translateY(40px);transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);}
        .scroll-reveal.visible {opacity: 1;transform: translateY(0);}
        .tracking-box {animation: trackingBoxMove 10s infinite ease-in-out;}
        .aspect-video {aspect-ratio: 12 / 9 !important;}
        @keyframes trackingBoxMove {
          0%, 100% { transform: translate(0, 0); }
          20% { transform: translate(10px, -5px); }
          40% { transform: translate(-5px, 8px); }
          60% { transform: translate(8px, 12px); }
          80% { transform: translate(-10px, -2px); }
        }


        .glass {background: rgba(255, 255, 255, 0.8);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.5);transition: background-color 0.3s ease, border-color 0.3s ease;}
        /* Animation classes */
        .animate-blob {animation: blob 7s infinite;}
        .animation-delay-2000 {animation-delay: 2s;}
        .animation-delay-4000 {animation-delay: 4s;}

        /* Framer Motion like animations */


        @keyframes scaleIn {
            from {
                transform: scale(0.8);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        

        @keyframes slideOutUp2 {
            from {
                transform: translateY(0);
                opacity: 1;
            }
            to {
                transform: translateY(-20px);
                opacity: 0;
            }
        }

        @keyframes slideInUp2 {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .motion-slide-out-up {
            animation: slideOutUp2 0.3s ease-in forwards;
        }

        .motion-slide-in-up {
            animation: slideInUp2 0.3s ease-out forwards;
        }

        /* Ensure smooth transitions */
        #solutions-content {
            transition: none; /* Disable CSS transitions during JS animations */
        }

        /* Progress bar animation */
        .progress-bar {
            transition: 1.5s ease-out !important;
        }

        /* Rotating border animation */
        .rotating-border {
            animation: rotate 30s linear infinite;
        }

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

        /* Dashboard card pop-up animations */
        .motion-pitch-card {
            animation: pitchCardPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            animation-delay: 0.2s;
            opacity: 0;
            transform: scale(0.8) translate(-30px, -30px);
        }

        .motion-pace-card {
            animation: paceCardPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            animation-delay: 0.4s;
            opacity: 0;
            transform: scale(0.8) translate(30px, -20px);
        }

        .motion-eye-card {
            animation: eyeCardPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            animation-delay: 0.6s;
            opacity: 0;
            transform: scale(0.8) translate(-30px, 30px);
        }

        @keyframes pitchCardPop {
            from {
                opacity: 0;
                transform: scale(0.8) translate(-30px, -30px);
            }
            to {
                opacity: 1;
                transform: scale(1) translate(0, 0);
            }
        }

        @keyframes paceCardPop {
            from {
                opacity: 0;
                transform: scale(0.8) translate(30px, -20px);
            }
            to {
                opacity: 1;
                transform: scale(1) translate(0, 0);
            }
        }

        @keyframes eyeCardPop {
            from {
                opacity: 0;
                transform: scale(0.8) translate(-30px, 30px);
            }
            to {
                opacity: 1;
                transform: scale(1) translate(0, 0);
            }
        }

        @keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: blob 7s infinite;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 25s linear infinite;
}

.perspective-1000 {
  perspective: 1000px;
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px);
}

.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.object-cover {
  object-fit: cover;
}

.object-position-center {
  object-position: center;
}

.object-position-center-20 {
  object-position: center 20%;
}

/* Image fade-in animation */
.fade-in-image {
  animation: fadeInImage 0.5s ease-out;
}

@keyframes fadeInImage {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.9;
  }
}

/* Engagement tracking box animation */
.tracking-animation {
  animation: trackingFloat 5s ease-in-out infinite;
}

@keyframes trackingFloat {
  0%, 100% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(1.5px, -1.5px);
  }
  50% {
    transform: translate(-1.5px, 1.5px);
  }
  75% {
    transform: translate(1.5px, 1.5px);
  }
}

/* Metric items slide-in animation */
.metric-item {
  animation: slideInMetric 0.5s ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes slideInMetric {
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* Progress bar fill animation */
.progress-bar {
  animation: fillWidth 1.5s ease-out forwards;
  width: 0%;
}

@keyframes fillWidth {
  to {
    width: var(--target-width);
  }
}

/* AI Coaching tip animation */
.coaching-tip {
  animation: slideInCoaching 0.5s ease-out 2.5s forwards;
  opacity: 0;
  transform: translateX(20px) scale(0.95);
}

@keyframes slideInCoaching {
  to {
    opacity: 1;
    transform: translateX(0px) scale(1);
  }
}

/* Transcript slide-up animation */
.transcript {
  animation: slideUpTranscript 0.5s ease-out 0.5s forwards;
  opacity: 0;
  transform: translateY(10px);
}

@keyframes slideUpTranscript {
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* Main simulation container animation */
#simulation-container {
  animation: slideUpContainer 0.8s ease-out 0.2s forwards;
  opacity: 0;
  transform: translateY(50px);
}

@keyframes slideUpContainer {
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* Scenario transition animations */
.scenario-enter {
  animation: scenarioEnter 0.5s ease-out forwards;
}

.scenario-exit {
  animation: scenarioExit 0.5s ease-out forwards;
}

@keyframes scenarioEnter {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes scenarioExit {
  from {
    opacity: 1;
    transform: translateX(0px);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}
@media only screen and (max-width: 1000px){
    .home-banner h1{font-size: 48px;}
}

@media only screen and (max-width: 550px){
    .aspect-video {aspect-ratio: 9 / 12 !important;}
    .ai-coaching{top:10px !important;right:10px!important;}
    .live-metrics-sidebar{top:50% !important;left:10px!important;transform: translate(0, -50%);}
    .aspect-square-animation{aspect-ratio: 9 / 16 !important;}
    #eye-card{bottom:0px !important;left:0px !important}
    #pitch-card{top:0px !important}
    #pace-card{top:130px !important;right:0px !important;}
    .home-tabs{padding: 3px !important;}
    .university-btn,.company-btn{padding: 8px 12px !important;font-size: 15px !important;}
    .home-banner{padding: 50px 0 100px 0 !important;}
    .home-banner h1{font-size: 34px;}
    .home-banner p{font-size: 16px;}
    .home-banner .btn{padding: 10px;}
    .tailored-solutions-section{padding: 50px 0 !important;}
    .tailored-solutions-section h2{font-size: 30px;}
    .tailored-solutions-section h3{font-size: 25px;margin-bottom: 5px;}
    .tailored-solutions-section p{font-size: 15px;line-height: 1.5;}
    .tailored-solutions-section h4{font-size: 17px;}
    .cta-section{padding: 50px 0 !important;}
    .cta-section h2{font-size: 30px;margin-bottom: 15px;}
    .cta-section p{font-size:16px;line-height: 1.5;}
    .cta-section .btn{padding: 10px;}
}