/* Subtle animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Fireflies Animation - Updated CSS */
.fireflies-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* Increased z-index to appear above other elements but below interactive elements */
    overflow: hidden;
}

.firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: rgba(255, 217, 179, 0.8);
    box-shadow: 0 0 10px 2px rgba(255, 217, 179, 0.5), 
                0 0 20px 5px rgba(255, 179, 102, 0.3);
    pointer-events: none;
    opacity: 0.6;
    transition: box-shadow 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
    will-change: transform, opacity, box-shadow; /* Performance optimization */
}

/* Remove the static positioning for fireflies - they'll be positioned dynamically by JS */
.firefly:nth-child(n) {
    top: 0;
    left: 0;
    animation: none; /* Remove default animation as we'll handle it with JS */
}

/* Special styling for fireflies that are close to the mouse cursor */
.firefly.active {
    opacity: 1;
    box-shadow: 0 0 15px 3px rgba(255, 217, 179, 0.8), 
                0 0 30px 8px rgba(255, 179, 102, 0.5),
                0 0 50px 15px rgba(255, 140, 0, 0.3);
    z-index: 6;
}

/* ---------------------------------------------------------------------- */
/* Page Reveal Animation Styles */

/* Animation container that covers the entire page */
.page-reveal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  display: flex;
}

/* Animated reveal panels that will slide away */
.reveal-panel {
  height: 100%;
  flex: 1;
  background: linear-gradient(135deg, var(--sage-green) 0%, var(--moss-green) 100%);
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Each panel has a slightly different animation delay */
.reveal-panel:nth-child(1) {
  transition-delay: 0.3s;
}

.reveal-panel:nth-child(2) {
  transition-delay: 0.5s;
}

.reveal-panel:nth-child(3) {
  transition-delay: 0.7s;
}

.reveal-panel:nth-child(4) {
  transition-delay: 0.9s;
}

.reveal-panel:nth-child(5) {
  transition-delay: 1.1s;
}

/* Active state - panels move away to reveal the page */
.page-reveal.active .reveal-panel {
  transform: translateY(-100%);
}

/* Add subtle gradient overlay to panels */
.reveal-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  pointer-events: none;
}

/* Logo that appears in the middle of the loading animation */
.reveal-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  opacity: 1;
  transition: opacity 1.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal-logo .logo-text {
  font-size: 3rem;
  font-weight: bold;
  letter-spacing: 2px;
  overflow: hidden;
}

/* Red text styling for My Portfolio */
.reveal-logo .red-part {
  color: #ffffff;
  display: inline-block;
  transform: translateY(100%);
  animation: slideUp 0.6s forwards 0.5s;
}

.reveal-logo .iva-part {
  color: #ffffff;
  display: inline-block;
  transform: translateY(100%);
  animation: slideUp 0.6s forwards 0.7s;
}

/* Hide logo after reveal animation */
.page-reveal.active .reveal-logo {
  opacity: 0;
}

/* Content reveal animations */
.content-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.page-loaded .content-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered content reveal */
.content-reveal:nth-child(1) { transition-delay: 0.6s; }
.content-reveal:nth-child(2) { transition-delay: 0.8s; }
.content-reveal:nth-child(3) { transition-delay: 1s; }
.content-reveal:nth-child(4) { transition-delay: 1.2s; }
.content-reveal:nth-child(5) { transition-delay: 1.5s; }

/* Slide up animation for logo text */
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}


/* Section reveal effect */
.section-reveal {
  position: relative;
  overflow: hidden;
}

.section-reveal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #ff3333 0%, #ff5252 100%);
  transform: translateX(-100%);
  z-index: 1;
  transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.section-reveal.revealed::before {
  transform: translateX(100%);
}

.section-reveal > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s;
  position: relative;
  z-index: 2;
}

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