/*
 * 太极：主题切换、启动画面、载入态与成卦台中轴共用一枚 SVG（UI.taiji）
 * 阳取纸色、阴取墨色，随主题自动互换；所有转动均可被“减少动态效果”关闭
 */
.taiji {
    --taiji-yang: var(--surface);
    --taiji-yin: var(--ink);
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.taiji-yang,
.taiji-eye-yang {
    fill: var(--taiji-yang);
}

.taiji-yin,
.taiji-eye-yin {
    fill: var(--taiji-yin);
}

.taiji-rim {
    fill: none;
    stroke: var(--taiji-yin);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.taiji-eye {
    transform-box: fill-box;
    transform-origin: center;
}

/* 主题切换：每点一次累计旋转半周，阴阳互易 */
.taiji-toggle .taiji {
    width: 22px;
    height: 22px;
    transform: rotate(calc(var(--taiji-turns, 0) * 180deg));
    transition: transform 600ms var(--ease-out);
}

.taiji-toggle:hover .taiji {
    transform: rotate(calc(var(--taiji-turns, 0) * 180deg + 24deg));
}

.taiji-toggle:active .taiji {
    transform: rotate(calc(var(--taiji-turns, 0) * 180deg + 24deg)) scale(0.9);
}

/* 旋转：先急后缓，如水流转；鱼眼一张一翕，阴阳交替 */
.taiji-spin {
    animation: taiji-spin 2.4s cubic-bezier(0.45, 0.05, 0.35, 1) infinite;
}

.taiji-spin .taiji-eye-yin {
    animation: taiji-breathe 2.4s ease-in-out infinite;
}

.taiji-spin .taiji-eye-yang {
    animation: taiji-breathe 2.4s ease-in-out -1.2s infinite;
}

@keyframes taiji-spin {
    to { transform: rotate(360deg); }
}

@keyframes taiji-breathe {
    0%, 100% { transform: scale(0.72); }
    50% { transform: scale(1.18); }
}

/* 启动画面：有脚本时才存在；延迟 400ms 显现，加载快则不打扰 */
.boot-splash {
    display: none;
}

.js .boot-splash {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-5);
    background: var(--paper);
    opacity: 0;
    animation: boot-in 360ms var(--ease-out) 400ms forwards;
}

.boot-splash .taiji {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent));
}

.boot-text {
    color: var(--ink-3);
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    letter-spacing: 0.4em;
    text-indent: 0.4em;
}

.boot-splash.is-leaving {
    opacity: 1;
    animation: boot-out 420ms var(--ease) forwards;
    pointer-events: none;
}

.boot-splash.is-leaving .taiji {
    animation: boot-settle 420ms var(--ease) forwards;
}

@keyframes boot-in {
    to { opacity: 1; }
}

@keyframes boot-out {
    to { opacity: 0; visibility: hidden; }
}

@keyframes boot-settle {
    to { transform: scale(1.35); opacity: 0; }
}

/* 载入态（替代骨架屏的场景） */
.loading-state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-4);
    color: var(--ink-3);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
}

.loading-state .taiji {
    width: 36px;
    height: 36px;
}

/* 成卦台中轴：上下卦之间一枚太极，每成一爻转 60°，六爻成卦恰满一周 */
.stage-axis {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 2px 0;
}

.stage-axis::before,
.stage-axis::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

.stage-axis .taiji {
    position: relative;
    flex: none;
    width: 22px;
    height: 22px;
    transform: rotate(var(--axis-turn, 0deg));
    transition: transform var(--axis-duration, 320ms) var(--ease-out);
}

/* 成卦：一圈墨晕自太极散开 */
.stage-axis.is-complete .taiji {
    animation: axis-ring 900ms var(--ease-out);
}

@keyframes axis-ring {
    0% { filter: drop-shadow(0 0 0 color-mix(in srgb, var(--cinnabar) 55%, transparent)); }
    40% { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--cinnabar) 45%, transparent)); }
    100% { filter: drop-shadow(0 0 0 transparent); }
}

/* 切换主题的两帧内暂停颜色过渡（ThemeModule 挂载 .theme-switching）；太极自身的旋转过渡保留 */
.theme-switching *:not(.taiji),
.theme-switching *::before,
.theme-switching *::after {
    transition: none !important;
}

/* 深浅主题切换：新主题自按钮处圆形晕开（由 ThemeModule 驱动 clip-path） */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* 减少动态效果：全局规则已把时长压到近零（启动画面仍保留 400ms 延迟），这里再停掉循环转动 */
@media (prefers-reduced-motion: reduce) {
    .taiji-spin,
    .taiji-spin .taiji-eye {
        animation: none;
    }
}

@media (forced-colors: active) {
    .taiji {
        forced-color-adjust: none;
        --taiji-yang: Canvas;
        --taiji-yin: CanvasText;
    }
}