/* 
  ========================================
  HEADER ANIMATIONS (Subtle & Premium)
  ========================================
*/

:root {
  --transition-speed: 0.6s;
  --spring-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --expansion-color: oklch(0.55 0.25 265 / 0.15); /* Subtle brand tint */
}

/* 1. Header Entrance */
#main-header {
  animation: headerEntrance 0.8s var(--spring-easing) forwards;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes headerEntrance {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 2. Link Expansion Overlay */
#link-expansion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.expansion-circle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--expansion-color);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.expansion-circle.animate {
  animation: expandOut 0.8s var(--spring-easing) forwards;
}

@keyframes expandOut {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2500); /* Large enough to cover screen */
    opacity: 0;
  }
}

/* 3. Global Page Out Animation */
body.page-exit {
  animation: pageOut 0.5s var(--spring-easing) forwards;
}

@keyframes pageOut {
  to {
    opacity: 0;
    transform: scale(1.05);
    filter: blur(10px);
  }
}

/* 4. Navigation Link Specifics */
nav ul li a {
  position: relative;
  transition: color 0.3s ease;
}

nav ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--spring-easing);
}

nav ul li a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}