/**
 * SjaanMedia Clean Scroll Helper CSS - Updated
 * CSS-driven animations with variables for easy configuration
 */

/* Base animation classes */
.scroll-fade,
.scroll-left,
.scroll-right,
.scroll-blur,
.scroll-scale,
.scroll-opacity {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition-property: opacity, transform, filter;
  transition-duration: var(--scroll-duration, 1s);
  transition-timing-function: ease-out;
}

/* Initial transform states */
.scroll-left {
  transform: translateX(-50px);
}

.scroll-right {
  transform: translateX(50px);
}

.scroll-scale {
  transform: scale(0.8) translateY(20px);
}

/* FIXED: Improved scroll-grow with customizable scales */
.scroll-grow {
  /* Default starting scale (smaller) */
  --grow-start: 0.8;
  /* Default target scale (normal size) */
  --grow-end: 1;
  transform: scale(var(--grow-start));
  opacity: 0;
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-duration: var(--scroll-duration, 1s);
  transition-timing-function: ease-out;
}

/* Predefined scale classes for common values */
.scroll-grow-large {
  --grow-end: 1.5;
}

.scroll-grow-larger {
  --grow-end: 2;
}

.scroll-grow-huge {
  --grow-end: 3;
}

/* You can also define custom starting scales */
.scroll-grow-from-tiny {
  --grow-start: 0.3;
}

.scroll-grow-from-small {
  --grow-start: 0.5;
}

.scroll-grow-from-normal {
  --grow-start: 1;
}

/* Useful for elements that should start larger and grow even more */
.scroll-grow-from-large {
  --grow-start: 1.2;
}

.scroll-blur {
  filter: blur(5px);
}

/* Active animation states */
.scroll-fade.scroll-active,
.scroll-blur.scroll-active {
  opacity: 1;
}

.scroll-left.scroll-active {
  opacity: 1;
  transform: translateX(0);
}

.scroll-right.scroll-active {
  opacity: 1;
  transform: translateX(0);
}

.scroll-scale.scroll-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* FIXED: Active state for scroll-grow */
.scroll-grow.scroll-active {
  opacity: 1;
  transform: scale(var(--grow-end));
}

.scroll-blur.scroll-active {
  filter: blur(0);
}

/* Opacity variations */
.scroll-opacity.scroll-active {
  opacity: var(--custom-opacity, 0.5);
}

.scroll-opacity-25.scroll-active {
  opacity: 0.25;
}

.scroll-opacity-75.scroll-active {
  opacity: 0.75;
}

/* Keep elements visible when they've been activated - FIX for re-animation issue */
.scroll-fade.scroll-activated,
.scroll-blur.scroll-activated {
  opacity: 1;
}

.scroll-left.scroll-activated {
  transform: translateX(0);
}

.scroll-right.scroll-activated {
  transform: translateX(0);
}

.scroll-scale.scroll-activated {
  transform: scale(1) translateY(0);
}

/* FIXED: Activated state for scroll-grow */
.scroll-grow.scroll-activated {
  opacity: 1;
  transform: scale(var(--grow-end));
}

.scroll-blur.scroll-activated {
  filter: blur(0);
}

/* Handle sticky elements with animations */
.scroll-sticky {
  /* Base styles for all sticky elements */
  position: sticky !important;
  top: 0;
  z-index: 1;
}

/* Combined animation styles work with sticky */
.scroll-sticky.scroll-fade,
.scroll-sticky.scroll-opacity,
.scroll-sticky.scroll-left,
.scroll-sticky.scroll-right,
.scroll-sticky.scroll-blur,
.scroll-sticky.scroll-scale,
.scroll-sticky.scroll-grow {
  /* Allow opacity and transforms for sticky elements */
  transition: opacity var(--scroll-duration, 1s) ease-out, transform var(--scroll-duration, 1s) ease-out, filter var(--scroll-duration, 1s) ease-out;
}

/* Ensure sticky elements with active class trigger animations properly */
.scroll-sticky.scroll-fade.scroll-active,
.scroll-sticky.scroll-opacity.scroll-active {
  opacity: var(--sticky-opacity, 1); /* Use CSS variable to allow customizing opacity */
}

.scroll-sticky.scroll-opacity-25.scroll-active {
  opacity: 0.25;
}

.scroll-sticky.scroll-opacity-75.scroll-active {
  opacity: 0.75;
}

.scroll-sticky.scroll-left.scroll-active,
.scroll-sticky.scroll-right.scroll-active,
.scroll-sticky.scroll-blur.scroll-active,
.scroll-sticky.scroll-scale.scroll-active {
  opacity: 1;
  /* Base transforms apply */
}

/* FIXED: Sticky + grow combination */
.scroll-sticky.scroll-grow.scroll-active,
.scroll-sticky.scroll-grow.scroll-activated {
  opacity: 1;
  transform: scale(var(--grow-end));
}

/* Scroll group behavior */
.scroll-group {
  position: relative;
}

.scroll-group-past .scroll-fade:not(.scroll-sticky),
.scroll-group-past .scroll-left:not(.scroll-sticky),
.scroll-group-past .scroll-right:not(.scroll-sticky),
.scroll-group-past .scroll-blur:not(.scroll-sticky),
.scroll-group-past .scroll-scale:not(.scroll-sticky),
.scroll-group-past .scroll-opacity:not(.scroll-sticky),
.scroll-group-past .scroll-grow:not(.scroll-sticky) {
  opacity: 0;
  transition-duration: 0.5s;
}

/* Special handling for sticky elements in groups */
.scroll-sticky.scroll-activated {
  /* Keep the animated state while allowing opacity changes */
  transform: none;
  filter: none;
}

/* FIXED: Special handling for sticky grow in groups */
.scroll-sticky.scroll-grow.scroll-activated {
  transform: scale(var(--grow-end));
}

/* Allow opacity control for sticky elements */
.scroll-sticky.scroll-opacity.scroll-activated {
  opacity: var(--sticky-opacity, 0.5); /* Default to 0.5 or whatever is set in --sticky-opacity */
}

.scroll-sticky.scroll-opacity-25.scroll-activated {
  opacity: 0.25;
}

.scroll-sticky.scroll-opacity-75.scroll-activated {
  opacity: 0.75;
}

/* Cascading animation delays for groups */
.scroll-group .scroll-fade:nth-child(1),
.scroll-group .scroll-left:nth-child(1),
.scroll-group .scroll-right:nth-child(1),
.scroll-group .scroll-blur:nth-child(1),
.scroll-group .scroll-scale:nth-child(1),
.scroll-group .scroll-opacity:nth-child(1),
.scroll-group .scroll-grow:nth-child(1) {
  transition-delay: 0s;
}

.scroll-group .scroll-fade:nth-child(2),
.scroll-group .scroll-left:nth-child(2),
.scroll-group .scroll-right:nth-child(2),
.scroll-group .scroll-blur:nth-child(2),
.scroll-group .scroll-scale:nth-child(2),
.scroll-group .scroll-opacity:nth-child(2),
.scroll-group .scroll-grow:nth-child(2) {
  transition-delay: 0.1s;
}

.scroll-group .scroll-fade:nth-child(3),
.scroll-group .scroll-left:nth-child(3),
.scroll-group .scroll-right:nth-child(3),
.scroll-group .scroll-blur:nth-child(3),
.scroll-group .scroll-scale:nth-child(3),
.scroll-group .scroll-opacity:nth-child(3),
.scroll-group .scroll-grow:nth-child(3) {
  transition-delay: 0.2s;
}

.scroll-group .scroll-fade:nth-child(4),
.scroll-group .scroll-left:nth-child(4),
.scroll-group .scroll-right:nth-child(4),
.scroll-group .scroll-blur:nth-child(4),
.scroll-group .scroll-scale:nth-child(4),
.scroll-group .scroll-opacity:nth-child(4),
.scroll-group .scroll-grow:nth-child(4) {
  transition-delay: 0.3s;
}

.scroll-group .scroll-fade:nth-child(5),
.scroll-group .scroll-left:nth-child(5),
.scroll-group .scroll-right:nth-child(5),
.scroll-group .scroll-blur:nth-child(5),
.scroll-group .scroll-scale:nth-child(5),
.scroll-group .scroll-opacity:nth-child(5),
.scroll-group .scroll-grow:nth-child(5) {
  transition-delay: 0.4s;
}

/* Header behavior */
.scroll-header {
  transition: transform 0.3s ease, background-color 0.5s ease;
}

.scroll-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.scroll-hidden {
  transform: translateY(-100%);
}

/* Background change on scroll */
html:not([data-scroll="0"]) .scroll-header {
  background-color: var(--wp--preset--color--red, #c00000);
  backdrop-filter: blur(10px);
}

html:not([data-scroll="0"]) .scroll-header a {
  color: var(--wp--preset--color--white, #ffffff);
}

html:not([data-scroll="0"]) .scroll-header a:hover {
  color: var(--wp--preset--color--yellow, #fed757);
}

/* Z-index management for layering */
.scroll-fade,
.scroll-left,
.scroll-right,
.scroll-blur,
.scroll-scale,
.scroll-opacity,
.scroll-grow {
  position: relative;
  z-index: 2; /* Higher z-index to appear in front */
}

/* Progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--wp--preset--color--teal, #61cfd7);
  transform-origin: 0 0;
  transform: scaleX(var(--scroll-progress, 0));
  z-index: 1000;
  pointer-events: none;
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .scroll-left {
    transform: translateX(-30px);
  }
  
  .scroll-right {
    transform: translateX(30px);
  }
}

/* Debug styling */
html.scroll-debug .scroll-debug-grid {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: linear-gradient(rgba(0, 0, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 10%;
}