/* Revision 17, over revision 16's sheet (v16.css): the header is a bar again, the
   hero has its smoke and its kanji back, and the bay is the relit one. */

/* The header. Over the resting film it has nothing behind it: the links float on the
   film, as in revision 16. It becomes one solid bar once the cut is over and the
   wordmark has docked in it (round 9, the owner: "should appear later"; it was solid
   from the moment the cut was armed), and stays one to the footer. The wound never
   reaches the header's band before then on the wide layout; on the phone the vertical
   cut starts at the top and shows the dark above the lamp there. Without the film
   (reduced motion, short landscape phones) it is solid from the start. */
#samura.is-v17 .site-header,
#samura.is-v17.logo-docked .site-header,
#samura.is-v17.is-v16.logo-docked:not(.past-story) .site-header{background:#0a0b0d;border-bottom-color:#ffffff14}
#samura.is-v17.logo-travels:not(.logo-docked) .site-header{background:transparent;border-bottom-color:transparent}
/* The page is hidden while it boots: the bar must not be seen fading out when it is shown. */
.samura-boot #samura.is-v17 .site-header{transition:none}

/* Smoke over the resting film, under the tagline. */
#samura .v17-film-smoke{position:absolute;inset:0;pointer-events:none}
#samura .v17-film-smoke .intro-film-smoke{position:absolute;inset:0;width:100%;height:100%}

/* The tagline is held back until its kanji are ready, then resolves letter pair by letter pair. */
#samura .v16-film-tagline.is-waiting{visibility:hidden}
#samura.is-v17 .hero-scramble-plain{position:absolute;inset:0;display:flex;align-items:center}
#samura.is-v17 .hero-scramble-plain>span{display:block;flex:none;white-space:pre;text-align:left}
#samura.is-v17 .hero-scramble-slot.is-scrambled .hero-scramble-plain{visibility:hidden}
#samura.is-v17 .hero-scramble-slot:not(.is-scrambled) .hero-scramble-glyph{visibility:hidden}
#samura.is-v17 .hero-scramble-glyph.is-kanji{color:#c3c9c7;overflow:visible}

/* The film shivers for the frames the edge is in it. The slight scale keeps its border out of sight. */
#samura.is-v17 .v16-film.is-struck .v16-film-frame{animation:v17-struck .2s cubic-bezier(.3,.6,.4,1) both}
@keyframes v17-struck{0%{transform:scale(1.012) translate(0,0)}22%{transform:scale(1.012) translate(.22%,-.2%)}48%{transform:scale(1.012) translate(-.16%,.14%)}74%{transform:scale(1.012) translate(.07%,-.05%)}100%{transform:scale(1) translate(0,0)}}

/* The cut's light (v17-cut.js), over the frames and the smoke. It is shown only while it has something to draw. */
#samura .v17-cut-fx{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;visibility:hidden}
#samura .v17-cut-fx.is-live{visibility:visible}
/* The held breath: the picture closes in from its corners. Only its opacity changes. */
#samura .v17-cut-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse 71% 71% at 50% 50%,#0000 34%,#000000eb 100%)}

/* The bay: the copy's side and the footer still fall off, but the stack keeps its light and nothing dims the pendant.
   The copy's shade ends before the car's nose, which stands under its fading edge. */
#samura.is-v17 .warehouse-stage::after{background:linear-gradient(90deg,#030405d9 0%,#030405a6 19%,#03040547 34%,#03040500 46%),linear-gradient(0deg,#030405cc 0%,#03040570 6%,#03040500 13%)}
#samura.is-v17 .story-sticky{background:#040506}
#samura.is-v17 .v16-poster img{object-position:62% 0}

/* One heading leaves before the next arrives, so the kanji never sit on the last chapter's words. */
#samura.is-v17 .story-panel{transition:opacity .14s ease,transform .4s cubic-bezier(.22,1,.36,1),visibility .14s}
#samura.is-v17 .story-panel.is-current{transition:opacity .24s ease .12s,transform .45s cubic-bezier(.22,1,.36,1) .08s,visibility 0s .12s}

@media(max-width:760px){
  #samura.is-v17 .warehouse-stage::after{background:linear-gradient(180deg,#030405e6 0%,#030405b3 22%,#03040566 34%,#03040500 44%),linear-gradient(0deg,#030405d9 0%,#03040573 8%,#03040500 17%)}
  #samura.is-v17 .v16-poster img{object-position:50% 50%}
}
@media(prefers-reduced-motion:reduce){
  #samura.is-v17 .v16-film.is-struck .v16-film-frame{animation:none}
}
/* Round 10: arrows are drawn, not typed. A text arrow (↗ ↘) is replaced by the emoji arrow with its light blue tile on
   Android (the owner's phone); inline SVG looks the same on every device. */
#samura .arr{display:inline-block;line-height:0;vertical-align:-.14em}
#samura .arr-svg{display:block;width:1em;height:1em;overflow:visible}
#samura .site-header .nav-cta>span.arr .arr-svg{width:16px;height:16px}