/* Shared swipe-feed frame for Smartrot, Salesrot and My Wunderkind. One source: apps/rot-shared/, served at /rot/.
   Markup: each card is .rf-slide > .rf-stage > (video + the app's own overlays).
   Near 9:16 (most phones in a browser) the stage fills the card, at most ~8% of the video cropped.
   Any other shape (iPhone home-screen app, Fold cover + inner, tablets, desktop) shows the whole 9:16 stage
   as a rimmed card on --rf-bg, so nothing is cut off and the app's overlays stay on the video.
   Per-app look via custom properties: --rf-bg, --rf-rim, --rf-shadow, --rf-radius. */
.rf-slide { container-type: size; background: var(--rf-bg, #000); }
.rf-stage {
  --rf-g: max(14px, 2.5cqh);
  position: absolute; inset: 0; margin: auto; overflow: hidden;
  width: min(100cqw - 2 * var(--rf-g), (100cqh - 2 * var(--rf-g)) * 9 / 16);
  height: min(100cqh - 2 * var(--rf-g), (100cqw - 2 * var(--rf-g)) * 16 / 9);
  border-radius: var(--rf-radius, 28px);
  box-shadow: 0 0 0 7px var(--rf-rim, #fff), 0 14px 0 7px var(--rf-shadow, rgba(0, 0, 0, .35));
  transform: translateZ(0); /* clips video corners in Safari */
}
@container (min-aspect-ratio: 13/25) and (max-aspect-ratio: 61/100) {
  .rf-stage { width: 100cqw; height: 100cqh; border-radius: 0; box-shadow: none; }
}

/* Near the end of a video the next card peeks up from the bottom once: up, settle, a smaller bounce.
   The rising card gets a rounded, shadowed top edge so the seam shows even when both videos are white. */
.rf-slide.rf-peek { animation: rf-peek 1.2s ease-in-out; }
.rf-slide.rf-peek + .rf-slide.rf-peek { border-radius: 28px 28px 0 0; box-shadow: 0 -14px 30px rgba(0, 0, 0, .45); z-index: 1; }
@keyframes rf-peek { 0%, 100% { transform: none; } 30% { transform: translateY(-90px); } 55% { transform: translateY(-12px); } 75% { transform: translateY(-40px); } }
@media (prefers-reduced-motion: reduce) { .rf-slide.rf-peek { animation: none; } }

/* Adult immersive mode; children retain the shared rimmed frame and their layout. */
[data-experience="immersive"] .slide>.rf-stage{inset:0;width:100%;height:100%;margin:0;border-radius:0;box-shadow:none}