/*!
 * 七境 · 一境一品牌
 *
 * 每周七天各是一境，不只是换颜色：首屏境徽（Common/RealmArt.html，金色星盘 + 当日主景）、标题的流光材质、卡片悬停的光环、
 * 段落眉题的纹饰、首屏的七日轮转、每日首次进入时的「开境」动画，都随当日一境变化。
 * 只用 transform / opacity / 背景位移做动画；系统「减少动态效果」或 Setting.php 的 motion=static 时全部静止。
 */

/* ============================================================ 1. 首屏器物 */
/* 器物有意画出舞台之外；横向裁掉，免得页面出现横向滚动（clip 不会把首屏变成滚动容器，纵向照常溢出到顶栏后） */
.qj-hero { overflow-x: clip; }
.qj-hero__stage .qj-realm-art {
    position: absolute; inset: -30% -14% 0% -24%; z-index: 0; pointer-events: none;
    opacity: 1; /* 境徽自带夜窗与金环，明暗两种外观都清楚 */
    -webkit-mask: radial-gradient(closest-side, #000 80%, transparent 100%); mask: radial-gradient(closest-side, #000 80%, transparent 100%);
}
.qj-hero__stage > .qj-orbit, .qj-hero__stage > .qj-feature { z-index: 1; }
/* 宽屏：境徽放在主推卡的左上方，主景不被卡片挡住（卡片只压住外环的右下角） */
@media (min-width: 1201px) {
    .qj-hero__stage .qj-realm-art { inset: auto; left: -20%; top: -30%; width: 94%; aspect-ratio: 1 / 1;
        -webkit-mask: radial-gradient(closest-side, #000 88%, transparent 100%); mask: radial-gradient(closest-side, #000 88%, transparent 100%); }
}
.qj-ra { display: none; width: 100%; height: 100%; overflow: visible; }
:root[data-realm="atelier"] .qj-ra--atelier, :root[data-realm="silk"] .qj-ra--silk, :root[data-realm="porcelain"] .qj-ra--porcelain,
:root[data-realm="orbit"] .qj-ra--orbit, :root[data-realm="astral"] .qj-ra--astral, :root[data-realm="verdant"] .qj-ra--verdant,
:root[data-realm="dawn"] .qj-ra--dawn { display: block; }

.qj-ra .ra-rot, .qj-ra .ra-rot-r { transform-origin: 300px 300px; animation: ra-rot var(--d, 120s) linear var(--dl, 0s) infinite; }
.qj-ra .ra-rot-r { animation-direction: reverse; }
.qj-ra .ra-drift { animation: ra-drift var(--d, 24s) ease-in-out var(--dl, 0s) infinite alternate; }
.qj-ra .ra-float { animation: ra-float var(--d, 8s) ease-in-out var(--dl, 0s) infinite alternate; }
.qj-ra .ra-sway { animation: ra-sway var(--d, 14s) ease-in-out var(--dl, 0s) infinite alternate; }
.qj-ra .ra-flow { animation: ra-flow var(--d, 8s) linear var(--dl, 0s) infinite; }
.qj-ra .ra-meteor { opacity: 0; animation: ra-meteor var(--d, 8s) ease-out var(--dl, 0s) infinite; }
.qj-ra .ra-twinkle { animation: ra-twinkle var(--d, 3s) ease-in-out var(--dl, 0s) infinite alternate; }
.qj-ra .ra-breathe { transform-box: fill-box; transform-origin: center; animation: ra-breathe var(--d, 8s) ease-in-out var(--dl, 0s) infinite alternate; }
.qj-ra .ra-rise { opacity: 0; animation: ra-rise var(--d, 6s) ease-out var(--dl, 0s) infinite; }
.qj-ra .ra-fan { transform-origin: 0 0; animation: ra-fan 6s ease-in-out var(--dl, 0s) infinite alternate; }
.qj-ra .ra-swim { animation: ra-swim var(--d, 70s) linear var(--dl, 0s) infinite; }
@keyframes ra-rot { to { transform: rotate(360deg); } }
@keyframes ra-drift { from { transform: translateX(-26px); } to { transform: translateX(26px); } }
@keyframes ra-float { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
@keyframes ra-sway { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
@keyframes ra-flow { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes ra-meteor { 0% { stroke-dashoffset: 100; opacity: 0; } 6% { opacity: 1; } 34% { stroke-dashoffset: -26; opacity: 0; } 100% { stroke-dashoffset: -26; opacity: 0; } }
@keyframes ra-twinkle { from { opacity: .3; } to { opacity: 1; } }
@keyframes ra-breathe { from { transform: scale(.94); } to { transform: scale(1.06); } }
@keyframes ra-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(-260px); opacity: 0; } }
@keyframes ra-fan { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }
@keyframes ra-swim { from { transform: translateX(-340px); } to { transform: translateX(700px); } }

@media (max-width: 960px) {
    .qj-hero__stage .qj-realm-art { inset: -46% -20% -6% -20%; opacity: .72; }
    .qj-hero__stage > .qj-feature, .qj-hero__stage > .qj-orbit { position: relative; }
}

/* ============================================================ 2. 标题流光：七种材质 */
.qj-hero h1 .qj-h1-line + .qj-h1-line {
    background: var(--qj-title, none) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--qj-accent);
    animation: qj-title-flow 11s linear infinite;
}
@keyframes qj-title-flow { to { background-position: -260% 0; } }
:root[data-realm="atelier"][data-appearance="light"]   { --qj-title: linear-gradient(100deg, #7a4f16 0%, #b47c2c 18%, #f0cf86 28%, #a56f22 38%, #7a4f16 50%, #b47c2c 68%, #f0cf86 78%, #a56f22 88%, #7a4f16 100%); }
:root[data-realm="atelier"][data-appearance="dark"]    { --qj-title: linear-gradient(100deg, #c9963f 0%, #f2cf86 18%, #fff4d4 28%, #d9a957 38%, #c9963f 50%, #f2cf86 68%, #fff4d4 78%, #d9a957 88%, #c9963f 100%); }
:root[data-realm="silk"][data-appearance="light"]      { --qj-title: linear-gradient(100deg, #8a4a2a 0%, #c47a4d 18%, #eeb084 28%, #9c5a37 38%, #8a4a2a 50%, #c47a4d 68%, #eeb084 78%, #9c5a37 88%, #8a4a2a 100%); }
:root[data-realm="silk"][data-appearance="dark"]       { --qj-title: linear-gradient(100deg, #e2a878 0%, #ffd6b0 18%, #fff0e0 28%, #e6b083 38%, #e2a878 50%, #ffd6b0 68%, #fff0e0 78%, #e6b083 88%, #e2a878 100%); }
:root[data-realm="porcelain"][data-appearance="light"] { --qj-title: linear-gradient(100deg, #1f5c4d 0%, #3f8a74 18%, #84c8b0 28%, #2d6b5b 38%, #1f5c4d 50%, #3f8a74 68%, #84c8b0 78%, #2d6b5b 88%, #1f5c4d 100%); }
:root[data-realm="porcelain"][data-appearance="dark"]  { --qj-title: linear-gradient(100deg, #9fd2bd 0%, #d4f3e6 18%, #ffffff 28%, #a9d9c4 38%, #9fd2bd 50%, #d4f3e6 68%, #ffffff 78%, #a9d9c4 88%, #9fd2bd 100%); }
:root[data-realm="orbit"][data-appearance="light"]     { --qj-title: linear-gradient(100deg, #4a35a8 0%, #7a64e0 18%, #b3a2ff 28%, #5a45c0 38%, #4a35a8 50%, #7a64e0 68%, #b3a2ff 78%, #5a45c0 88%, #4a35a8 100%); }
:root[data-realm="orbit"][data-appearance="dark"]      { --qj-title: linear-gradient(100deg, #b8a6f5 0%, #e2d9ff 18%, #ffffff 28%, #c2b2f6 38%, #b8a6f5 50%, #e2d9ff 68%, #ffffff 78%, #c2b2f6 88%, #b8a6f5 100%); }
:root[data-realm="astral"][data-appearance="light"]    { --qj-title: linear-gradient(100deg, #1f4f96 0%, #3a7cc9 18%, #78bfe6 28%, #2c5fa8 38%, #1f4f96 50%, #3a7cc9 68%, #78bfe6 78%, #2c5fa8 88%, #1f4f96 100%); }
:root[data-realm="astral"][data-appearance="dark"]     { --qj-title: linear-gradient(100deg, #9cc4f0 0%, #c6eeff 18%, #ffffff 28%, #a9cdf2 38%, #9cc4f0 50%, #c6eeff 68%, #ffffff 78%, #a9cdf2 88%, #9cc4f0 100%); }
:root[data-realm="verdant"][data-appearance="light"]   { --qj-title: linear-gradient(100deg, #24553a 0%, #3d7a52 18%, #86bb89 28%, #2f6345 38%, #24553a 50%, #3d7a52 68%, #86bb89 78%, #2f6345 88%, #24553a 100%); }
:root[data-realm="verdant"][data-appearance="dark"]    { --qj-title: linear-gradient(100deg, #a8cf98 0%, #d8f0cb 18%, #ffffff 28%, #b4d6a6 38%, #a8cf98 50%, #d8f0cb 68%, #ffffff 78%, #b4d6a6 88%, #a8cf98 100%); }
:root[data-realm="dawn"][data-appearance="light"]      { --qj-title: linear-gradient(100deg, #8f4a46 0%, #c2706a 18%, #efae8b 28%, #a3564f 38%, #8f4a46 50%, #c2706a 68%, #efae8b 78%, #a3564f 88%, #8f4a46 100%); }
:root[data-realm="dawn"][data-appearance="dark"]       { --qj-title: linear-gradient(100deg, #e8b0a3 0%, #ffd6c4 18%, #fff3e8 28%, #eab9ab 38%, #e8b0a3 50%, #ffd6c4 68%, #fff3e8 78%, #eab9ab 88%, #e8b0a3 100%); }

/* ============================================================ 3. 卡片光环：悬停时沿边框转动，七境各一种节奏 */
@property --qj-aura-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.qj-card::after, .qj-feature::after {
    content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
    background: var(--qj-aura, conic-gradient(from var(--qj-aura-a), transparent 0 60%, rgba(var(--qj-accent-rgb), .9) 80%, transparent 82%));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0; transition: opacity .45s var(--qj-ease);
    animation: qj-aura-spin var(--qj-aura-d, 5s) linear infinite; animation-play-state: paused;
}
.qj-card:hover::after, .qj-feature:hover::after, .qj-card:focus-visible::after { opacity: 1; animation-play-state: running; }
.qj-feature::after { opacity: .55; animation-play-state: running; --qj-aura-d: 9s; }
@keyframes qj-aura-spin { to { --qj-aura-a: 360deg; } }
:root[data-realm="atelier"]   { --qj-aura: conic-gradient(from var(--qj-aura-a), transparent 0 18%, rgba(var(--qj-accent-rgb), .95) 25%, transparent 33% 68%, rgba(var(--qj-accent-rgb), .95) 75%, transparent 83%); --qj-aura-d: 6s; }
:root[data-realm="silk"]      { --qj-aura: conic-gradient(from var(--qj-aura-a), transparent 0 10%, rgba(var(--qj-accent-rgb), .6) 30%, rgba(255, 240, 225, .95) 40%, rgba(var(--qj-accent-rgb), .6) 50%, transparent 72%); --qj-aura-d: 7s; }
:root[data-realm="porcelain"] { --qj-aura: conic-gradient(from var(--qj-aura-a), rgba(var(--qj-accent-rgb), .25), rgba(var(--qj-accent-rgb), .95) 25%, rgba(var(--qj-accent-rgb), .25) 50%, rgba(var(--qj-accent-rgb), .95) 75%, rgba(var(--qj-accent-rgb), .25)); --qj-aura-d: 10s; }
:root[data-realm="orbit"]     { --qj-aura: repeating-conic-gradient(from var(--qj-aura-a), rgba(var(--qj-accent-rgb), .95) 0 3deg, rgba(var(--qj-accent-rgb), .12) 3deg 30deg); --qj-aura-d: 12s; }
:root[data-realm="astral"]    { --qj-aura: conic-gradient(from var(--qj-aura-a), transparent 0 55%, rgba(var(--qj-accent-rgb), .5) 80%, rgba(255, 255, 255, .95) 89%, transparent 90%); --qj-aura-d: 3.6s; }
:root[data-realm="verdant"]   { --qj-aura: conic-gradient(from var(--qj-aura-a), transparent, rgba(var(--qj-accent-rgb), .85) 16%, transparent 34%, rgba(var(--qj-accent-rgb), .5) 58%, transparent 76%); --qj-aura-d: 8s; }
:root[data-realm="dawn"]      { --qj-aura: conic-gradient(from var(--qj-aura-a), rgba(255, 180, 140, .9), transparent 22%, rgba(var(--qj-accent-rgb), .9) 50%, transparent 78%, rgba(255, 180, 140, .9)); --qj-aura-d: 6s; }

/* ============================================================ 4. 段落眉题纹饰（七境各一枚，由 build-motifs.mjs 生成） */
.qj-eyebrow::before {
    width: 38px; height: 12px; opacity: .85; background: currentColor;
    -webkit-mask: var(--qj-orn, linear-gradient(#000 0 0)) center / contain no-repeat; mask: var(--qj-orn, linear-gradient(#000 0 0)) center / contain no-repeat;
}
.qj-eyebrow--plain::before { display: none; }
/* @ornaments-begin */
:root[data-realm="atelier"] { --qj-orn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2712%27%20viewBox%3D%270%200%2038%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%209c5%200%206-5%2010-5s4%204%207%203%202-5%206-5%204%203%204%205M27%207c3%202%207%202%2010%200%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-realm="silk"] { --qj-orn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2712%27%20viewBox%3D%270%200%2038%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%206c5-6%2010%206%2018%200s12%206%2018%200%27%2F%3E%3Cpath%20d%3D%27M1%209c5-5%2010%205%2018%200s12%205%2018%200%27%20stroke-opacity%3D%27.5%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-realm="porcelain"] { --qj-orn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2712%27%20viewBox%3D%270%200%2038%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%206h11M26%206h11%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%276%27%20r%3D%274.5%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%276%27%20r%3D%271.5%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-realm="orbit"] { --qj-orn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2712%27%20viewBox%3D%270%200%2038%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%206h12M25%206h12M19%200.8v10.4M13.8%206h10.4%27%2F%3E%3Ccircle%20cx%3D%2719%27%20cy%3D%276%27%20r%3D%272.2%27%20fill%3D%27%23000%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-realm="astral"] { --qj-orn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2712%27%20viewBox%3D%270%200%2038%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%2010L29%203%27%2F%3E%3Ccircle%20cx%3D%2732%27%20cy%3D%272.4%27%20r%3D%271.8%27%20fill%3D%27%23000%27%2F%3E%3Cpath%20d%3D%27M8%2011L22%207.5%27%20stroke-opacity%3D%27.5%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-realm="verdant"] { --qj-orn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2712%27%20viewBox%3D%270%200%2038%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M1%2011l7-6%204%203%206-7%205%205%204-3%2010%208%27%2F%3E%3C%2Fsvg%3E"); }
:root[data-realm="dawn"] { --qj-orn: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2738%27%20height%3D%2712%27%20viewBox%3D%270%200%2038%2012%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%271.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M2%2011C10%2010%2022%207%2036%201%27%2F%3E%3Cpath%20d%3D%27M9%2010l-2-5M15%209l-1-5M21%207l-1-5M27%205l-1-4%27%20stroke-opacity%3D%27.7%27%2F%3E%3C%2Fsvg%3E"); }
/* @ornaments-end */

/* ============================================================ 5. 七日轮转（首屏「今日一境」旁） */
.qj-week { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -12px 0 26px; font-size: 12.5px; color: var(--qj-ink-3); letter-spacing: .06em; }
.qj-week[hidden] { display: none; }
.qj-week__days { display: inline-flex; align-items: center; gap: 6px; }
.qj-week__day { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--qj-line-strong); background: var(--qj-surface-soft); color: var(--qj-ink-2); font-size: 10.5px; line-height: 1; }
.qj-week__day svg { width: 17px; height: 17px; }
.qj-week__day.is-past { opacity: .5; }
.qj-week__day.is-today { width: 34px; height: 34px; color: var(--qj-on-action); border-color: transparent; background: linear-gradient(135deg, var(--qj-action-a), var(--qj-action-b)); box-shadow: 0 0 0 4px rgba(var(--qj-accent-rgb), .16), 0 6px 18px -6px rgba(var(--qj-accent-rgb), .8); }
.qj-week__day.is-today svg { width: 20px; height: 20px; }
.qj-week__next b { color: var(--qj-ink-2); font-weight: 600; letter-spacing: .1em; }

/* ============================================================ 6. 开境：每天第一次进入首页时的一瞬（约 1.8 秒，不挡操作） */
.qj-reveal {
    position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; pointer-events: none;
    background: radial-gradient(60% 60% at 50% 46%, rgba(var(--qj-accent-rgb), .22), transparent 70%), var(--qj-surface-strong);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    animation: qj-reveal-out 1.85s var(--qj-ease) forwards;
}
.qj-reveal__inner { display: grid; justify-items: center; gap: 16px; color: var(--qj-ink); text-align: center; }
.qj-reveal__seal { width: 132px; height: 132px; color: var(--qj-accent); animation: qj-reveal-seal 1.4s var(--qj-ease) both; }
.qj-reveal__seal svg { width: 100%; height: 100%; }
.qj-reveal__name { font: 400 clamp(36px, 6vw, 60px)/1 var(--qj-font-display); letter-spacing: .32em; text-indent: .32em; animation: qj-reveal-name 1.2s var(--qj-ease) .15s both; }
.qj-reveal__sub { font-size: 13px; letter-spacing: .3em; color: var(--qj-ink-3); animation: qj-reveal-name 1.2s var(--qj-ease) .3s both; }
@keyframes qj-reveal-out { 0%, 62% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes qj-reveal-seal { from { opacity: 0; transform: scale(.6) rotate(-20deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes qj-reveal-name { from { opacity: 0; transform: translateY(14px); letter-spacing: .6em; } to { opacity: 1; transform: none; } }

/* ============================================================ 7. 静止 / 减少动态 / 手机与「轻柔」 */
/* 标题流光与主推卡光环每帧都要重绘；手机和「轻柔」档只保留器物的平移旋转（合成层，开销很小） */
@media (max-width: 720px) {
    .qj-hero h1 .qj-h1-line, .qj-feature::after { animation: none !important; }
    .qj-ra .ra-flow, .qj-ra .ra-meteor { animation-duration: calc(var(--d, 8s) * 1.6); }
}
:root[data-motion="gentle"] .qj-hero h1 .qj-h1-line, :root[data-motion="gentle"] .qj-feature::after { animation: none !important; }
:root[data-motion="gentle"] .qj-ra * { animation-duration: calc(var(--d, 60s) * 1.8) !important; }
:root[data-motion="static"] .qj-ra *, :root[data-motion="static"] .qj-hero h1 .qj-h1-line,
:root[data-motion="static"] .qj-card::after, :root[data-motion="static"] .qj-feature::after { animation: none !important; }
:root[data-motion="static"] .qj-ra .ra-meteor, :root[data-motion="static"] .qj-ra .ra-rise { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .qj-ra *, .qj-hero h1 .qj-h1-line, .qj-card::after, .qj-feature::after { animation: none !important; }
    .qj-ra .ra-meteor, .qj-ra .ra-rise { opacity: 0; }
    .qj-reveal { display: none; }
}