/* 
 * assets/css/animations.css
 * Specialized animations: Reveals, Split Text, Parallax foundations
 */

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure content is visible even when JS observers do not run */
  .fade-up,
  .split-line-inner {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-image-wrapper {
    clip-path: inset(0 0 0 0) !important;
  }

  .reveal-image-wrapper img {
    transform: none !important;
  }

  .svg-draw-path {
    stroke-dashoffset: 0 !important;
  }
}

/* 1. Page Transition */
.is-leaving .page-transition-overlay {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
}

.is-loaded .page-transition-overlay {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

/* 2. Split-text Reveal (Lines/Words) */
.split-line {
  overflow: hidden;
  display: block;
}

.split-line-inner {
  display: block;
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;
}

.in-view .split-line-inner {
  transform: translateY(0);
  opacity: 1;
}

/* 3. Clip-path / Mask Reveal */
.reveal-image-wrapper {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}

.in-view .reveal-image-wrapper,
.reveal-image-wrapper.in-view {
  clip-path: inset(0 0 0 0);
}

.reveal-image-wrapper img {
  transform: scale(1);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.in-view .reveal-image-wrapper img,
.reveal-image-wrapper.in-view img {
  transform: scale(1);
}

/* 6. SVG Path Drawing */
.svg-draw-path {
  stroke-dasharray: 1000; /* Replaced dynamically in JS */
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s ease-out;
}

.in-view .svg-draw-path {
  stroke-dashoffset: 0;
}

/* 7. Parallax Image (Targeted by JS) */
.parallax-bg {
  will-change: transform;
}

/* 8. Hover Directional Reveal Mask (Handled mostly via CSS clip-path tricks in components) */
.hover-reveal-box {
  position: relative;
  overflow: hidden;
}
.hover-reveal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 32, 44, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.hover-reveal-box:hover .hover-reveal-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* 10. Dynamic Texture/Noise Background */
.bg-noise {
  position: relative;
}
.bg-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Utility Animations */
.fade-up {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.in-view .fade-up, .in-view.fade-up {
  opacity: 1;
  transform: translateY(0);
}

/* Staggering delays */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }