@charset "UTF-8";

/* ============================================================
   Tiramisu nav page — dark glass theme on Apple Pro Display XDR
   wallpaper (bg-xdr.jpg). Purple accents from qwencloud palette:
   #653aff / #5229e6, tints #f1edff→#c7baff, light text #f5f5f7.
   ============================================================ */

:root {
  color-scheme: dark;
  --ink: #f5f5f7;
  --soft: rgba(235, 235, 245, .6);
  --line: rgba(255, 255, 255, .14);
  --paper: #000000;
  --panel: #1c1c1e;
  --purple: #8466ff;
  --purple-deep: #653aff;
  --purple-bright: #a38dff;
  --purple-dark: #110442;
  --tint-50: #f1edff;
  --tint-150: #e2dbff;
  --tint-250: #c7baff;
  --tint-350: #a38dff;
  --sky: #60ddff;
  --mint: #11ac85;
  --rose: #ed5c85;
  --electric: #1c11fc;
  --accent: var(--purple);
  --content: min(1180px, calc(100% - 72px));
  --ease-silk: cubic-bezier(.22, .8, .24, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background-color: #000;
  /* dark scrim over the busy wallpaper to keep text readable */
  background-image: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('./bg-xdr.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* faint blueprint grid, only visible near the top */
body::before {
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  content: '';
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, black, transparent 74%);
}
a { color: inherit; text-decoration: none; }

.page { position: relative; z-index: 1; width: var(--content); margin: 0 auto; }

/* top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 102px; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .16em; animation: fade-down .9s var(--ease-silk) both; }
.brand { display: inline-flex; align-items: center; gap: 13px; font-weight: 700; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 15px; }
.brand-mark i { display: block; width: 3px; border-radius: 8px; background: var(--purple-bright); transform: rotate(32deg); }
.brand-mark i:nth-child(1) { height: 8px; opacity: .38; }
.brand-mark i:nth-child(2) { height: 14px; }
.brand-mark i:nth-child(3) { height: 10px; opacity: .62; }
.topbar-note { color: var(--soft); }
.topbar-note i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--purple-bright); box-shadow: 0 0 0 4px rgba(132, 102, 255, .24); }

/* top bar right: note + GIF toggle */
.topbar-right { display: inline-flex; align-items: center; gap: 22px; }
.gif-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.gif-toggle input { display: none; }
.toggle-track {
  display: block; width: 32px; height: 18px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .15);
  position: relative;
  transition: background .25s ease;
}
.toggle-track::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s ease;
}
.gif-toggle input:checked + .toggle-track { background: var(--purple); }
.gif-toggle input:checked + .toggle-track::after { transform: translateX(14px); }
.toggle-label { font-size: 10px; letter-spacing: .12em; color: var(--soft); transition: color .25s ease; }
.gif-toggle input:checked ~ .toggle-label { color: var(--ink); }

/* hero */
.hero { display: grid; grid-template-columns: 1.02fr .98fr; min-height: 620px; border-bottom: 1px solid var(--line); }
.hero-copy { align-self: center; padding: 52px 0 70px; }
.overline { margin: 0 0 28px; color: var(--soft); font-size: 10px; letter-spacing: .16em; animation: rise .9s .08s var(--ease-silk) both; }
h1 {
  max-width: 700px;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(54px, 7.5vw, 108px);
  font-weight: 550;
  letter-spacing: -.06em;
  line-height: 1.08;
  animation: rise .95s .16s var(--ease-silk) both;
}
h1 em {
  background: linear-gradient(92deg, #a38dff 8%, #8466ff 34%, #60ddff 68%, #4dffd2 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  letter-spacing: -.02em;
}
.subtitle { margin: 36px 0 46px; color: var(--soft); font-size: 14px; font-weight: 400; line-height: 1.9; animation: rise .95s .24s var(--ease-silk) both; }
.scroll-cue { display: inline-flex; align-items: center; gap: 30px; padding-bottom: 11px; border-bottom: 1px solid var(--ink); font-size: 11px; letter-spacing: .12em; transition: gap .4s var(--ease-silk), color .4s ease; animation: rise .95s .32s var(--ease-silk) both; }
.scroll-cue b { color: var(--purple-bright); font-size: 17px; font-weight: 400; animation: bob 2.6s ease-in-out infinite; }
.scroll-cue:hover { gap: 44px; color: var(--purple-bright); }

/* hero visual — glass window */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 560px; animation: rise 1s .2s var(--ease-silk) both; }

/* GIF/glass 切换过渡：body.gif-on 由 JS 控制，进出均有淡入淡出 */
.glass-scene, .visual-note {
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
body.gif-on .glass-scene {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.975);
}
body.gif-on .visual-note {
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
}

/* GIF stage — 与玻璃窗互斥，淡入淡出 + 上浮 */
.gif-stage {
  position: absolute; inset: 0;
  display: grid; place-items: center; align-content: center; gap: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
body.gif-on .gif-stage {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.gif-frame {
  position: relative;
  width: min(31vw, 372px);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(0, 0, 0, .35);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.gif-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gif-tag { color: var(--soft); font-size: 9px; letter-spacing: .16em; }
.glass-scene { position: relative; perspective: 1200px; }
.glass-window { width: min(31vw, 372px); height: min(38vw, 452px); border-radius: 30px; border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 28px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .22); }
.glass-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(96, 221, 255, .22), rgba(255, 255, 255, .05) 55%, rgba(163, 141, 255, .28));
  transform: translate(calc(-30px + var(--px, 0px)), calc(26px + var(--py, 0px))) rotate(-8deg);
}
.glass-front {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(101, 58, 255, .1) 52%, rgba(96, 221, 255, .12));
  animation: float-window 9s ease-in-out infinite;
}
.glass-tilt { height: 100%; }
.window-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 5px; height: 44px; padding: 0 19px; border-bottom: 1px solid rgba(255, 255, 255, .16); color: var(--soft); font-size: 8px; letter-spacing: .12em; }
.window-bar span { width: 6px; height: 6px; border-radius: 50%; }
.window-bar span:nth-child(1) { background: #ed5c85; }
.window-bar span:nth-child(2) { background: #c7baff; }
.window-bar span:nth-child(3) { background: #60ddff; }
.window-bar em { margin-left: auto; font-style: normal; opacity: .75; }

/* art layer: only the window itself clips (overflow hidden on .glass-front).
   The moving layer has no clipping edge, so parallax can never expose a boundary. */
.window-art { position: absolute; top: -150px; left: -150px; right: -150px; bottom: -150px; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
.window-art-inner { position: absolute; top: 194px; left: 150px; right: 150px; bottom: 150px; }
.window-art-inner::before {
  position: absolute;
  top: -25%; left: -25%; right: -25%; bottom: -25%;
  z-index: 1;
  content: '';
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%);
  transform: translateX(-20%);
  animation: sheen 8s ease-in-out infinite;
}
.art-line { position: absolute; display: block; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; }
.art-line-a { top: 12%; left: -22%; width: 146%; height: 62%; transform: rotate(-27deg); }
.art-line-b { top: 38%; left: -30%; width: 162%; height: 50%; transform: rotate(24deg); border-color: rgba(163, 141, 255, .55); }
.art-orb {
  position: absolute;
  top: 17%;
  left: 27%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .85), rgba(198, 186, 255, .55) 24%, rgba(96, 221, 255, .3) 52%, rgba(101, 58, 255, .2) 70%, transparent 78%);
  box-shadow: 0 12px 44px rgba(101, 58, 255, .35);
  animation: breathe 7s ease-in-out infinite;
}
.art-letter { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .42); font-family: Georgia, 'Times New Roman', serif; font-size: 86px; transform: translateY(4px); }
.art-tag { position: absolute; z-index: 2; top: 58px; right: 24px; color: var(--purple-bright); font-size: 8px; letter-spacing: .15em; }
.visual-note { position: absolute; right: -2%; bottom: 15%; color: var(--soft); font-size: 10px; letter-spacing: .16em; line-height: 1.5; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }

/* spaces */
.spaces { padding: 38px 0 46px; }
.section-head { display: flex; justify-content: space-between; margin-bottom: 20px; color: var(--soft); font-size: 10px; letter-spacing: .16em; }
.section-head p { margin: 0; }
.section-head span { color: var(--ink); }
.space-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.space-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 24px 26px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .5s var(--ease-silk), box-shadow .5s ease, border-color .5s ease;
}
.space-card:hover { transform: translateY(-8px); border-color: rgba(163, 141, 255, .65); box-shadow: 0 26px 52px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .2); }
.card-aboutme { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(101, 58, 255, .18)); }
.card-github { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(82, 41, 230, .2)); }
.card-nextcloud { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(132, 102, 255, .16)); }
.card-status { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(96, 221, 255, .14)); }
.card-openclaw { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(77, 255, 210, .16)); }
/* OpenClaw 独占一行：始终从新的一行第 1 格开始 */
.card-openclaw { grid-column: 1; }
.card-soon { background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(237, 92, 133, .12)); color: var(--soft); }
.card-number, .card-link { font-size: 10px; letter-spacing: .14em; }
.card-number { color: var(--soft); }
.card-icon { position: absolute; top: 20px; right: 26px; font-size: 22px; font-weight: 300; }
.card-aboutme .card-icon { color: #a38dff; }
.card-github .card-icon { color: #c7baff; }
.card-nextcloud .card-icon { color: #8466ff; }
.card-status .card-icon { color: #60ddff; }
.card-openclaw .card-icon { color: #4dffd2; }
.card-soon .card-icon { color: #ed5c85; }
.card-title { margin-top: 64px; font-size: 26px; font-weight: 560; letter-spacing: -.05em; }
.card-description { margin-top: 10px; color: var(--soft); font-size: 12px; line-height: 1.65; }
.card-link { display: flex; align-items: center; gap: 13px; margin-top: auto; color: #a38dff; }
.card-aboutme .card-link { color: #a38dff; }
.card-nextcloud .card-link { color: #8466ff; }
.card-status .card-link { color: #60ddff; }
.card-openclaw .card-link { color: #4dffd2; }
.card-soon .card-link { color: var(--soft); }
.card-link b { font-size: 18px; font-weight: 400; transition: transform .4s var(--ease-silk); }
.space-card:hover .card-link b { transform: translateX(6px); }

/* footer */
.footer { display: flex; justify-content: space-between; gap: 20px; padding: 0 0 28px; color: var(--soft); font-size: 10px; letter-spacing: .16em; }
.footer strong { color: var(--ink); font-weight: 650; }

/* keyframes */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float-window {
  0%, 100% { transform: translate(calc(12px + var(--px, 0px)), calc(-8px + var(--py, 0px))) rotate(4deg); }
  50% { transform: translate(calc(12px + var(--px, 0px)), calc(-15px + var(--py, 0px))) rotate(3deg); }
}
@keyframes sheen { 0%, 100% { transform: translateX(-20%); } 50% { transform: translateX(20%); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* mobile */
@media (max-width: 960px) {
  .space-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  :root { --content: min(100% - 36px, 560px); }
  .topbar { min-height: 78px; }
  .topbar-note { font-size: 0; }
  .topbar-note i { margin: 0; }
  .topbar-right { gap: 14px; }
  .hero { display: block; min-height: 0; }
  .hero-copy { padding: 82px 0 44px; }
  h1 { font-size: clamp(52px, 17vw, 102px); }
  .hero-visual { min-height: 470px; }
  .gif-frame { width: min(80vw, 352px); }
  .glass-window { width: min(80vw, 352px); height: min(100vw, 432px); }
  .glass-back { transform: translate(calc(-22px + var(--px, 0px)), calc(19px + var(--py, 0px))) rotate(-7deg); }
  .glass-front { transform: translate(calc(9px + var(--px, 0px)), calc(-6px + var(--py, 0px))) rotate(4deg); }
  .visual-note { right: 1%; bottom: 12%; }
  .space-grid { grid-template-columns: 1fr; }
  .space-card { min-height: 220px; }
  .footer { align-items: flex-start; flex-direction: column; line-height: 1.8; }
}