/* The source layout stays intact. Only the media surface and reveal states change. */
body {
  background-image: url('assets/paper-grain-v3.png'),
    radial-gradient(circle at 18% 8%, rgba(247,204,109,.12), transparent 28rem),
    radial-gradient(circle at 88% 28%, rgba(83,111,134,.07), transparent 31rem);
  background-color: var(--paper);
}
body::before { display: none; }
.intro-art-pair > .art-beat { opacity: 1; visibility: visible; }
.scene-player { position: relative; width: 100%; }
.scene-surface { position: absolute; inset: 0; pointer-events: none; }
.scene-surface video, .scene-surface img {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain;
}
.scene-surface video { opacity: 0; }
.scene-surface .scene-initial { display: none; }
.video-enabled .scene-player:not([data-state="static"]):not([data-state="complete-poster"]):not([data-state="error"]) .scene-initial { display: block; }
.video-enabled .scene-player:not([data-state="static"]):not([data-state="complete-poster"]):not([data-state="error"]) .scene-final { visibility: hidden; }
.video-enabled .scene-player[data-frame-ready="true"]:not([data-state="static"]):not([data-state="complete-poster"]):not([data-state="error"]) video { opacity: 1; }
.scene-controls {
  position: absolute; z-index: 1; inset: auto 12px 12px; display: flex;
  flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
.scene-controls[hidden] { display: none !important; }
.scene-play {
  font: 500 .85rem/1.4 Manrope, sans-serif; color: var(--ink);
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); cursor: pointer; box-shadow: 0 3px 14px rgba(38,41,37,.06);
}
.scene-status { font-size: .75rem; background: var(--paper); color: var(--muted); }
.scene-status:empty { display: none; }
.scene-pause {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper);
  color: var(--ink); font: 600 .85rem/1 Manrope, sans-serif; cursor: pointer;
  opacity: 0; transition: opacity 150ms ease;
}
.scene-pause[hidden] { display: none !important; }
.scene-player:hover .scene-pause, .scene-pause:focus-visible,
.scene-player[data-state="user-paused"] .scene-pause { opacity: 1; }
.video-enabled .reveal-pending { opacity: 0; transform: translateY(10px); }
.video-enabled .reveal-target {
  transition: opacity 480ms ease, transform 480ms cubic-bezier(.2,.75,.2,1);
}
.intro-art-pair .scene-art figcaption > [data-video-caption] { display: block; }
.contact-art picture, .contact-art img { display: block; width: 100%; height: auto; }
@keyframes read-progress { from {transform:scaleX(0)} to {transform:scaleX(1)} }
.native-reading-progress #reading-progress {
  animation: read-progress auto linear both;
  animation-timeline: scroll(root block);
}
@media (max-width:960px), (hover:none) and (pointer:coarse) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .scene-pause { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal-target, .reveal-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
}