/*
 * Roca Professionals, public site: animated scenes of Events (ticket), Rules (board) and FAQ (chat).
 * Templates: src/Site/templates/scene-ticket.php, scene-board.php, scene-chat.php. The frame of every scene
 * is in rp-motion.css (paused off screen). Base styles hold the last, finished frame: with reduced motion
 * the animations end at once and the scene stays readable. Cycle lengths are in seconds on purpose.
 */

/* ---- Ticket (Events): a 3D invitation that floats and turns over; event types circle it. ---- */

.rp-scene--ticket {
  container-type: inline-size;
  aspect-ratio: 4 / 3;
}

.rp-scene--ticket .rp-ticket__ground {
  position: absolute;
  inset: 0;
  height: 100%;
}

.rp-scene--ticket .rp-ticket__shadow {
  fill: var(--rp-line);
  transform-box: fill-box;
  transform-origin: center;
}

/* One 3D context for the ticket and the orbit, so the badges pass behind the ticket. */
.rp-scene--ticket .rp-ticket__space {
  position: absolute;
  inset: 0;
  perspective: 900px;
  perspective: 280cqi;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
}

.rp-scene--ticket .rp-ticket__float {
  position: absolute;
  left: 50%;
  top: 46.667%;
  width: 62.5cqi;
  height: 35cqi;
  margin: -17.5cqi 0 0 -31.25cqi;
  transform-style: preserve-3d;
}

.rp-scene--ticket .rp-ticket__card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-10deg);
}

.rp-scene--ticket .rp-ticket__face {
  position: absolute;
  inset: -3.571% -2%; /* 4 units of clear margin around the outline, smooth edges when turned */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rp-scene--ticket .rp-ticket__face--back { transform: rotateY(180deg); }
.rp-scene--ticket .rp-ticket__face svg { height: 100%; }

.rp-scene--ticket .rp-ticket__paper { fill: var(--rp-surface); stroke: var(--rp-ink); stroke-width: 1.5; stroke-linejoin: round; }
.rp-scene--ticket .rp-ticket__perf { fill: none; stroke: var(--rp-line-quiet); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 0 5; }
.rp-scene--ticket .rp-ticket__rule { fill: none; stroke: var(--rp-line); stroke-width: 1; }
.rp-scene--ticket .rp-ticket__pin { fill: none; stroke: var(--rp-muted); stroke-width: 3.3; stroke-linecap: round; stroke-linejoin: round; }
.rp-scene--ticket .rp-ticket__qr { fill: var(--rp-ink); }
.rp-scene--ticket text { font-family: var(--rp-font); fill: var(--rp-ink); }
.rp-scene--ticket .rp-ticket__rubric { font-size: 9px; font-weight: 500; letter-spacing: var(--rp-ls-caps); fill: var(--rp-accent); }
.rp-scene--ticket .rp-ticket__title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.rp-scene--ticket .rp-ticket__date { font-family: var(--rp-font-mono); font-size: 10px; }
.rp-scene--ticket .rp-ticket__place { font-size: 10px; fill: var(--rp-muted); }
.rp-scene--ticket .rp-ticket__stub-label { font-size: 9px; font-weight: 500; letter-spacing: var(--rp-ls-caps); fill: var(--rp-muted); text-anchor: middle; }
.rp-scene--ticket .rp-ticket__seat { font-family: var(--rp-font-mono); font-size: 24px; font-weight: 500; text-anchor: middle; }
.rp-scene--ticket .rp-ticket__stub-meta { font-family: var(--rp-font-mono); font-size: 9px; fill: var(--rp-muted); text-anchor: middle; }
.rp-scene--ticket .rp-ticket__caption { font-size: 10px; font-weight: 500; text-anchor: middle; }
.rp-scene--ticket .rp-ticket__code { font-family: var(--rp-font-mono); font-size: 9px; fill: var(--rp-muted); text-anchor: middle; }

/* Orbit: tilted ring through the centre of the ticket; each badge turns back to face the viewer. */
.rp-scene--ticket .rp-ticket__orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 46.667%;
  transform: rotateX(-28deg);
}

.rp-scene--ticket .rp-ticket__badge {
  position: absolute;
  left: 50%;
  top: 46.667%;
  width: 10cqi;
  height: 10cqi;
  margin: -5cqi 0 0 -5cqi;
}

.rp-scene--ticket .rp-ticket__badge svg { height: 100%; }
.rp-scene--ticket .rp-ticket__badge-ring { fill: var(--rp-surface); stroke: var(--rp-line-strong); stroke-width: 1.5; }
.rp-scene--ticket .rp-ticket__badge-icon { fill: none; stroke: var(--rp-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.rp-scene--ticket .rp-ticket__badge:nth-child(1) { transform: rotateY(20deg) translateZ(42cqi) rotateY(-20deg) rotateX(28deg); }
.rp-scene--ticket .rp-ticket__badge:nth-child(2) { transform: rotateY(110deg) translateZ(42cqi) rotateY(-110deg) rotateX(28deg); }
.rp-scene--ticket .rp-ticket__badge:nth-child(3) { transform: rotateY(200deg) translateZ(42cqi) rotateY(-200deg) rotateX(28deg); }
.rp-scene--ticket .rp-ticket__badge:nth-child(4) { transform: rotateY(290deg) translateZ(42cqi) rotateY(-290deg) rotateX(28deg); }

/* Motion: flip 8 s, float 4 s, orbit 16 s. */
.rp-scene--ticket .rp-ticket__card { animation: rp-ticket-flip 8s infinite; }
.rp-scene--ticket .rp-ticket__float { animation: rp-ticket-float 4s ease-in-out infinite; }
.rp-scene--ticket .rp-ticket__shadow { animation: rp-ticket-shadow 4s ease-in-out infinite; }
.rp-scene--ticket .rp-ticket__badge { animation: rp-ticket-orbit 16s linear infinite; }
.rp-scene--ticket .rp-ticket__badge:nth-child(2) { animation-delay: -4s; }
.rp-scene--ticket .rp-ticket__badge:nth-child(3) { animation-delay: -8s; }
.rp-scene--ticket .rp-ticket__badge:nth-child(4) { animation-delay: -12s; }

@keyframes rp-ticket-flip {
  0% { transform: rotateX(8deg) rotateY(-10deg); animation-timing-function: ease-in-out; }
  32% { transform: rotateX(8deg) rotateY(10deg); animation-timing-function: ease-in-out; }
  50% { transform: rotateX(8deg) rotateY(170deg); animation-timing-function: ease-in-out; }
  82% { transform: rotateX(8deg) rotateY(190deg); animation-timing-function: ease-in-out; }
  100% { transform: rotateX(8deg) rotateY(350deg); }
}

@keyframes rp-ticket-float {
  0%, 100% { transform: none; }
  50% { transform: translateY(-2.5cqi); }
}

@keyframes rp-ticket-shadow {
  0%, 100% { transform: none; opacity: 1; }
  50% { transform: scaleX(.86); opacity: .6; }
}

@keyframes rp-ticket-orbit {
  0% { transform: rotateY(0deg) translateZ(42cqi) rotateY(0deg) rotateX(28deg); opacity: 1; }
  50% { opacity: .55; }
  100% { transform: rotateY(360deg) translateZ(42cqi) rotateY(-360deg) rotateX(28deg); opacity: 1; }
}

/* ---- Board (Rules): die, drop token, gift. Base styles are the last frame: drop on Prize, gift open. ---- */

.rp-scene--board {
  container-type: inline-size;
  aspect-ratio: 4 / 3;
}

.rp-scene--board > svg {
  position: absolute;
  inset: 0;
  height: 100%;
}

.rp-scene--board .rp-board__panel { fill: var(--rp-surface); stroke: var(--rp-line-strong); stroke-width: 1.5; }
.rp-scene--board .rp-board__grid { fill: none; stroke: var(--rp-line); stroke-width: 1; }
.rp-scene--board .rp-board__track { fill: none; stroke: var(--rp-line-strong); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0 6; }
.rp-scene--board .rp-board__step { fill: var(--rp-surface); stroke: var(--rp-muted); stroke-width: 1.5; }
.rp-scene--board .rp-board__spot { fill: var(--rp-surface); stroke: var(--rp-ink); stroke-width: 1.5; }
.rp-scene--board .rp-board__seen { fill: var(--rp-accent); }
.rp-scene--board .rp-board__ring { fill: none; stroke: var(--rp-accent); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rp-scene--board .rp-board__label { font-family: var(--rp-font); font-size: 9.5px; fill: var(--rp-muted); }
.rp-scene--board .rp-board__die-shadow { fill: var(--rp-line); transform-box: fill-box; transform-origin: center; }

.rp-scene--board .rp-board__box { fill: var(--rp-surface); stroke: var(--rp-ink); stroke-width: 1.5; stroke-linejoin: round; }
.rp-scene--board .rp-board__ribbon,
.rp-scene--board .rp-board__bow { fill: none; stroke: var(--rp-ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rp-scene--board .rp-board__lid { transform-box: fill-box; transform-origin: 0% 100%; transform: translate(-3px, -11px) rotate(-16deg); }
.rp-scene--board .rp-board__ray { fill: none; stroke: var(--rp-ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; }

.rp-scene--board .rp-board__token { transform: translate(250px, 98px); }
.rp-scene--board .rp-board__drop { fill: var(--rp-accent); }
.rp-scene--board .rp-board__shine { fill: none; stroke: var(--rp-surface); stroke-width: 1.5; stroke-linecap: round; }

/* The die: an HTML cube over the board, 44 of 320 units wide. */
.rp-scene--board .rp-board__die {
  position: absolute;
  left: 13.75%;
  top: 18.33%;
  width: 13.75cqi;
  height: 13.75cqi;
  perspective: 600px;
  perspective: 160cqi;
}

.rp-scene--board .rp-board__toss,
.rp-scene--board .rp-board__cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.rp-scene--board .rp-board__cube { transform: rotateX(-24deg) rotateY(-28deg) rotateX(0deg) rotateY(90deg); }

.rp-scene--board .rp-board__face {
  position: absolute;
  inset: -6.82%; /* 3 of 44 units of clear margin: the 3D layer edge stays off the outline, no jaggies */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rp-scene--board .rp-board__face svg { height: 100%; }
.rp-scene--board .rp-board__face--front { transform: translateZ(6.88cqi); }
.rp-scene--board .rp-board__face--back { transform: rotateY(180deg) translateZ(6.88cqi); }
.rp-scene--board .rp-board__face--right { transform: rotateY(90deg) translateZ(6.88cqi); }
.rp-scene--board .rp-board__face--left { transform: rotateY(-90deg) translateZ(6.88cqi); }
.rp-scene--board .rp-board__face--top { transform: rotateX(90deg) translateZ(6.88cqi); }
.rp-scene--board .rp-board__face--bottom { transform: rotateX(-90deg) translateZ(6.88cqi); }
.rp-scene--board .rp-board__facet { fill: var(--rp-surface); stroke: var(--rp-ink); stroke-width: 1.5; }
.rp-scene--board .rp-board__pip { fill: var(--rp-ink); }
.rp-scene--board .rp-board__pip--one { fill: var(--rp-accent); }

/* One 9 s cycle: hold the prize, reset, roll 3, hop, roll 2, hop, roll 4, hop, open the gift. */
.rp-scene--board .rp-board__cube { animation: rp-board-cube 9s linear infinite; }
.rp-scene--board .rp-board__toss { animation: rp-board-toss 9s linear infinite; }
.rp-scene--board .rp-board__die-shadow { animation: rp-board-shadow 9s linear infinite; }
.rp-scene--board .rp-board__token { animation: rp-board-token 9s linear infinite; }
.rp-scene--board .rp-board__hop { animation: rp-board-hop 9s linear infinite; }
.rp-scene--board .rp-board__drop,
.rp-scene--board .rp-board__shine { animation: rp-board-drop 9s linear infinite; }
.rp-scene--board .rp-board__lid { animation: rp-board-lid 9s linear infinite; }
.rp-scene--board .rp-board__ray { animation: rp-board-ray 9s linear infinite; }

@keyframes rp-board-cube {
  0% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(0deg) rotateY(90deg); }
  12.78% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(0deg) rotateY(90deg); animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
  20.07% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(720deg) rotateY(-90deg); }
  35% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(720deg) rotateY(-90deg); animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
  42.29% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(1350deg) rotateY(0deg); }
  53.89% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(1350deg) rotateY(0deg); animation-timing-function: cubic-bezier(.3, .1, .3, 1); }
  61.18% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(1800deg) rotateY(450deg); }
  100% { transform: rotateX(-24deg) rotateY(-28deg) rotateX(1800deg) rotateY(450deg); }
}

@keyframes rp-board-toss {
  0% { transform: none; }
  12.78% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  15.62% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  19% { transform: none; animation-timing-function: ease-out; }
  20.24% { transform: translateY(-3px); animation-timing-function: ease-in; }
  21.67% { transform: none; }
  35% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  37.84% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  41.22% { transform: none; animation-timing-function: ease-out; }
  42.47% { transform: translateY(-3px); animation-timing-function: ease-in; }
  43.89% { transform: none; }
  53.89% { transform: none; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  56.73% { transform: translateY(-18px); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  60.11% { transform: none; animation-timing-function: ease-out; }
  61.36% { transform: translateY(-3px); animation-timing-function: ease-in; }
  62.78% { transform: none; }
  100% { transform: none; }
}

@keyframes rp-board-shadow {
  0% { transform: none; opacity: 1; }
  12.78% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  15.62% { transform: scale(.6); opacity: .5; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  19% { transform: none; opacity: 1; }
  35% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  37.84% { transform: scale(.6); opacity: .5; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  41.22% { transform: none; opacity: 1; }
  53.89% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  56.73% { transform: scale(.6); opacity: .5; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  60.11% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes rp-board-token {
  0%, 8.89% { transform: translate(250px, 98px); }
  9% { transform: translate(40px, 192px); }
  22.78% { transform: translate(40px, 192px); animation-timing-function: ease-in-out; }
  26.11% { transform: translate(72px, 200px); animation-timing-function: ease-in-out; }
  29.44% { transform: translate(106px, 198px); animation-timing-function: ease-in-out; }
  32.78% { transform: translate(134px, 180px); }
  45% { transform: translate(134px, 180px); animation-timing-function: ease-in-out; }
  48.33% { transform: translate(146px, 152px); animation-timing-function: ease-in-out; }
  51.67% { transform: translate(170px, 128px); }
  63.89% { transform: translate(170px, 128px); animation-timing-function: ease-in-out; }
  67.22% { transform: translate(200px, 140px); animation-timing-function: ease-in-out; }
  70.56% { transform: translate(230px, 150px); animation-timing-function: ease-in-out; }
  73.89% { transform: translate(254px, 130px); animation-timing-function: ease-in-out; }
  77.22% { transform: translate(250px, 98px); }
  100% { transform: translate(250px, 98px); }
}

@keyframes rp-board-hop {
  0% { transform: none; }
  8.89% { transform: translateY(-14px); animation-timing-function: ease-in; }
  12.22% { transform: none; }
  22.78% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  24.44% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  26.11% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  27.78% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  29.44% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  31.11% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  32.78% { transform: none; }
  45% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  46.67% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  48.33% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  50% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  51.67% { transform: none; }
  63.89% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  65.56% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  67.22% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  68.89% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  70.56% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  72.22% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  73.89% { transform: none; animation-timing-function: cubic-bezier(.3, .6, .5, 1); }
  75.56% { transform: translateY(-13px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
  77.22% { transform: none; }
  100% { transform: none; }
}

@keyframes rp-board-drop {
  0%, 5% { opacity: 1; }
  8.89% { opacity: 0; }
  12.22%, 100% { opacity: 1; }
}

@keyframes rp-board-lid {
  0%, 5% { transform: translate(-3px, -11px) rotate(-16deg); animation-timing-function: ease-in-out; }
  8.89%, 77.78% { transform: none; animation-timing-function: var(--rp-ease); }
  82.22%, 100% { transform: translate(-3px, -11px) rotate(-16deg); }
}

@keyframes rp-board-ray {
  0%, 5% { opacity: 1; stroke-dashoffset: 0; transform: none; }
  7.78% { opacity: 0; stroke-dashoffset: 0; transform: none; }
  78.89% { opacity: 0; stroke-dashoffset: 1; transform: translateY(6px); animation-timing-function: var(--rp-ease); }
  79.44% { opacity: 1; }
  83.89%, 100% { opacity: 1; stroke-dashoffset: 0; transform: none; }
}

@keyframes rp-board-seen-1 {
  0%, 5% { opacity: 1; }
  8.89%, 22.78% { opacity: 0; }
  24.44%, 100% { opacity: 1; }
}
@keyframes rp-board-ring-1 {
  0%, 12.22% { transform: none; opacity: 0; }
  12.44% { transform: none; opacity: .9; }
  18.89%, 100% { transform: scale(2.2); opacity: 0; }
}
.rp-scene--board .rp-board__stop--1 .rp-board__seen { animation: rp-board-seen-1 9s linear infinite; }
.rp-scene--board .rp-board__stop--1 .rp-board__ring { animation: rp-board-ring-1 9s var(--rp-ease) infinite; }

@keyframes rp-board-seen-2 {
  0%, 5% { opacity: 1; }
  8.89%, 32.78% { opacity: 0; }
  34.44%, 100% { opacity: 1; }
}
@keyframes rp-board-ring-2 {
  0%, 32.78% { transform: none; opacity: 0; }
  33% { transform: none; opacity: .9; }
  39.44%, 100% { transform: scale(2.2); opacity: 0; }
}
.rp-scene--board .rp-board__stop--2 .rp-board__seen { animation: rp-board-seen-2 9s linear infinite; }
.rp-scene--board .rp-board__stop--2 .rp-board__ring { animation: rp-board-ring-2 9s var(--rp-ease) infinite; }

@keyframes rp-board-seen-3 {
  0%, 5% { opacity: 1; }
  8.89%, 51.67% { opacity: 0; }
  53.33%, 100% { opacity: 1; }
}
@keyframes rp-board-ring-3 {
  0%, 51.67% { transform: none; opacity: 0; }
  51.89% { transform: none; opacity: .9; }
  58.33%, 100% { transform: scale(2.2); opacity: 0; }
}
.rp-scene--board .rp-board__stop--3 .rp-board__seen { animation: rp-board-seen-3 9s linear infinite; }
.rp-scene--board .rp-board__stop--3 .rp-board__ring { animation: rp-board-ring-3 9s var(--rp-ease) infinite; }

@keyframes rp-board-seen-4 {
  0%, 5% { opacity: 1; }
  8.89%, 77.22% { opacity: 0; }
  78.89%, 100% { opacity: 1; }
}
@keyframes rp-board-ring-4 {
  0%, 77.22% { transform: none; opacity: 0; }
  77.44% { transform: none; opacity: .9; }
  83.89%, 100% { transform: scale(2.2); opacity: 0; }
}
.rp-scene--board .rp-board__stop--4 .rp-board__seen { animation: rp-board-seen-4 9s linear infinite; }
.rp-scene--board .rp-board__stop--4 .rp-board__ring { animation: rp-board-ring-4 9s var(--rp-ease) infinite; }

/* ---- Chat (FAQ): two questions and answers. Base styles are the last frame: both pairs on screen. ---- */

.rp-scene--chat {
  aspect-ratio: 4 / 3;
}

.rp-scene--chat > svg {
  position: absolute;
  inset: 0;
  height: 100%;
}

.rp-scene--chat .rp-chat__bubble--q { fill: var(--rp-surface); stroke: var(--rp-ink); stroke-width: 1.5; }
.rp-scene--chat .rp-chat__bubble--a { fill: var(--rp-ink); }
.rp-scene--chat .rp-chat__text { font-family: var(--rp-font); font-size: 12px; }
.rp-scene--chat .rp-chat__text--q { fill: var(--rp-ink); }
.rp-scene--chat .rp-chat__text--a { fill: var(--rp-text-inverse); }
.rp-scene--chat .rp-chat__dot { fill: var(--rp-text-inverse); }
.rp-scene--chat .rp-chat__msg--t1,
.rp-scene--chat .rp-chat__msg--t2 { opacity: 0; }
.rp-scene--chat .rp-chat__mark { fill: none; stroke: var(--rp-line-strong); stroke-width: 1.5; stroke-linecap: round; }
.rp-scene--chat .rp-chat__mark > path { vector-effect: non-scaling-stroke; }
.rp-scene--chat .rp-chat__mark-dot { fill: var(--rp-line-strong); stroke: none; }

/* The stack moves inside a wrapper placed at its final offset, so its keyframes are relative. */
.rp-scene--chat .rp-chat__feed { animation: rp-chat-feed 9s linear infinite; }
.rp-scene--chat .rp-chat__msg--q1 { animation: rp-chat-q1 9s linear infinite; }
.rp-scene--chat .rp-chat__msg--t1 { animation: rp-chat-t1 9s linear infinite; }
.rp-scene--chat .rp-chat__msg--a1 { animation: rp-chat-a1 9s linear infinite; }
.rp-scene--chat .rp-chat__msg--q2 { animation: rp-chat-q2 9s linear infinite; }
.rp-scene--chat .rp-chat__msg--t2 { animation: rp-chat-t2 9s linear infinite; }
.rp-scene--chat .rp-chat__msg--a2 { animation: rp-chat-a2 9s linear infinite; }
.rp-scene--chat .rp-chat__dot { animation: rp-chat-dot 1s ease-in-out infinite; }
.rp-scene--chat .rp-chat__dot:nth-of-type(2) { animation-delay: -.84s; }
.rp-scene--chat .rp-chat__dot:nth-of-type(3) { animation-delay: -.68s; }
.rp-scene--chat .rp-chat__mark { animation: rp-chat-mark 10s ease-in-out infinite; }
.rp-scene--chat .rp-chat__mark--2 { animation-duration: 12s; animation-delay: -4s; }
.rp-scene--chat .rp-chat__mark--3 { animation-duration: 11s; animation-delay: -7s; }
.rp-scene--chat .rp-chat__mark--4 { animation-duration: 13s; animation-delay: -2s; }

@keyframes rp-chat-feed {
  0%, 5.56% { transform: none; opacity: 1; }
  10% { transform: none; opacity: 0; }
  10.11%, 21.11% { transform: translateY(152px); opacity: 1; animation-timing-function: var(--rp-ease); }
  26.11%, 38.89% { transform: translateY(112px); animation-timing-function: var(--rp-ease); }
  43.89%, 50% { transform: translateY(96px); animation-timing-function: var(--rp-ease); }
  55%, 58.89% { transform: translateY(56px); animation-timing-function: var(--rp-ease); }
  63.89%, 76.67% { transform: translateY(16px); animation-timing-function: var(--rp-ease); }
  81.67%, 100% { transform: none; opacity: 1; }
}

@keyframes rp-chat-q1 {
  0%, 10% { opacity: 1; transform: none; }
  10.11%, 11.11% { opacity: 0; transform: translateY(12px); animation-timing-function: var(--rp-ease); }
  16.11%, 100% { opacity: 1; transform: none; }
}

@keyframes rp-chat-t1 {
  0%, 21.11% { opacity: 0; transform: translateY(12px); animation-timing-function: var(--rp-ease); }
  26.11%, 37.78% { opacity: 1; transform: none; }
  40%, 100% { opacity: 0; transform: none; }
}

@keyframes rp-chat-a1 {
  0%, 10% { opacity: 1; transform: none; }
  10.11%, 38.89% { opacity: 0; transform: translateY(12px); animation-timing-function: var(--rp-ease); }
  43.89%, 100% { opacity: 1; transform: none; }
}

@keyframes rp-chat-q2 {
  0%, 10% { opacity: 1; transform: none; }
  10.11%, 50% { opacity: 0; transform: translateY(12px); animation-timing-function: var(--rp-ease); }
  55%, 100% { opacity: 1; transform: none; }
}

@keyframes rp-chat-t2 {
  0%, 58.89% { opacity: 0; transform: translateY(12px); animation-timing-function: var(--rp-ease); }
  63.89%, 75.56% { opacity: 1; transform: none; }
  77.78%, 100% { opacity: 0; transform: none; }
}

@keyframes rp-chat-a2 {
  0%, 10% { opacity: 1; transform: none; }
  10.11%, 76.67% { opacity: 0; transform: translateY(12px); animation-timing-function: var(--rp-ease); }
  81.67%, 100% { opacity: 1; transform: none; }
}

@keyframes rp-chat-dot {
  0%, 60%, 100% { transform: none; opacity: .5; }
  30% { transform: translateY(-3px); opacity: 1; }
}

@keyframes rp-chat-mark {
  0% { transform: translateY(12px); opacity: 0; }
  35%, 65% { opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}