/* scene-curtain. Pair with scene-curtain.js. Theme it by declaring the --scene-curtain-* names below
   on :root or on the curtain; they are set here at zero specificity, so a host that declares them wins
   without !important and a host that declares nothing still renders.
   --scene-curtain-paint-lift is WRITTEN by the script (the cover's height) on each curtain. Setting it
   by hand does nothing useful: the next resize overwrites it. */

:where(:root) {
  /* fixed furniture at the top of the window, such as a sticky header: the stage holds just under it */
  --scene-curtain-top: 0px;
  /* the cover's shadow, cast down onto the stage as it rises */
  --scene-curtain-shadow: 0 30px 56px -18px rgba(0, 0, 0, .45);
  /* the optional pull tab under the cover's bottom edge */
  --scene-curtain-tab: #FFFFFF;
  --scene-curtain-tab-mark: #A1520B;
  --scene-curtain-tab-line: rgba(16, 25, 46, .18);
  --scene-curtain-tab-shadow: 0 12px 20px -10px rgba(0, 0, 0, .55);
}

/* flow-root keeps the cover's top margin inside the curtain. The cover's BOTTOM margin is zeroed:
   it would combine with the stage's negative margin and leave the stage that far below the cover's
   top, peeking out under it. Space a cover from its stage with padding, never margin. */
.scene-curtain { position: relative; display: flow-root; }
.scene-curtain > [data-scene-curtain-cover] { position: relative; z-index: 2; margin-bottom: 0; box-shadow: var(--scene-curtain-shadow); }
.scene-curtain > [data-scene-curtain-stage] { position: relative; z-index: 1; margin-top: calc(-1 * var(--scene-curtain-paint-lift, 0px)); }
/* sticky only once the script is running: with no script there is no lift, so nothing to hold, and a
   sticky stage would make the browser's own #stage jump land in the wrong place */
.scene-curtain.scene-curtain-on > [data-scene-curtain-stage] { position: sticky; top: var(--scene-curtain-top); }
/* the stage takes focus after a glide (tabindex -1) so the next Tab starts there; it is not a control */
.scene-curtain > [data-scene-curtain-stage]:focus { outline: none; }
/* the runway: as long as the cover, so the stage holds for exactly as long as the cover takes to go */
.scene-curtain::after { content: ""; display: block; height: var(--scene-curtain-paint-lift, 0px); }

/* the pull tab: hangs BELOW the cover, so it is out of sight until the cover starts to rise */
.scene-curtain > [data-scene-curtain-cover] > [data-scene-curtain-hem] { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 0; pointer-events: none; }
.scene-curtain > [data-scene-curtain-cover] > [data-scene-curtain-hem]::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 92px; height: 21px; margin-left: -46px;
  border: 1px solid var(--scene-curtain-tab-line); border-top: 0; border-radius: 0 0 13px 13px;
  background: linear-gradient(var(--scene-curtain-tab-mark), var(--scene-curtain-tab-mark)) center 8px / 30px 2px no-repeat, var(--scene-curtain-tab);
  box-shadow: var(--scene-curtain-tab-shadow);
}

/* a cover that has cleared its stage is out of sight: its CSS animations hold until it comes back.
   The script sets scene-curtain-cleared; a host that wants a loop to keep running regardless can give
   that element animation-play-state: running !important itself. */
.scene-curtain.scene-curtain-cleared > [data-scene-curtain-cover],
.scene-curtain.scene-curtain-cleared > [data-scene-curtain-cover] *,
.scene-curtain.scene-curtain-cleared > [data-scene-curtain-cover] *::before,
.scene-curtain.scene-curtain-cleared > [data-scene-curtain-cover] *::after { animation-play-state: paused !important; }

/* PAPER HAS NO SCROLL. Printed, the stage would sit under the cover and simply not appear. A
   stylesheet !important beats the value the script writes inline. */
@media print {
  .scene-curtain { --scene-curtain-paint-lift: 0px !important; }
  .scene-curtain.scene-curtain-on > [data-scene-curtain-stage] { position: relative; top: auto; }
  .scene-curtain > [data-scene-curtain-cover] > [data-scene-curtain-hem] { display: none; }
}
@media (forced-colors: active) {
  .scene-curtain > [data-scene-curtain-cover] { box-shadow: none; border-bottom: 1px solid CanvasText; }
}