/* Revision 16. The film is a fixed layer over a bay that never moves; the story
   is pinned under it by layout, not by script. Loaded after the older sheets. */

/* How far the reader scrolls with the hero in place: enough to arm the cut and let it finish. */
#samura.is-v16.logo-travels{--logo-scroll-distance:10svh;--exit-scroll-distance:44svh;--v16-travel:calc(var(--logo-scroll-distance) + var(--exit-scroll-distance))}

/* The story starts at the very top of the page, under the hero, and is already
   stuck when the page opens. While the hero holds the page nothing has to push it
   back into place, which is what made its headings shiver before. */
#samura.is-v16.logo-travels .story{margin-top:calc(-1 * (var(--intro-viewport) + var(--v16-travel)));height:calc(100svh + var(--v16-travel));min-height:0}
#samura.is-v16.logo-travels.is-enhanced .story{height:calc(270svh + var(--v16-travel))}
#samura.is-v16.logo-travels .story-sticky{transform:none!important;will-change:auto}
#samura.is-v16.logo-travels .intro,#samura.is-v16.logo-travels .intro-sticky{background:transparent}
#samura.is-v16.film-cutting .intro-sticky{pointer-events:none}

/* The printed wordmark is in the film; the live one stays for assistive technology. */
#samura.is-v16.logo-travels .intro-center{opacity:0;pointer-events:none}
#samura.is-v16.logo-travels #moving-logo{position:static;width:100%;height:auto;max-width:100%;transform:none;will-change:auto}
#samura.is-v16.logo-travels .site-header .brand{visibility:visible}
#samura.is-v16.logo-travels .site-header .brand img{opacity:var(--intro-brand-opacity,0)}
#samura.is-v16 .intro-scroll,#samura.is-v16 .intro-edition{transition:opacity .25s ease}
#samura.is-v16.film-cutting .intro-scroll,#samura.is-v16.film-cutting .intro-edition{opacity:0}

/* Over the bay the header floats on the picture instead of cutting a bar off its top: the pendant hangs just under it.
   Past the story it is the solid bar again, so text never scrolls up behind the navigation. */
#samura.is-v16.logo-docked:not(.past-story) .site-header{background:linear-gradient(180deg,#030405f2 0%,#030405bf 52%,#03040500 100%);border-bottom-color:transparent}

/* The film: resting plate, then the rendered frames with their own transparency. */
#samura .v16-film{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden;contain:layout paint size}
#samura .v16-film.is-resting{background:#0a0c0f}
#samura .v16-film.is-gone{visibility:hidden}
#samura .v16-film.is-fading{opacity:0;transition:opacity .6s ease}
#samura .v16-film-plate,#samura .v16-film-frame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0}
#samura .v16-film-tagline{position:absolute;left:50%;top:var(--tagline-y,62%);transform:translate(-50%,-50%);width:max-content;max-width:96%;font-family:var(--display);font-size:clamp(27px,3vw,45px);font-weight:400;line-height:1.5;letter-spacing:.085em;text-transform:uppercase;text-align:center;white-space:nowrap;color:#d1d7d4;transition:opacity .2s ease}
#samura .v16-film:not(.is-resting) .v16-film-tagline{opacity:0}

/* The bay fills the pinned stage; the old studio light effects and square poster are not part of it. */
#samura.is-v16 .story-sticky{background:#050607}
#samura.is-v16 .light-beam,#samura.is-v16 .light-pool,#samura.is-v16 .stage-poster{display:none}
#samura.is-v16.is-enhanced .story-copy::before{content:none}
#samura .v16-poster{display:none}
#samura.is-v16 .v16-poster{display:block;position:absolute;inset:0}
#samura.is-v16 .v16-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
#samura.is-v16.is-loaded .v16-poster{visibility:hidden}
/* Room for the words: the picture falls off toward the copy and the footer. */
#samura.is-v16 .warehouse-stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#030405d9 0%,#030405a6 20%,#03040559 38%,#03040500 54%),linear-gradient(0deg,#030405cc 0%,#03040566 9%,#03040500 22%),linear-gradient(180deg,#030405b3 0%,#03040500 14%)}
/* One grain over everything rendered, so plate, patches and gradients read as one photograph. */
#samura.is-v16 .warehouse-stage::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23noise)'/%3E%3C/svg%3E");background-size:180px 180px}

/* The copy arrives after the film has let go, never through the wound. */
#samura.is-v16.logo-travels .story-layout,#samura.is-v16.logo-travels .story-footer{transition:opacity .5s ease}
#samura.is-v16.logo-travels:not(.story-revealed) .story-layout,#samura.is-v16.logo-travels:not(.story-revealed) .story-footer{opacity:0}
#samura.is-v16 .story-panel p{color:#cfd5d8;text-shadow:0 1px 14px #000c}
#samura.is-v16 .stage-bottomline{color:#c9d2d7;text-shadow:0 1px 10px #000}
/* The caption sits in the dark beside the pendant, not across the cartons. */
@media(min-width:761px){#samura.is-v16 .stage-bottomline{top:6px;bottom:auto;left:auto;right:0;justify-content:flex-end;gap:28px}}
/* If the film cannot load, the live wordmark stands in for the printed one. */
#samura.is-v16.logo-travels.film-failed .intro-center{opacity:1}
#samura.film-failed .v16-film-tagline{display:none}

@media(max-width:760px){
  #samura.is-v16.logo-travels{--logo-scroll-distance:8svh;--exit-scroll-distance:40svh}
  #samura.is-v16.logo-travels.is-enhanced .story{height:calc(270svh + var(--v16-travel))}
  #samura.is-v16 .story-sticky{background:#050607}
  #samura .v16-film-tagline{font-size:25px;letter-spacing:.035em}
  #samura.is-v16 .v16-poster img{object-position:50% 50%}
  #samura.is-v16 .warehouse-stage::after{background:linear-gradient(180deg,#030405e6 0%,#030405b3 24%,#03040566 38%,#03040500 50%),linear-gradient(0deg,#030405d9 0%,#03040573 10%,#03040500 22%)}
}
@media(max-height:650px) and (min-width:761px){
  #samura .v16-film-tagline{font-size:clamp(25px,5vh,34px)}
}
@media(prefers-reduced-motion:reduce){
  #samura .v16-film{display:none}
}