osi-cards-lib 1.5.30 → 1.5.32

package/styles/layout/_tilt.scss

@@ -1,244 +0,0 @@
-/* ===================================================================
-   TILT & GLOW ANIMATIONS
-   Performance-optimized 3D tilt effects with dynamic lighting
-   =================================================================== */
-
-/* Base tilt container with 3D perspective - Optimized for smooth mouse following */
-/* Cross-browser compatible with vendor prefixes for Safari */
-.tilt-container {
-  /* 3D transform with hardware acceleration - using CSS variables for smooth updates */
-  /* Vendor prefixes for Safari compatibility */
-  -webkit-transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
-    scale(var(--tilt-scale, 1)) translateZ(0);
-  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg))
-    scale(var(--tilt-scale, 1)) translateZ(0);
-  /* Force GPU acceleration */
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden; /* Prevent flickering */
-
-  /* No CSS transitions on transform - JavaScript handles smooth updates */
-  /* Only transition box-shadow for glow effect */
-  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0.2, 1);
-  -webkit-transition: box-shadow 200ms cubic-bezier(0.2, 0, 0.2, 1);
-
-  /* Enable 3D rendering */
-  -webkit-transform-style: preserve-3d;
-  transform-style: preserve-3d;
-
-  position: relative;
-  border-radius: var(--card-border-radius);
-
-  /* Performance optimizations - no paint to prevent glow clipping */
-  contain: layout style; /* Don't use paint - it clips shadows/glow */
-  isolation: isolate; /* Create new stacking context */
-  will-change: transform; /* Hint browser about upcoming transforms */
-
-  /* Optimize compositing */
-  -webkit-transform-origin: center center;
-  transform-origin: center center;
-}
-
-/* Smooth exit transition - longer duration when mouse leaves */
-.tilt-container:not(:hover) {
-  /* Smooth exit for glow only - transform handled by JavaScript */
-  transition: box-shadow 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
-  will-change: auto;
-}
-
-.tilt-container:hover {
-  /* Hint browser about upcoming transform changes */
-  will-change: transform;
-  /* Orange glow only - no dark shadows, intensified by 50% */
-  box-shadow: 0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.375));
-  /* Smooth transition for glow only - transform handled by JavaScript */
-  transition: box-shadow 200ms cubic-bezier(0.2, 0, 0.2, 1);
-}
-
-/* Glow container for filter-based effects - Cross-browser compatible */
-.glow-container {
-  position: relative;
-  /* Always show base glow - smooth transitions, intensified by 50% */
-  -webkit-filter: drop-shadow(0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.225)));
-  filter: drop-shadow(0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.225)));
-  -webkit-transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  will-change: filter;
-
-  /* Performance optimizations */
-  contain: layout style; /* Don't use paint - it clips shadows */
-  isolation: isolate; /* Create new stacking context */
-
-  /* Optimize compositing - cross-browser */
-  -webkit-transform: translateZ(0); /* Force GPU layer */
-  transform: translateZ(0); /* Force GPU layer */
-}
-
-.glow-container:hover {
-  will-change: filter;
-  /* Faster enter transition - cross-browser */
-  -webkit-transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  transition: filter 200ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.glow-container:not(:hover) {
-  will-change: auto;
-  /* Smooth exit transition - longer duration for smooth completion - cross-browser */
-  -webkit-transition: filter 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  transition: filter 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* Card reflection overlay */
-.card-reflection {
-  position: absolute;
-  inset: 0;
-  background: transparent;
-  opacity: var(--reflection-opacity, 0.08);
-  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  pointer-events: none;
-  border-radius: inherit;
-
-  /* Optimize as overlay */
-  will-change: opacity;
-  backface-visibility: hidden;
-}
-
-/* Smooth exit transition for reflection */
-.tilt-container:not(:hover) .card-reflection {
-  transition: opacity 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-}
-
-/* Wrapper for nested 3D transforms */
-.tilt-wrapper {
-  transform-style: preserve-3d;
-  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  backface-visibility: hidden;
-
-  /* Optimize transforms */
-  contain: layout style;
-}
-
-/* Content inside tilt effect */
-.tilt-content {
-  transform-style: preserve-3d;
-  backface-visibility: hidden;
-}
-
-/* Glare/highlight effect that follows mouse */
-.tilt-glare {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  border-radius: inherit;
-  background: transparent;
-  opacity: var(--glare-opacity, 0);
-  transition: opacity var(--glow-duration) var(--ease-out-smooth);
-
-  /* Optimize as overlay */
-  will-change: opacity;
-  backface-visibility: hidden;
-}
-
-/* ===================================================================
-   MOBILE OPTIMIZATIONS
-   Reduce tilt intensity on smaller screens for better performance
-   =================================================================== */
-
-@media (max-width: 768px) {
-  .tilt-container {
-    /* Reduce perspective for subtler effect on mobile, but keep doubled tilt */
-    -webkit-transform: perspective(800px) rotateX(calc(var(--tilt-x, 0deg) * 0.7))
-      rotateY(calc(var(--tilt-y, 0deg) * 0.7)) scale(var(--tilt-scale, 1)) translateZ(0);
-    transform: perspective(800px) rotateX(calc(var(--tilt-x, 0deg) * 0.7))
-      rotateY(calc(var(--tilt-y, 0deg) * 0.7)) scale(var(--tilt-scale, 1)) translateZ(0);
-  }
-
-  .tilt-container:hover {
-    /* Orange glow only - no dark shadows, intensified by 50% */
-    box-shadow: 0 0 var(--glow-blur) var(--glow-color, rgba(255, 121, 0, 0.375));
-  }
-}
-
-/* ===================================================================
-   FULLSCREEN MODE - DISABLE TILT
-   Tilt effects disabled in fullscreen for better usability
-   =================================================================== */
-
-.ai-card-surface--fullscreen {
-  .tilt-container {
-    /* Reset all tilt transforms in fullscreen - cross-browser compatible */
-    -webkit-transform: perspective(1000px) translateZ(0) !important;
-    transform: perspective(1000px) translateZ(0) !important;
-    box-shadow: none !important;
-    will-change: auto !important;
-  }
-
-  .glow-container {
-    -webkit-filter: none !important;
-    filter: none !important;
-    will-change: auto !important;
-  }
-
-  .card-reflection,
-  .tilt-glare {
-    opacity: 0 !important;
-    display: none; /* Completely remove from rendering */
-  }
-}
-
-/* ===================================================================
-   TILT DISABLED STATE
-   When tilt is explicitly disabled via class
-   =================================================================== */
-
-.tilt-disabled {
-  -webkit-transform: perspective(1000px) translateZ(0) !important;
-  transform: perspective(1000px) translateZ(0) !important;
-  box-shadow: none !important;
-  will-change: auto !important;
-}
-
-.tilt-disabled .glow-container {
-  -webkit-filter: none !important;
-  filter: none !important;
-  will-change: auto !important;
-}
-
-/* ===================================================================
-   REDUCED MOTION SUPPORT
-   Disable tilt effects for accessibility
-   =================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  .tilt-container,
-  .tilt-wrapper {
-    -webkit-transform: none !important;
-    transform: none !important;
-    -webkit-transition: none !important;
-    transition: none !important;
-  }
-
-  .tilt-container:hover {
-    box-shadow: none !important;
-  }
-
-  .glow-container {
-    -webkit-filter: none !important;
-    filter: none !important;
-    -webkit-transition: none !important;
-    transition: none !important;
-  }
-
-  .card-reflection,
-  .tilt-glare {
-    opacity: 0 !important;
-    transition: none !important;
-  }
-
-  /* Remove will-change hints */
-  .tilt-container,
-  .glow-container,
-  .card-reflection,
-  .tilt-glare {
-    will-change: auto !important;
-  }
-}