/* ============================================
   VixViu Lyt Stylr - CSS Effects & Presets
   ============================================ */

/* Base CSS Custom Properties */
.lyt-stylr-element {
  --lyt-effect-type: none;
  --lyt-gsap-duration: 0.8s;
  --lyt-gsap-easing: ease-out;
  --lyt-webgl-intensity: 0.6;
  --lyt-webgl-speed: 1.0;
  --lyt-webgl-angle: 45deg;
  --lyt-sheen-direction: vertical;
  --lyt-sheen-trigger: scroll;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
  --lyt-animation-stagger: 0.1s;
}

/* ============================================
   SHEEN EFFECTS (WebGL + CSS)
   ============================================ */

.lyt-stylr-sheen-vertical {
  --lyt-effect-type: sheen;
  --lyt-sheen-direction: vertical;
  --lyt-sheen-trigger: scroll;
  --lyt-webgl-intensity: 0.6;
  --lyt-webgl-speed: 1.0;
  --lyt-webgl-angle: 90deg;
}

.lyt-stylr-sheen-horizontal {
  --lyt-effect-type: sheen;
  --lyt-sheen-direction: horizontal;
  --lyt-sheen-trigger: scroll;
  --lyt-webgl-intensity: 0.6;
  --lyt-webgl-speed: 1.0;
  --lyt-webgl-angle: 0deg;
}

.lyt-stylr-sheen-diagonal {
  --lyt-effect-type: sheen;
  --lyt-sheen-direction: diagonal;
  --lyt-sheen-trigger: scroll;
  --lyt-webgl-intensity: 0.6;
  --lyt-webgl-speed: 1.0;
  --lyt-webgl-angle: 45deg;
}

.lyt-stylr-sheen-radial {
  --lyt-effect-type: sheen;
  --lyt-sheen-direction: radial;
  --lyt-sheen-trigger: scroll;
  --lyt-webgl-intensity: 0.6;
  --lyt-webgl-speed: 1.0;
  --lyt-webgl-angle: 0deg;
}

/* ============================================
   CONTAINER ANIMATIONS (GSAP)
   ============================================ */

.lyt-stylr-shake-intense {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 0.6s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

.lyt-stylr-shake-mild {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 0.8s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

.lyt-stylr-bounce-strong {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 0.8s;
  --lyt-gsap-easing: bounce;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

.lyt-stylr-bounce-mild {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 1.0s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

.lyt-stylr-rotate-3d {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 1.2s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

.lyt-stylr-rotate-2d {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 1.0s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

.lyt-stylr-pulse {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 1.5s;
  --lyt-gsap-easing: ease-in-out;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

.lyt-stylr-wobble {
  --lyt-effect-type: container;
  --lyt-gsap-duration: 1.0s;
  --lyt-gsap-easing: ease-in-out;
  --lyt-animation-trigger: scroll;
  --lyt-animation-delay: 0s;
}

/* ============================================
   SPATIAL EFFECTS (WebGL + GSAP)
   ============================================ */

.lyt-stylr-depth-displacement {
  --lyt-effect-type: spatial;
  --lyt-webgl-intensity: 0.7;
  --lyt-webgl-speed: 0.8;
  --lyt-gsap-duration: 1.0s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
}

.lyt-stylr-parallax-3d {
  --lyt-effect-type: spatial;
  --lyt-webgl-intensity: 0.6;
  --lyt-webgl-speed: 0.5;
  --lyt-gsap-duration: 1.2s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
}

.lyt-stylr-rotation-3d {
  --lyt-effect-type: spatial;
  --lyt-webgl-intensity: 0.8;
  --lyt-webgl-speed: 1.2;
  --lyt-gsap-duration: 1.5s;
  --lyt-gsap-easing: ease-out;
  --lyt-animation-trigger: scroll;
}

/* ============================================
   PROCEDURAL EFFECTS (WebGL Generated)
   ============================================ */

.lyt-stylr-gradient-wave {
  --lyt-effect-type: procedural;
  --lyt-webgl-intensity: 0.6;
  --lyt-webgl-speed: 1.0;
  --lyt-webgl-angle: 0deg;
  --lyt-animation-trigger: scroll;
}

.lyt-stylr-noise-pattern {
  --lyt-effect-type: procedural;
  --lyt-webgl-intensity: 0.5;
  --lyt-webgl-speed: 0.8;
  --lyt-webgl-angle: 0deg;
  --lyt-animation-trigger: scroll;
}

.lyt-stylr-fractal-effect {
  --lyt-effect-type: procedural;
  --lyt-webgl-intensity: 0.7;
  --lyt-webgl-speed: 0.6;
  --lyt-webgl-angle: 0deg;
  --lyt-animation-trigger: scroll;
}

/* ============================================
   INTENSITY VARIATIONS
   ============================================ */

.lyt-stylr-intensity-low {
  --lyt-webgl-intensity: 0.3;
  --lyt-gsap-duration: 1.2s;
}

.lyt-stylr-intensity-medium {
  --lyt-webgl-intensity: 0.6;
  --lyt-gsap-duration: 0.8s;
}

.lyt-stylr-intensity-high {
  --lyt-webgl-intensity: 0.9;
  --lyt-gsap-duration: 0.6s;
}

/* ============================================
   SPEED VARIATIONS
   ============================================ */

.lyt-stylr-speed-slow {
  --lyt-webgl-speed: 0.5;
  --lyt-gsap-duration: 1.5s;
}

.lyt-stylr-speed-normal {
  --lyt-webgl-speed: 1.0;
  --lyt-gsap-duration: 0.8s;
}

.lyt-stylr-speed-fast {
  --lyt-webgl-speed: 1.5;
  --lyt-gsap-duration: 0.5s;
}

/* ============================================
   TRIGGER VARIATIONS
   ============================================ */

.lyt-stylr-trigger-scroll {
  --lyt-animation-trigger: scroll;
  --lyt-sheen-trigger: scroll;
}

.lyt-stylr-trigger-hover {
  --lyt-animation-trigger: hover;
  --lyt-sheen-trigger: hover;
}

.lyt-stylr-trigger-click {
  --lyt-animation-trigger: click;
  --lyt-sheen-trigger: click;
}

.lyt-stylr-trigger-load {
  --lyt-animation-trigger: load;
  --lyt-sheen-trigger: load;
}

/* ============================================
   EASING VARIATIONS
   ============================================ */

.lyt-stylr-ease-linear {
  --lyt-gsap-easing: linear;
}

.lyt-stylr-ease-ease-in {
  --lyt-gsap-easing: ease-in;
}

.lyt-stylr-ease-ease-out {
  --lyt-gsap-easing: ease-out;
}

.lyt-stylr-ease-ease-in-out {
  --lyt-gsap-easing: ease-in-out;
}

.lyt-stylr-ease-bounce {
  --lyt-gsap-easing: bounce;
}

.lyt-stylr-ease-elastic {
  --lyt-gsap-easing: elastic;
}

/* ============================================
   DELAY VARIATIONS
   ============================================ */

.lyt-stylr-delay-none {
  --lyt-animation-delay: 0s;
}

.lyt-stylr-delay-short {
  --lyt-animation-delay: 0.2s;
}

.lyt-stylr-delay-medium {
  --lyt-animation-delay: 0.5s;
}

.lyt-stylr-delay-long {
  --lyt-animation-delay: 1.0s;
}

/* ============================================
   STAGGER VARIATIONS
   ============================================ */

.lyt-stylr-stagger-none {
  --lyt-animation-stagger: 0s;
}

.lyt-stylr-stagger-short {
  --lyt-animation-stagger: 0.05s;
}

.lyt-stylr-stagger-medium {
  --lyt-animation-stagger: 0.1s;
}

.lyt-stylr-stagger-long {
  --lyt-animation-stagger: 0.2s;
}

/* ============================================
   RESPONSIVE BEHAVIORS
   ============================================ */

@media (max-width: 768px) {
  .lyt-stylr-element[data-mobile-behavior="disable"] {
    --lyt-effect-type: none !important;
    --lyt-webgl-intensity: 0 !important;
    --lyt-gsap-duration: 0s !important;
  }
  
  .lyt-stylr-element[data-mobile-behavior="static"] {
    --lyt-animation-trigger: none !important;
    --lyt-sheen-trigger: none !important;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .lyt-stylr-element {
    --lyt-effect-type: none !important;
    --lyt-webgl-intensity: 0 !important;
    --lyt-gsap-duration: 0s !important;
    --lyt-animation-trigger: none !important;
    --lyt-sheen-trigger: none !important;
  }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

.lyt-stylr-element[data-performance-mode="low"] {
  --lyt-webgl-intensity: 0.3;
  --lyt-webgl-speed: 0.5;
  --lyt-gsap-duration: 1.5s;
}

.lyt-stylr-element[data-performance-mode="high"] {
  --lyt-webgl-intensity: 0.9;
  --lyt-webgl-speed: 1.5;
  --lyt-gsap-duration: 0.5s;
}

/* ============================================
   DEBUG MODE
   ============================================ */

.lyt-stylr-element[data-debug="true"] {
  border: 2px dashed #007cba;
  background: rgba(0, 123, 186, 0.1);
}

.lyt-stylr-element[data-debug="true"]::before {
  content: 'Lyt Stylr Debug';
  position: absolute;
  top: 5px;
  left: 5px;
  background: #007cba;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  z-index: 1000;
}

/* ============================================
   LOADING STATES
   ============================================ */

.lyt-stylr-element.loading {
  opacity: 0.7;
  pointer-events: none;
}

.lyt-stylr-element.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007cba;
  border-radius: 50%;
  animation: lytStylrSpin 1s linear infinite;
}

@keyframes lytStylrSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   ERROR STATES
   ============================================ */

.lyt-stylr-element.error {
  border: 2px solid #dc3545;
  background: #f8d7da;
}

.lyt-stylr-element.error::after {
  content: '⚠️ Effect Error';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #721c24;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
}

/* ============================================
   SUCCESS STATES
   ============================================ */

.lyt-stylr-element.success {
  border: 2px solid #28a745;
  background: #d4edda;
}

.lyt-stylr-element.success::after {
  content: '✅ Effect Active';
  position: absolute;
  top: 5px;
  right: 5px;
  background: #28a745;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  z-index: 1000;
}