/* Animations Reveal System - Premium Implementation */
.reveal {
  opacity: 0;
  transition: opacity var(--reveal-duration) var(--ease-premium), transform var(--reveal-duration) var(--ease-premium);
  will-change: opacity, transform;
  pointer-events: none; /* Prevent clicks before reveal */
}

/* Active State - Reset to natural flow */
.reveal.active {
  opacity: 1;
  transform: translate(0, 0) scale(1) rotate(0) !important;
  pointer-events: auto;
}

/* Directional Variants */
.reveal-up { transform: translateY(var(--reveal-offset)); }
.reveal-down { transform: translateY(calc(var(--reveal-offset) * -1)); }
.reveal-left { transform: translateX(calc(var(--reveal-offset) * -1)); }
.reveal-right { transform: translateX(var(--reveal-offset)); }
.reveal-zoom { transform: scale(0.95); }
.reveal-zoom-in { transform: scale(0.95); }
.reveal-rotate { transform: rotate(-5deg) scale(0.95); }
.reveal-blur { filter: blur(10px); transform: translateY(10px); }
.reveal-blur-in { filter: blur(10px); transform: translateY(10px); }
.reveal-up-small { transform: translateY(16px); }
.reveal-scale-up { transform: scale(0.95) translateY(10px); }

.reveal.active.reveal-blur,
.reveal.active.reveal-blur-in {
  filter: blur(0);
  transform: translateY(0);
}
.reveal.active.reveal-scale-up {
  transform: scale(1) translateY(0);
}

/* Mobile Optimization: Reduce motion distance */
@media (max-width: 768px) {
  :root {
    --reveal-offset: 20px;
    --reveal-duration: 0.5s;
  }
}

/* Accessibility: Respect Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .floating,
  .pulse-glow {
    animation: none !important;
  }
}

/* Staggered Delay Utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }

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

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

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(79, 172, 254, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 172, 254, 0); }
}

.pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Whiteboard Pulse */
@keyframes whiteboardPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 172, 254, 0.4);
  }
  70% {
    transform: scale(1.02);
    box-shadow: 0 0 0 10px rgba(79, 172, 254, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 172, 254, 0);
  }
}

.whiteboard-illustration {
  border: 2px dashed var(--color-indigo);
  border-radius: 16px;
  background: var(--color-soft-bg);
  padding: 2rem;
  animation: whiteboardPulse 3s infinite;
}

/* Page Entrance */
@keyframes pageEntrance {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

body {
  animation: pageEntrance 0.6s ease-out forwards;
}

/* Page Transition Overlay */
/* Page Transition Overlay */
.page-transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-dark-bg); /* Dark background to prevent white flash */
  z-index: 9999;
  pointer-events: none;
  opacity: 1; /* Start visible (opaque) to hide initial load glitches */
  transition: opacity 0.4s ease-in-out;
}

/* When active (navigating out), it needs to be opaque */
.page-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* When not active (page loaded), it becomes transparent */
/* But wait, if we create it dynamically, this logic is tricky. 
   Better approach: HTML has it hardcoded OR animations.js creates it with a 'loading' class?
   Current JS creates it. If JS creates it, it starts with default class properties.
   If default is opacity: 1, then creating it makes it white instantly. 
   We want it to START at 0 if created dynamically unless we are simulating load.
   
   Actually, for smoother load, we want the PAGE to fade in.
*/

.page-transition-overlay {
    opacity: 0; /* Default hidden */
}

.page-transition-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Scroll Progress Bar */
.scroll-progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: transparent;
  z-index: 2000;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  background: var(--gradient-primary);
  width: 0%;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(0, 242, 254, 0.5);
}

/* NEW COOL ANIMATIONS */

/* Shimmer Effect */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 3s infinite;
}

/* Bounce Animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.bounce {
  animation: bounce 2s ease-in-out infinite;
}

/* Slide In Animations */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

/* Rotate In */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.rotate-in {
  animation: rotateIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Card Transitions */
.card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Button Hover Glow */
.btn-primary, .btn-secondary {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-primary::before, .btn-secondary::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn-primary:hover::before, .btn-secondary:hover::before {
  width: 300px;
  height: 300px;
}

/* Text Gradient Animation */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-gradient-animated {
  background: linear-gradient(90deg, var(--color-cyan), var(--color-indigo), var(--color-purple), var(--color-cyan));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

/* Custom Cursor - REMOVED */

/* Premium Animation Additions */

/* 1. Staggered Reveal Utility */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}

.reveal-stagger.active > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.active > *:nth-child(1) { transition-delay: 0.1s; }
.reveal-stagger.active > *:nth-child(2) { transition-delay: 0.2s; }
.reveal-stagger.active > *:nth-child(3) { transition-delay: 0.3s; }
.reveal-stagger.active > *:nth-child(4) { transition-delay: 0.4s; }
.reveal-stagger.active > *:nth-child(5) { transition-delay: 0.5s; }

/* 2. Hero Text Entry (Scale + Fade) */
@keyframes heroEntry {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

.hero-entry {
  animation: heroEntry 1s var(--ease-premium) forwards;
}

/* 3. Image Clip-path Reveal */
.image-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.image-reveal.active {
  clip-path: inset(0 0 0 0);
}

/* 4. Glassmorphism Card Hover */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}