/* The caption, arriving: one breath of light behind it, the platform line settling, the title typed with a green caret
   walking ahead of it, the maker breathing in, the provenance line reading itself out. Then still. The times are set
   by the module from the title's length, so a short title makes a quick arrival and a long one an unhurried one.
   RGB is light here, never a surface: the breath is a blurred glow, screened, gone in a second and a half. */

#rot .rc-caption { position: relative; isolation: isolate; }

/* held dark for the beat before the title's final words are known, so the raw caption is never seen */
#rot .rc-caption.tvc-arriving .rc-eyebrow,
#rot .rc-caption.tvc-arriving .rc-piece-heading h3,
#rot .rc-caption.tvc-arriving .tv-credit,
#rot .rc-caption.tvc-arriving .rc-world,
#rot .rc-caption.tvc-arriving .rc-byline > *,
#rot .rc-caption.tvc-arriving .pv-rail > * { opacity: 0; }

/* the breath: a soft light in the three colours swells behind the caption and goes */
#rot .rc-caption::before {
  content: ''; position: absolute; z-index: -1; left: 0; top: -10px;
  width: min(100%, 760px); height: 150px; border-radius: 50%;
  background: conic-gradient(from 210deg at 40% 50%, var(--r, #F04E4E), var(--g, #2BB673), var(--b, #2E44E6), var(--r, #F04E4E));
  filter: blur(42px) saturate(1.1); mix-blend-mode: screen;
  opacity: 0; pointer-events: none; transform-origin: 30% 50%;
}
#rot .rc-caption.tvc-go::before { animation: tvc-breath 1500ms ease-in-out both; }
@keyframes tvc-breath {
  0% { opacity: 0; transform: scale(.82, .6); }
  36% { opacity: .2; }
  68% { opacity: .09; transform: scale(1.02, .96); }
  100% { opacity: 0; transform: scale(1.1, 1.04); }
}

/* the platform line settles in, its letters drawing together */
#rot .rc-caption.tvc-go .rc-eyebrow { animation: tvc-settle 520ms var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both; }
@keyframes tvc-settle { 0% { opacity: 0; letter-spacing: .34em; filter: blur(2px); } 100% { opacity: 1; filter: none; } }

/* the title: each letter lands with a flash of light that cools to bone */
#rot .rc-caption .tvc-ch { position: relative; }
#rot .rc-caption.tvc-go .tvc-ch {
  animation: tvc-char 300ms ease-out both;
  animation-delay: calc(var(--tvc-start, 90ms) + var(--i, 0) * var(--tvc-step, 30ms));
}
@keyframes tvc-char {
  0% { opacity: 0; text-shadow: 0 0 16px rgba(255, 250, 248, .95), 0 0 3px #fff; }
  16% { opacity: 1; }
  100% { opacity: 1; text-shadow: 0 0 0 transparent; }
}
/* the caret walks one letter ahead of the words, green like anything new, and on the last letter blinks twice and goes */
#rot .rc-caption .tvc-ch::after {
  content: ''; position: absolute; left: 100%; top: .16em; bottom: .12em; width: 2px; margin-left: 2px;
  background: var(--g, #2BB673); box-shadow: 0 0 8px var(--g, #2BB673); border-radius: 1px;
  opacity: 0; pointer-events: none;
}
#rot .rc-caption.tvc-go .tvc-ch::after {
  animation: tvc-caret var(--tvc-step, 30ms) steps(1, end) 1;
  animation-delay: calc(var(--tvc-start, 90ms) + var(--i, 0) * var(--tvc-step, 30ms));
}
#rot .rc-caption.tvc-go .tvc-ch.tvc-last::after {
  animation: tvc-caret-tail 760ms linear 1 forwards;
  animation-delay: calc(var(--tvc-start, 90ms) + var(--i, 0) * var(--tvc-step, 30ms));
}
@keyframes tvc-caret { 0%, 100% { opacity: 1; } }
@keyframes tvc-caret-tail { 0%, 26% { opacity: 1; } 27%, 48% { opacity: 0; } 49%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }

/* what the title reader found (the episode, the tools) arrives as the last letter lands */
#rot .rc-caption.tvc-go .tv-credit { animation: tvc-rise 440ms var(--os-settle, cubic-bezier(.22, .8, .22, 1)) var(--tvc-typed, 900ms) both; }
@keyframes tvc-rise { 0% { opacity: 0; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }

/* the maker breathes in: face, then name, then the follow button */
#rot .rc-caption.tvc-go .rc-byline > *,
#rot .rc-caption.tvc-go .rc-world {
  animation: tvc-breathe-in 640ms var(--os-settle, cubic-bezier(.22, .8, .22, 1)) both;
  animation-delay: calc(var(--tvc-byline, 400ms) + var(--tvc-b, 0) * 80ms);
}
#rot .rc-caption .rc-byline > *:nth-child(2) { --tvc-b: 1; }
#rot .rc-caption .rc-byline > *:nth-child(3) { --tvc-b: 2; }
#rot .rc-caption .rc-world { --tvc-b: 2; }
@keyframes tvc-breathe-in {
  0% { opacity: 0; transform: translateY(6px) scale(.97); filter: blur(3px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* and their face takes one breath of light as it arrives */
#rot .rc-caption.tvc-go .rc-byline .rc-avatar { animation: tvc-face 1100ms ease-out var(--tvc-byline, 400ms) both; }
@keyframes tvc-face {
  0% { box-shadow: 0 0 0 0 rgba(255, 250, 248, 0), 0 0 0 0 rgba(43, 182, 115, 0); }
  30% { box-shadow: 0 0 0 3px rgba(255, 250, 248, .22), 0 0 20px 2px rgba(43, 182, 115, .45); }
  100% { box-shadow: 0 0 0 8px rgba(255, 250, 248, 0), 0 0 24px 4px rgba(43, 182, 115, 0); }
}

/* the provenance line reads itself out, one fact at a time, each one lit as it is read */
#rot .rc-caption.tvc-go .pv-rail > * {
  animation: tvc-read 380ms ease-out both;
  animation-delay: calc(var(--tvc-rail, 600ms) + var(--r, 0) * var(--tvc-rail-step, 38ms));
}
@keyframes tvc-read { 0% { opacity: 0; filter: brightness(2.4); } 35% { opacity: 1; } 100% { opacity: 1; filter: none; } }
#rot .rc-caption.tvc-go .pv-rail > .pv-dot { animation-name: tvc-dot; animation-duration: 1000ms; }
@keyframes tvc-dot {
  0% { opacity: 0; transform: scale(.4); }
  25% { opacity: 1; transform: scale(1.8); filter: brightness(1.6); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* while the pointer is over the caption, a faint light follows the hand, and a fact under it brightens */
#rot .rc-caption::after {
  content: ''; position: absolute; z-index: -1; inset: 0; border-radius: 10px; pointer-events: none;
  background: radial-gradient(260px circle at var(--tvc-x, 50%) var(--tvc-y, 50%), rgba(255, 250, 248, .065), transparent 65%);
  opacity: 0; transition: opacity .35s ease;
}
#rot .rc-caption.tvc-lit::after { opacity: 1; }
#rot .rc-caption .pv-rail > span, #rot .rc-caption .pv-rail > a { transition: text-shadow .25s ease, filter .25s ease; }
#rot .rc-caption .pv-rail > span:hover, #rot .rc-caption .pv-rail > a:hover { text-shadow: 0 0 12px rgba(255, 250, 248, .4); filter: brightness(1.25); }

/* reduced motion, or a page that was not being looked at: the caption simply fades in */
#rot .rc-caption.tvc-fade { animation: tvc-fade .3s ease both; }
@keyframes tvc-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #rot .rc-caption::before, #rot .rc-caption::after { display: none; }
  #rot .rc-caption.tvc-go *, #rot .rc-caption.tvc-go *::after { animation: none !important; }
  #rot .rc-caption.tvc-arriving * { opacity: 1 !important; }
}