/* A continuous navy atmosphere with restrained, locally blended motion. */
body.cinematic{background:#040b15;isolation:isolate}
body.cinematic:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 75% 25%,#0b2d4655,transparent 62%),radial-gradient(ellipse at 15% 80%,#173c542b,transparent 55%)}
.cinematic #vision,.cinematic #governance,.cinematic #founder,.cinematic #resources,.cinematic .token-section,.cinematic .roadmap-section,.cinematic .insights-section,.cinematic .questions,.cinematic .brand-film{background:transparent;border-block:0;box-shadow:none}
.cinematic .identity-strip{background:transparent;border:0;box-shadow:none}
.cinematic .identity-strip:before{display:none}
.cinematic .capital-visual{background:radial-gradient(ellipse,#10395830,transparent 70%);border-color:transparent;box-shadow:none}
.cinematic .hero-visual{perspective:1600px;transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(1.025)}
.cinematic .hero-scene{transform-origin:73% 62%;animation:tgb-push-forward 18s ease-in-out infinite alternate;animation-play-state:paused;will-change:transform}
.cinematic .hero.scene-live .hero-scene{animation-play-state:running}
.hero-visual:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(112deg,transparent 36%,#c6e9ff00 44%,#d6eeff26 48%,#fff2c321 49%,transparent 54%);mix-blend-mode:screen;mask-image:radial-gradient(ellipse at 77% 60%,#000,transparent 60%);background-size:250% 100%;animation:tgb-specular 12s ease-in-out infinite;animation-play-state:paused}
.hero.scene-live .hero-visual:before{animation-play-state:running}
@keyframes tgb-push-forward{0%{transform:scale(1) translate3d(0,0,0)}100%{transform:scale(1.045) translate3d(-.4%,-.3%,0)}}
@keyframes tgb-specular{0%,20%{background-position:120% 0;opacity:0}35%{opacity:.6}65%{opacity:.3}80%,100%{background-position:-30% 0;opacity:0}}
/* Physical bevelled letters with a readable, selectable text fallback. */
.cinematic .visual-number{width:100%;height:clamp(74px,28cqw,132px);margin-top:2px;align-items:center;filter:none}
.metal-typography{display:block;position:absolute;inset:-10% -5%;pointer-events:none}
.metal-typography canvas{display:block;width:100%;height:100%;filter:drop-shadow(0 7px 4px #0009)}
.has-metal-type>.numeral,.has-metal-type>.unit,.has-metal-type>.film-type-fallback{opacity:0}
.cinematic .article-visual .visual-sub{margin-top:-5px}
.film-cover{background:#040e1b}
.film-live-art{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1e436869,transparent 50%),linear-gradient(130deg,#061423,#030914 64%,#0a2134);pointer-events:none}
.film-live-art:after{content:'';position:absolute;inset:55% -15% -30%;background-image:linear-gradient(#73abd81f 1px,transparent 1px),linear-gradient(90deg,#73abd81f 1px,transparent 1px);background-size:52px 52px;transform:perspective(600px) rotateX(56deg);mask-image:linear-gradient(transparent,#0009)}
.film-metal-title{display:block;position:absolute;top:27%;left:24%;width:52%;height:43%;z-index:2;text-align:center}
.film-type-fallback{display:block;color:#dcecf8;font:bold clamp(70px,12vw,180px)/1.2 var(--sans);text-shadow:1px 2px #466586,3px 4px #1f3b57,7px 9px #092343,12px 16px 20px #000}
.film-live-logo{position:absolute;left:calc(50% - 28px);top:10%;width:56px;height:56px;filter:drop-shadow(0 0 20px #bd994744)}
.film-live-motto{position:absolute;left:20%;right:20%;bottom:14%;text-align:center;font-size:clamp(10px,1.5vw,21px);letter-spacing:.12em;line-height:1.55;color:#acbbc9;z-index:2}
.film-orbit{position:absolute;left:22%;top:2%;width:56%;aspect-ratio:1;border:1px solid #779bba36;border-radius:50%;transform:rotateX(56deg) rotate(-20deg);box-shadow:0 0 25px #3482b315,inset 0 0 25px #3482b315}
.film-satellite{position:absolute;padding:24px 20px;border:1px solid #87badb2b;border-radius:8px;color:#93aec2;font:9px monospace;letter-spacing:.1em;background:linear-gradient(130deg,#1d3d5c77,#071324a3);box-shadow:0 18px 24px #0005;animation:satellite-drift 9s ease-in-out infinite alternate}
.satellite-one{top:24%;left:5%;transform:perspective(500px) rotateY(18deg) rotate(-7deg)}
.satellite-two{top:24%;right:4%;animation-delay:-3s;transform:perspective(500px) rotateY(-18deg) rotate(7deg)}
.satellite-three{bottom:11%;right:5%;animation-delay:-6s;transform:perspective(500px) rotateY(-18deg) rotate(-5deg)}
@keyframes satellite-drift{to{translate:0 -10px}}
.film-play-content{position:relative;z-index:4}
/* Fine light trails follow the development line without implying completion. */
.roadmap article:before{content:'';position:absolute;top:-2px;left:0;width:80px;height:3px;border-radius:100%;background:linear-gradient(90deg,transparent,#78c9f7aa 65%,#fff0bd);box-shadow:3px 0 13px #9ad9ff77;opacity:0}
.roadmap.is-live article:before{animation:roadmap-light 4.8s linear infinite}
.roadmap.is-live article:nth-child(2):before{animation-delay:1.2s}.roadmap.is-live article:nth-child(3):before{animation-delay:2.4s}.roadmap.is-live article:nth-child(4):before{animation-delay:3.6s}
.roadmap-node{z-index:2}
.roadmap.is-live .roadmap-node{animation:roadmap-node 4.8s ease-in-out infinite}
.roadmap article:nth-child(2) .roadmap-node{animation-delay:1.2s}.roadmap article:nth-child(3) .roadmap-node{animation-delay:2.4s}.roadmap article:nth-child(4) .roadmap-node{animation-delay:3.6s}
@keyframes roadmap-light{0%{left:0;opacity:0}15%{opacity:.8}80%{opacity:.8}100%{left:calc(100% - 80px);opacity:0}}
@keyframes roadmap-node{0%,100%{box-shadow:0 0 10px #3da8ed30}45%{box-shadow:0 0 22px #7ccafc65,inset 0 0 10px #d8c18c22;border-color:#ead6a4}}
/* Editorial paper, a gradual hinge, a fold highlight and a moving shadow. */
.cinematic .magazine-book{perspective:2400px;perspective-origin:40% 45%;transition:transform 1.2s cubic-bezier(.28,.04,.19,1),box-shadow 1.2s}
.cinematic .magazine-book.is-turning{transform:rotateY(2deg) rotateZ(-.25deg);box-shadow:0 35px 65px #0009,0 0 45px #308acc15}
.magazine-flip{border-right:2px solid #e9e2d0;box-shadow:18px 10px 35px #0008;transform-origin:left center}
.magazine-flip:after{background:linear-gradient(90deg,#02091670,transparent 12%,transparent 65%,#fff3dc44 84%,#02091666);background-size:150% 100%}
.is-turning .magazine-flip:after{animation:paper-sheen 1.25s ease-in-out both}
.magazine-page:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0007,transparent 16%);opacity:0;transition:opacity .4s}
.is-turning .magazine-page:after{opacity:1}
@keyframes paper-sheen{from{background-position:0 0}to{background-position:100% 0}}
.lang-switch{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:11px}
.lang-switch button{background:none;border:0;padding:8px 0;color:#7e95a8;font:inherit;cursor:pointer}
.lang-switch button[aria-pressed=true]{color:#e1c88f}
.lang-switch>span{color:#43566a}.lang-switch button:focus-visible{outline:1px solid #e1c88f;outline-offset:4px}
html[lang=zh-Hant] .cinematic h2{letter-spacing:-.025em;line-height:1.3}
html[lang=zh-Hant] .cinematic .hero h1{letter-spacing:-.025em;line-height:1.15}
.visuals-idle .hero-scene,.visuals-idle .hero-visual:before,.visuals-idle .film-satellite{animation-play-state:paused!important}
@media(max-width:800px){.header-actions{gap:22px}.lang-switch{font-size:12px}.film-satellite{padding:16px 12px;font-size:7px}.film-live-logo{width:38px;height:38px;left:calc(50% - 19px)}}
@media(max-width:580px){.header-actions{gap:18px}.lang-switch{gap:8px;font-size:11px}.film-satellite{padding:10px 7px;font-size:5px;letter-spacing:0}.satellite-one{left:3%}.satellite-two{right:3%}.film-live-logo{width:26px;height:26px;left:calc(50% - 13px);top:8%}.film-live-motto{font-size:8px;bottom:15%}.film-metal-title{top:22%;height:47%;left:22%;width:56%}.film-type-fallback{font-size:68px}.film-orbit{top:0}.satellite-three{bottom:8%}.roadmap article:before{width:3px;height:65px;top:0;left:-2px;background:linear-gradient(180deg,transparent,#78c9f7aa 65%,#fff0bd)}.roadmap.is-live article:before{animation-name:roadmap-light-vertical}.roadmap article:last-child:before{display:none}@keyframes roadmap-light-vertical{0%{top:0;left:-2px;opacity:0}15%{opacity:.8}80%{opacity:.8}100%{top:calc(100% - 65px);left:-2px;opacity:0}}}
@media(prefers-reduced-motion:reduce){.hero-scene,.hero-visual:before,.film-satellite,.roadmap.is-live article:before,.roadmap.is-live .roadmap-node{animation:none!important}.cinematic .magazine-book{transition:none}}

/* Particle accents stay behind the cinematic art, away from reading surfaces. */
.hero-flow{opacity:.22;mask-image:linear-gradient(90deg,transparent 35%,#0005 62%,#0009),linear-gradient(0deg,#000,transparent 48%);mask-composite:intersect}
.finale-flow{opacity:.28;mask-image:linear-gradient(180deg,transparent 22%,#0005 50%,#000 72%,transparent 94%)}
@media(max-width:580px){.hero-flow{opacity:.16}.finale-flow{opacity:.2}}
@media(max-width:580px){.finale-sculpture,.finale-aura{width:175%;left:-75%;height:100%;object-fit:contain;object-position:right center}.finale-sculpture{mask-image:linear-gradient(180deg,transparent,#000 24%,#000 78%,transparent)}.finale-aura{opacity:.4}.finale-visual{top:330px;bottom:220px}}
/* Long chapter navigation is immediate; motion stays in the artwork. */
html{scroll-behavior:auto}
@media(max-width:580px){.finale-sculpture,.finale-aura{height:auto;top:50%;bottom:auto;transform:translateY(-50%);object-fit:initial}.finale-sculpture{mask-image:linear-gradient(180deg,transparent,#000 20%,#000 78%,transparent)}.finale-aura{transform:translateY(-50%) scale(1.08);mask-image:linear-gradient(180deg,transparent,#0008 25%,#0008 75%,transparent)}}

/* A quieter closing image: darkness and diffusion grow toward the bottom. */
.site-finale .finale-sculpture{opacity:.66}
.site-finale .finale-aura{opacity:.18}
.finale-visual:before,.finale-visual:after{content:'';position:absolute;inset:0;pointer-events:none}
.finale-visual:before{z-index:1;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);mask-image:linear-gradient(180deg,transparent 24%,#0003 42%,#000a 65%,#000 86%)}
.finale-visual:after{z-index:2;background:linear-gradient(180deg,transparent 10%,#02050b18 26%,#02050b66 44%,#02050bc7 64%,#02050bf5 82%,#02050b 100%)}
.site-finale .finale-flow{opacity:.12;mask-image:linear-gradient(180deg,transparent 16%,#0006 37%,#0004 55%,transparent 78%)}
.site-finale:after{background:radial-gradient(ellipse at 68% 8%,#1673b31a,transparent 47%)}
/* Reserve separate space for the full orbit silhouette and its caption. */
.orbital-scene{inset:0 10px}
.orbital-scene canvas{transform:translateY(-12.7%)}
.capital-visual figcaption{inset:auto 18px 21px;line-height:1.6;max-width:100%}
.orbit-label-one{top:104px}.orbit-label-two{top:215px}.orbit-label-three{bottom:92px}
.faq-reveal details{opacity:0;transform:translate3d(-32px,0,0);transition:opacity .65s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
.faq-reveal details.is-revealed,.faq-reveal details:focus-within{opacity:1;transform:translate3d(0,0,0)}
.faq-reveal details:focus-within{transition-delay:0ms}
@media(max-width:580px){.orbital-scene{inset:0 4px}.capital-visual figcaption{bottom:19px;font-size:6px}.orbit-label-one{top:86px}.orbit-label-two{top:178px}.orbit-label-three{bottom:73px}.faq-reveal details{transform:translate3d(-22px,0,0)}.faq-reveal details.is-revealed,.faq-reveal details:focus-within{transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.faq-reveal details{opacity:1;transform:none;transition:none}}

/* Let the shared page atmosphere continue into a shorter closing scene. */
.cinematic footer.site-finale{background:transparent;margin-top:0;min-height:0}
.site-finale:before{background:linear-gradient(180deg,transparent 0%,#040b1533 28%,#040b1577 62%,#040b15 100%)}
.site-finale:after{mask-image:linear-gradient(180deg,transparent,#000 28%)}
.finale-visual{mask-image:linear-gradient(180deg,transparent,#000 24%)}
.finale-content{padding-top:110px;padding-bottom:80px;min-height:560px}
.cinematic #questions{padding-bottom:56px}
.finale-horizon{padding-block:18px 24px}
.finale-footer{padding-top:26px;padding-bottom:24px}
@media(min-width:1650px){.finale-content{padding-top:130px;min-height:620px}}
@media(max-width:1150px){.finale-content{padding-top:100px;min-height:540px}}
@media(max-width:900px){.finale-content{padding-top:76px;padding-bottom:260px;min-height:630px}.finale-visual{top:180px;bottom:100px}}
@media(max-width:580px){.finale-content{padding-top:60px;padding-bottom:235px;min-height:590px}.finale-visual{top:240px;bottom:180px}.cinematic #questions{padding-bottom:36px}.finale-horizon{padding-block:14px 18px}.finale-footer{padding-top:22px;padding-bottom:20px}}

/* Shared convergence for strategy, principles, documents and perspectives. */
.cinematic #governance,.cinematic #vision,.cinematic #resources,.cinematic #insights{overflow-x:clip}
.governance-grid,.value-cycle,.document-pair,.insight-grid{perspective:1100px}
.cinematic .converge-reveal > :is(article,button):nth-child(n){opacity:0;transform:translate3d(0,32px,-90px) scale(.94);transition:opacity .75s ease,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:160ms}
.cinematic .converge-reveal > :is(article,button):first-of-type{transform:translate3d(-64px,16px,-25px) rotateY(8deg);transition-delay:0ms}
.cinematic .converge-reveal > :is(article,button):last-of-type{transform:translate3d(64px,16px,-25px) rotateY(-8deg);transition-delay:80ms}
.cinematic .converge-reveal > :is(article,button).is-revealed{opacity:1;transform:translate3d(0,0,0) rotateY(0) scale(1)}
@media(max-width:580px){.cinematic .converge-reveal > :is(article,button):first-of-type{transform:translate3d(-28px,12px,0)}.cinematic .converge-reveal > :is(article,button):last-of-type{transform:translate3d(28px,12px,0)}.cinematic .converge-reveal > :is(article,button).is-revealed{transform:translate3d(0,0,0) scale(1)}}
.cinematic .converge-reveal > :is(article,button):focus-within{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.cinematic .converge-reveal > :is(article,button):nth-child(n){opacity:1;transform:none;transition:none}}
