/* Section transition effects - UPDATED: Work with two sections */
.section {
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.section.active {
    opacity: 1;
    transform: translateY(0) !important;
    z-index: 10;
}

.section.prev {
    transform: translateY(-100vh) !important;
    opacity: 0.3;
}

/* Hero section specific animations - REMOVED for clean loading */
/* All hero animations removed to eliminate motion effects */

/* Content animations */
.content h1,
.content h2,
.content p {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    transition-delay: 0.2s;
}

.section.active .content h1,
.section.active .content h2,
.section.active .content p {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger content animations */
.section.active .content h1 { transition-delay: 0.3s; }
.section.active .content h2 { transition-delay: 0.4s; }
.section.active .content p { transition-delay: 0.5s; }

/* Hover effects */
.nav-dot:hover {
    transform: scale(1.02);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Performance optimizations */
.section * {
    will-change: auto; /* Removed will-change to eliminate motion hints */
}

/* Animation keyframes - ADDED for scroll rectangle animation */
@keyframes fadeOutThenSlideUp {
    0% {
        opacity: 0;
        transform: translateY(100vh);
    }
    15% {
        opacity: 0;
        transform: translateY(100vh);
    }
    80% {
        opacity: 1;
        transform: translateY(0);
    }
    90% {
        opacity: 0;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(0);
    }
}

/* Animation classes - ADDED for scroll rectangle */
.fade-out-then-slide-up {
    animation: fadeOutThenSlideUp 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

/* Cursor interaction overlay for hero */
#hero-cursor-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100001; /* ensure above all site chrome */
  overflow: hidden;
}

/* Debug visuals removed */

/* Removed falling lines effect */

/* Hero cursor effect primitives */
.cursor-line {
  position: absolute;
  height: 1px; /* thickness */
  background: #8F8F8F; /* grey for growing */
  transform-origin: 0 0;
  will-change: transform, width, left, top;
  z-index: 0;
}

/* Same grey for retreating */
.cursor-line.retreating {
  background: #8F8F8F;
}

/* Square cursor */
.cursor-square {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #8F8F8F;
  border-radius: 0;
  will-change: left, top;
  z-index: 1;
  transition: background 0.2s ease;
}

/* White cursor on hover over clickable elements */
.cursor-square.cursor-hover {
  background: rgba(255,255,255,0.95);
}

/* Debugging visuals */
/* Debug visuals removed */

@keyframes cursor-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* Hide native cursor only when hero cursor effect is active */
.hero-cursor-active, .hero-cursor-active * {
  cursor: none !important;
}

/* Disable cursor effect on all mobile breakpoints */
@media (max-width: 1024px) {
  /* Hide cursor effect layer on mobile */
  #hero-cursor-layer {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* Ensure native cursor is visible on mobile */
  .hero-cursor-active, .hero-cursor-active * {
    cursor: auto !important;
  }
  
  /* Hide cursor elements on mobile */
  .cursor-line,
  .cursor-square {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  /* Double-ensure cursor effect is disabled on small mobile */
  #hero-cursor-layer {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  .hero-cursor-active, .hero-cursor-active * {
    cursor: auto !important;
  }
  
  .cursor-line,
  .cursor-square {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
}