/* ===== Signature intro (Jo) — shown before the language gateway ===== */
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on .language-gateway { opacity: 0; transform: scale(1.015); }
html.intro-fading .language-gateway,
html.intro-done .language-gateway { opacity: 1; transform: none; transition: opacity 1.2s cubic-bezier(.4,0,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1); }

.sig-intro {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  display: grid; place-items: center;
  color: #fbf5ea; font-family: "DM Sans", "Noto Sans HK", sans-serif;
  background:
    radial-gradient(62% 68% at 100% 100%, rgba(226,108,30,.95), rgba(226,108,30,0) 72%),
    radial-gradient(62% 68% at 0% 0%, rgba(226,108,30,.95), rgba(226,108,30,0) 72%),
    linear-gradient(135deg, #b4561d 0%, #123f8c 28%, #0e3478 55%, #3a3f6e 80%, #c95f1c 100%);
  transition: opacity 1.2s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.2s;
}
html.intro-fading .sig-intro { opacity: 0; visibility: hidden; }
html.intro-done .sig-intro { display: none; }

/* Paper grain */
.sig-intro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .07 0 0 0 0 .23 0 0 0 0 .43 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Fine architectural grid, fading toward the centre */
.sig-intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, transparent 30%, #000 100%);
          mask-image: radial-gradient(70% 70% at 50% 50%, transparent 30%, #000 100%);
}

.sig-orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.sig-orbit-a { width: 52vmin; height: 52vmin; left: -18vmin; top: -24vmin; border: 1.5px solid rgba(238,123,45,.55); }
.sig-orbit-b { width: 74vmin; height: 74vmin; right: -24vmin; bottom: -32vmin; border: 1.5px solid rgba(238,123,45,.55); }
.sig-orbit-c { width: 56vmin; height: 56vmin; right: -14vmin; bottom: -22vmin; border: 1px dashed rgba(255,255,255,.22); animation: sig-spin 60s linear infinite; }
.sig-orbit-b::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: #ee7b2d; top: 4%; left: 62%; box-shadow: 0 0 0 6px rgba(238,123,45,.18); }
@keyframes sig-spin { to { transform: rotate(360deg); } }

.sig-frame { position: absolute; inset: 26px; border: 1px solid rgba(255,255,255,.22); pointer-events: none; z-index: 1; }
.sig-frame::before, .sig-frame::after { content: ""; position: absolute; width: 54px; height: 54px; border-color: #ee7b2d; border-style: solid; }
.sig-frame::before { top: -1px; left: -1px; border-width: 3px 0 0 3px; }
.sig-frame::after { bottom: -1px; right: -1px; border-width: 0 3px 3px 0; }

/* Header / footer chrome */
.sig-brand, .sig-meta, .sig-skip, .sig-name { position: absolute; z-index: 2; }
.sig-brand { left: 58px; top: 50px; display: flex; align-items: center; gap: 18px; }
.sig-brand img { width: 70px; height: auto; }
.sig-brand b { display: block; font-size: 16px; letter-spacing: .16em; font-weight: 700; text-transform: uppercase; }
.sig-brand small { display: block; margin-top: 7px; font-size: 18px; letter-spacing: .12em; color: #fbf5ea; font-weight: 600; }
.sig-meta { left: 58px; bottom: 52px; display: flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 700; letter-spacing: .24em; color: #fbf5ea; }
.sig-meta::before { content: ""; width: 44px; height: 2px; background: #ee7b2d; }
.sig-brand, .sig-meta { opacity: 0; transform: translateY(8px); animation: sig-rise .9s .15s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes sig-rise { to { opacity: 1; transform: none; } }

.sig-intro svg { position: relative; z-index: 2; width: min(80vw, 900px); height: min(62vh, 66vw); overflow: visible; margin-top: -3vh; }
.sig-intro path { fill: none; stroke-linecap: round; }
.sig-intro .sig-guide { stroke: none; }
.sig-canvas { position: fixed; pointer-events: none; z-index: 3; }
.sig-intro .sig-nib { fill: #ee7b2d; filter: drop-shadow(0 0 10px rgba(238,123,45,.8)); opacity: 0; transition: opacity .25s; }
.sig-intro .sig-nib.on { opacity: 1; }
.sig-intro .sig-flourish {
  stroke: #ee7b2d; stroke-width: 6; stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);
}
.sig-intro.signed .sig-flourish { stroke-dashoffset: 0; }

.sig-name {
  right: 62px; bottom: 50px; margin: 0; text-align: right;
  opacity: 0; transform: translateY(14px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.2,1);
}
.sig-name strong { display: block; font-family: "Calibri Light", Calibri, Carlito, "Segoe UI Light", "Helvetica Neue", Arial, sans-serif; font-weight: 300; letter-spacing: .02em; font-size: clamp(27px, 4vw, 59px); line-height: 1.05; }
.sig-name small { display: block; margin-top: 12px; font-size: 18px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #ffd2ad; }
.sig-name::before { content: ""; display: block; width: 72px; height: 3px; background: #ee7b2d; margin: 0 0 18px auto; }
.sig-intro.named .sig-name { opacity: 1; transform: none; }

.sig-skip {
  right: 56px; top: 52px; background: none; border: 0; cursor: pointer;
  color: #fbf5ea; font: 700 13px/1 "DM Sans", sans-serif; letter-spacing: .2em; padding: 10px 12px;
}
.sig-skip:hover { color: #ee7b2d; }

/* Side labels flanking the signature, mirroring the gateway's 始創 / SINCE 1998 */
.sig-side {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  color: #ffb27a; font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; letter-spacing: .16em;
  display: flex; align-items: center; gap: 14px;
  opacity: 0; animation: sig-side-in .9s .3s ease forwards;
}
.sig-side-left { left: 64px; }
.sig-side-right { right: 64px; }
.sig-side-left::after, .sig-side-right::before { content: ""; width: 36px; height: 2px; background: #ee7b2d; }
@keyframes sig-side-in { to { opacity: 1; } }

@media (max-width: 720px) {
  .sig-side { font-size: 20px; letter-spacing: .1em; gap: 8px; }
  .sig-side-left { left: 24px; } .sig-side-right { right: 24px; }
  .sig-side-left::after, .sig-side-right::before { width: 16px; }

  .sig-frame { inset: 12px; }
  .sig-intro svg { width: 92vw; height: 52vh; }
  .sig-brand { left: 28px; top: 30px; gap: 10px; }
  .sig-brand img { width: 44px; }
  .sig-brand b { font-size: 11px; letter-spacing: .12em; max-width: 210px; }
  .sig-brand small { font-size: 13px; }
  .sig-meta { left: 28px; bottom: 30px; font-size: 12px; }
  .sig-name { right: 28px; bottom: 64px; }
  .sig-name strong { font-size: 27px; }
  .sig-name small { font-size: 13px; }
  .sig-skip { right: 18px; top: 26px; }
}