/* finesse · register=brand · A=obsidian+ivory-light · B=light-bold-CJK/condensed-captions · C=immersive-asymmetric
 * D=perspective-light+atmospheric-score · E=light-reveals-depth · SOUL=9 SPECTACLE=8 DENSITY=3 */
:root { --bg:#090c10; /* Obsidian (#090c10): main surface */ --surface:#10151a; --ink:#e6edf2; --muted:#aeb9c2; --accent:#d1e1e9; /* Platinum (#d1e1e9): text and interactive light */ --dim:#8595a1; --line:rgba(190,211,231,.17); --soft:rgba(166,198,227,.035); --light:rgba(166,198,227,.12); --header-bg:rgba(9,12,16,.94); --veil:rgba(9,12,16,.90); --veil-soft:rgba(9,12,16,.45); }
:root { --caption-font:"Bahnschrift","DIN Alternate","Arial Narrow",sans-serif; --editorial-font:"Microsoft YaHei UI","PingFang SC","Segoe UI",sans-serif; }
.site-header { background:linear-gradient(var(--header-bg),transparent); border-color:transparent; }
.hero { background:var(--bg); min-height:820px; height:100svh; max-height:1200px; isolation:isolate; }
.hero-topline { position:relative; z-index:3; }
.hero-copy { margin:clamp(115px,18vh,230px) 0 0 6.6vw; max-width:87%; text-align:left; }
.hero h1 { font-family:var(--editorial-font); font-weight:300; font-size:clamp(48px,6.4vw,106px); letter-spacing:-.035em; }
.hero h1 span { color:var(--ink); font-weight:600; }
.hero-translation { margin-top:23px; font-family:var(--caption-font); font-size:7px; font-weight:400; letter-spacing:.22em; }
.hero-intro { margin-top:48px; max-width:540px; font-size:14px; letter-spacing:.035em; }
.hero-intro span { display:block; margin:6px 0 0; }
.hero-intro { font-family:var(--editorial-font);font-weight:400;line-height:1.9; }
.desktop-nav a,.enter-link { letter-spacing:.07em;font-weight:500; }
.stage-caption>span:first-child,.hero-topline>span:last-child,.hero-bottom>span:last-child { font-family:var(--caption-font);letter-spacing:.19em; }
.hero-actions { justify-content:flex-start; margin-top:31px; gap:18px; }
.hero-actions .button { min-height:52px; padding-inline:25px; border-radius:0; }
.hero-actions .button-secondary { background:var(--header-bg); border-color:transparent; }
.hero-actions .button-secondary:hover { border-color:var(--line); }
.hero .button-primary span { margin-left:19px; }
.hero-bottom { position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:4; border-color:var(--line); }
.title-field { position:relative; isolation:isolate; }
#title-particles { position:absolute; inset:-85px; width:calc(100% + 170px); height:calc(100% + 170px); pointer-events:none; opacity:0; }
.title-field.particles-active #title-particles { opacity:1; }
.title-field.particles-active h1,.title-field.particles-active h1 span { color:transparent; }
.title-field ::selection { color:var(--bg); background:var(--accent); }
.frame-stage { position:absolute; inset:0; height:100%; margin:0; z-index:0; }
.frame-stage::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--bg) 2%,var(--veil) 24%,var(--veil-soft) 46%,transparent 70%),linear-gradient(0deg,var(--bg),transparent 22%); }
.frame-stage canvas { pointer-events:none; }
.frame-still { inset:0; transform:none; background:url('./assets/cinema-poster.png') center/cover no-repeat; }
.frame-still i { display:none; }
.frame-still i,.frame-still i:nth-child(2),.frame-still i:nth-child(3) { border-radius:50%; transform:scaleY(.6); box-shadow:0 -6px 32px var(--light); }
.frame-still i:nth-child(2) { transform:scaleY(.65) rotate(8deg); }
.frame-still i:nth-child(3) { transform:scaleY(.7) rotate(-8deg); }
.art-controls { position:absolute; bottom:89px; left:auto; right:185px; transform:none; display:flex; gap:26px; z-index:3; }
.art-controls button { font-family:var(--font); font-size:10px; color:var(--muted); min-height:44px; padding:0 4px; }
.art-controls button:hover { color:var(--ink); }
.stage-caption { bottom:110px; left:6.6vw; z-index:3; gap:12px; }
.stage-caption>span:first-child { font-size:8px; }
.stage-caption>span:last-child { font-size:11px; }
.motion-toggle { bottom:89px; right:51px; z-index:3; }
.sound-switch,.gather-light { position:absolute;z-index:4;bottom:155px;min-height:44px;font:11px var(--font);color:var(--muted);padding:0 12px;white-space:nowrap; }
.sound-switch { right:39px; }
.gather-light { right:175px;touch-action:none; }
.gather-light[aria-pressed=true],.sound-switch[aria-pressed=true] { color:var(--ink); }
.gather-light:disabled { opacity:.4; }
#origin { padding:0; border:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; position:fixed; inset:0; color:var(--ink); background:var(--bg); overflow:clip; }
#origin::backdrop { background:var(--bg); }
#origin-canvas { width:100%; height:100%; display:block; }
.origin-top,.origin-bottom { position:absolute; left:5vw; right:5vw; display:flex; justify-content:space-between; align-items:center; font:9px var(--mono); letter-spacing:.22em; color:var(--muted); }
.origin-top { top:25px; }
.origin-top button { min-height:44px; letter-spacing:.04em; font:12px var(--font); }
.origin-top button:focus:not(:focus-visible) { outline:none; }
.origin-top button { padding:0 12px; }
.origin-bottom { bottom:35px; }
#origin-caption { font:13px var(--font); letter-spacing:.3em; }
.origin-playing { overflow-y:hidden; }
.origin-arrival .hero-copy { animation:arrival 1.5s cubic-bezier(.18,.65,.22,1) both; }
.origin-arrival .site-header { animation:arrival 1.7s cubic-bezier(.18,.65,.22,1) both; }
@keyframes arrival { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.manifesto { position:relative; padding-block:155px; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:110px; }
.manifesto h2 { font-family:var(--editorial-font);font-size:clamp(45px,5.5vw,80px); line-height:1.28; font-weight:600;letter-spacing:-.025em; }
.manifesto .small-label { display:none; }
.manifesto-body>p { font-size:16px; line-height:2.3; }
.signature { margin-top:40px; }
.platform-head h2,.group-heading h2 { font-weight:500;letter-spacing:-.025em; }
.flow-workbench { border-radius:0; background:transparent; }
.flow-input { background:var(--soft); }
.flow-track { padding-block:25px; }
.flow-track button { transition:color .3s,background .3s; }
.flow-track button[aria-selected=true] { background:var(--soft); }
.flow-detail { min-height:220px; }
.production { background:linear-gradient(150deg,var(--surface),var(--bg) 80%); }
.production-heading { text-align:left; }
.production-heading h2 { font-size:clamp(40px,5.3vw,76px); font-weight:600; }
.production-heading .small-label { display:none; }
.production-layout { margin-top:62px; }
.companion { padding-block:160px; }
.companion-demo { border-radius:0; background:radial-gradient(ellipse at 50% 20%,var(--light),transparent 65%); }
.company-list>div { padding-block:30px; }
.closing { padding-top:150px; }
.closing h2 { font-size:clamp(52px,8vw,112px); font-weight:300; }
.score-lines { display:block; width:100%; height:100px; margin-top:34px; overflow:visible; }
.score-lines path { fill:none; stroke:var(--accent); stroke-width:.55; opacity:.32; }
.score-lines path:nth-child(2n) { opacity:.13; }
.company-list>div { position:relative; transition:background .3s; }
.company-list>div::after { content:''; position:absolute; bottom:0; left:0; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.company-list>div:hover::after { transform:scaleX(1); }
.companion-orb { box-shadow:0 0 60px var(--soft); }
.companion-demo:hover .companion-orb { border-color:var(--accent); }
.production-art { --art-x:0deg; --art-y:0deg; }
.production-art .film-plane { transition:transform .7s var(--ease); }
.production-art:hover .plane-front { transform:perspective(800px) rotateX(var(--art-x)) rotateY(var(--art-y)) rotate(-5deg); }
.closing-line { transform-origin:center; }
@supports (animation-timeline:view()) {
 .score-lines { animation:score-drift linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; }
 @keyframes score-drift { from { transform:translateY(15px) scaleX(.88); opacity:.3; } to { transform:translateY(-15px) scaleX(1); opacity:1; } }
}
@media(max-width:780px) {
 .hero { min-height:820px; height:100svh; max-height:none; }
 .hero-copy { margin:88px 6vw 0; max-width:88%; }
 .hero h1 { font-size:8.7vw; letter-spacing:-.065em; }
 .hero-translation { font-size:6px; margin-top:17px; }
 .hero-intro { margin-top:28px; font-size:12px; }
 .hero-actions { margin-top:23px; gap:8px; }
 .hero-actions .button { padding-inline:15px; min-height:48px; font-size:11px; gap:11px; }
 .hero .button-primary span { margin-left:0; }
 .frame-stage { height:100%; }
 .frame-stage::after { background:linear-gradient(180deg,var(--bg) 5%,var(--veil) 33%,transparent 64%,var(--bg) 95%); }
 .art-controls { left:20px; right:auto; bottom:76px; gap:20px; }
 .stage-caption { left:24px; bottom:133px; }
 .stage-caption>span:last-child { display:none; }
 .motion-toggle { right:16px; bottom:76px; }
 .sound-switch { bottom:185px;right:16px; }
 .gather-light { bottom:185px;left:12px;right:auto; }
 .hero-bottom { min-height:65px; }
 .manifesto { gap:45px; padding-block:95px; grid-template-columns:minmax(0,1fr); }
 .manifesto h2 { font-size:44px; }
 .manifesto-body>p { font-size:14px; }
 .companion { padding-block:95px; }
 .closing { padding-top:95px; }
 .origin-bottom>span:last-child { font-size:6px; letter-spacing:.08em; }
}
/* Short landscape screens retain a first-screen primary action. */
@media(min-width:600px) and (max-height:500px) {
 .hero { min-height:540px; height:100svh; max-height:none; padding-top:88px; }
 .hero-copy { margin:24px 0 0 6.6vw; }
 .hero h1 { font-size:clamp(38px,6vw,60px); }
 .hero-translation { margin-top:10px; }
 .hero-intro { margin-top:18px; font-size:12px; }
 .hero-actions { margin-top:16px; }
 .hero-actions .button { min-height:44px; }
 .stage-caption { bottom:116px; }
 .stage-caption>span:last-child { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .origin-arrival .hero-copy,.origin-arrival .site-header,.score-lines { animation:none!important; }
 .title-field.particles-active h1 { color:var(--ink); }
 .title-field.particles-active h1 span { color:var(--accent); }
 #title-particles { display:none; }
 .production-art:hover .plane-front { transform:none; }
 *,*::before,*::after { transition:none!important; }
}