/* Folder: /assets/styles | File: main.css
   Purpose: Global layout, theming, grid cards, command palette.
   Notes: All comments in English by your rule. */

/* ===== CSS Variables & Themes ===== */
:root {
  --bg: #faf7fb;
  --fg: #19151e;
  --muted: #5f5669;
  --brand: #5c0931;
  --card: #ffffff;
  --card-hover: #faf7fb;
  --border: #e8e1ee;
  --accent: #6e2a9b;
}

[data-theme="dark"] {
  --bg: #0f0d12;
  --fg: #ffffff;
  --muted: #c9c4cf;
  --brand: #5c0931;
  --card: #17141c;
  --card-hover: #1e1a24;
  --border: #2b2631;
  --accent: #f0ccff;
  --ring: 0 0 0 3px rgba(92,9,49,0.35);
}

[data-theme="spring"] h1, 
[data-theme="spring"] h2, 
[data-theme="spring"] h3, 
[data-theme="spring"] h4, 
[data-theme="spring"] h5, 
[data-theme="spring"] p {
  background: url('https://szr.hk/public/images/golden-2.jpg');
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: contain;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.szr-body {
    margin: 0;
    color: var(--fg);
  /*font: 16px/1.6 'Gill Sans MT', 'Optima', "LXGW WenKai Screen", 'Marcellus', Helvetica, "FangSong", "FangSong_GB2312", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Noto Sans CJK SC", "Microsoft Yahei", sans-serif;*/
    font-family: 'Gill Sans MT', 'Optima', "LXGW WenKai Screen", 'Marcellus', Helvetica, "FangSong", "FangSong_GB2312", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "PingFang SC", "Noto Sans CJK SC", "Microsoft Yahei", sans-serif;
}
body.szr-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(1200px 800px at 20% -10%, rgba(92,9,49,.45), transparent 60%),
              radial-gradient(900px 600px at 95% 0%, rgba(168,74,206,.28), transparent 60%),
              var(--bg);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: 20% -10%, 100% 0%, center;
    background-attachment: fixed, fixed, fixed;
}

/*#page-bg {*/
/*  position: fixed;*/
/*  inset: 0;*/
/*  z-index: 0;*/
/*  pointer-events: none;*/
/*  background:*/
/*    radial-gradient(1200px 800px at 20% -10%, rgba(92,9,49,.45), transparent 60%),*/
/*    radial-gradient(900px 600px at 95% 0%,  rgba(168,74,206,.28), transparent 60%),*/
/*    var(--bg);*/
/*  background-repeat: no-repeat,no-repeat,no-repeat;*/
/*  background-position: 20% -10%,100% 0%,center;*/
/*  transform: translateZ(0);*/
/*  will-change: transform;*/
/*  contain: paint;*/
/*}*/
/*body.szr-body { position: relative; z-index: 1; }*/
#page-bg{
  position: fixed; 
  inset: 0; 
  z-index: -1;
  pointer-events:none;
  background:
    radial-gradient(1200px 800px at 20% -10%, rgba(92,9,49,.45), transparent 60%),
    radial-gradient(900px 600px at 95% 0%,  rgba(168,74,206,.28), transparent 60%),
    var(--bg);
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-position: 20% -10%, 100% 0%, center;
  transform: translateZ(0); -webkit-transform: translateZ(0);
  will-change: transform; 
  contain: paint;
  height: 100s vh; /* 可选，iOS 地址栏伸缩更稳 */
}
html, body { background: var(--bg); } /* 兜底 */
body.szr-body { position: relative; isolation: isolate; }


img { display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: var(--ring); border-radius: 10px; }

.container { width: min(1120px, 92vw); margin-inline: auto; }
.flow > * + * { margin-top: 2rem; }

/* ===== Skip Link ===== */
.skip-link {
  position: absolute; left: -9999px; top: auto;
}
.skip-link:focus { left: 12px; top: 12px; background: #000; color: #fff; padding: .5rem .75rem; border-radius: .5rem; }

/* ===== Notice Bar ===== */
.notice { position: sticky; top: 0; z-index: 20; background: linear-gradient(90deg, #7c1811, #862114 70%); color: #fff; }
.notice__inner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .6rem 1rem; }
.notice__text { font-size: .95rem; }
.btn { border-radius: .8rem; border: 1px solid var(--border); background: var(--card); color: var(--fg); padding: .55rem .9rem; cursor: pointer; }
.btn:hover { background: var(--card-hover); }
.btn--ghost { background: transparent; border-color: transparent; }
.seg { display: inline-flex; gap: .25rem; }

/* ===== Hero ===== */
.hero { position: relative; padding: 3rem 0 2rem; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__inner { display: grid; gap: 1rem; align-items: center; grid-template-columns: 1fr auto; }
.brand { /*display: flex;*/ gap: 1rem; align-items: center; }
.brand__logo { filter: drop-shadow(0 8px 24px rgba(92,9,49,.35)); max-width: 66%; max-height: 64px; height: auto; }
.brand__title { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0; letter-spacing: .02em; }
.brand__subtitle { margin: .15rem 0 0; color: var(--muted); }

.hero__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: end; }
.hero__wave { height: 18px; margin-top: 12px; /*background: linear-gradient(90deg,#ecdcd5 0,#e7d3ed 50%,#ecdcd5 100%);*/ opacity:.9; border-radius: 8px; }

/* ===== Sections ===== */
.section { display: grid; gap: 1.2rem; }
.section__head { display: grid; gap: .25rem; }
.section__title { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.section__desc { margin: 0; color: var(--muted); }
.section--muted { opacity: .9; }

.note { color: var(--muted); font-size: .92rem; }

/* ===== Grid & Cards ===== */
.grid { display: grid; gap: 1rem; }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--links { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--card);
  /*padding: 1rem;*/
  border-radius: 1.2rem;
  display: grid; gap: .8rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--border), var(--accent) 45%); }
.card__media { /*aspect-ratio: 16/9; border-radius: .8rem;*/ height: 120px; border-top-left-radius: .8rem; border-top-right-radius: .8rem; overflow: hidden; background: linear-gradient(120deg, #560c30, #7e184e); display: grid; place-items: center; }
.card__media img { max-width: 75%; max-height: 50%; display: block; object-fit: contain;}
.card__body { display: grid; gap: .25rem; padding: 0 1rem 1rem; }
.card__title { margin: 0; font-size: 1.05rem; letter-spacing: .01em; }
.card__subtitle { margin: 0; color: var(--muted); font-size: .95rem; }
.card__meta { margin: .5rem 0 0; padding: 0; list-style: none; display: flex; gap: .5rem; flex-wrap: wrap; }
.card__meta li { font-size: .82rem; color: var(--muted); border: 1px dashed var(--border); padding: .15rem .5rem; border-radius: .6rem; }

/* ===== Link Pills ===== */
.linkpill {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--border); padding: .9rem 1rem; border-radius: 999px; background: var(--card);
  transition: transform .15s ease, border-color .2s ease;
}
.linkpill:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--border), var(--accent) 40%); }
.linkpill__icon { width: 22px; height: 22px; border-radius: 6px; }

/* ===== Command Palette ===== */
.cmdk {
  width: min(760px, 92vw);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  color: var(--fg);
  padding: 0;
}
.cmdk__inner { margin: 0; padding: 1rem; display: grid; gap: .75rem; }
.cmdk__input {
  width: 100%; padding: .8rem 1rem; border-radius: .8rem;
  border: 1px solid var(--border); background: var(--bg); color: var(--fg);
}
.cmdk__results { display: grid; gap: .5rem; max-height: 50vh; overflow: auto; }
.cmdk__item {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--border); padding: .7rem .9rem; border-radius: .7rem; background: var(--card);
}
.cmdk__item:hover { background: var(--card-hover); }

/* ===== Responsive ===== */
@media (max-width: 820px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__actions { justify-content: start; }
}

/* ===== Motion Preferences ===== */
@media (prefers-reduced-motion: reduce) {
  .card, .linkpill { transition: none; }
}