/**
 * @file
 * Views Vanilla JavaScript Slideshow - Transitions CSS.
 *
 * Provides crossfade transition effects using CSS classes and data attributes.
 * Uses GPU-accelerated transforms and respects reduced motion preferences.
 *
 * Filename:     vvjs-transitions.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */

/**
 * Base crossfade setup - only applies when transition mode is active.
 * Uses data attribute selector for clean separation from instant mode.
 */
.vvjs-inner[data-transition^="crossfade"] .vvjs-items {
  position: relative;
  /* Smooth height transitions when slide dimensions differ */
  transition: height 0.4s ease-in-out;
}

/**
 * Crossfade slide positioning.
 * All slides are positioned absolutely and layered using z-index.
 */
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  /* Override existing display:none rule from instant mode */
  display: block !important;
  /* Default to hidden */
  opacity: 0;
  /* GPU acceleration for smooth transitions */
  will-change: opacity;
  transform: translateZ(0);
  /* Default transition timing - overridden by variants */
  transition: opacity var(--vvjs-transition-duration, 600ms) ease-in-out;
}

/**
 * Active slide state - fully visible on top.
 */
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active {
  opacity: 1;
  z-index: 2;
}

/**
 * Previous/outgoing slide state - fading out below.
 */
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-previous {
  opacity: 0;
  z-index: 1;
}

/**
 * Crossfade Classic Variant.
 * Both slides transition at the same speed - most common crossfade.
 * Simple simultaneous fade with no delay.
 */
.vvjs-inner[data-transition="crossfade-classic"] .vvjs-items > .vvjs-item {
  transition-timing-function: ease-in-out;
}

/**
 * Crossfade Staged Variant - DRAMATIC DIFFERENCE.
 * Old slide disappears FAST, new slide appears SLOWLY with significant delay.
 * Creates a "flash to black" moment before new slide fades in.
 *
 * Timing breakdown (600ms base):
 * - Outgoing: 200ms (33% of base) - VERY FAST fade out
 * - Gap: 200ms black screen
 * - Incoming: 800ms (133% of base) - SLOW fade in starting after gap
 * - Total duration: ~1000ms with dramatic pause
 */
.vvjs-inner[data-transition="crossfade-staged"] .vvjs-items > .vvjs-item.vvjs-previous {
  transition-duration: calc(var(--vvjs-transition-duration, 600ms) * 0.33);
  transition-timing-function: ease-in;
}

.vvjs-inner[data-transition="crossfade-staged"] .vvjs-items > .vvjs-item.vvjs-active {
  transition-duration: calc(var(--vvjs-transition-duration, 600ms) * 1.33);
  transition-delay: calc(var(--vvjs-transition-duration, 600ms) * 0.5);
  transition-timing-function: ease-out;
}

/**
 * Crossfade Dynamic Variant - ENERGETIC EFFECT.
 * Old slide SNAPS out instantly, new slide fades in smoothly.
 * Creates punchy, fast-paced feeling.
 *
 * Timing breakdown (600ms base):
 * - Outgoing: 150ms (25% of base) - INSTANT fade out
 * - Incoming: 900ms (150% of base) - LONG smooth fade in with NO delay
 * - Total overlaps for smooth transition
 */
.vvjs-inner[data-transition="crossfade-dynamic"] .vvjs-items > .vvjs-item.vvjs-previous {
  transition-duration: calc(var(--vvjs-transition-duration, 600ms) * 0.25);
  transition-timing-function: ease-in;
}

.vvjs-inner[data-transition="crossfade-dynamic"] .vvjs-items > .vvjs-item.vvjs-active {
  transition-duration: calc(var(--vvjs-transition-duration, 600ms) * 1.5);
  transition-timing-function: ease-out;
}

/**
 * Hero slideshow specific adjustments.
 * Hero mode uses absolute positioning for images within relative containers.
 */
.vvjs-inner[data-transition^="crossfade"].hero-slideshow .vvjs-items > .vvjs-item {
  /* Hero slides need relative positioning for content layout */
  position: relative !important;
}

.vvjs-inner[data-transition^="crossfade"].hero-slideshow .vvjs-hero-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.vvjs-inner[data-transition^="crossfade"].hero-slideshow .vvjs-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Inherit opacity transition from parent slide */
  transition: inherit;
}

/**
 * Reduced motion support.
 * Automatically disables transitions for users who prefer reduced motion.
 * Ensures accessibility without JavaScript intervention.
 */
@media (prefers-reduced-motion: reduce) {
  .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item {
    transition: none !important;
    transition-delay: 0s !important;
  }

  .vvjs-inner[data-transition^="crossfade"] .vvjs-items {
    transition: none !important;
  }
}

/**
 * Performance optimization.
 * Remove will-change after transition completes to free GPU resources.
 */
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item:not(.vvjs-active):not(.vvjs-previous) {
  will-change: auto;
}

/**
 * Focus management during transitions.
 * Ensure only active slide elements are focusable.
 */
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item:not(.vvjs-active) a,
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item:not(.vvjs-active) button,
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item:not(.vvjs-active) input {
  pointer-events: none;
}

/**
 * Professional Crossfade-Specific Animations.
 *
 * These are SEPARATE from instant mode animations and designed specifically
 * for smooth crossfade transitions. They use transform only (no opacity)
 * to let crossfade handle the fade effect.
 *
 * Key principle: Subtle, professional motion without glitches or jerks.
 */

/* ==========================================================================
   Zoom Animation - Subtle scale effect
   ========================================================================== */

.vvjs.a-zoom .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-item-inner {
  animation: vvjs-crossfade-zoom var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vvjs-crossfade-zoom {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}

/* ==========================================================================
   Slide Animations - Smooth directional slides
   ========================================================================== */

/* Top - Slide down smoothly */
.vvjs.a-top .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-item-inner {
  animation: vvjs-crossfade-top var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vvjs-crossfade-top {
  from {
    transform: translateY(-30px);
  }
  to {
    transform: translateY(0);
  }
}

/* Left - Slide right smoothly */
.vvjs.a-left .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-item-inner {
  animation: vvjs-crossfade-left var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vvjs-crossfade-left {
  from {
    transform: translateX(-30px);
  }
  to {
    transform: translateX(0);
  }
}

/* Right - Slide left smoothly */
.vvjs.a-right .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-item-inner {
  animation: vvjs-crossfade-right var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vvjs-crossfade-right {
  from {
    transform: translateX(30px);
  }
  to {
    transform: translateX(0);
  }
}

/* Bottom - Slide up smoothly */
.vvjs.a-bottom .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-item-inner {
  animation: vvjs-crossfade-bottom var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes vvjs-crossfade-bottom {
  from {
    transform: translateY(30px);
  }
  to {
    transform: translateY(0);
  }
}

/* ==========================================================================
   Fade - Pure crossfade (no additional animation)
   ========================================================================== */

.vvjs.a-fade .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-item-inner {
  /* No animation needed - crossfade opacity transition is enough */
}

/* ==========================================================================
   Hero Slideshow Animations
   ========================================================================== */

.vvjs.hero-slideshow.a-zoom .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-hero-image img {
  animation: vvjs-crossfade-zoom var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.vvjs.hero-slideshow.a-top .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-hero-image img {
  animation: vvjs-crossfade-top var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.vvjs.hero-slideshow.a-left .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-hero-image img {
  animation: vvjs-crossfade-left var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.vvjs.hero-slideshow.a-right .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-hero-image img {
  animation: vvjs-crossfade-right var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

.vvjs.hero-slideshow.a-bottom .vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active .vvjs-hero-image img {
  animation: vvjs-crossfade-bottom var(--vvjs-transition-duration, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .vvjs-inner[data-transition^="crossfade"] .vvjs-item-inner,
  .vvjs-inner[data-transition^="crossfade"] .vvjs-hero-image img {
    animation: none !important;
  }
}

/**
 * Debug mode - visual indicators (remove in production).
 * Uncomment to see transition states during development.
 */
/*
.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-active::before {
  content: "ACTIVE";
  position: absolute;
  top: 10px;
  left: 10px;
  background: green;
  color: white;
  padding: 5px 10px;
  z-index: 9999;
  font-size: 12px;
}

.vvjs-inner[data-transition^="crossfade"] .vvjs-items > .vvjs-item.vvjs-previous::before {
  content: "PREVIOUS";
  position: absolute;
  top: 10px;
  left: 10px;
  background: red;
  color: white;
  padding: 5px 10px;
  z-index: 9999;
  font-size: 12px;
}
*/