/*
 * reel-view.css (W23g-WEB): the look of one reel (reel-view.js), the app's
 * sizes and colours as the share player (site/scrollible.app/reel.css) draws
 * them. The reel's chrome is the app's "art" chrome, the same in Light and
 * Dark, so none of this follows the colour scheme.
 *
 * Everything that moves while the reel plays moves by transform: the plate's
 * pan, the verse's windows, the bar. Nothing here repaints per frame.
 */
.rv {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: #fff;
  contain: layout paint;
  -webkit-user-select: none;
  user-select: none;
}
.rv > * {
  position: absolute;
  left: 0;
  top: 0;
}
.rv-plate {
  overflow: hidden;
}
.rv-pic,
.rv-pic img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.rv-pic img {
  object-fit: cover;
}
.rv-bg {
  transform-origin: 50% 50%;
  will-change: transform;
}
/* a reel shows once its plate and object are both decoded, the two together:
   the object never fades or scales in */
.rv-wait > * {
  visibility: hidden;
}
.rv-obj .rv-pic img {
  object-fit: fill;
}

/* ---------------------------------------------------------- the verse */
.rv-verse,
.rv-measure {
  font-family: var(--font-serif, ui-serif, "New York", Georgia, serif);
  font-weight: 500;
  font-synthesis: none;
  /* nothing the page's own type sets may reach the verse: the canvas that
     times it measures with none of these */
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0;
  font-feature-settings: normal;
}
.rv-verse {
  color: #14181C;
}
.rv-measure {
  position: fixed;          /* on the body, and adds nothing to the page's scroll */
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
}
.rv-line {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}
.rv-line.rv-on {
  visibility: inherit;      /* hidden with its reel while the reel waits */
}
.rv-win,
.rv-paper,
.rv-inner,
.rv-words {
  position: absolute;
}
/* a window: its right edge is the pen, feathered as the app feathers it */
.rv-win {
  overflow: hidden;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  will-change: transform;
}
.rv-inner {
  will-change: transform;
}
.rv-full .rv-win {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  will-change: auto;
}
.rv-full .rv-inner {
  will-change: auto;
}
/* the band: white at 0.86 (Prefs.defaultHighlightOpacity) */
.rv-paper {
  background: rgba(255, 255, 255, 0.86);
}
.rv-words {
  display: block;
  white-space: pre;
}

/* -------------------------------------------------------- the caption */
.rv-cap > * {
  position: absolute;
}
/* the caption's two lines (ReelsCaption.swift since W23-CAPTION: no pill;
   the chrome's shadow, black at 0.45, radius 2, 0.5 down) */
.rv-name,
.rv-ref {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  text-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.45);
}
.rv-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: #C4C4C4;
}
.rv-ref {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #FFFFFF;
}
.rv-mark {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.18));
}
.rv-mark svg {
  display: block;
}

/* ------------------------------------------------------------ the bar */
.rv-track,
.rv-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2.5px;
}
.rv-track {
  background: rgba(255, 255, 255, 0.28);
}
.rv-fill {
  transform-origin: 0 0;
  transform: scaleX(0);
  background: linear-gradient(to bottom right, rgba(204, 205, 206, 0.84), rgba(211, 212, 213, 0.84));
  will-change: transform;
}

/* ----------------------------------------------------------- the rail */
.rv-rail {
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.18));
}
.rv-slot {
  position: absolute;
}
.rv-glyph {
  display: block;
  overflow: visible;
}

/* held (the 2x hold): the rail goes at once, the caption fades */
.rv-cap {
  transition: opacity 0.15s ease-out;
}
.rv-held .rv-rail {
  visibility: hidden;
}
.rv-held .rv-cap {
  opacity: 0;
}

/* iOS's status bar and the Dynamic Island (ReelView.statusBar, .island), in
   the app's points on a 402 x 874 screen */
.rv-status {
  position: absolute;
  left: 0;
  top: 0;
  width: 402px;
  height: 54px;
  pointer-events: none;
}
.rv-on-art {
  color: #fff;
}
.rv-time {
  position: absolute;
  left: 38px;
  top: 17px;
  width: 80px;
  text-align: center;
  font: 600 17px/22px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.2px;
}
.rv-sys {
  position: absolute;
  left: 290px;
  top: 21px;
  width: 78px;
  height: 14px;
}
.rv-island {
  position: absolute;
  left: 138px;
  top: 11px;
  width: 126px;
  height: 37px;
  border-radius: 18.5px;
  background: #000;
}

/* The app's dock (ReelView.dock): the Dark theme's band, its four tabs (the
   lit one white, the rest the ink at 0.42, as paintMenu mixes them) and iOS's
   home indicator. Placed in the app's points by the script. */
.rv-dock {
  position: absolute;
  background: linear-gradient(to bottom right, #0D1216, #15191D), #0B1014;
  box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.12);
  pointer-events: none;
}
.rv-tab {
  position: absolute;
  overflow: visible;
  color: rgba(255, 255, 255, 0.42);
}
.rv-tab-on {
  color: #fff;
}
.rv-home-ind {
  position: absolute;
  display: block;
  border-radius: 2.5px;
  background: rgba(255, 255, 255, 0.2);
}