/*
 * reel.css: the shared verse's reel (reel.js), drawn with the app's own
 * sizes and colours. Loaded after tokens.css and site.css.
 *
 * The reel's chrome is the app's "art" chrome, which is the same in Light and
 * Dark (Prefs.overArtInkHex #FFFFFF over overArtGroundHex #0B1014), so none of
 * this follows the visitor's colour scheme; the page it hands over to does.
 *
 * Without reel.js none of these classes appear and the page is the plain
 * invitation.
 */

/* While the reel has the glass: the page waits underneath, unseen, and its
   headline's write-on waits with it (reel.js restarts it for the card). The
   root carries the book's ground colour so the first paint is already the
   reel's, before the stage exists. */
html.reel:not(.reel-card) {
  background: var(--reel-ground, #0B1014);
}

html.reel:not(.reel-card) body {
  visibility: hidden;
}

html.reel:not(.reel-card),
html.reel:not(.reel-card) body {
  overflow: hidden;
}

html.reel:not(.reel-card) .write {
  animation-play-state: paused;
}

.reel-stage {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  visibility: visible;
  background: var(--reel-ground, #0B1014);
  color: #fff;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.reel-stage[hidden] {
  display: none;
}

.reel-stage > * {
  position: absolute;
  left: 0;
  top: 0;
}

.reel-probe {
  visibility: hidden;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ------------------------------------------------------------ the art */

.reel-plate {
  overflow: visible;
}

.reel-picture {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform-origin: 50% 50%;
  will-change: transform;
}

.reel-object-img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* The dock-mode plate's dock, for a side by side with the app (?dock=1):
   the Dark look's base, wash and upward shadow, without the tabs. */
.reel-dock {
  background: linear-gradient(to bottom right, #0D1216, #15191D), #0B1014;
  box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------- the verse */

.reel-verse {
  font-family: var(--font-serif);
  font-weight: 500;
  font-synthesis: none;
  color: #14181C;
}

.reel-dev-font .reel-verse,
.reel-dev-font .reel-measure {
  font-family: "Scrollible Dev New York", var(--font-serif);
}

.reel-measure {
  visibility: hidden;
  font-family: var(--font-serif);
  font-weight: 500;
  font-synthesis: none;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
}

.reel-line {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
}

.reel-paper,
.reel-ink,
.reel-words {
  position: absolute;
}

/* The band: white at 0.86 (Prefs.defaultHighlightOpacity) */
.reel-paper {
  background: rgba(255, 255, 255, 0.86);
}

.reel-paper,
.reel-ink {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.reel-words {
  display: block;
  white-space: pre;
}

/* -------------------------------------------------------- the caption */

/* the halo on the mark, the title and the tag (haloGlyph: black 0.18, radius 3) */
.reel-caption > * {
  position: absolute;
}

/* CaptionPill: the app's dark wash (black at washAlpha), no blur. W23f-PILL:
   0.35, the lightest that keeps white type at 3:1 over the app's bright
   pictures (Core/CaptionPill.swift P2); 0.65 was "way too dark". The app's
   light Custom theme washes in the reader's own ground instead; the page has
   no themes, so it wears the dark one. reel.js sets its box and its radius
   (half its height). */
.reel-pill {
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* W23f-PILL (B), while the owner chooses: the picture behind the pill blurred
   under a tint. The app's material darkens by itself and adds a 0.1 tint; a
   browser's blur does not darken, so the tint here is the whole of it
   (CaptionPill.webFrostTint 0.38, the blur CaptionPill.webFrostBlur). Where a
   browser cannot blur what is behind an element, it is look A. */
.reel-pill.reel-frosted {
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .reel-pill.reel-frosted {
    background: rgba(0, 0, 0, 0.35);
  }
}

.reel-mark {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.18));
}

/* W23g-PILL: the check's switch, which opens and folds the caption
   (Core/CaptionFold.swift). A see-through round button over the mark, as big
   as the circle the pill folds to: 46, past the 44 a finger needs. reel.js
   sets its box; the pill and the lines are drawn by reel.js as it runs. */
.reel-fold {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reel-fold:focus-visible {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

.reel-mark svg {
  display: block;
}

.reel-title,
.reel-tag {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.18);
}

/* BookTitle: 15pt semibold, the unread lettering */
.reel-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  color: #C4C4C4;
}

/* its read part: the same words in white, cut to the book's read share */
.reel-title-lit {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #FFFFFF;
}

/* VerseTag: 13pt medium, white */
.reel-tag {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: #FFFFFF;
}

/* ------------------------------------------------------------ the bar */

.reel-track,
.reel-fill,
.reel-tip {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
}

.reel-track {
  width: 100%;
  background: rgba(255, 255, 255, 0.28);
}

/* BarFill: the meter's two wash ends at 0.84, corner to corner */
.reel-fill {
  width: 0;
  border-radius: 0 1.25px 1.25px 0;
  background: linear-gradient(to bottom right, rgba(204, 205, 206, 0.84), rgba(211, 212, 213, 0.84));
}

.reel-tip {
  width: 2.5px;
  border-radius: 1.25px;
  background: #fff;
  opacity: 0;
  transition: opacity 0.15s;
}

/* --------------------------------------------------- disc, mute, hint */

.reel-disc,
.reel-mute {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

.reel-disc {
  border-radius: 32px;
}

.reel-mute {
  border-radius: 12.5px;
}

/* the finger gets 45 points even where the eye gets 25 */
.reel-mute::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.reel-disc svg,
.reel-mute svg,
.reel-hint svg {
  display: block;
  flex: none;
  overflow: visible;
}

.reel-disc:focus-visible,
.reel-mute:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.reel-hint {
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px 8px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font: 500 13px/16px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  pointer-events: none;
}

.reel-hint[data-on="1"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* LoadingCircle: 28 points, a 2-point track at 0.28 and a quarter-turn arc
   at 0.84, one turn a second */
.reel-loading {
  opacity: 0;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.18));
  transition: opacity 0.2s;
}

.reel-loading[data-on="1"] {
  opacity: 1;
}

.reel-loading svg {
  display: block;
  animation: reel-turn 1s linear infinite;
}

@keyframes reel-turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reel-loading svg {
    animation-duration: 3s;
  }
}

/* ------------------------------------------------- the card's "again" */

.reel-again {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  margin-top: 14px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink-faint);
  color: var(--ink);
  font: 600 0.9375rem/1 var(--font-ui);
  cursor: pointer;
}

html.reel-done .reel-again {
  display: inline-flex;
}

.reel-again:hover {
  background: var(--edge);
}