/*
*   Website Design & Development Disclosure
*   ========================================
*   This website was created with the assistance of Claude AI (Anthropic) and Copilot AI (Microsoft).
*   AI was used for: code generation, design layout, translation, and content structuring.
*   
*   Final review, content, content editing, and customization was performed by the site owner.
*/

/* ====== Scroll-triggered Fade-in Animations ====== */

/*
 * USAGE GUIDE:
 * 
 * 1. Add the CSS file to your HTML <head>:
 *    <link rel="stylesheet" href="/assets/css/animations.css">
 * 
 * 2. Add the JavaScript file before closing </body>:
 *    <script src="/assets/js/fade-in.js"></script>
 * 
 * 3. Add fade-in classes to any HTML elements:
 * 
 *    <section class="fade-in">Fades up from bottom</section>
 *    <div class="fade-in-left">Slides from left</div>
 *    <div class="fade-in-right">Slides from right</div>
 *    <div class="fade-in-scale">Scales up slightly</div>
 * 
 * 4. Elements automatically stagger (appear one after another)
 * 
 * NOTES:
 * - Animations trigger when element is 10% visible in viewport
 * - Each element animates only once
 * - Respects user's "prefers-reduced-motion" accessibility setting
 * - These rules read the element's own --rot custom property (set by the
 *   collage system, defaults to 0deg elsewhere) and fold it into every
 *   transform value below, so a rotated .collage-group keeps its rotation
 *   throughout the fade instead of the fade's transform overwriting it.
 */

/* Base fade-in: slides up from bottom */
.fade-in {
  opacity: 0;
  transform: translateY(24px) rotate(var(--rot, 0deg));
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0) rotate(var(--rot, 0deg));
}

/* Slide in from left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-24px) rotate(var(--rot, 0deg));
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0) rotate(var(--rot, 0deg));
}

/* Slide in from right */
.fade-in-right {
  opacity: 0;
  transform: translateX(24px) rotate(var(--rot, 0deg));
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0) rotate(var(--rot, 0deg));
}

/* Scale up variant */
.fade-in-scale {
  opacity: 0;
  transform: scale(0.95) rotate(var(--rot, 0deg));
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.fade-in-scale.visible {
  opacity: 1;
  transform: scale(1) rotate(var(--rot, 0deg));
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .fade-in-scale {
    transform: rotate(var(--rot, 0deg));
    transition: opacity 0.3s ease-out;
  }
  
  .fade-in.visible,
  .fade-in-left.visible,
  .fade-in-right.visible,
  .fade-in-scale.visible {
    transform: rotate(var(--rot, 0deg));
  }
}