/* Cinematic transition played when a reader clicks "Read online".
   Uses the site's existing theme tokens (see :root in style.css) so it
   automatically matches dark/light mode. */

.reading-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.reading-transition.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* ---- Skip control ---- */
.rt-skip {
  position: absolute;
  top: 22px;
  right: 26px;
  z-index: 50;
  background: rgba(11, 7, 5, .55);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-size: .82rem;
  letter-spacing: .06em;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease, color .2s ease, border-color .2s ease;
}
.reading-transition.is-active .rt-skip {
  opacity: .75;
  transition-delay: .4s;
}
.rt-skip:hover,
.rt-skip:focus-visible {
  opacity: 1 !important;
  color: var(--accent-hover);
  border-color: var(--accent);
}

/* ---- Mist / smoke sweep (covers the outgoing page) ---- */
.rt-mist {
  position: absolute;
  inset: -10%;
  z-index: 40;
  opacity: 0;
}
.rt-mist span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(236, 225, 207, .55), rgba(236, 225, 207, 0) 70%);
  filter: blur(18px);
  opacity: 0;
}
.rt-mist span:nth-child(1) { width: 60vw; height: 60vw; left: -10vw; top: 20vh; }
.rt-mist span:nth-child(2) { width: 70vw; height: 70vw; right: -15vw; top: -10vh; }
.rt-mist span:nth-child(3) { width: 55vw; height: 55vw; left: 20vw; bottom: -20vh; }
.rt-mist span:nth-child(4) { width: 65vw; height: 65vw; right: 5vw; bottom: -15vh; }
.rt-mist span:nth-child(5) {
  width: 90vw; height: 90vw; left: 5vw; top: 5vh;
  background: radial-gradient(circle, rgba(207, 154, 68, .35), rgba(207, 154, 68, 0) 65%);
}
.is-active .rt-mist { animation: rt-mist-fade 1.5s ease-in-out forwards; }
@keyframes rt-mist-fade {
  0% { opacity: 0; }
  14% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}
.is-active .rt-mist span { animation: rt-mist-drift 1.9s ease-out forwards; }
.is-active .rt-mist span:nth-child(2) { animation-delay: .06s; }
.is-active .rt-mist span:nth-child(3) { animation-delay: .12s; }
.is-active .rt-mist span:nth-child(4) { animation-delay: .18s; }
@keyframes rt-mist-drift {
  0% { opacity: 0; transform: scale(.6) translateY(6%); }
  35% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(1.3) translateY(-8%); }
}

/* ---- The video itself ---- */
.rt-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: 0;
  transform: scale(1.04);
  filter: brightness(.9);
}
.is-active .rt-video-wrap {
  animation: rt-video-in 1.1s ease-out .35s forwards;
}
@keyframes rt-video-in {
  0% { opacity: 0; transform: scale(1.04); filter: brightness(.5); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}
.rt-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

/* subtle vignette to keep the frame feeling candlelit / focused */
.rt-vignette {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(0, 0, 0, .55) 100%);
}

/* ---- Final warm flash before handing off to the book ---- */
.rt-flash {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: radial-gradient(circle at 50% 55%, #fffaf0, #fff2d6 55%, #ffdd9a 100%);
  opacity: 0;
}
.is-active .rt-flash.is-flashing {
  animation: rt-flash-out .6s ease-in forwards;
}
@keyframes rt-flash-out {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .reading-transition * { animation: none !important; }
}