osi-cards-lib 1.5.30 → 1.5.32

package/styles/components/_streaming-effects.scss

@@ -1,518 +0,0 @@
-/* ===================================================================
-   STREAMING EFFECTS
-   Magical visual effects for LLM streaming card generation
-
-   IMPORTANT: These styles ONLY target sections that are actively
-   animating (have the --animating class). Sections that have completed
-   their entrance animation (have --animated class) are explicitly
-   excluded to prevent continuous blinking.
-   =================================================================== */
-
-/* ===================================================================
-   CARD SURFACE STREAMING STATE
-   Base container styles when streaming is active
-   =================================================================== */
-
-.ai-card-surface.streaming-active {
-  position: relative;
-  border: 1px solid color-mix(in srgb, var(--color-brand) 40%, transparent);
-  box-shadow:
-    0 0 10px rgba(255, 121, 0, 0.2),
-    0 0 20px rgba(255, 121, 0, 0.1);
-}
-
-/* Traveling spark - small glowing dot that travels around the border */
-.ai-card-surface.streaming-active::before {
-  content: "";
-  position: absolute;
-  width: 3px;
-  height: 3px;
-  background: #ff9500;
-  border-radius: 50%;
-  box-shadow: 0 0 6px 1px rgba(255, 149, 0, 0.8);
-  animation: sparkTravel 3s linear infinite;
-  pointer-events: none;
-  z-index: 10;
-}
-
-/* ===================================================================
-   CONTENT STREAMING ANIMATIONS
-   Smooth transitions for text and values during streaming
-   =================================================================== */
-
-.ai-card-surface.streaming-active .field-value,
-.ai-card-surface.streaming-active .item-title,
-.ai-card-surface.streaming-active .item-description,
-.ai-card-surface.streaming-active .section-title,
-.ai-card-surface.streaming-active .section-description,
-.ai-card-surface.streaming-active [class*="value"],
-.ai-card-surface.streaming-active [class*="label"] {
-  transition: all 0.2s ease-out;
-}
-
-/* Typing cursor effect - blinking cursor at end of streaming text */
-.ai-card-surface.streaming-active [class*="value"]:last-child::after,
-.ai-card-surface.streaming-active .field-value:last-child::after {
-  content: "▋";
-  display: inline-block;
-  color: var(--color-brand, #ff7900);
-  animation: cursorBlink 0.8s step-end infinite;
-  margin-left: 2px;
-  font-weight: normal;
-}
-
-/* ===================================================================
-   STABILITY RULES - CRITICAL
-   Ensure sections that have completed animation stay stable
-   =================================================================== */
-
-/* STOP all animations on non-animating masonry items */
-.ai-card-surface.streaming-active .masonry-item:not(.masonry-item--animating) {
-  animation: none !important;
-}
-
-.ai-card-surface.streaming-active .masonry-item:not(.masonry-item--animating)::after {
-  animation: none !important;
-  opacity: 0 !important;
-}
-
-/* Explicitly stop animations on animated (completed) items */
-.ai-card-surface.streaming-active .masonry-item--animated,
-.ai-card-surface.streaming-active .masonry-item--animated *,
-.ai-card-surface.streaming-active .masonry-item--animated::before,
-.ai-card-surface.streaming-active .masonry-item--animated::after,
-.ai-card-surface.streaming-active .masonry-item[data-animated="true"],
-.ai-card-surface.streaming-active .masonry-item[data-animated="true"] * {
-  animation: none !important;
-  opacity: 1 !important;
-  transform: none !important;
-  filter: none !important;
-}
-
-/* Remove pseudo-elements on completed sections */
-.ai-card-surface.streaming-active .masonry-item--animated::after,
-.ai-card-surface.streaming-active .masonry-item[data-animated="true"]::after {
-  display: none !important;
-}
-
-/* ===================================================================
-   SECTION CARD STREAMING EFFECTS
-   Glow effects ONLY on ANIMATING section cards - ONE-SHOT only
-   =================================================================== */
-
-/* Only animating sections get the glow effect - ONE iteration, not infinite */
-.ai-card-surface.streaming-active .masonry-item--animating .section-card,
-.ai-card-surface.streaming-active .masonry-item--animating [class*="section-"] > div {
-  border-color: rgba(255, 121, 0, 0.3) !important;
-  box-shadow: 0 0 15px rgba(255, 121, 0, 0.25);
-  animation: sectionGlowPulse 0.8s ease-out forwards;
-  animation-iteration-count: 1;
-}
-
-.ai-card-surface.streaming-active .masonry-item--animating .section-card:hover {
-  border-color: rgba(255, 121, 0, 0.6) !important;
-  box-shadow: 0 0 25px rgba(255, 121, 0, 0.4);
-}
-
-/* Inner glow flash - ONE-SHOT only, no infinite pulse */
-.ai-card-surface.streaming-active .masonry-item--animating .section-card {
-  animation: innerFlash 0.6s ease-out forwards;
-  animation-iteration-count: 1;
-}
-
-/* Subtle inner border glow - ONE-SHOT only */
-.ai-card-surface.streaming-active .masonry-item--animating .section-card::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 1px rgba(255, 121, 0, 0.15);
-  pointer-events: none;
-  animation: innerBorderPulse 0.8s ease-out forwards;
-  animation-iteration-count: 1;
-}
-
-/* Stop effects on completed sections */
-.ai-card-surface.streaming-active .masonry-item--animated .section-card,
-.ai-card-surface.streaming-active .masonry-item--animated [class*="section-"] > div,
-.ai-card-surface.streaming-active .masonry-item[data-animated="true"] .section-card {
-  animation: none !important;
-  box-shadow: none !important;
-  border-color: rgba(255, 121, 0, 0.15) !important;
-}
-
-.ai-card-surface.streaming-active .masonry-item--animated .section-card::before,
-.ai-card-surface.streaming-active .masonry-item[data-animated="true"] .section-card::before {
-  animation: none !important;
-  box-shadow: none !important;
-}
-
-/* ===================================================================
-   MASONRY ITEM STREAMING EFFECTS
-   Magical entrance animations ONLY for ANIMATING grid items
-   =================================================================== */
-
-/* Magical section entrance - ONLY for animating items */
-.ai-card-surface.streaming-active .masonry-item--animating {
-  animation: sectionMagicAppear 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
-  animation-iteration-count: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-/* Staggered entrance delays for cascade effect - ONLY animating items */
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(1) {
-  animation-delay: 0ms;
-}
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(2) {
-  animation-delay: 80ms;
-}
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(3) {
-  animation-delay: 160ms;
-}
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(4) {
-  animation-delay: 240ms;
-}
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(5) {
-  animation-delay: 320ms;
-}
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(6) {
-  animation-delay: 400ms;
-}
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(7) {
-  animation-delay: 480ms;
-}
-.ai-card-surface.streaming-active .masonry-item--animating:nth-child(8) {
-  animation-delay: 560ms;
-}
-
-/* Shimmer sweep effect - ONLY on animating sections */
-.ai-card-surface.streaming-active .masonry-item--animating::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    110deg,
-    transparent 30%,
-    rgba(255, 149, 0, 0.15) 50%,
-    transparent 70%
-  );
-  animation: shimmerSweep 0.8s ease-out forwards;
-  animation-iteration-count: 1;
-  pointer-events: none;
-  border-radius: inherit;
-}
-
-/* ===================================================================
-   FIELD AND ITEM STREAMING ANIMATIONS
-   Staggered entrance ONLY for elements inside ANIMATING sections
-   =================================================================== */
-
-.ai-card-surface.streaming-active
-  .masonry-item--animating
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ) {
-  opacity: 0;
-  transform: translateY(12px);
-  animation: fieldEnterBounce 0.45s ease forwards;
-  animation-iteration-count: 1;
-  will-change: opacity, transform;
-}
-
-/* Staggered animation delays - ONLY inside animating sections */
-.ai-card-surface.streaming-active
-  .masonry-item--animating
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ):nth-child(1) {
-  animation-delay: 0s;
-}
-
-.ai-card-surface.streaming-active
-  .masonry-item--animating
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ):nth-child(2) {
-  animation-delay: 0.05s;
-}
-
-.ai-card-surface.streaming-active
-  .masonry-item--animating
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ):nth-child(3) {
-  animation-delay: 0.1s;
-}
-
-.ai-card-surface.streaming-active
-  .masonry-item--animating
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ):nth-child(4) {
-  animation-delay: 0.15s;
-}
-
-.ai-card-surface.streaming-active
-  .masonry-item--animating
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ):nth-child(5) {
-  animation-delay: 0.2s;
-}
-
-.ai-card-surface.streaming-active
-  .masonry-item--animating
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ):nth-child(n + 6) {
-  animation-delay: 0.24s;
-}
-
-/* Ensure animated section content is stable */
-.ai-card-surface.streaming-active
-  .masonry-item--animated
-  :where(
-    .info-row,
-    .section-card,
-    .list-card,
-    .event-timeline__item,
-    .product-card,
-    .solutions-card,
-    .contact-card,
-    .network-card__item,
-    .map-point,
-    .text-reference-entry,
-    .quote-card,
-    .overview-card__item
-  ) {
-  animation: none !important;
-  opacity: 1 !important;
-  transform: none !important;
-}
-
-/* ===================================================================
-   STREAMING CARD BORDER GLOW
-   Glowing border effect during streaming
-   =================================================================== */
-
-.streaming-border-glow {
-  position: relative;
-  border: 1px solid color-mix(in srgb, var(--color-brand, #ff7900) 40%, transparent);
-  box-shadow:
-    0 0 10px color-mix(in srgb, var(--color-brand, #ff7900) 20%, transparent),
-    0 0 20px color-mix(in srgb, var(--color-brand, #ff7900) 10%, transparent);
-
-  /* Traveling spark */
-  &::before {
-    content: "";
-    position: absolute;
-    width: 3px;
-    height: 3px;
-    background: var(--color-brand, #ff7900);
-    border-radius: 50%;
-    box-shadow: 0 0 6px 1px color-mix(in srgb, var(--color-brand, #ff7900) 80%, transparent);
-    animation: sparkTravel 3s linear infinite;
-    pointer-events: none;
-    z-index: 10;
-  }
-}
-
-/* ===================================================================
-   TYPING CURSOR EFFECT
-   Blinking cursor for streaming text
-   =================================================================== */
-
-.typing-cursor::after {
-  content: "▋";
-  display: inline-block;
-  color: var(--color-brand, #ff7900);
-  animation: cursorBlink 0.8s step-end infinite;
-  margin-left: 2px;
-  font-weight: normal;
-}
-
-/* ===================================================================
-   SECTION HIGHLIGHT EFFECT
-   For URL fragment scrolling and attention
-   =================================================================== */
-
-.section-highlight {
-  animation: sectionPulse 2s ease-out;
-  position: relative;
-}
-
-.section-highlight::after {
-  content: "";
-  position: absolute;
-  inset: -4px;
-  border: 2px solid color-mix(in srgb, var(--color-brand, #ff7900) 60%, transparent);
-  border-radius: var(--card-border-radius, 14px);
-  pointer-events: none;
-  animation: sectionBorderFade 2s ease-out forwards;
-}
-
-/* ===================================================================
-   NEW SECTION GLOW EFFECT
-   For newly added streaming sections
-   =================================================================== */
-
-.new-section-glow {
-  border-color: color-mix(in srgb, var(--color-brand, #ff7900) 40%, transparent);
-  box-shadow: 0 0 15px color-mix(in srgb, var(--color-brand, #ff7900) 25%, transparent);
-  animation: newSectionGlow 0.6s ease-out forwards;
-}
-
-/* ===================================================================
-   SHIMMER TEXT EFFECT
-   Gradient shimmer on text during generation
-   =================================================================== */
-
-.shimmer-text {
-  background: linear-gradient(
-    90deg,
-    var(--foreground, #ffffff) 0%,
-    var(--color-brand, #ff7900) 50%,
-    var(--foreground, #ffffff) 100%
-  );
-  background-size: 200% 100%;
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: textShimmer 2s ease-in-out infinite;
-}
-
-/* ===================================================================
-   WAVE PROGRESS INDICATOR
-   Sliding wave effect for progress indication
-   =================================================================== */
-
-.wave-progress {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(
-    90deg,
-    transparent 0%,
-    var(--color-brand, #ff7900) 25%,
-    var(--color-brand, #ff7900) 75%,
-    transparent 100%
-  );
-  background-size: 200% 100%;
-  animation: waveSlide 2s ease-in-out infinite;
-}
-
-/* ===================================================================
-   REDUCED MOTION SUPPORT
-   Respect user preferences for reduced motion
-   =================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-  .ai-card-surface.streaming-active,
-  .ai-card-surface.streaming-active::before,
-  .ai-card-surface.streaming-active::after,
-  .ai-card-surface.streaming-active *,
-  .streaming-border-glow,
-  .streaming-border-glow::before,
-  .typing-cursor::after,
-  .section-highlight,
-  .section-highlight::after,
-  .new-section-glow,
-  .shimmer-text,
-  .wave-progress {
-    animation: none !important;
-    transition: none !important;
-  }
-
-  /* Remove typing cursor */
-  .ai-card-surface.streaming-active [class*="value"]:last-child::after,
-  .ai-card-surface.streaming-active .field-value:last-child::after,
-  .typing-cursor::after {
-    content: none !important;
-  }
-
-  /* Restore text fill */
-  .shimmer-text {
-    background: none !important;
-    -webkit-text-fill-color: currentColor !important;
-  }
-}