/* GLN hero 03 — words in the fins. A graphite fin wall; the only colour is the light on it. */

:root {
  --ink: #050506;
  --wall: #0b0c0d;
  --fg: #edebe7;
  --mut: #a9a8a4;
  --line: rgba(237, 235, 231, .22);

  --display: "Unbounded", "Unbounded Fallback", "Arial Black", sans-serif;
  --text: "Inter Tight", "Inter Tight Fallback", Arial, sans-serif;

  /* 1px up to 1440, growing to 1.5px at 2560 */
  --u: clamp(1px, calc(1px + (100vw - 1440px) * .000446), 1.5px);
  --gx: clamp(20px, 4.4vw, calc(64 * var(--u)));
  --ease: cubic-bezier(.2, .7, .1, 1);
  --vh: 100vh;
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

/* 16px up to 1440, 21px at 2560 */
html { font-size: clamp(16px, calc(16px + (100vw - 1440px) * .004464), 21px); background: var(--ink); -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--ink); color: var(--fg);
  font: 400 1rem/1.55 var(--text); letter-spacing: .003em;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, picture, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, figure { margin: 0; }
h1, h2 { font-weight: inherit; }
::selection { background: var(--fg); color: var(--ink); }

.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 12px 18px; background: var(--fg); color: var(--ink); text-decoration: none; transform: translateY(-160%); transition: transform .2s; }
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; border-radius: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: max(48px, calc(50 * var(--u))); padding: 0 calc(26 * var(--u));
  border: 1px solid transparent; border-radius: 0;
  font: 500 .9375rem/1 var(--text); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn--solid { background: var(--fg); color: var(--ink); }
.btn--solid:hover { background: #fff; }
.btn--line { border-color: rgba(237, 235, 231, .5); color: var(--fg); }
.btn--line:hover { border-color: var(--fg); background: rgba(237, 235, 231, .08); }
.btn--small { min-height: 44px; padding: 0 calc(20 * var(--u)); font-size: .875rem; }

/* ---------- header ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: calc(80 * var(--u));
  display: flex; align-items: center; gap: calc(40 * var(--u)); padding: 0 var(--gx);
  transition: background-color .45s ease;
}
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); opacity: 0; transition: opacity .45s ease; }
.top.is-solid { background: rgba(5, 5, 6, .92); }
.top.is-solid::after { opacity: 1; }
.wordmark { font: 600 calc(19 * var(--u))/1 var(--display); letter-spacing: .06em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.top__nav { margin-left: auto; }
.top__nav ul { list-style: none; display: flex; gap: calc(34 * var(--u)); margin: 0; padding: 0; }
.top__nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--mut); text-decoration: none; transition: color .3s; }
.top__nav a:hover { color: var(--fg); }
@media (max-width: 699px) {
  .top { height: 64px; }
  .top__nav { display: none; }
  .top .btn { margin-left: auto; }
}

/* ---------- hero ---------- */
.hero { position: relative; height: var(--vh); min-height: 560px; overflow: hidden; background: var(--ink); }
.hero__stage { position: absolute; inset: 0; }
.poster, .poster img, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster img { object-fit: cover; object-position: 50% 50%; }
.hero__canvas { opacity: 0; transition: opacity .38s linear; }
.live .hero__canvas { opacity: 1; }
.hero__band-light { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
/* functional scrim so the headline band keeps its contrast whatever the light does */
.hero__stage::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 44%;
  background: linear-gradient(to top, rgba(5, 5, 6, .82) 0%, rgba(5, 5, 6, .55) 38%, rgba(5, 5, 6, 0) 100%);
  pointer-events: none;
}
.hero__stage::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 18%; z-index: 1;
  background: linear-gradient(to bottom, rgba(5, 5, 6, .55), rgba(5, 5, 6, 0));
  pointer-events: none;
}

.hero__copy {
  position: absolute; left: var(--gx); right: var(--gx); bottom: calc(44 * var(--u)); z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(430 * var(--u))); gap: calc(28 * var(--u)) calc(64 * var(--u)); align-items: end;
}
.h1 { font: 300 clamp(28px, 7.4vw, calc(46 * var(--u)))/1.08 var(--display); letter-spacing: -.012em; color: var(--fg); }
.h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.h1 .ln > span { display: inline-block; }
.hero__sub { color: var(--mut); font-size: 1.0625rem; line-height: 1.55; max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(24 * var(--u)); }
@media (max-width: 899px) {
  .hero__copy { grid-template-columns: minmax(0, 1fr); bottom: 28px; gap: 16px; }
}
@media (max-width: 420px) {
  .hero__actions .btn { flex: 1 1 auto; }
}

/* intro: the headline rises in once the fonts are ready (inline class .go), the side copy follows */
.js.motion .h1 .ln > span, .js.motion .hero__side { opacity: 0; }
.js.motion.go .h1 .ln > span { animation: rise .95s var(--ease) both; }
.js.motion.go .h1 .ln:nth-child(2) > span { animation-delay: .08s; }
.js.motion.go .hero__side { animation: fade .8s ease-out .32s both; }
@keyframes rise { from { opacity: 0; transform: translateY(105%); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* The light sweep on the posters. It starts at ~0.5 s whatever happens, and the live canvas joins it at the same
   position when it is ready (main.js uses the same curve), so there is no jump. Only transforms and opacity are
   animated, so it keeps running while the main thread is busy setting up WebGL.
   Geometry: the masked window is 2 W wide with a 0.3 W soft right edge; the edge centre travels from -0.2 W to 1.2 W,
   the poster inside counter-moves so it stays put, and the light band rides on the edge. */
.sweep {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%; opacity: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0 85%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0 85%, transparent 100%);
}
.sweep .poster { right: auto; width: 50%; }
.hero__band-light { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(255, 178, 122, 0), rgba(255, 178, 122, .15) 50%, rgba(255, 178, 122, 0)); mix-blend-mode: screen; }
.css-sweep .sweep { opacity: 1; animation: sweep-window 1.1s cubic-bezier(.45, 0, .3, 1) var(--sweep-delay, 0s) both; }
.css-sweep .sweep .poster { animation: sweep-poster 1.1s cubic-bezier(.45, 0, .3, 1) var(--sweep-delay, 0s) both; }
.css-sweep .hero__band-light { animation: sweep-band 1.1s cubic-bezier(.45, 0, .3, 1) var(--sweep-delay, 0s) both, band-fade 1.1s linear var(--sweep-delay, 0s) both; }
@keyframes sweep-window { from { transform: translateX(-102.5%); } to { transform: translateX(-32.5%); } }
@keyframes sweep-poster { from { transform: translateX(205%); } to { transform: translateX(65%); } }
@keyframes sweep-band { from { transform: translateX(-116.7%); } to { transform: translateX(350%); } }
@keyframes band-fade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* reduced motion / no WebGL / no libraries: composed stills, warm in the hero and cool stacked under it */
.rm .sweep { opacity: 1; animation: none; width: 100%; -webkit-mask-image: none; mask-image: none; }
.rm .sweep .poster { width: 100%; animation: none; }
.rm .hero__canvas, .no-gl .hero__canvas { display: none; }
.still-cool { display: none; }
.rm .still-cool, .no-gl .still-cool, .no-libs .still-cool { display: block; position: relative; height: var(--vh); min-height: 560px; overflow: hidden; }
.still-cool img { width: 100%; height: 100%; object-fit: cover; }
.no-libs .h1 .ln > span, .no-libs .hero__side { opacity: 1; animation: none; }

/* poster render mode (?still=…): only the wall */
.still .top, .still .hero__copy, .still .hero__stage::after, .still .hero__stage::before, .still .poster, .still main > :not(.hero-pin), .still .foot { display: none !important; }
.still .hero__canvas { opacity: 1; transition: none; }

/* ---------- more ---------- */
.more {
  position: relative; background: var(--ink);
  padding: calc(150 * var(--u)) var(--gx) calc(120 * var(--u));
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(28 * var(--u)) calc(64 * var(--u));
  border-top: 1px solid var(--line);
}
.more__title { font: 300 clamp(26px, 5.6vw, calc(34 * var(--u)))/1.15 var(--display); letter-spacing: -.01em; }
.more__text { display: grid; gap: 1.1em; max-width: 44ch; font-size: 1.125rem; color: var(--mut); }
.more__text p:first-child { color: var(--fg); }
.back { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(20 * var(--u)); color: var(--fg); text-underline-offset: .3em; text-decoration-thickness: 1px; }
@media (max-width: 899px) {
  .more { grid-template-columns: minmax(0, 1fr); padding-top: 96px; padding-bottom: 80px; }
  .back { grid-column: 1; }
}

.foot { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: baseline; padding: calc(32 * var(--u)) var(--gx) calc(40 * var(--u)); border-top: 1px solid var(--line); color: var(--mut); font-size: .9375rem; }
.foot__mark { font: 600 1rem/1 var(--display); letter-spacing: .06em; color: var(--fg); }

/* ---------- language switch ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lang { display: inline-flex; align-items: center; flex: none; margin-right: calc(-16 * var(--u)); }
.lang__b { position: relative; min-height: 44px; min-width: 44px; padding: 0 6px; background: none; border: 0; cursor: pointer; font: 500 .875rem/1 var(--text); letter-spacing: .02em; color: var(--mut); transition: color .3s; }
.lang__b--zh { font-family: "GLN Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; letter-spacing: 0; }
.lang__b::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 10px; height: 1px; background: var(--fg); transform: scaleX(0); transition: transform .45s var(--ease); }
.lang__b:hover, .lang__b[aria-pressed="true"] { color: var(--fg); }
.lang__b[aria-pressed="true"]::after { transform: scaleX(1); }
.lang__sep { color: var(--line); font-size: .875rem; }
@media (max-width: 699px) {
  .top { gap: 10px; }
  .lang { margin-left: auto; margin-right: 0; }
  .top .btn { margin-left: 0; }
}
@media (max-width: 374px) { .lang__b { min-width: 40px; padding: 0 3px; } .top .btn { padding: 0 12px; } }

/* ---------- Chinese ---------- */
:root { --zh: "GLN Sans SC", "GLN Sans SC Fallback", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", sans-serif; }
html:lang(zh) { --text: "Inter Tight", var(--zh); }
html:lang(zh) body { line-height: 1.8; letter-spacing: 0; line-break: strict; }
html:lang(zh) .btn, html:lang(zh) .top__nav a { letter-spacing: 0; }
html:lang(zh) .h1 { font-family: var(--zh); font-weight: 700; font-size: clamp(26px, 6.6vw, calc(42 * var(--u))); line-height: 1.32; letter-spacing: .02em; }
html:lang(zh) .h1 .ln { padding-bottom: .12em; margin-bottom: -.12em; }
html:lang(zh) .hero__sub { line-height: 1.8; max-width: 26em; text-wrap: pretty; }
html:lang(zh) .more__title { font-family: var(--zh); font-weight: 700; font-size: clamp(24px, 5vw, calc(32 * var(--u))); line-height: 1.35; text-wrap: balance; }
html:lang(zh) .more__text { max-width: 30em; font-size: 1.0625rem; line-height: 1.85; }
html:lang(zh) .more__text p { text-wrap: pretty; }