/*
  System: Cinematic Game Gallery
  Type: Space Grotesk + Noto Sans TC; oversized display, compact mono metadata
  Color: midnight #070b19, electric blue #517cff, cyan #25d9ed, signal lime #c5f86e
  Layout: broad editorial columns, luminous grid surfaces, sharp diagonal light paths
  Rhythm: number-led sections and large breathing room between content clusters
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');

:root { --ink:#122046; --blue:#2650af; --cyan:#28c2d8; --pale:#f2f7fa; --mist:#dce7ed; --line:rgba(18,32,70,.16); --mono:'DM Mono',monospace; --sans:'Noto Sans TC','Space Grotesk',sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:var(--sans); font-size:16px; line-height:1.65; }
a { color:inherit; text-decoration:none; }
.site-header { align-items:center; display:flex; justify-content:space-between; height:84px; padding:0 clamp(22px,5vw,80px); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:9px; color:var(--blue); font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:700; letter-spacing:.08em; }
.brand-mark { display:block; width:34px; height:34px; overflow:hidden; position:relative; }
.brand-mark img { width:50px; max-width:none; height:auto; position:absolute; inset:-1px auto auto -1px; }
nav { display:flex; gap:clamp(15px,2.5vw,36px); font-size:14px; font-weight:600; }
nav a { transition:color .2s ease; } nav a:hover { color:var(--cyan); }
.hero { min-height:calc(100vh - 84px); display:grid; grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr); overflow:hidden; }
.hero-copy { align-self:center; padding:clamp(70px,11vw,180px) clamp(22px,5vw,80px); position:relative; z-index:1; }
.eyebrow,.section-kicker,.game-info p { font:500 11px/1.4 var(--mono); letter-spacing:.08em; }
.eyebrow { color:var(--blue); margin:0 0 25px; }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.055em; line-height:1.1; }
h1 { font-family:'Space Grotesk',var(--sans); font-size:clamp(56px,7.8vw,132px); font-weight:700; margin-bottom:27px; } h1 em,h2 em { color:var(--blue); font-style:normal; }
.hero-intro { font-size:clamp(17px,1.35vw,21px); max-width:34em; margin:0 0 36px; }
.button { background:var(--blue); color:white; display:inline-flex; gap:22px; align-items:center; padding:14px 18px 14px 21px; font-size:15px; font-weight:700; transition:background .2s,transform .2s; } .button:hover { background:#173783; transform:translateY(-2px); } .button span { font-size:20px; line-height:1; }
.hero-art { min-height:590px; position:relative; background:var(--pale); overflow:hidden; isolation:isolate; }
.hero-art p { position:absolute; bottom:8%; left:12%; z-index:3; margin:0; font:600 clamp(42px,5vw,80px)/.87 'Space Grotesk',sans-serif; letter-spacing:-.08em; color:var(--ink); opacity:.94; }
.orbit { position:absolute; border:1px solid rgba(38,80,175,.4); border-radius:50%; transform:rotate(-34deg); }
.orbit-one { width:105%; height:52%; top:18%; left:-18%; }.orbit-two { width:105%; height:52%; top:44%; left:19%; }
.slash { width:200%; height:18%; background:linear-gradient(90deg,var(--cyan),var(--blue)); position:absolute; transform:rotate(-47deg); border:9px solid white; z-index:2; }.slash-one { top:20%; left:-41%; }.slash-two { top:52%; left:-18%; opacity:.92; }
.section { padding:clamp(76px,10vw,156px) clamp(22px,5vw,80px); }.section-kicker { color:var(--blue); margin-bottom:26px; }
.split-heading { display:grid; grid-template-columns:1.15fr .85fr; gap:9vw; }.split-heading h2,.section-head h2,.capability h2,.contact h2 { font-size:clamp(37px,5vw,76px); margin:0; }.split-heading p { font-size:18px; margin-bottom:1.4em; }.split-heading p:last-child { margin-bottom:0; }
.work { background:var(--ink); color:white; }.work .section-kicker { color:var(--cyan); }.section-head { display:flex; justify-content:space-between; gap:40px; align-items:end; margin-bottom:54px; }.section-head > p { color:#cad5e0; max-width:320px; margin:0; }
.game-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.game-card { height:clamp(300px,34vw,510px); min-height:300px; padding:20px; position:relative; overflow:hidden; color:var(--ink); display:flex; justify-content:space-between; flex-direction:column; }.horse { background:#d9e7e5; }.triple { background:#eece5a; }.eternal { background:#cdd7f3; }.worlds { background:#b9d5ca; }.game-number { font:500 12px var(--mono); margin:0; z-index:2; }.game-info { position:relative; z-index:2; }.game-info p { margin-bottom:9px; }.game-info h3 { font-family:'Space Grotesk',var(--sans); font-size:clamp(30px,3.7vw,58px); margin:0 0 10px; }.game-info h3 span { font-family:var(--sans); font-size:.76em; }.game-info > span { font-size:14px; font-weight:600; }
.game-shape { position:absolute; pointer-events:none; }.shape-track { width:72%; height:68%; right:-9%; top:5%; border:clamp(12px,2vw,25px) solid #4e826f; border-left-color:transparent; border-radius:50%; transform:rotate(-32deg); opacity:.85; }.shape-chain { right:10%; top:17%; width:56%; height:43%; transform:rotate(-32deg); display:flex; gap:3px; }.shape-chain i { flex:1; background:#ec5742; border:6px solid var(--ink); transform:skewY(-30deg); }.shape-chain i:nth-child(2) { transform:translateY(-26%) skewY(-30deg); background:#ec7654; }.shape-chain i:nth-child(3) { transform:translateY(-52%) skewY(-30deg); background:#f1a056; }.shape-eternal { width:75%; height:75%; right:-13%; top:-17%; border-radius:50%; border:clamp(28px,4vw,65px) solid #5975cf; border-left-color:#f6f9ff; transform:rotate(32deg); }.shape-worlds { width:62%; aspect-ratio:1; right:7%; top:10%; border:clamp(20px,3.3vw,50px) solid #347e64; border-radius:50% 50% 45% 55%; box-shadow:inset 0 0 0 10px #b9d5ca; }
.portfolio-note { margin:20px 0 0; color:#b7c5d2; font-size:13px; }
.capability { background:var(--pale); }.capability > h2 { margin-bottom:64px; }.capability-list { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.capability-list > div { padding:26px 26px 0 0; margin-right:25px; }.capability-list > div + div { border-left:1px solid var(--line); padding-left:26px; }.capability-list span { color:var(--blue); font:500 11px var(--mono); }.capability-list h3 { font-size:27px; margin:24px 0 14px; }.capability-list p { font-size:15px; margin:0; max-width:20em; }
.contact { background:var(--cyan); min-height:520px; display:flex; flex-direction:column; justify-content:center; }.contact .section-kicker { color:var(--ink); }.contact h2 { margin-bottom:38px; }.contact h2 em { color:white; }.mail-link { border-bottom:2px solid var(--ink); display:inline-flex; align-self:flex-start; align-items:center; gap:48px; padding-bottom:7px; font:600 clamp(20px,3vw,42px) 'Space Grotesk',var(--sans); letter-spacing:-.04em; }.mail-link span { transition:transform .2s; }.mail-link:hover span { transform:translate(4px,-4px); }
footer { background:var(--ink); color:#c4d1e0; padding:34px clamp(22px,5vw,80px); display:flex; align-items:center; justify-content:space-between; gap:26px; font:400 11px var(--mono); letter-spacing:.02em; }footer img { width:79px; height:68px; object-fit:cover; object-position:top; } footer div { display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:flex-end; }footer a { color:white; }
@media (max-width:760px) { .site-header { height:70px; }.brand-mark { width:29px;height:29px; }.brand-mark img { width:43px; } nav { gap:16px; font-size:13px; }.hero { min-height:auto; grid-template-columns:1fr; }.hero-copy { padding-top:80px; padding-bottom:72px; }.hero-art { min-height:440px; }.split-heading,.section-head { grid-template-columns:1fr; display:grid; }.section-head { gap:20px; }.game-grid,.capability-list { grid-template-columns:1fr; }.game-card { height:370px; }.capability-list > div { padding:25px 0; margin:0; }.capability-list > div + div { border-left:0; border-top:1px solid var(--line); padding-left:0; }.contact { min-height:420px; } footer { align-items:flex-start; flex-direction:column; } footer div { justify-content:flex-start; gap:15px; } }
@media (max-width:420px) { nav a:nth-child(1) { display:none; } h1 { font-size:52px; }.game-card { height:330px; }.hero-art p { font-size:45px; } }

/* Direction A — cinematic game gallery */
:root { --ink:#e8efff; --blue:#6388ff; --cyan:#27d7ed; --pale:#0b1022; --mist:#1d2b4a; --line:rgba(193,215,255,.18); }
body { background:#070b19; color:var(--ink); }
body::before { content:''; pointer-events:none; position:fixed; inset:0; z-index:-2; opacity:.23; background-image:linear-gradient(rgba(154,186,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(154,186,255,.13) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 72%); }
.site-header { position:relative; z-index:10; background:rgba(7,11,25,.88); border-bottom-color:rgba(157,185,255,.15); backdrop-filter:blur(16px); }
.brand { color:white; }.brand-mark { filter:drop-shadow(0 0 8px rgba(39,215,237,.42)); } nav a { color:#cbd9ff; } nav a:hover { color:var(--cyan); text-shadow:0 0 14px rgba(39,215,237,.75); }
.hero { position:relative; background:radial-gradient(70% 100% at 6% 45%,rgba(49,76,208,.34),transparent 70%),#070b19; }
.hero-copy { padding-bottom:clamp(90px,13vw,220px); }.eyebrow { color:var(--cyan); text-shadow:0 0 18px rgba(39,215,237,.8); }.hero h1 { color:#f6f8ff; text-shadow:0 4px 50px rgba(74,105,255,.35); }.hero h1 em { color:var(--cyan); }.hero-intro { color:#cbd7f0; }.button { border:1px solid rgba(178,227,255,.65); background:linear-gradient(110deg,#4267df,#2d45a4); box-shadow:0 14px 35px rgba(44,81,230,.32),inset 0 1px 0 rgba(255,255,255,.35); }.button:hover { background:linear-gradient(110deg,#5b8dff,#2d45a4); box-shadow:0 16px 42px rgba(39,215,237,.32); }
.hero-art { background:radial-gradient(circle at 35% 30%,rgba(48,219,240,.42),transparent 19%),radial-gradient(circle at 70% 77%,rgba(78,102,255,.5),transparent 29%),linear-gradient(140deg,#111c3c 0%,#080c1c 60%,#101a42 100%); }
.hero-art::before { content:''; position:absolute; inset:0; background:linear-gradient(rgba(112,173,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(112,173,255,.13) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(135deg,black,transparent 75%); }.hero-art::after { content:''; position:absolute; width:140%; height:1px; left:-20%; top:49%; background:#87effe; box-shadow:0 0 14px #6ef1ff,0 0 36px #2cb3ff; transform:rotate(-44deg); opacity:.7; }.hero-art p { color:white; text-shadow:0 0 26px rgba(39,215,237,.65); }.orbit { border-color:rgba(118,225,255,.63); box-shadow:0 0 18px rgba(58,180,255,.24); }.slash { background:linear-gradient(90deg,#18d3e8,#3f70ff); border-color:rgba(7,11,25,.85); box-shadow:0 0 28px rgba(34,206,244,.45); }
.about { background:radial-gradient(circle at 83% 52%,rgba(24,98,182,.18),transparent 28%),linear-gradient(180deg,#070b19,#0c132a); isolation:isolate; overflow:hidden; position:relative; }.about::before { aspect-ratio:1; background:repeating-linear-gradient(0deg,rgba(67,210,242,.13) 0 1px,transparent 1px 42px),repeating-linear-gradient(90deg,rgba(67,210,242,.13) 0 1px,transparent 1px 42px); border:1px solid rgba(80,218,244,.43); border-radius:50%; box-shadow:0 0 45px rgba(35,152,255,.2),inset 0 0 55px rgba(35,152,255,.13); content:''; height:min(54vw,740px); position:absolute; right:-17vw; top:50%; transform:translateY(-50%); width:min(54vw,740px); z-index:0; }.about::after { background:radial-gradient(circle,rgba(98,233,255,.9) 0 1px,transparent 1.8px) 0 0 / 74px 74px; content:''; height:100%; mask-image:linear-gradient(90deg,transparent 10%,black 68%,transparent); opacity:.4; position:absolute; right:0; top:0; width:58%; z-index:0; }.about > * { position:relative; z-index:1; }.section-kicker { color:var(--cyan); }.split-heading h2,.section-head h2,.capability h2,.contact h2 { color:#f5f8ff; }.split-heading h2 { max-width:10ch; }.split-heading p { color:#b8c6e6; }
.work { background:linear-gradient(145deg,#101a3f,#070b19 65%); border-top:1px solid rgba(145,183,255,.18); }.work::before { content:'SELECTED WORK'; display:block; position:absolute; font:600 15vw/.8 'Space Grotesk',sans-serif; letter-spacing:-.09em; color:rgba(135,163,255,.035); left:2vw; margin-top:8vw; pointer-events:none; }.work { position:relative; overflow:hidden; }.work > * { position:relative; z-index:1; }.section-head > p,.portfolio-note { color:#aebedd; }
.game-grid { gap:1px; background:rgba(134,177,255,.25); border:1px solid rgba(134,177,255,.25); }.game-card { background:#0d1530; color:#f8fbff; transition:transform .3s ease,box-shadow .3s ease; }.game-card:hover { z-index:3; transform:translateY(-9px); box-shadow:0 25px 55px rgba(0,0,0,.5),0 0 0 1px rgba(86,225,255,.45); }.horse { background:radial-gradient(circle at 75% 18%,rgba(78,232,204,.24),transparent 34%),linear-gradient(150deg,#0b292d,#0d1530 68%); }.triple { background:radial-gradient(circle at 75% 18%,rgba(255,212,91,.25),transparent 33%),linear-gradient(150deg,#261d2d,#0d1530 68%); }.eternal { background:radial-gradient(circle at 75% 18%,rgba(115,148,255,.43),transparent 32%),linear-gradient(150deg,#151a52,#0d1530 68%); }.worlds { background:radial-gradient(circle at 75% 18%,rgba(145,255,161,.24),transparent 34%),linear-gradient(150deg,#0e3028,#0d1530 68%); }.game-number,.game-info p { color:#9fcef8; }.game-info > span { color:#d3def5; }.shape-track { border-color:#4ed9c4; border-left-color:transparent; filter:drop-shadow(0 0 18px rgba(78,217,196,.4)); }.shape-chain i { border-color:#ffcf72; box-shadow:0 0 20px rgba(247,145,92,.32); }.shape-eternal { border-color:#849dff; border-left-color:#293b96; box-shadow:0 0 30px rgba(109,136,255,.56); }.shape-worlds { border-color:#65e2a9; box-shadow:inset 0 0 0 10px #123b33,0 0 30px rgba(101,226,169,.38); }
.capability { background:linear-gradient(180deg,#0c132a,#070b19); border-top:1px solid rgba(150,188,255,.16); }.capability-list { border-top-color:var(--line); }.capability-list > div + div { border-left-color:var(--line); }.capability-list h3 { color:#eef4ff; }.capability-list p { color:#aebddd; }.capability-list span { color:var(--cyan); }
.contact { background:radial-gradient(circle at 80% 15%,rgba(109,136,255,.55),transparent 35%),linear-gradient(130deg,#101b4c,#0c1640 60%,#0b1431); border-top:1px solid rgba(118,180,255,.32); position:relative; overflow:hidden; }.contact::after { content:''; position:absolute; width:58vw; height:58vw; min-width:450px; min-height:450px; border:1px solid rgba(91,227,255,.45); border-radius:50%; right:-20vw; bottom:-38vw; box-shadow:0 0 45px rgba(45,183,255,.25),inset 0 0 45px rgba(45,183,255,.15); }.contact > * { position:relative; z-index:1; }.contact .section-kicker { color:var(--cyan); }.contact h2 em { color:var(--cyan); }.mail-link { border-bottom-color:var(--cyan); color:white; text-shadow:0 0 18px rgba(39,215,237,.35); }.mail-link:hover { color:var(--cyan); }
footer { background:#050812; border-top:1px solid rgba(156,187,255,.16); color:#8193b8; } footer a { color:#d2e5ff; } footer img { filter:drop-shadow(0 0 10px rgba(39,215,237,.3)); }
@media (max-width:760px) { .capability-list > div + div { border-top-color:var(--line); }.section-head > p { color:#b2c1e1; }.work::before { font-size:20vw; } }

/* Game-first homepage and full, uncropped company logo */
.site-header { height:86px; }
.brand.brand-logo { display:block; width:166px; height:auto; line-height:0; }
.brand-logo img { display:block; width:100%; height:auto; max-height:none; filter:drop-shadow(0 0 9px rgba(55,208,244,.35)); }
nav { align-items:center; }
.language-toggle { align-items:center; background:transparent; border:1px solid rgba(199,222,255,.56); color:#fff; cursor:pointer; display:inline-flex; font:500 12px var(--mono); height:31px; justify-content:center; letter-spacing:.06em; min-width:39px; padding:0 9px; transition:background .2s,color .2s; }
.language-toggle:hover { background:var(--cyan); border-color:var(--cyan); color:#07101c; }
.game-carousel { height:calc(100svh - 86px); min-height:560px; overflow:hidden; position:relative; background:#070b19; }
.banner-slide { inset:0; opacity:0; overflow:hidden; position:absolute; transition:opacity .75s ease; }
.banner-slide.is-active { opacity:1; z-index:1; }
.banner-slide img { height:100%; object-fit:cover; object-position:center; position:absolute; width:100%; }
.banner-gradient { background:linear-gradient(90deg,rgba(4,8,23,.94) 0%,rgba(5,9,25,.57) 39%,rgba(5,9,23,.02) 72%),linear-gradient(0deg,rgba(4,8,20,.64),transparent 45%); inset:0; position:absolute; }
.banner-slide:first-child img { object-position:center 34%; }.banner-slide:nth-child(2) img { object-position:center; }.banner-slide:nth-child(3) img { object-position:center 40%; }
.banner-copy { bottom:clamp(82px,10vh,150px); left:clamp(22px,7vw,128px); max-width:min(64vw,850px); position:absolute; z-index:2; }
.banner-copy p { color:var(--cyan); font:500 12px var(--mono); letter-spacing:.14em; margin:0 0 16px; text-shadow:0 0 16px rgba(39,215,237,.8); }
.banner-copy h1 { color:#fff; font-family:'Space Grotesk',var(--sans); font-size:clamp(58px,8vw,136px); line-height:.86; margin:0; text-shadow:0 10px 42px rgba(0,0,0,.42); }
.banner-copy h1 span { color:var(--cyan); }
.carousel-control { align-items:end; bottom:30px; display:flex; justify-content:space-between; left:clamp(22px,7vw,128px); position:absolute; right:clamp(22px,7vw,128px); z-index:4; }
.carousel-control p { color:#dce7ff; font:500 11px var(--mono); letter-spacing:.1em; margin:0; }.carousel-control b { color:var(--cyan); font-size:18px; margin-left:10px; }
.slide-buttons { display:flex; gap:9px; }.slide-buttons button { background:rgba(255,255,255,.32); border:0; cursor:pointer; height:3px; padding:0; transition:background .3s,width .3s; width:35px; }.slide-buttons button.is-active { background:var(--cyan); box-shadow:0 0 12px rgba(39,215,237,.8); width:78px; }
.kaiser { background:radial-gradient(circle at 76% 13%,rgba(123,191,255,.38),transparent 35%),linear-gradient(150deg,#152353,#0d1530 68%); }.shape-kaiser { border:clamp(13px,2vw,28px) solid #6ebdfa; border-bottom-color:transparent; border-radius:50%; box-shadow:0 0 30px rgba(82,170,255,.5); height:65%; right:-8%; top:2%; transform:rotate(24deg); width:70%; }
footer img { height:auto; object-fit:contain; object-position:initial; width:78px; }
@media (max-width:760px) {
  .site-header { height:70px; }.brand.brand-logo { width:126px; } nav { gap:13px; } nav a { font-size:12px; }.language-toggle { height:28px; min-width:33px; padding:0 7px; }
  .game-carousel { height:calc(100svh - 70px); min-height:570px; }.banner-gradient { background:linear-gradient(0deg,rgba(4,8,23,.96) 0%,rgba(4,8,23,.25) 77%),linear-gradient(90deg,rgba(4,8,23,.5),transparent 72%); }.banner-slide:first-child img { object-position:59% 20%; }.banner-slide:nth-child(2) img { object-position:57% center; }.banner-slide:nth-child(3) img { object-position:62% center; }.banner-copy { bottom:98px; left:24px; max-width:90vw; }.banner-copy h1 { font-size:clamp(53px,15vw,82px); }.carousel-control { bottom:29px; left:24px; right:24px; }.slide-buttons button { width:24px; }.slide-buttons button.is-active { width:58px; }
}
@media (max-width:430px) { nav a:nth-child(1) { display:none; }.brand.brand-logo { width:114px; } }

/* Full-bleed game key art — never constrained by the content column on wide screens. */
.game-carousel { aspect-ratio:auto; height:calc(100svh - 86px); min-height:560px; max-height:none; width:100vw; max-width:none; }
.banner-slide img { object-fit:cover; object-position:center; }
.banner-slide:first-child img,.banner-slide:nth-child(2) img,.banner-slide:nth-child(3) img { object-position:center; }
.game-grid { background:transparent; border:0; display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
.game-card { border:1px solid rgba(167,208,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); height:clamp(310px,29vw,430px); isolation:isolate; }
.horse { background:#163342; }.eternal { background:#274d83; }.triple { background:#4a294b; }.worlds { background:#273864; }.kaiser { background:#26344e; }
.card-art { filter:saturate(1.06) contrast(1.05); height:100%; inset:0; object-fit:cover; object-position:var(--art-position,50% 25%); position:absolute; transform:scale(var(--art-scale,1.9)); transform-origin:var(--art-origin,50% 25%); transition:transform .45s ease; width:100%; z-index:0; }
.horse .card-art { --art-scale:2.25; --art-position:50% 20%; --art-origin:50% 20%; }.eternal .card-art { --art-scale:2.7; --art-position:50% 18%; --art-origin:50% 18%; }.triple .card-art { --art-scale:1.85; --art-position:50% 35%; --art-origin:50% 35%; }.worlds .card-art { --art-scale:2; --art-position:51% 20%; --art-origin:51% 20%; }.kaiser .card-art { --art-scale:3.1; --art-position:32% 33%; --art-origin:32% 33%; }
.game-card::after { background:linear-gradient(180deg,rgba(7,12,30,.1) 4%,rgba(5,10,28,.06) 48%,rgba(4,8,19,.91) 100%); content:''; inset:0; pointer-events:none; position:absolute; z-index:1; }
.game-card:hover .card-art { transform:scale(calc(var(--art-scale) + .08)); }
.game-card .game-info h3 { font-size:clamp(27px,2.6vw,45px); line-height:.96; }
.game-card .game-info h3 span { display:block; font-family:var(--sans); font-size:.62em; letter-spacing:-.04em; margin-top:7px; }
.game-card .game-info > span { display:none; }
.game-card .game-number { text-shadow:0 1px 12px #000; }
.game-card .game-number,.game-card .game-info { z-index:2; }
.js-enabled.motion-enabled .scroll-reveal,.js-enabled.motion-enabled .scroll-item { opacity:0; transform:translateY(72px) scale(.985); transition:opacity .95s cubic-bezier(.2,.75,.25,1),transform .95s cubic-bezier(.2,.75,.25,1); }.js-enabled.motion-enabled .scroll-reveal.is-visible,.js-enabled.motion-enabled .scroll-item.is-visible { opacity:1; transform:translateY(0) scale(1); }.js-enabled.motion-enabled .scroll-item { transition-delay:var(--reveal-delay,0ms); }.js-enabled.motion-enabled .scroll-reveal.is-visible > * { animation:section-content-in .8s cubic-bezier(.2,.75,.25,1) both; } .js-enabled.motion-enabled .scroll-reveal.is-visible > :nth-child(2) { animation-delay:.14s; } .js-enabled.motion-enabled .scroll-reveal.is-visible > :nth-child(3) { animation-delay:.28s; } @keyframes section-content-in { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@supports (animation-timeline:view()) { .js-enabled.motion-enabled .scroll-reveal { animation:session-scroll-in linear both; animation-range:entry 0% entry 70%; animation-timeline:view(); opacity:1; transform:none; }.js-enabled.motion-enabled .scroll-item { animation:item-scroll-in linear both; animation-range:entry 0% entry 58%; animation-timeline:view(); opacity:1; transform:none; transition:none; }.js-enabled.motion-enabled .scroll-reveal.is-visible > * { animation:none; } @keyframes session-scroll-in { from { clip-path:inset(0 0 13% 0); opacity:.1; transform:translateY(100px) scale(.975); } to { clip-path:inset(0); opacity:1; transform:translateY(0) scale(1); } } @keyframes item-scroll-in { from { opacity:0; transform:translateY(86px) scale(.94); } to { opacity:1; transform:translateY(0) scale(1); } } }
@media (max-width:1000px) { .game-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .game-carousel { aspect-ratio:auto; height:calc(100svh - 70px); min-height:570px; }.game-grid { grid-template-columns:1fr; }.game-card { height:390px; }.card-art { object-position:center; } }

/* Refined type system: compact display, relaxed reading sizes */
:root { --sans:'Noto Sans TC','IBM Plex Sans',sans-serif; }
.site-header { position:sticky; top:0; }
body { font-size:15px; line-height:1.72; }
h1,h2,h3 { font-family:'IBM Plex Sans','Noto Sans TC',sans-serif; font-weight:700; letter-spacing:-.042em; }
.banner-copy h1 { font-size:clamp(52px,7.1vw,118px); line-height:.9; }
.split-heading h2,.section-head h2,.capability h2,.contact h2 { font-size:clamp(34px,4.45vw,68px); line-height:1.13; }
.split-heading p { font-size:17px; line-height:1.78; }.section-head > p { font-size:16px; line-height:1.72; }
.game-card .game-info h3 { font-size:clamp(24px,2.25vw,37px); line-height:1.02; }.game-card .game-info h3 span { font-size:.66em; }
.game-info p,.section-kicker { font-size:10px; letter-spacing:.11em; }

/* Supplied game artwork: transparent characters sit on purpose-built colour fields. */
.horse .card-art { --art-scale:1; --art-position:50% 45%; --art-origin:50% 45%; }
.eternal { background:#070a12; }.eternal .card-art { --art-scale:1; --art-position:50% center; --art-origin:50% center; }
.triple { background:radial-gradient(circle at 73% 22%,#8d6ea9 0,transparent 33%),#3d254d; }.worlds { background:radial-gradient(circle at 72% 21%,#a47a3f 0,transparent 31%),#283862; }
.triple .card-art,.worlds .card-art { --art-scale:1; --art-position:center; --art-origin:center; filter:drop-shadow(0 22px 22px rgba(0,0,0,.32)); object-fit:contain; }
.kaiser .card-art { --art-scale:1; --art-position:17% center; --art-origin:17% center; }

/* Portrait close-up and supplied replacement game visuals. */
.eternal .card-art { --art-scale:1; --art-position:center; --art-origin:center; }
.kaiser .card-art { --art-scale:1.65; --art-position:17% 48%; --art-origin:17% 48%; }
.worlds .card-art { --art-scale:1; --art-position:center; --art-origin:center; object-fit:cover; }
.triple .card-art { --art-scale:1; --art-position:center; --art-origin:center; object-fit:cover; }