/* Simple fade-in animations */
:root {
  --transition-duration: 0.3s;
  --transition-timing: ease;
  --lazy-load-transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Smooth page load */
/* Smooth page load */
body {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


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

/* Fade-in for content */
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  
  body {
    opacity: 1 !important;
  }
}

/* Lazy loading styles */
img[data-src],
iframe[data-src] {
  opacity: 0;
  transition: var(--lazy-load-transition);
  will-change: opacity, transform;
  transform: translateY(10px);
}

img.lazy-loaded,
iframe.lazy-loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Gravity effect - falling animation */
@keyframes falling {
  0% {
    transform: translateY(0) translateX(0) rotate(0);
    opacity: 1;
  }
  100% {
    transform: translateY(calc(100vh + 100px)) translateX(var(--random-x, 0)) rotate(var(--random-rotation, 0));
    opacity: 0.7;
  }
}

/* Style for individual words */
.word {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.word.falling {
  position: relative;
  display: inline-block;
  animation: falling var(--fall-speed, 3s) cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
  animation-play-state: running;
  z-index: 1000;
}

/* Disappearing animation for images and dividers */
@keyframes disappear {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
    visibility: hidden;
  }
}

.disappear {
  animation: disappear 1.5s ease-out forwards;
  display: none !important; /* Force elements to be removed from layout */
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Additional styles when gravity is active */
.gravity-active {
  background-color: var(--color-background, #F9F8F4) !important;
  height: 300vh !important; /* Ensure body is much taller to give space for falling */
  overflow-y: auto; /* Allow vertical scrolling while the animation plays */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  pointer-events: none; /* Disable all interactions when gravity effect is active */
}

.gravity-active .container,
.gravity-active .site-header,
.gravity-active section,
.gravity-active div:not(.word),
.gravity-active a,
.gravity-active button,
.gravity-active input,
.gravity-active .item-link,
.gravity-active .work-title,
.gravity-active .word {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important; /* Ensure containers don't cut off falling elements */
  height: auto !important; /* Remove height restrictions */
  max-height: none !important; /* Ensure no max height is enforced */
  /* position: static !important; <-- Removed to allow JS control */
  pointer-events: none !important; /* Disable interactions with all elements */
}