Gyannetra_website/css/animations.css

/**
 * Custom animations for Gyannetra website
 * Enhances UI with smooth transitions and dynamic effects
 */

/* General fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Slide up animation */
@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scale in animation */
@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulse animation */
@keyframes pulse {
  0% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% { 
    transform: scale(1);
    opacity: 1;
  }
}

/* Floating animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Node pulse effect */
@keyframes nodePulse {
  0% { 
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  70% { 
    box-shadow: 0 0 0 15px rgba(59, 130, 246, 0);
  }
  100% { 
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

/* Node ripple effect */
@keyframes nodeRipple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Custom cursor animation */
@keyframes cursorPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

/* Section transition animation */
@keyframes sectionTransition {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo pulse animation */
@keyframes logoPulse {
  0% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
  }
  100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
  }
}

/* Rotating animation */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Shine effect animation */
@keyframes shine {
  0% {
    background-position: -100px;
  }
  40%, 100% {
    background-position: 300px;
  }
}

/* Custom animation classes */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animated {
  opacity: 1;
  transform: translateY(0) !important;
}

.animate-on-scroll.section-heading {
  transform: translateY(-20px);
}

.animate-on-scroll.btn-primary {
  transform: translateY(20px);
}

.animate-on-scroll.exp-item {
  transform: translateY(30px);
}

/* Staggered animation for elements */
.section-hidden {
  opacity: 0;
  transition: all 1s ease;
}

.section-visible {
  opacity: 1;
}

.section-highlighted {
  animation: pulse 1s ease;
}

.animate-on-visible {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.element-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Header animations */
.header-scrolled {
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  background-color: rgba(10, 10, 30, 0.8);
}

.header-hidden {
  transform: translateY(-100%);
}

.site-header {
  transition: transform 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

/* Footer animations */
.footer-visible .footer-col {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.footer-visible .col-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom cursor styles */
.custom-cursor {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s;
}

.cursor-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  background-color: rgba(59, 130, 246, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor-hover {
  width: 40px;
  height: 40px;
  border-color: rgba(139, 92, 246, 0.7);
  background-color: rgba(59, 130, 246, 0.1);
}

/* Data node effects */
.node-hover {
  z-index: 10;
}

.node-active .node-core {
  animation: nodePulse 1.5s infinite;
}

.node-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.7);
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
  opacity: 0.8;
  animation: nodeRipple 1.5s ease-out infinite;
}

.node-pulse-effect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(59, 130, 246, 0.3);
  opacity: 0;
  animation: nodeRipple 1.5s ease-out;
}

.node-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  animation: nodeRipple 0.4s ease-out;
}

.core-glow {
  box-shadow: 0 0 15px 5px rgba(59, 130, 246, 0.7);
}

.constellation-line {
  transition: stroke 0.3s ease, stroke-width 0.3s ease, opacity 0.3s ease;
}

.constellation-line-active {
  stroke: rgba(100, 200, 255, 0.8) !important;
  stroke-width: 2 !important;
  filter: drop-shadow(0 0 3px rgba(100, 200, 255, 0.5));
}

/* Expertise item animations */
.exp-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.exp-hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.exp-click {
  animation: pulse 0.3s ease;
}

.animate-entrance {
  opacity: 0;
  transform: translateY(30px);
  animation: slideUp 0.5s forwards;
}

/* Page transitions */
.transition-ready {
  transition: opacity 0.5s ease-out;
}

.page-hidden .neural-mesh,
.page-hidden .data-constellation,
.page-hidden .geometric-morphs,
.page-hidden .data-streams {
  animation-play-state: paused;
}