/* A scroll-directed material film. Keep the outer story free of overflow rules:
   its inner stage stays pinned while the camera moves through three chapters. */
.home-page > .topbar { display: none; }
.home-page > header {
 height: 84px;
 color: #58432c;
 border-bottom: 1px solid #58432c15;
 background: rgb(255 247 229 / 96%);
 backdrop-filter: blur(18px);
}
.home-page > header .brand-icon { color: #b47d2d; }
.home-page > header > .btn {
 min-height: 42px;
 padding: 10px 16px;
 border: 1px solid #58432c38;
 background: transparent;
 color: #58432c;
}
.home-page > header > .btn:hover { background: #58432c; border-color: #58432c; color: #fff4d9; }
.home-page > header .menu { border-color: #58432c28; color: #58432c; }
.home-page > header > nav { top: 84px; }
.home-page > header .language-switch { color: #58432c; }

.hero-cinematic {
 --film-paper: #fff4d9;
 --film-ink: #58432c;
 --film-muted: #86725b;
 --film-accent: #b47d2d;
 --film-gutter: clamp(24px, 5.2vw, 96px);
 --film-header: 84px;
 position: relative;
 height: 360svh;
 color: var(--film-ink);
 background: var(--film-paper);
}
.cinematic-stage {
 position: sticky;
 top: var(--film-header);
 height: calc(100svh - var(--film-header));
 min-height: 560px;
 overflow: clip;
 isolation: isolate;
 background: radial-gradient(ellipse at 76% 40%, #f7d77c70, transparent 58%), var(--film-paper);
}
.cinematic-stage::before {
 content: '';
 position: absolute;
 inset: 0;
 z-index: -2;
 background: radial-gradient(ellipse at 45% 55%, #f0ce7a9c, #f7e4ad70 55%, transparent 85%);
 opacity: var(--scene-warmth, 0);
 pointer-events: none;
}
.cinematic-grain {
 position: absolute;
 inset: 0;
 z-index: 4;
 opacity: .12;
 pointer-events: none;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%238d846b' filter='url(%23n)' opacity='.28' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.cinematic-word {
 position: absolute;
 left: 22%;
 bottom: 8%;
 z-index: -1;
 color: #c9a45f18;
 font-family: var(--serif);
 font-size: clamp(250px, 35vw, 640px);
 font-weight: 400;
 line-height: .8;
 letter-spacing: -.08em;
 white-space: nowrap;
 transform: translate3d(0, var(--word-shift, 0px), 0);
 pointer-events: none;
 user-select: none;
}
.cinematic-topline {
 position: absolute;
 inset: 31px var(--film-gutter) auto;
 z-index: 5;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 color: #92774f;
 font-size: 8px;
 font-weight: 500;
 line-height: 1.5;
 letter-spacing: .16em;
 text-transform: uppercase;
}
.cinematic-topline > span:last-child { color: #a08864; }
.cinematic-model-wrap {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 pointer-events: none;
}
model-viewer.cinematic-model {
 display: block;
 width: 100%;
 height: 100%;
 background: transparent;
 --poster-color: transparent;
 --progress-bar-color: #b47d2d;
 --progress-bar-height: 1px;
 --progress-mask: transparent;
 pointer-events: none;
}
.cinematic-content { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.cinematic-copy {
 position: absolute;
 top: 50%;
 left: var(--film-gutter);
 width: min(43%, 600px);
 transform: translate3d(0, -50%, 0);
 opacity: 0;
 pointer-events: none;
 will-change: transform, opacity;
}
.cinematic-copy[data-chapter='0'] { opacity: 1; }
.cinematic-copy[data-chapter='1'] { left: auto; right: var(--film-gutter); width: min(36%, 500px); }
.cinematic-copy[aria-hidden='false'] { pointer-events: auto; }
.cinematic-kicker {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 0 0 25px;
 color: var(--film-accent);
 font-size: 9px;
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: .13em;
 text-transform: uppercase;
}
.cinematic-kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; }
.home-page .hero-cinematic #hero-title,
.home-page .hero-cinematic .cinematic-title {
 margin: 0 0 28px;
 color: var(--film-ink);
 font-family: var(--serif);
 font-size: clamp(76px, 8.4vw, 152px);
 font-weight: 400;
 line-height: .95;
 letter-spacing: -.055em;
 text-wrap: initial;
}
.cinematic-title > span, #hero-title > span, .cinematic-title > em, #hero-title > em { display: block; }
.home-page .hero-cinematic #hero-title em,
.home-page .hero-cinematic .cinematic-title em { color: #b88a3f; font-family: inherit; font-weight: 400; }
.cinematic-description {
 max-width: 315px;
 margin: 0 0 30px;
 color: var(--film-muted);
 font-size: 12px;
 line-height: 1.95;
 letter-spacing: .015em;
}
.cinematic-link {
 display: inline-flex;
 align-items: center;
 justify-content: space-between;
 gap: 29px;
 min-height: 40px;
 padding: 8px 0;
 border-bottom: 1px solid #58432c55;
 color: var(--film-ink);
 font-size: 10px;
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: .04em;
 pointer-events: auto;
 transition: color .2s, border-color .2s;
}
.cinematic-link > span:last-child { font: 20px/1 var(--sans); }
.cinematic-link:hover { color: var(--film-accent); border-color: currentColor; }
.cinematic-footer {
 position: absolute;
 inset: auto var(--film-gutter) 30px;
 z-index: 5;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
 padding: 0;
 border: 0;
 background: transparent;
 color: #86725b;
}
.cinematic-scroll { display: inline-flex; align-items: center; gap: 13px; font-size: 8px; line-height: 1.6; letter-spacing: .1em; }
.cinematic-scroll-line { display: inline-block; width: 1px; height: 35px; background: #58432c30; position: relative; overflow: hidden; }
.cinematic-scroll-line::after { content: ''; position: absolute; inset: 0; background: #b59150; transform: translateY(-100%); animation: film-scroll-line 2.8s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes film-scroll-line { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
.cinematic-chapters { display: flex; align-items: center; gap: 22px; }
.cinematic-chapter { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 0; color: #a58d69; font-size: 8px; line-height: 1.4; letter-spacing: .06em; transition: color .25s; }
.cinematic-chapter i { width: 26px; height: 1px; background: currentColor; opacity: .5; }
.cinematic-chapter > span:first-child { font-variant-numeric: tabular-nums; }
.hero-cinematic[data-chapter='0'] .cinematic-chapter:nth-child(1),
.hero-cinematic[data-chapter='1'] .cinematic-chapter:nth-child(2),
.hero-cinematic[data-chapter='2'] .cinematic-chapter:nth-child(3),
.cinematic-chapter:hover { color: #58432c; }
.cinematic-counter { display: inline-flex; align-items: baseline; gap: 8px; color: #a58d69; font-size: 9px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.cinematic-counter > span { color: #58432c; font: 29px/1 var(--serif); }
.cinematic-progress { position: absolute; inset: auto 0 0; height: 2px; z-index: 6; background: #58432c0d; overflow: hidden; }
.cinematic-progress > span { display: block; height: 100%; width: 100%; transform: scaleX(var(--story-progress, 0)); transform-origin: left; background: #b47d2d; }
.cinematic-load-progress { position: absolute; inset: auto 12% 15%; height: 1px; background: #58432c15; }
.cinematic-load-progress > span { display: block; height: 100%; background: #b47d2d; transform: scaleX(0); transform-origin: left; }
.hero-cinematic[data-model-state='ready'] .cinematic-load-progress { visibility: hidden; }
.cinematic-anchor { position: absolute; width: 1px; height: 1px; pointer-events: none; }
#story-start { top: 0; }
#story-detail { top: 48%; }
#story-finish { top: 82%; }
.cinematic-loading {
 position: absolute;
 inset: 0;
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 15px;
 color: #a08864;
 font-size: 10px;
 letter-spacing: .03em;
 pointer-events: none;
}
.cinematic-loading .icon { color: #b47d2d; font: 35px/1 Georgia,serif; }
.cinematic-retry { min-height: 38px; padding: 7px 15px; border: 1px solid #58432c35; background: #fff4d9; color: var(--film-ink); font: inherit; cursor: pointer; pointer-events: auto; }
.hero-cinematic[data-model-state='ready'] .cinematic-loading { visibility: hidden; }
.hero-cinematic[data-model-state='error'] .cinematic-model { visibility: hidden; }
.hero-cinematic[data-model-state='error'] .cinematic-loading { pointer-events: auto; }
.cinematic-retry:hover { border-color: #58432c; }
.cinematic-link:focus-visible, .cinematic-chapter:focus-visible, .cinematic-scroll:focus-visible, .cinematic-retry:focus-visible { outline: 1px solid #b47d2d; outline-offset: 5px; }
html[lang='zh-CN'] .home-page .hero-cinematic #hero-title,
html[lang='zh-CN'] .home-page .hero-cinematic .cinematic-title {
 font-family: 'Songti SC', 'STSong', 'SimSun', serif;
 font-size: clamp(47px, 5.6vw, 92px);
 line-height: 1.24;
 letter-spacing: -.05em;
}
html[lang='zh-CN'] .home-page .hero-cinematic #hero-title em,
html[lang='zh-CN'] .home-page .hero-cinematic .cinematic-title em { font-style: normal; }
html[lang='zh-CN'] .cinematic-description { font-size: 12px; line-height: 2.1; letter-spacing: .035em; }
html[lang='de'] .home-page .hero-cinematic #hero-title,
html[lang='de'] .home-page .hero-cinematic .cinematic-title { font-size: clamp(65px, 6.8vw, 120px); }

@media (max-width: 1100px) {
 .cinematic-copy { width: 45%; }
 .cinematic-copy[data-chapter='1'] { width: 38%; }
 .cinematic-kicker { font-size: 8px; }
 .cinematic-description { max-width: 270px; font-size: 11px; }
 .cinematic-chapters { gap: 13px; }
 .cinematic-chapter { font-size: 7px; gap: 6px; }
 .cinematic-chapter i { width: 18px; }
 .home-page .hero-cinematic #hero-title, .home-page .hero-cinematic .cinematic-title { font-size: clamp(65px, 8.5vw, 92px); }
}
@media (max-width: 760px) {
 .home-page > header { height: 72px; padding-inline: 22px; }
 .home-page > header > nav { top: 72px; background: #fff4d9; }
 .home-page > header .brand { font-size: 19px; gap: 9px; }
 .home-page > header .brand-icon { font-size: 43px; }
 .home-page > header .brand-sub { margin-top: 8px; font-size: 7px; }
 .home-page > header > .btn { display: none; }
 .home-page > header .language-switch { margin-left: auto; }
 .home-page > header .menu { width: 37px; height: 37px; }
 .hero-cinematic { --film-header: 72px; --film-gutter: 25px; height: 320svh; }
 .cinematic-stage { height: calc(100svh - var(--film-header)); min-height: 0; }
 .cinematic-topline { top: 22px; font-size: 6px; gap: 8px; }
 .cinematic-topline > span:last-child { font-size: 6px; }
 .cinematic-content { z-index: 3; }
 .cinematic-copy, .cinematic-copy[data-chapter='1'] { top: 14%; left: var(--film-gutter); right: auto; width: calc(100% - 2 * var(--film-gutter)); transform: none; }
 .cinematic-kicker { margin-bottom: 14px; font-size: 7px; letter-spacing: .1em; }
 .cinematic-kicker::before { width: 17px; }
 .home-page .hero-cinematic #hero-title, .home-page .hero-cinematic .cinematic-title { margin-bottom: 13px; font-size: clamp(49px, 12.8vw, 76px); line-height: .98; letter-spacing: -.05em; }
 html[lang='zh-CN'] .home-page .hero-cinematic #hero-title,
 html[lang='zh-CN'] .home-page .hero-cinematic .cinematic-title { font-size: clamp(39px, 10.6vw, 60px); line-height: 1.2; letter-spacing: -.055em; }
 .cinematic-description, html[lang='zh-CN'] .cinematic-description { max-width: 280px; margin-bottom: 12px; font-size: 10px; line-height: 1.85; }
 .cinematic-link { min-height: 30px; padding-block: 4px; font-size: 9px; gap: 22px; }
 .cinematic-link > span:last-child { font-size: 17px; }
 .cinematic-model-wrap { top: auto; bottom: 0; left: 0; width: 100%; height: 73%; transform: translate3d(0, 0, 0); }
 .cinematic-word { left: 8%; bottom: 16%; font-size: 61vw; color: #8c957a10; }
 .cinematic-footer { bottom: 22px; gap: 10px; }
 .cinematic-scroll { max-width: 120px; gap: 9px; font-size: 6px; letter-spacing: .07em; }
 .cinematic-scroll-line { height: 25px; }
 .cinematic-chapters { gap: 10px; }
 .cinematic-chapter { gap: 4px; font-size: 7px; }
 .cinematic-chapter > span:last-child { display: none; }
 .cinematic-chapter i { width: 17px; }
 .cinematic-counter { font-size: 7px; gap: 5px; }
 .cinematic-counter > span { font-size: 23px; }
 .cinematic-loading { padding-top: 80px; font-size: 9px; }
}
@media (max-width: 360px) {
 .hero-cinematic { --film-gutter: 21px; }
 .cinematic-topline > span:last-child { display: none; }
 .cinematic-footer { gap: 8px; }
 .cinematic-scroll { max-width: 95px; }
 .cinematic-chapters { gap: 7px; }
}
@media (max-height: 700px) and (min-width: 761px) {
 .cinematic-stage { min-height: 480px; }
 .cinematic-topline { top: 22px; }
 .cinematic-footer { bottom: 20px; }
 .cinematic-kicker { margin-bottom: 17px; }
 .cinematic-description { margin-bottom: 20px; }
 .home-page .hero-cinematic #hero-title, .home-page .hero-cinematic .cinematic-title { font-size: clamp(62px, 7.1vw, 106px); margin-bottom: 20px; }
 html[lang='zh-CN'] .home-page .hero-cinematic #hero-title,
 html[lang='zh-CN'] .home-page .hero-cinematic .cinematic-title { font-size: clamp(42px, 4.8vw, 70px); }
}
.hero-cinematic[data-reduced-motion='true'] { height: auto; }
.hero-cinematic[data-reduced-motion='true'] .cinematic-stage { position: relative; top: 0; }
.hero-cinematic[data-reduced-motion='true'] .cinematic-progress,
.hero-cinematic[data-reduced-motion='true'] .cinematic-chapters,
.hero-cinematic[data-reduced-motion='true'] .cinematic-counter,
.hero-cinematic[data-reduced-motion='true'] .cinematic-scroll { display: none; }
.hero-cinematic[data-reduced-motion='true'] .cinematic-copy:not([data-chapter='0']) { display: none; }
.hero-cinematic[data-reduced-motion='true'] .cinematic-model-wrap,
.hero-cinematic[data-reduced-motion='true'] .cinematic-word { transform: none; will-change: auto; }
.hero-cinematic[data-reduced-motion='true'] .cinematic-copy[data-chapter='0'] { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
 .hero-cinematic { height: auto; }
 .cinematic-stage { position: relative; top: 0; }
 .cinematic-scroll-line::after { animation: none; }
 .cinematic-model-wrap, .cinematic-word, .cinematic-copy { will-change: auto; }
 .cinematic-link, .cinematic-chapter { transition: none; }
}