/* =========================================================
   Gis Innov — 3D Hong Kong street
   ========================================================= */
@font-face { font-family: "Sequel Heavy"; src: url("../fonts/SequelSans-HeavyDisp.woff2") format("woff2"), url("../fonts/SequelSans-HeavyDisp.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Sequel Bold";  src: url("../fonts/SequelSans-BoldHead.woff2") format("woff2"), url("../fonts/SequelSans-BoldHead.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Sequel Roman"; src: url("../fonts/SequelSans-RomanHead.woff2") format("woff2"), url("../fonts/SequelSans-RomanHead.woff") format("woff"); font-display: swap; }

:root {
   --bg: #07060d;
   --ink: #f4effc;
   --ink-2: rgba(244, 239, 252, .72);
   --ink-3: rgba(244, 239, 252, .48);
   --line: rgba(255, 255, 255, .1);
   --glass: rgba(12, 9, 24, .58);
   --pink: #ff2d78;
   --cyan: #2de2ff;
   --amber: #ffb347;
   --f-display: "Sequel Heavy", "Arial Black", system-ui, sans-serif;
   --f-head: "Sequel Bold", system-ui, sans-serif;
   --f-body: "Sequel Roman", system-ui, -apple-system, "Segoe UI", sans-serif;
   --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
   --f-zh: "PingFang HK", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", "Hiragino Sans", sans-serif;
   --gut: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
   margin: 0;
   background: var(--bg);
   color: var(--ink);
   font: 16px/1.6 var(--f-body);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* ---------- 3D canvas + haze ---------- */
#city {
   position: fixed; inset: 0;
   width: 100vw; height: 100vh; height: 100lvh;
   display: block; z-index: 0;
}
.haze {
   position: fixed; inset: 0; z-index: 1; pointer-events: none;
   background:
      radial-gradient(120% 70% at 50% 110%, rgba(7, 6, 13, .85), transparent 60%),
      linear-gradient(180deg, rgba(7, 6, 13, .55), transparent 22%, transparent 70%, rgba(7, 6, 13, .55));
}
html.no-webgl body {
   background:
      radial-gradient(80% 60% at 50% 100%, #3a1245 0%, transparent 70%),
      linear-gradient(#05060f, #1a0f2e 70%, #2a1238);
   background-attachment: fixed;
}

/* ---------- Loader ---------- */
.loader {
   position: fixed; inset: 0; z-index: 100;
   display: grid; place-items: center;
   background: var(--bg);
   transition: opacity .8s ease, visibility .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader-sign {
   display: flex; align-items: center; gap: 14px;
   padding: 14px 22px;
   border: 2px solid var(--pink);
   border-radius: 10px;
   box-shadow: 0 0 18px var(--pink), inset 0 0 18px rgba(255, 45, 120, .4);
   animation: flick 1.6s steps(1) infinite;
}
.loader-sign span { font: 700 28px var(--f-zh); color: var(--pink); text-shadow: 0 0 12px var(--pink); }
.loader-sign b { font: 22px var(--f-display); letter-spacing: .04em; }
@keyframes flick { 0%, 100% { opacity: 1 } 8% { opacity: .3 } 12% { opacity: 1 } 46% { opacity: .55 } 50% { opacity: 1 } }

/* ---------- Header ---------- */
.nav {
   position: fixed; top: 0; left: 0; right: 0; z-index: 20;
   display: flex; align-items: center; justify-content: space-between; gap: 16px;
   padding: 14px var(--gut);
   background: linear-gradient(180deg, rgba(7, 6, 13, .75), rgba(7, 6, 13, 0));
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-zh {
   font: 700 15px/1 var(--f-zh); color: var(--pink);
   border: 1.5px solid var(--pink); border-radius: 5px; padding: 5px 5px 4px;
   text-shadow: 0 0 8px var(--pink); box-shadow: 0 0 10px rgba(255, 45, 120, .5);
}
.logo-txt { font: 18px/1 var(--f-display); letter-spacing: .03em; white-space: nowrap; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { text-decoration: none; font: 14px var(--f-head); color: var(--ink-2); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: rgba(0,0,0,.25); }
.lang a { text-decoration: none; font: 12px var(--f-head); padding: 5px 10px; border-radius: 999px; color: var(--ink-3); }
.lang a[aria-current] { background: var(--ink); color: var(--bg); }

/* ---------- Buttons ---------- */
.btn {
   display: inline-flex; align-items: center; gap: 10px;
   padding: 15px 26px; border-radius: 999px;
   font: 15px/1 var(--f-head); text-decoration: none; white-space: nowrap;
   transition: transform .2s, box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-neon {
   background: var(--pink); color: #fff;
   box-shadow: 0 0 0 1px rgba(255,255,255,.15) inset, 0 8px 30px rgba(255, 45, 120, .45);
}
.btn-neon:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 44px rgba(255, 45, 120, .7); }
.btn-ghost { border: 1px solid rgba(255,255,255,.28); background: rgba(10, 8, 20, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--cyan); box-shadow: 0 0 24px rgba(45, 226, 255, .35); }

/* ---------- HUD ---------- */
.hud {
   position: fixed; left: var(--gut); bottom: 22px; z-index: 15;
   font: 11px/1.5 var(--f-mono); letter-spacing: .08em; color: var(--ink-2);
   pointer-events: none; width: 210px;
   text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.hud { transition: opacity .4s; }
.hud.is-hidden { opacity: 0; }
.hud-road { color: var(--amber); }
.hud-district { font: 15px/1.3 var(--f-head); color: var(--ink); letter-spacing: .04em; margin: 2px 0 8px; }
.hud-district #hud-zh { font-family: var(--f-zh); color: var(--cyan); margin-right: 4px; }
.hud-bar { height: 2px; background: rgba(255,255,255,.15); border-radius: 2px; overflow: hidden; }
.hud-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--cyan)); box-shadow: 0 0 8px var(--pink); }
.hud-coord { margin-top: 6px; color: var(--ink-3); }

/* ---------- Layout ---------- */
main { position: relative; z-index: 5; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.block { padding: 18vh 0; }

.kicker {
   display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
   font: 12px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan);
}
.kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3 } }
.h2 { font: clamp(34px, 5.4vw, 72px)/1.02 var(--f-display); letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance; }
.body { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink-2); max-width: 620px; margin: 0; }

/* ---------- Hero ---------- */
.hero {
   min-height: 100vh; min-height: 100svh;
   display: flex; align-items: flex-end;
   padding: 120px 0 15vh;
   position: relative;
}
.hero-title { font: clamp(58px, 13vw, 210px)/.9 var(--f-display); letter-spacing: -.01em; margin: 0 0 22px; }
.hero-zh {
   display: inline-block !important; margin-top: 14px;
   font: 700 clamp(22px, 3vw, 40px)/1 var(--f-zh); letter-spacing: .35em;
   color: var(--cyan); text-shadow: 0 0 10px var(--cyan), 0 0 26px rgba(45, 226, 255, .7);
   padding: 10px 6px 10px 18px; border: 2px solid var(--cyan); border-radius: 10px;
   box-shadow: 0 0 18px rgba(45, 226, 255, .45), inset 0 0 14px rgba(45, 226, 255, .25);
}
.hero-title span { display: block; }
.neon-text {
   color: #fff;
   text-shadow: 0 0 6px #fff, 0 0 18px var(--pink), 0 0 42px var(--pink), 0 0 80px rgba(255, 45, 120, .6);
   animation: neon 6s linear infinite;
}
@keyframes neon { 0%, 100% { opacity: 1 } 61% { opacity: 1 } 62% { opacity: .55 } 63% { opacity: 1 } 64% { opacity: .7 } 65% { opacity: 1 } }
.lead { font-size: clamp(17px, 1.7vw, 22px); color: var(--ink-2); max-width: 560px; margin: 0 0 34px; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.scroll-hint {
   position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
   display: flex; flex-direction: column; align-items: center; gap: 10px;
   font: 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.scroll-hint span { width: 1px; height: 42px; background: linear-gradient(var(--cyan), transparent); animation: drop 2s ease-in-out infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }

/* ---------- Interludes (city takes the stage) ---------- */
.interlude { min-height: 110vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 var(--gut); }
.interlude-text {
   font: clamp(40px, 8vw, 120px)/.95 var(--f-display); margin: 0;
   color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85);
   text-shadow: 0 0 40px rgba(45, 226, 255, .25);
}

/* ---------- Panels ---------- */
.panel, .card, .universe, .contact-inner, .section-head {
   background: var(--glass);
   border: 1px solid var(--line);
   backdrop-filter: blur(16px) saturate(140%);
   -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.section-head { border-radius: 22px; padding: clamp(24px, 4vw, 44px); margin-bottom: 22px; }
.studio { border-radius: 26px; padding: clamp(26px, 5vw, 64px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: end; }
.stats { display: grid; gap: 18px; }
.stat { display: flex; align-items: baseline; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.stat b { font: clamp(44px, 5vw, 72px)/1 var(--f-display); color: #fff; text-shadow: 0 0 24px rgba(255, 45, 120, .55); min-width: 2.2ch; }
.stat span { font: 13px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.chip {
   --c: #fff;
   display: inline-flex; align-items: center; gap: 7px;
   padding: 9px 14px; border-radius: 999px; cursor: pointer;
   font: 13px var(--f-head); color: var(--ink-2);
   background: rgba(10, 8, 20, .6); border: 1px solid var(--line);
   backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
   transition: all .2s;
}
.chip i { font: normal 700 13px var(--f-zh); color: var(--c); }
.chip small { font: 11px var(--f-mono); color: var(--ink-3); }
.chip:hover { color: var(--ink); border-color: var(--c); }
.chip.is-on { color: #fff; border-color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 25%, transparent); }

/* ---------- Cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.card {
   --c: var(--pink);
   position: relative; display: flex; flex-direction: column;
   border-radius: 18px; padding: 22px 22px 20px; min-height: 196px;
   text-decoration: none; overflow: hidden;
   transition: transform .25s, border-color .25s, box-shadow .25s;
}
.card::before {
   content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
   background: var(--c); box-shadow: 0 0 14px var(--c);
}
a.card:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 14px 40px color-mix(in srgb, var(--c) 30%, transparent); }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.card-cat { font: 11px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; gap: 7px; align-items: center; }
.card-cat i { font: normal 700 14px var(--f-zh); color: var(--c); text-shadow: 0 0 8px var(--c); }
.card-status { font: 11px var(--f-mono); letter-spacing: .08em; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; }
.card-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); }
.card-status.on { color: #8dffbf; }
.card-status.on::before { background: #3dff9a; box-shadow: 0 0 8px #3dff9a; }
.card-domain { font: clamp(21px, 2vw, 25px)/1.15 var(--f-display); margin: 0 0 10px; word-break: break-word; }
.card-desc { font-size: 14.5px; color: var(--ink-2); margin: 0 0 16px; }
.card-go { margin-top: auto; font: 13px var(--f-head); color: var(--c); }
.card.is-soon { opacity: .72; }
.card.is-hidden { display: none; }

/* ---------- Contact ---------- */
.contact { min-height: 115vh; display: flex; align-items: flex-end; padding-bottom: 6vh; }
.contact-inner { border-radius: 28px; padding: clamp(24px, 3.4vw, 44px); text-align: left; background: rgba(8, 6, 18, .5); max-width: 560px; margin: 0 0 0 auto; }
.contact-inner .body { margin: 0 0 22px; }
.contact .office { margin: 26px 0 0; }
.contact-title { font: clamp(34px, 5vw, 72px)/.98 var(--f-display); margin: 0 0 16px; }
.contact-mail {
   display: inline-block; word-break: break-all;
   font: clamp(20px, 2.6vw, 34px)/1.1 var(--f-display); text-decoration: none;
   color: #fff; padding-bottom: 6px;
   border-bottom: 2px solid var(--cyan);
   text-shadow: 0 0 20px rgba(45, 226, 255, .6);
   transition: color .2s, text-shadow .2s;
}
.contact-mail:hover { color: var(--cyan); text-shadow: 0 0 30px var(--cyan); }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 16; padding: 26px 0 30px; border-top: 1px solid var(--line); background: rgba(7, 6, 13, .78); }
.foot-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 13px var(--f-body); color: var(--ink-3); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
   .nav-links { display: none; }
   .studio { grid-template-columns: 1fr; }
   .universes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
   .nav .btn-sm { display: none; }
   .universes { grid-template-columns: 1fr 1fr; }
   .grid { grid-template-columns: 1fr; }
   .hud { display: none; }
   .card { min-height: 0; }
   .block { padding: 12vh 0; }
   .scroll-hint { display: none; }
   .hero { padding-bottom: 18vh; }
}
@media (prefers-reduced-motion: reduce) {
   html { scroll-behavior: auto; }
   .reveal { transition: none; opacity: 1; transform: none; }
   .neon-text, .loader-sign, .kicker .dot, .scroll-hint span { animation: none; }
}

/* hero readability */
.hero::before {
   content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
   background: linear-gradient(90deg, rgba(7, 6, 13, .62) 0%, rgba(7, 6, 13, .25) 45%, transparent 70%);
}
.hero .wrap { position: relative; }

/* office address */
.office {
   font-style: normal; margin: 30px auto 0; padding-top: 22px; max-width: 420px;
   border-top: 1px solid var(--line);
   font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
}
.office strong { color: var(--ink); font-family: var(--f-head); font-weight: normal; }
.office-k { display: block; margin-bottom: 6px; font: 11px var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--cyan); }
.office-tip { display: block; margin-top: 10px; font-size: 13px; color: var(--pink); text-shadow: 0 0 10px rgba(255, 45, 120, .6); }
.foot-addr { color: var(--ink-3); }
@media (max-width: 980px) { .foot-addr { order: 3; flex-basis: 100%; } }

/* ---------- Universes ---------- */
.universes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.universe {
   --c: var(--pink);
   position: relative; overflow: hidden; text-align: left; cursor: pointer;
   display: flex; flex-direction: column; gap: 4px;
   border-radius: 18px; padding: 20px; min-height: 170px; color: var(--ink);
   font: inherit; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.universe:hover, .universe:focus-visible { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 14px 40px color-mix(in srgb, var(--c) 30%, transparent); }
.universe-zh {
   position: absolute; right: 12px; top: 6px;
   font: 700 54px/1 var(--f-zh); color: var(--c); opacity: .9;
   text-shadow: 0 0 14px var(--c);
}
.universe-n { font: 40px/1 var(--f-display); color: #fff; }
.universe-name { font: 17px/1.25 var(--f-head); margin-top: 6px; }
.universe-doms { font: 12px/1.5 var(--f-mono); color: var(--ink-3); word-break: break-word; }
.universe-go { margin-top: auto; padding-top: 10px; font: 13px var(--f-head); color: var(--c); }
@media (max-width: 640px) { .universe { min-height: 150px; padding: 16px; } .universe-zh { font-size: 40px; } }
@media (max-width: 640px) {
   .hero::before { background: linear-gradient(180deg, rgba(7, 6, 13, .1) 15%, rgba(7, 6, 13, .78) 55%, rgba(7, 6, 13, .55) 100%); }
}

/* ---------- v5: storefront tooltip ---------- */
.store-tip {
   position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none;
   padding: 10px 14px; border-radius: 12px;
   background: rgba(8, 6, 18, .82); border: 1px solid rgba(255, 255, 255, .14);
   backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
   font: 15px var(--f-head); color: #fff; white-space: nowrap;
   opacity: 0; transition: opacity .15s;
   box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.store-tip.is-on { opacity: 1; }
.store-tip b { font-family: var(--f-zh); margin-right: 4px; }
.store-tip small { display: block; margin-top: 3px; font: 11px var(--f-mono); letter-spacing: .08em; color: var(--ink-3); }
body.on-store { cursor: pointer; }

/* v5: long domain names, hero clear of the HUD */
.card-domain { font-size: clamp(16px, 1.3vw, 20px); letter-spacing: -.01em; overflow-wrap: anywhere; word-break: normal; }
.hero { padding-bottom: 22vh; }
@media (max-height: 820px) and (min-width: 641px) { .hero-title { font-size: clamp(54px, 10.5vw, 170px); } .lead { margin-bottom: 26px; } }