/* Shared looping placeholder for reel content (stands in for the user's liked video).
   Pure CSS: radial-gradient blobs (no filter blur), emoji subject, classic meme caption, grain. */

.ra {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  background: linear-gradient(160deg, var(--c1), var(--c2) 55%, var(--c3));
  background: linear-gradient(160deg in oklab, var(--c1), var(--c2) 55%, var(--c3));
}

.ra-blob {
  position: absolute;
  width: 120cqmax;
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -60cqmax 0 0 -60cqmax;
  will-change: transform;
}
.ra-b1 { background: radial-gradient(closest-side, color-mix(in oklab, var(--c3) 85%, white), transparent); translate: -30% -35%; animation: ra-orbit-a 11s ease-in-out infinite alternate; }
.ra-b2 { background: radial-gradient(closest-side, color-mix(in oklab, var(--c1) 80%, var(--ink) 20%), transparent); translate: 35% 30%; animation: ra-orbit-b 13s ease-in-out infinite alternate; }
.ra-b3 { background: radial-gradient(closest-side, color-mix(in oklab, var(--c2) 70%, white), transparent 70%); width: 70cqmax; margin: -35cqmax 0 0 -35cqmax; animation: ra-orbit-c 9s ease-in-out infinite alternate; }

@keyframes ra-orbit-a { to { translate: 20% -5%; scale: 1.15; } }
@keyframes ra-orbit-b { to { translate: -25% 10%; scale: .9; } }
@keyframes ra-orbit-c { 0% { translate: -20% 25%; } 50% { translate: 25% -20%; scale: 1.2; } 100% { translate: 0% 30%; } }

.ra-subject {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 46cqmin;
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
}
.ra-emoji {
  display: block;
  font-size: 36cqmin;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 2cqmin 3cqmin rgb(0 0 0 / .25));
  will-change: transform;
}
.ra-shadow {
  position: absolute;
  bottom: 2%;
  left: 20%;
  width: 60%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / .28), transparent);
}

/* scenes */
.ra[data-scene="bounce"] .ra-emoji { animation: ra-bounce 1.1s cubic-bezier(.3,0,.5,1) infinite; transform-origin: 50% 100%; }
.ra[data-scene="bounce"] .ra-shadow { animation: ra-shadow 1.1s cubic-bezier(.3,0,.5,1) infinite; }
@keyframes ra-bounce {
  0%, 100% { transform: translateY(0) scale(1.08, .9); }
  15% { transform: translateY(-6%) scale(.95, 1.06); }
  50% { transform: translateY(-34%) scale(1, 1); }
  85% { transform: translateY(-6%) scale(.97, 1.04); }
}
@keyframes ra-shadow { 50% { scale: .55; opacity: .5; } }

.ra[data-scene="dance"] .ra-emoji { animation: ra-dance 1.6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes ra-dance {
  0%, 100% { transform: rotate(-12deg) translateX(-8%); }
  25% { transform: rotate(0deg) translateY(-8%) scale(1.04); }
  50% { transform: rotate(12deg) translateX(8%); }
  75% { transform: rotate(0deg) translateY(-8%) scale(1.04); }
}

.ra[data-scene="stomp"] .ra-emoji { animation: ra-stomp 1.4s steps(1, end) infinite; }
.ra[data-scene="stomp"] .ra-subject { animation: ra-shake 1.4s linear infinite; }
@keyframes ra-stomp {
  0% { transform: translateY(0) scaleX(-1); }
  25% { transform: translateY(-10%) scaleX(-1) rotate(-6deg); }
  50% { transform: translateY(0) scaleX(1); }
  75% { transform: translateY(-10%) scaleX(1) rotate(6deg); }
}
@keyframes ra-shake { 0%, 24%, 50%, 74%, 100% { translate: -50% -50%; } 25%, 75% { translate: -50% -48%; } 26%, 76% { translate: -51% -50%; } 27%, 77% { translate: -49% -50%; } }

.ra[data-scene="spin"] .ra-emoji { animation: ra-spin 3.2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes ra-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg) scale(1); } }

.ra[data-scene="kickflip"] .ra-emoji { animation: ra-flip 1.8s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes ra-flip {
  0%, 20% { transform: translateY(0) rotate(0); }
  45% { transform: translateY(-40%) rotate(200deg) scale(.9); }
  70% { transform: translateY(0) rotate(360deg); }
  78% { transform: translateY(0) scale(1.1, .9) rotate(360deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

.ra[data-scene="float"] .ra-emoji { animation: ra-float 3.6s ease-in-out infinite; }
@keyframes ra-float { 0%, 100% { transform: translate(-6%, 4%) rotate(-6deg); } 50% { transform: translate(6%, -8%) rotate(6deg); } }

.ra[data-scene="wobble"] .ra-emoji { animation: ra-wobble 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes ra-wobble { 0%, 100% { transform: skewX(0) rotate(0); } 20% { transform: skewX(-8deg) rotate(-4deg); } 40% { transform: skewX(6deg) rotate(3deg); } 60% { transform: skewX(-3deg); } 80% { transform: skewX(2deg); } }

/* classic top-text / bottom-text meme caption */
.ra-meme {
  position: absolute;
  left: 6%;
  right: 6%;
  margin: 0;
  text-align: center;
  color: #fff;
  font: 400 clamp(20px, 8.6cqmin, 44px)/1.02 Impact, "Haettenschweiler", "Oswald", "Arial Narrow Bold", "Arial Black", sans-serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  -webkit-text-stroke: .11em #000;
  paint-order: stroke fill;
  text-wrap: balance;
}
.ra-top { top: 15%; }
.ra-bottom { top: 64%; }

.ra-grain {
  position: absolute;
  inset: -50%;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: ra-grain 1s steps(5) infinite;
}
@keyframes ra-grain { 0% { translate: 0 0; } 20% { translate: -6% 4%; } 40% { translate: 5% -7%; } 60% { translate: -3% -2%; } 80% { translate: 7% 5%; } }

.ra.is-paused *, .is-paused .ra * { animation-play-state: paused !important; }

:root[data-motion="reduced"] .ra * { animation: none !important; }