osi-cards-lib 1.5.32 → 1.5.34

package/styles/layout/_tilt.scss

@@ -0,0 +1,244 @@
+/* ===================================================================
+   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;
+  }
+}