/* ============================================================================
   flow.css  —  🧘 The Flow engine styling (.flow-*)
   A calm dawn scene: rising sun, breathing ring, a thick-stroke pose silhouette
   that flows and settles. Self-contained; reads on any site theme.
   ============================================================================ */
.flow-stage {
    position: relative; border-radius: 20px; overflow: hidden; height: 430px;
    background: linear-gradient(180deg, #3a2a5c 0%, #6d4d7a 34%, #c88a9a 64%, #f3b48a 82%, #f7d59b 100%);
    box-shadow: 0 22px 55px -20px rgba(180, 120, 200, .4);
}
.flow-sun {
    position: absolute; left: 50%; bottom: 58px; width: 160px; height: 160px; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(circle, #fff6e0 0%, #ffe6b0 40%, rgba(255, 220, 150, .35) 62%, transparent 72%);
}
.flow-horizon { position: absolute; left: 0; right: 0; bottom: 54px; height: 60px; background: linear-gradient(180deg, rgba(120, 70, 90, 0), rgba(55, 32, 58, .55)); }
.flow-mat { position: absolute; left: 50%; bottom: 40px; width: 250px; height: 26px; transform: translateX(-50%) perspective(220px) rotateX(60deg); border-radius: 40%; background: radial-gradient(ellipse, rgba(40, 25, 55, .5), transparent 70%); }
/* breathing ring — gentle continuous pulse (calm) */
.flow-breath, .flow-breath2 {
    position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
    border: 2px solid rgba(255, 246, 224, .34); box-shadow: 0 0 46px rgba(255, 240, 210, .3), inset 0 0 40px rgba(255, 240, 210, .14);
    animation: flowBreath 8s ease-in-out infinite;
}
.flow-breath { width: 320px; height: 320px; }
.flow-breath2 { width: 244px; height: 244px; border-color: rgba(255, 246, 224, .2); animation-duration: 8s; animation-delay: .2s; }
@keyframes flowBreath { 0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .55; } 50% { transform: translate(-50%, -50%) scale(1.06); opacity: .9; } }
.flow-stage.flow-flowing .flow-breath, .flow-stage.flow-flowing .flow-breath2 { animation-duration: 3.4s; }
/* the figure */
.flow-figure { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 260px; height: 273px; }
.flow-fig { width: 100%; height: 100%; overflow: visible; }
.flow-limb { fill: none; stroke: #fbeede; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 7px rgba(60, 30, 60, .38)); }
.flow-hd { fill: #fbeede; filter: drop-shadow(0 3px 7px rgba(60, 30, 60, .38)); }
/* winner "arrival" — a sober settle: the figure sinks gently to a hold, a warm
   glow blooms behind it, and the name fades up. Signals "this is your pose." */
.flow-stage.flow-held .flow-figure { animation: flowSettle 1.15s cubic-bezier(.2, .85, .3, 1) both, flowHold 6.5s ease-in-out 1.15s infinite; }
@keyframes flowSettle { 0% { transform: translate(-50%, -50%) scale(1.16); } 58% { transform: translate(-50%, -51%) scale(.985); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes flowHold { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -51%) scale(1.018); } }
/* golden glow bloom behind the figure (pseudo-element → no markup change) */
.flow-figure::before {
    content: ''; position: absolute; left: 50%; top: 47%; width: 320px; height: 320px; z-index: -1;
    transform: translate(-50%, -50%) scale(.55); border-radius: 50%; opacity: 0; pointer-events: none;
    background: radial-gradient(circle, rgba(255, 246, 220, .9) 0%, rgba(255, 224, 168, .5) 34%, rgba(255, 210, 150, .18) 55%, transparent 68%);
}
.flow-stage.flow-held .flow-figure::before { animation: flowBloom 1.5s ease-out both, flowGlowBreath 6.5s ease-in-out 1.5s infinite; }
@keyframes flowBloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 55% { opacity: 1; } 100% { opacity: .92; transform: translate(-50%, -50%) scale(1); } }
@keyframes flowGlowBreath { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.95); } 50% { opacity: .95; transform: translate(-50%, -50%) scale(1.06); } }
/* name fades up on arrival */
.flow-stage.flow-held .flow-name { animation: flowNameIn .9s ease .35s both; }
@keyframes flowNameIn { 0% { opacity: 0; transform: translateY(11px); } 100% { opacity: 1; transform: translateY(0); } }
/* pose name */
.flow-name { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; }
.flow-name .flow-en { display: block; font-size: 25px; font-weight: 800; color: #2b1836; letter-spacing: .3px; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.flow-name .flow-sa { display: block; font-size: 12.5px; color: #6a3f5a; font-style: italic; margin-top: 1px; }
/* cue chip */
.flow-cue { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #4a2f52; background: rgba(255, 246, 224, .62); padding: 5px 16px; border-radius: 20px; }
.flow-cue.flow-hold { background: rgba(255, 246, 224, .85); color: #3a1f42; }
/* begin button + hold knob */
.flow-beginbtn-wrap { text-align: center; }
.flow-beginbtn-main {
    display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; font-size: 15px; font-weight: 800; color: #2b1836;
    padding: 12px 32px; border-radius: 24px; border: 0; cursor: pointer; letter-spacing: .5px;
    background: linear-gradient(135deg, var(--flow-grad-a, #f7d59b), var(--flow-grad-b, #e0a0b4)); box-shadow: 0 8px 22px -6px rgba(224, 160, 180, .6);
}
.flow-hold-row { margin-top: 16px; }
.flow-hold-row label { font-size: 13px; font-weight: 600; color: var(--theme-text, #1a1a2e); display: flex; align-items: center; gap: 8px; }
.flow-hold-row .flow-hold-val { color: #b5568a; font-weight: 800; }
.flow-hold-row input[type=range] { width: 100%; margin-top: 8px; accent-color: #c77aa0; }
.flow-effects { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 13px; color: var(--theme-text, #1a1a2e); }
.flow-effects label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.flow-items-ta { width: 100%; min-height: 220px; font-family: monospace; font-size: .9rem; border-radius: 10px; border: 1px solid var(--theme-border, #d7dbe0); background: var(--theme-bg, #fff); color: var(--theme-text, #1a1a2e); padding: 10px 12px; resize: vertical; }

.page-flow-scope {
    --wsp-result-accent: #b5568a;
    --wsp-result-grad: linear-gradient(135deg, #f7d59b, #e0a0b4);
    --wsp-result-plate: rgba(181, 86, 138, .10);
}

@media (max-width: 575.98px) {
    .flow-stage { height: 360px; }
    .flow-figure { width: 210px; height: 220px; }
}

/* ── SEO content (.flow-content) — type scale from .content-guide; colour only ── */
.flow-content { color: var(--theme-text, #1a1a2e); background: var(--theme-bg, #fff); padding: 3.25rem 0 3.5rem; margin-top: 1rem; border-top: 1px solid var(--theme-border, #e9ecef); }
.flow-inner { max-width: 860px; margin: 0 auto; padding: 0 1rem; }
.flow-content h2, .flow-content h3 { color: var(--theme-text, #1a1a2e); }
.flow-content p, .flow-content li { color: var(--theme-muted, #5b6470); }
.flow-content strong { color: var(--theme-text, #1a1a2e); }
.flow-content a { color: #a13d78; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.flow-kicker { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #2b1836; background: linear-gradient(135deg, #f7d59b, #e0a0b4); border-radius: 999px; padding: .3rem .85rem; margin-bottom: .95rem; }
.flow-content .flow-lead { font-size: 1.2rem; line-height: 1.7; color: var(--theme-text, #1a1a2e); margin-bottom: 1.25rem; }
.flow-section { margin-top: 2.9rem; }
.flow-content .table { font-size: 1rem; }
.flow-content .table thead th { text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; font-weight: 800; color: #fff; background: #a13d78; padding: .7rem 1rem; }
.flow-content .table tbody td { padding: .6rem 1rem; border-bottom: 1px solid var(--theme-border, #e9ecef); vertical-align: top; }
.flow-content .table tbody td:first-child { font-weight: 700; color: var(--theme-text, #1a1a2e); white-space: nowrap; }
.flow-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.flow-pair-card { background: var(--theme-surface, #f8f9fa); border: 1px solid var(--theme-border, #e9ecef); border-radius: 12px; padding: 1rem 1.1rem; border-top: 3px solid #c77aa0; }
.flow-pair-card h3 { margin-top: 0 !important; font-size: 1.02rem !important; } .flow-pair-card p:last-child { margin-bottom: 0; font-size: .92rem; }
.flow-faq { margin-top: 1.4rem; }
.flow-faq .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--theme-border, #e9ecef); }
.flow-faq .accordion-button { background: transparent; color: var(--theme-text, #1a1a2e); font-weight: 600; padding-left: 0; padding-right: 2.5rem; box-shadow: none; }
.flow-faq .accordion-button:not(.collapsed) { color: #a13d78; background: transparent; }
.flow-faq .accordion-button:focus { box-shadow: none; }
.flow-faq .accordion-body { padding-left: 0; color: var(--theme-muted, #5b6470); }
@media (max-width: 767.98px) { .flow-pair { grid-template-columns: 1fr; } }
body[data-theme="high-contrast"] .flow-content p, body[data-theme="high-contrast"] .flow-content li, body[data-theme="high-contrast"] .flow-content .flow-lead { color: rgba(255,255,255,.84); }
body[data-theme="high-contrast"] .flow-content h2, body[data-theme="high-contrast"] .flow-content h3 { color: #fff; }