/**
 * Section Effects System CSS
 *
 * Contains all CSS for:
 * - Entrance Effects (12 effects)
 * - Hover Effects (6 effects with intensity variants)
 * - Stagger Children
 * - Reduced Motion Support
 */

/* ============================================================================
   BASE SETUP
   ========================================================================= */

/**
 * Base setup for all entrance effects
 * Sets will-change for performance optimization
 */
[data-entrance] {
  will-change: opacity, transform;
}

/* ============================================================================
   ENTRANCE EFFECTS - INITIAL STATES
   ========================================================================= */

/**
 * Fade In
 * Simple opacity transition
 */
[data-entrance="fadeIn"] {
  opacity: 0;
}

/**
 * Fade In Up
 * Fades in while sliding up from below
 */
[data-entrance="fadeInUp"] {
  opacity: 0;
  transform: translateY(var(--entrance-distance, 30px));
}

/**
 * Fade In Down
 * Fades in while sliding down from above
 */
[data-entrance="fadeInDown"] {
  opacity: 0;
  transform: translateY(calc(var(--entrance-distance, 30px) * -1));
}

/**
 * Fade In Left
 * Fades in while sliding from the left
 */
[data-entrance="fadeInLeft"] {
  opacity: 0;
  transform: translateX(calc(var(--entrance-distance, 30px) * -1));
}

/**
 * Fade In Right
 * Fades in while sliding from the right
 */
[data-entrance="fadeInRight"] {
  opacity: 0;
  transform: translateX(var(--entrance-distance, 30px));
}

/**
 * Zoom In
 * Fades in while scaling up from smaller size
 */
[data-entrance="zoomIn"] {
  opacity: 0;
  transform: scale(0.85);
}

/**
 * Zoom Out
 * Fades in while scaling down from larger size
 */
[data-entrance="zoomOut"] {
  opacity: 0;
  transform: scale(1.15);
}

/**
 * Slide Up
 * Slides up without opacity change (no fade)
 */
[data-entrance="slideUp"] {
  transform: translateY(var(--entrance-distance, 50px));
}

/**
 * Flip In X
 * 3D flip rotation around X-axis
 */
[data-entrance="flipInX"] {
  opacity: 0;
  transform: perspective(400px) rotateX(90deg);
}

/**
 * Flip In Y
 * 3D flip rotation around Y-axis
 */
[data-entrance="flipInY"] {
  opacity: 0;
  transform: perspective(400px) rotateY(90deg);
}

/**
 * Blur In
 * Fades in from blurred state
 */
[data-entrance="blurIn"] {
  opacity: 0;
  filter: blur(10px);
}

/**
 * Bounce In
 * Bouncy scale-up animation
 */
[data-entrance="bounceIn"] {
  opacity: 0;
  transform: scale(0.3);
}

/**
 * Reveal Up
 * Reveals from bottom using clip-path
 */
[data-entrance="revealUp"] {
  clip-path: inset(100% 0 0 0);
}

/* ============================================================================
   ENTRANCE EFFECTS - VISIBLE STATES
   ========================================================================= */

/**
 * Default visible state for all entrance effects
 * Uses CSS custom properties for duration, delay, and easing
 */
[data-entrance].effect-visible {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
  transition:
    opacity var(--entrance-duration, 600ms) var(--entrance-easing, ease-out),
    transform var(--entrance-duration, 600ms) var(--entrance-easing, ease-out),
    filter var(--entrance-duration, 600ms) var(--entrance-easing, ease-out),
    clip-path var(--entrance-duration, 600ms) var(--entrance-easing, ease-out);
  transition-delay: var(--entrance-delay, 0ms);
}

/**
 * Bounce In - Special Easing
 * Uses cubic-bezier for bouncy effect
 */
[data-entrance="bounceIn"].effect-visible {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================================================
   HOVER EFFECTS
   ========================================================================= */

/**
 * Lift
 * Lifts element up with shadow on hover
 */
[data-hover="lift"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-hover="lift"]:hover {
  transform: translateY(var(--hover-lift-distance, -8px));
  box-shadow: 0 var(--hover-shadow-blur, 20px) var(--hover-shadow-spread, 40px)
    rgba(0, 0, 0, var(--hover-shadow-opacity, 0.15));
}

/**
 * Scale
 * Scales element slightly on hover
 */
[data-hover="scale"] {
  transition: transform 0.3s ease;
}

[data-hover="scale"]:hover {
  transform: scale(var(--hover-scale-amount, 1.02));
}

/**
 * Glow
 * Adds glowing shadow on hover
 */
[data-hover="glow"] {
  transition: box-shadow 0.3s ease;
}

[data-hover="glow"]:hover {
  box-shadow: 0 0 var(--hover-glow-size, 30px)
    var(--hover-glow-color, var(--bs-primary, #0d6efd));
}

/**
 * Border Highlight
 * Animates border inset on hover
 */
[data-hover="borderHighlight"] {
  transition: box-shadow 0.3s ease;
  box-shadow: inset 0 0 0 0 var(--hover-border-color, var(--bs-primary, #0d6efd));
}

[data-hover="borderHighlight"]:hover {
  box-shadow: inset 0 0 0 var(--hover-border-width, 3px)
    var(--hover-border-color, var(--bs-primary, #0d6efd));
}

/**
 * Color Shift
 * Adjusts brightness on hover
 */
[data-hover="colorShift"] {
  transition: filter 0.3s ease;
}

[data-hover="colorShift"]:hover {
  filter: brightness(var(--hover-brightness, 1.1));
}

/**
 * Tilt
 * Base styles for tilt effect (actual tilt is handled by JavaScript)
 */
[data-hover="tilt"] {
  transition: transform 0.1s ease-out;
  transform-style: preserve-3d;
}

/* ============================================================================
   HOVER INTENSITY VARIANTS
   ========================================================================= */

/**
 * Light Intensity
 */
[data-hover-intensity="light"][data-hover="lift"]:hover {
  --hover-lift-distance: -4px;
  --hover-shadow-blur: 10px;
  --hover-shadow-spread: 20px;
  --hover-shadow-opacity: 0.1;
}

[data-hover-intensity="light"][data-hover="scale"]:hover {
  --hover-scale-amount: 1.01;
}

[data-hover-intensity="light"][data-hover="glow"]:hover {
  --hover-glow-size: 15px;
}

[data-hover-intensity="light"][data-hover="borderHighlight"]:hover {
  --hover-border-width: 2px;
}

[data-hover-intensity="light"][data-hover="colorShift"]:hover {
  --hover-brightness: 1.05;
}

/**
 * Medium Intensity (default)
 */
[data-hover-intensity="medium"][data-hover="lift"]:hover,
[data-hover="lift"]:hover {
  --hover-lift-distance: -8px;
  --hover-shadow-blur: 20px;
  --hover-shadow-spread: 40px;
  --hover-shadow-opacity: 0.15;
}

[data-hover-intensity="medium"][data-hover="scale"]:hover,
[data-hover="scale"]:hover {
  --hover-scale-amount: 1.02;
}

[data-hover-intensity="medium"][data-hover="glow"]:hover,
[data-hover="glow"]:hover {
  --hover-glow-size: 30px;
}

[data-hover-intensity="medium"][data-hover="borderHighlight"]:hover,
[data-hover="borderHighlight"]:hover {
  --hover-border-width: 3px;
}

[data-hover-intensity="medium"][data-hover="colorShift"]:hover,
[data-hover="colorShift"]:hover {
  --hover-brightness: 1.1;
}

/**
 * Strong Intensity
 */
[data-hover-intensity="strong"][data-hover="lift"]:hover {
  --hover-lift-distance: -12px;
  --hover-shadow-blur: 30px;
  --hover-shadow-spread: 60px;
  --hover-shadow-opacity: 0.2;
}

[data-hover-intensity="strong"][data-hover="scale"]:hover {
  --hover-scale-amount: 1.04;
}

[data-hover-intensity="strong"][data-hover="glow"]:hover {
  --hover-glow-size: 50px;
}

[data-hover-intensity="strong"][data-hover="borderHighlight"]:hover {
  --hover-border-width: 5px;
}

[data-hover-intensity="strong"][data-hover="colorShift"]:hover {
  --hover-brightness: 1.15;
}

/* ============================================================================
   STAGGER CHILDREN
   ========================================================================= */

/**
 * Stagger Children - Initial State
 * All children start hidden
 */
[data-stagger] > * {
  opacity: 0;
}

/**
 * Stagger Children - Visible State
 * Children animate in with staggered delay (handled by JavaScript)
 */
[data-stagger].effect-visible > * {
  opacity: 1;
  transition:
    opacity var(--entrance-duration, 600ms) var(--entrance-easing, ease-out),
    transform var(--entrance-duration, 600ms) var(--entrance-easing, ease-out);
}

/* ============================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================= */

/**
 * Respect user's motion preferences
 * Disables all animations for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  [data-entrance],
  [data-entrance].effect-visible,
  [data-hover],
  [data-stagger] > *,
  [data-image-hover],
  [data-parallax-speed],
  [data-counter-animation] [data-counter-value] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Keep images visible for grayscale effect */
  [data-image-hover="grayscale"] img {
    filter: none !important;
  }
}

/* ============================================================================
   SECTION-SPECIFIC EFFECTS
   ========================================================================= */

/**
 * Gallery/Images Image Hover Effects
 * Applied to individual gallery/image items
 */

/* Base setup - overflow hidden for all hover effects */
[data-image-hover] {
  position: relative;
  overflow: hidden;
}

[data-image-hover] img {
  transition: transform 0.4s ease, filter 0.4s ease;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zoom - Scale up image on hover */
[data-image-hover="zoom"]:hover img {
  transform: scale(1.1);
}

/* Overlay - Add dark overlay on hover */
[data-image-hover="overlay"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

[data-image-hover="overlay"]:hover::after {
  background: rgba(0, 0, 0, 0.3);
}

/* Caption Slide - Slide caption up on hover */
[data-image-hover="caption"] .gallery-caption,
[data-image-hover="caption"] .section-gallery__overlay {
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

[data-image-hover="caption"]:hover .gallery-caption,
[data-image-hover="caption"]:hover .section-gallery__overlay {
  transform: translateY(0);
}

/* Blur - Blur image on hover */
[data-image-hover="blur"]:hover img {
  filter: blur(3px);
}

/* Grayscale - Remove grayscale on hover */
[data-image-hover="grayscale"] img {
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}

[data-image-hover="grayscale"]:hover img {
  filter: grayscale(0%);
}

/* Brightness - Darken on hover */
[data-image-hover="brightness"]:hover img {
  filter: brightness(0.7);
}

/* Scale Down - Shrink slightly on hover */
[data-image-hover="scaleDown"]:hover img {
  transform: scale(0.95);
}

/**
 * Parallax Background Effect
 * Applied to hero section backgrounds
 */
[data-parallax-speed] {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/**
 * Counter Animation
 * Base styles for metrics counter animation
 * (Animation logic is handled by JavaScript)
 */
[data-counter-animation] [data-counter-value] {
  display: inline-block;
  min-width: 3ch;
  transition: transform 0.2s ease;
}

/* ============================================================================
   UTILITY CLASSES
   ========================================================================= */

/**
 * Force disable effects (useful for testing or conditional disabling)
 */
.effects-disabled [data-entrance],
.effects-disabled [data-hover],
.effects-disabled [data-stagger] > *,
.effects-disabled [data-image-hover],
.effects-disabled [data-parallax-speed],
.effects-disabled [data-counter-animation] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  transition: none !important;
}