/**
 * Performance CSS
 * Non-destructive optimizations for rendering and layout performance.
 * These rules help the browser skip layout/paint for off-screen content
 * and reduce Cumulative Layout Shift (CLS).
 */

/* ============================================================
   1. content-visibility: auto — Skip rendering of off-screen frames
   The browser will only render story frames when they're near the viewport.
   contain-intrinsic-size gives the browser an estimated size to prevent
   layout jumps when the frame enters the viewport.
   ============================================================ */
.story_frame {
  content-visibility: auto;
  contain-intrinsic-size: auto 100vh;
}

/* ============================================================
   2. Font rendering optimization
   The font-display: swap directive should be set in the actual
   @font-face declarations (e.g. in fonts/inter.css).
   Here we optimize text rendering for the page.
   ============================================================ */
body {
  text-rendering: optimizeSpeed;
}

/* ============================================================
   3. Reduce motion for users who prefer it
   Skipping animations also improves performance on low-end devices.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   4. Optimize will-change for animated elements
   Promote known animated elements to their own compositing layer
   to avoid expensive repaints during story frame transitions.
   ============================================================ */
.stb-animations-active .story_element {
  will-change: transform, opacity;
}

/* ============================================================
   5. Contain layout for modal/popup overlays
   Prevents their layout calculations from affecting the main page.
   ============================================================ */
.stb_modal,
.rsf_video_modal {
  contain: layout style;
}