/* 刃 / The Blade: the home page poster. Everything is scoped under .blade-home.
   The scene SVGs are generated by home/blade/gen.py (1440x900 desktop, 390x844 phone, both "slice"-fitted). */

.blade-home {
    --ink: #16202a; --ink-2: #2F3B46; --blue: #4FA3D8;
    --futura: Futura, "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
    --hei: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    position: fixed; inset: 0; overflow: hidden; container-type: size;
    background: #eef1f4; color: var(--ink); font-family: var(--futura);
    -webkit-tap-highlight-color: transparent;
    direction: ltr; /* a composed picture: Arabic (dir="rtl") pages must not mirror it */
}
.blade-home * { box-sizing: border-box; margin: 0; }
.blade-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.blade-home .stage { position: absolute; inset: 0; }
.blade-home .scene { width: 100%; height: 100%; display: block; }
.blade-home .phone { display: none; }
@media (max-width: 640px), (max-aspect-ratio: 3/4) {
    .blade-home .desk { display: none; }
    .blade-home .phone { display: block; }
}

/* drawn type */
.blade-home .nm { font-family: var(--hei); font-weight: 600; fill: var(--ink); }
.blade-home .nm-sub { font-family: var(--futura); fill: var(--ink-2); }
.blade-home .cap-en, .blade-home .spine-en { font-family: var(--futura); font-weight: 500; letter-spacing: .14em; fill: var(--ink); }
.blade-home .cap-zh, .blade-home .spine-zh { font-family: var(--hei); fill: var(--ink-2); }
.blade-home .spine-zh { fill: #3A4A57; }
.blade-home .d-shadow .cap-en, .blade-home .d-shadow .cap-zh { fill: #fff; }

/* doors */
.blade-home .hit { fill: transparent; stroke: none; pointer-events: all; }
.blade-home a.door { cursor: pointer; }
/* paper-polish.css rings every a:focus-visible with !important; doors draw their own ring around the shape */
.blade-home a.door:focus, .blade-home a.door:focus-visible { outline: none !important; }
.blade-home .focus { fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0; }
.blade-home a.door:focus-visible .focus { opacity: 1; }
.blade-home .cap { opacity: 0; transition: opacity .15s; }
.blade-home a.door:hover .cap, .blade-home a.door:focus-visible .cap { opacity: 1; }
.blade-home .press, .blade-home .lift { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.blade-home a.door:active .press { transform: translateY(2px); transition-duration: .08s; }
.blade-home .d-arch:hover .lift { transform: translateY(-6px); }
.blade-home .d-kite:hover .lift { transform: translateY(-8px); }
.blade-home .edge-thick, .blade-home .face-hi, .blade-home .shadow-dark, .blade-home .w-front,
.blade-home .pulse, .blade-home .flash, .blade-home .glint, .blade-home .streaks { opacity: 0; }
.blade-home .edge-thick, .blade-home .face-hi, .blade-home .shadow-dark, .blade-home .w-front, .blade-home .w-side { transition: opacity .25s; }
.blade-home .d-blade:hover .edge-thick, .blade-home .d-blade:focus-visible .edge-thick { opacity: 1; }
.blade-home .d-blade:hover .face-hi, .blade-home .d-blade:focus-visible .face-hi { opacity: .1; }
.blade-home .d-shadow:hover .shadow-dark, .blade-home .d-shadow:focus-visible .shadow-dark { opacity: .3; }
.blade-home .d-walker:hover .w-side, .blade-home .d-walker:focus-visible .w-side { opacity: 0; }
.blade-home .d-walker:hover .w-front, .blade-home .d-walker:focus-visible .w-front { opacity: 1; }
.blade-home .flash, .blade-home .glint-path, .blade-home .pulse, .blade-home .crown, .blade-home .dust,
.blade-home .streaks, .blade-home .waves, .blade-home .crater { pointer-events: none; }
.blade-home .par, .blade-home .par-sky, .blade-sections { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }

/* touch: captions always on, one tap navigates */
@media (hover: none) {
    .blade-home .cap { opacity: 1; }
}

/* language switcher */
.blade-lang { position: absolute; top: 6px; right: 14px; z-index: 10; display: flex; }
.blade-lang details { position: relative; }
.blade-lang summary { list-style: none; display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
    font-size: 12px; letter-spacing: .08em; color: var(--ink-2); cursor: pointer; }
.blade-lang summary::-webkit-details-marker { display: none; }
.blade-lang .more { position: absolute; right: 0; top: 44px; width: max-content; display: grid; grid-template-columns: repeat(2, auto);
    background: #f6f8f9; box-shadow: 0 18px 50px rgba(76, 136, 180, .28); padding: 6px; }
.blade-lang .more a { justify-content: flex-start; padding: 0 12px; white-space: nowrap; }
.blade-lang a { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 44px;
    font-size: 12px; letter-spacing: .12em; color: var(--ink-2); text-decoration: none; }
.blade-lang a[aria-current] { color: var(--ink); font-weight: 600; }
.blade-lang a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 5px; }
.blade-lang summary:focus-visible, .blade-lang a:focus-visible, .blade-sections a:focus-visible {
    outline: 2px solid var(--blue) !important; outline-offset: -6px; }

/* sections, desktop: one film-title credit line standing on the horizon. One scene unit (--u) follows the
   SVG's right-anchored "slice" fit, so the line spans x 852-1398 with its rule on the horizon (y 585) at any size. */
.blade-sections {
    --u: max(calc(100cqw / 1440), calc(100cqh / 900));
    position: absolute; z-index: 3;
    left: calc(100cqw - 588 * var(--u)); top: calc(50cqh + 96 * var(--u)); width: calc(546 * var(--u));
    font: 500 calc(14 * var(--u)) / 1 var(--futura);
}
.blade-sections .row { display: flex; align-items: center; height: calc(40 * var(--u)); }
.blade-sections .dot { margin: 0 1.4em; color: var(--ink-2); opacity: .5; }
.blade-sections .zh { margin-left: .7em; font-family: var(--hei); font-weight: 400; font-size: .93em; letter-spacing: .06em; color: var(--ink-2); }
.blade-sections a { position: relative; display: flex; align-items: center; margin: 0 -.57em; padding: 0 .57em;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.blade-sections a::after { content: ""; position: absolute; left: .57em; right: calc(.57em + .12em); top: 50%; margin-top: .65em;
    height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .18s ease-out; }
.blade-sections a:hover::after, .blade-sections a:focus-visible::after { transform: scaleX(1); }
.blade-sections .rule { position: absolute; left: 0; right: 0; top: calc(39 * var(--u)); height: 1px;
    background: var(--ink); opacity: .55; transform-origin: left; }

/* sections, phone: one pale credit row at the foot of the screen */
@media (max-width: 640px), (max-aspect-ratio: 3/4) {
    .blade-sections { left: 0; right: 0; top: auto; bottom: 0; width: auto; z-index: 10;
        padding: 28px 18px calc(10px + env(safe-area-inset-bottom)); font-size: 14px;
        background: linear-gradient(#eef1f400, #eef1f4e0 30%, #eef1f4f5); }
    .blade-sections .row { height: 44px; }
    .blade-sections .row { justify-content: center; height: 48px; border-top: 1px solid #16202a40; }
    .blade-sections .dot { margin: 0 1em; }
    .blade-sections a { align-self: stretch; margin: 0 -8px; padding: 0 8px; letter-spacing: .1em; }
    .blade-sections a::after { display: none; }
    .blade-sections .rule { display: none; }
}

.blade-home .grain { position: absolute; inset: 0; pointer-events: none; opacity: .07; z-index: 5; background-image: url("grain.8fd8476d425f.png"); }

/* blade -> sheet: the blade turns into a page and the browser follows the link */
#sheet, #softshadow { position: absolute; opacity: 0; pointer-events: none; z-index: 8; transform-origin: 0 0; }
#sheet { background: #fff; overflow: hidden; }
#softshadow { box-shadow: 0 40px 140px 30px rgba(76, 136, 180, .42); z-index: 7; }
#sheet .edge-red, #sheet .edge-blue { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #E2412F; }
#sheet .edge-blue { background: var(--blue); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .blade-home *, .blade-home *::after, .blade-sections, .blade-sections a::after { transition: none !important; }
}