/* css/breathing.css - 呼吸引导波纹动画 */
.breath-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(46,76,70,.36), transparent 24rem),
        radial-gradient(circle at 50% 50%, #11181b 0%, #080b0d 72%);
}

/* 中央呼吸圆 */
.breath-stage {
    position: relative;
    width: 320px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 扩散波纹环 */
.ripple {
    position: absolute;
    border: 1px solid rgba(222, 202, 157, 0.27);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: ripple 8s ease-out infinite;
}
.ripple:nth-child(2) { animation-delay: 2s; }
.ripple:nth-child(3) { animation-delay: 4s; }
.ripple:nth-child(4) { animation-delay: 6s; }
@keyframes ripple {
    0% { transform: scale(0.6); opacity: 0; border-color: rgba(201, 169, 106, 0.5); }
    15% { opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; border-color: rgba(111, 162, 135, 0.2); }
}

/* 核心圆（随呼吸缩放） */
.breath-core {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgba(235,216,172,.28), rgba(83,130,113,.08) 58%, rgba(0,0,0,.02));
    border: 1px solid rgba(201, 169, 106, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: breathe 12s ease-in-out infinite;
    box-shadow: 0 0 80px rgba(201, 169, 106, 0.12), inset 0 0 30px rgba(255,255,255,.025);
}
@keyframes breathe {
    0%   { transform: scale(0.78); }   /* 呼气末 */
    33%  { transform: scale(1.15); }   /* 吸气 4s */
    50%  { transform: scale(1.15); }   /* 屏息 2s */
    100% { transform: scale(0.78); }   /* 呼气 6s */
}

.breath-text {
    font-size: 16px;
    color: var(--gold);
    letter-spacing: 4px;
    animation: breathText 12s ease-in-out infinite;
    text-align: center;
}
@keyframes breathText {
    0%, 100% { content: '呼气'; opacity: 0.7; }
    33% { content: '吸气'; opacity: 1; }
    50% { content: '屏息'; opacity: 0.85; }
}

/* 用 ::before 动态切换文字（CSS 无法直接改 content 文本，用伪元素） */
.breath-label { position: relative; font-size: 16px; color: var(--gold); letter-spacing: 4px; }
.breath-label span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; opacity: 0; }
.breath-label span.in  { animation: showIn  12s ease-in-out infinite; }
.breath-label span.hold{ animation: showHold 12s ease-in-out infinite; }
.breath-label span.out { animation: showOut 12s ease-in-out infinite; }
@keyframes showIn  { 0%,40%,100%{opacity:0} 5%,28%{opacity:1} }
@keyframes showHold{ 0%,33%,55%,100%{opacity:0} 38%,50%{opacity:0.85} }
@keyframes showOut { 0%,50%,100%{opacity:0} 56%,95%{opacity:0.7} }

.breath-hint {
    margin-top: 60px;
    color: var(--ink-dim);
    font-size: 13px;
    letter-spacing: 2px;
    text-align: center;
    opacity: 0.7;
}

.breath-enter {
    margin-top: 40px;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold-soft);
    border-radius: 30px;
    padding: 14px 40px;
    font-size: 15px;
    letter-spacing: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.3s;
    animation: fade 1s ease 2s both;
}
.breath-enter:hover {
    background: rgba(201, 169, 106, 0.1);
    border-color: var(--gold);
    box-shadow: 0 0 24px rgba(201, 169, 106, 0.2);
}

.breath-title {
    position: absolute;
    top: 8vh;
    color: var(--gold);
    font: 400 20px/1.2 Georgia, "Noto Serif SC", serif;
    letter-spacing: 8px;
    opacity: 0.85;
}
.breath-nav { position:absolute; top:24px; right:clamp(18px,5vw,44px); z-index:3; display:flex; gap:16px; font-size:11px; }
.breath-nav a, .breath-nav button { color:var(--ink-dim); text-decoration:none; background:none; border:0; font:inherit; cursor:pointer; }
.breath-nav a:hover, .breath-nav button:hover { color:var(--ink); }
@media (max-width:420px) {
    .breath-stage { width:280px; height:280px; }
    .breath-hint { margin-top:38px; padding:0 24px; }
    .breath-title { top:10vh; }
    .breath-sub { top:calc(10vh + 34px); }
}
@media (prefers-reduced-motion: reduce) {
    .ripple, .breath-core, .breath-label span { animation-duration:24s; }
}
.breath-sub {
    position: absolute;
    top: calc(8vh + 36px);
    color: var(--ink-dim);
    font-size: 12px;
    letter-spacing: 3px;
}