/* ============================================================================
   SFMWheel — the layered Vastu Purush Mandala (js/vastu-wheel.js)
   ========================================================================== */
.sfm-wheel { display: block; width: 100%; height: auto; font-family: var(--font-display, Inter, system-ui, sans-serif); text-rendering: geometricPrecision; }
.sfm-wheel text { text-anchor: middle; dominant-baseline: central; pointer-events: none; }

.sfm-wheel__rim { transform-origin: 500px 500px; animation: sfm-wheel-spin 90s linear infinite; }
.sfm-wheel.no-spin > .sfm-wheel__rim { animation: sfm-wheel-ring-in .7s .48s both; }
@keyframes sfm-wheel-spin { to { transform: rotate(360deg); } }
.sfm-wheel__rim-ring { fill: none; stroke: var(--sf-hairline, #E2DCCF); stroke-width: 1.5; }
.sfm-wheel__rim line { stroke: var(--sf-ink-faint, #8A86A3); stroke-width: 1.4; stroke-linecap: round; }
.sfm-wheel__rim line.is-long { stroke: var(--sf-ink, #1E1B2E); stroke-width: 2.4; }

.sfm-wheel__seg { stroke: #FFFFFF; stroke-width: 2.5; stroke-linejoin: round; transition: filter .25s ease; }
.sfm-wheel__padas .sfm-wheel__seg { stroke: rgba(30, 27, 46, .14); stroke-width: 1.2; }
.sfm-wheel__rings circle { fill: none; stroke: rgba(30, 27, 46, .16); stroke-width: 1.2; pointer-events: none; }
.sfm-wheel.is-interactive .sfm-wheel__seg { cursor: pointer; outline: none; }
.sfm-wheel.is-interactive .sfm-wheel__seg:hover,
.sfm-wheel.is-interactive .sfm-wheel__seg:focus-visible { filter: brightness(.94) saturate(1.25); }

/* A lit zone keeps every other segment at full strength (no dimming, so the
   wheel stays crisp) and stands out with an ink outline and the pulse. */
.sfm-wheel__seg.is-lit { filter: saturate(1.3); }
.sfm-wheel__focus path { fill: none; stroke: var(--sf-ink, #1E1B2E); stroke-width: 3; stroke-linejoin: round; pointer-events: none; }
.sfm-wheel__focus path.is-selected { stroke: var(--sf-accent, #3D2F8F); stroke-width: 4.5; }

.sfm-wheel__zone-t   { font-size: 21px; font-weight: 800; letter-spacing: .02em; fill: var(--sf-ink, #1E1B2E); }
.sfm-wheel__zone-t.is-sub { font-weight: 700; letter-spacing: .06em; fill: var(--sf-ink-soft, #4B4766); }
.sfm-wheel__pada-t   { font-size: 19px; font-weight: 800; fill: var(--sf-ink, #1E1B2E); }
.sfm-wheel__devta-t  { font-size: 14.5px; font-weight: 700; letter-spacing: .03em; fill: var(--sf-ink, #1E1B2E); }
.sfm-wheel__inner-t  { font-size: 19px; font-weight: 800; letter-spacing: .05em; fill: var(--sf-ink, #1E1B2E); }
.sfm-wheel__dir      { font-size: 21px; font-weight: 800; letter-spacing: .04em; fill: var(--sf-ink-soft, #4B4766); }
.sfm-wheel__dir.is-cardinal { font-size: 34px; fill: var(--sf-accent, #3D2F8F); }
.sfm-wheel__brahma   { fill: var(--sf-gold, #F2C27D); stroke: #FFFFFF; stroke-width: 3; }
.sfm-wheel__brahma-t { font-size: 20px; font-weight: 800; letter-spacing: .06em; fill: #4A3209; }

/* The active zone breathes, as the old compass did. */
.sfm-wheel__seg[data-kind="zone"].is-lit { animation: sfm-wheel-pulse 2.6s ease-in-out infinite; }
@keyframes sfm-wheel-pulse {
    0%, 100% { filter: saturate(1.3) brightness(.98) drop-shadow(0 4px 12px rgba(30, 27, 46, .18)); }
    50%      { filter: saturate(1.45) brightness(1.04) drop-shadow(0 8px 20px rgba(30, 27, 46, .32)); }
}

/* On load the rings unfold from Brahma outwards. */
.sfm-wheel > g { transform-origin: 500px 500px; animation: sfm-wheel-ring-in .7s cubic-bezier(.2, .8, .2, 1) both; }
.sfm-wheel__inner   { animation-delay: 0s; }
.sfm-wheel__devtas  { animation-delay: .12s !important; }
.sfm-wheel__padas   { animation-delay: .24s !important; }
.sfm-wheel__zones   { animation-delay: .36s !important; }
.sfm-wheel > .sfm-wheel__rim { animation: sfm-wheel-ring-in .7s .48s cubic-bezier(.2, .8, .2, 1) both, sfm-wheel-spin 90s 1.2s linear infinite; }
@keyframes sfm-wheel-ring-in {
    from { opacity: 0; transform: scale(.86) rotate(-8deg); }
    to   { opacity: 1; transform: none; }
}
.sfm-wheel.is-redraw > g { animation: none; }
.sfm-wheel.is-redraw > .sfm-wheel__rim { animation: sfm-wheel-spin 90s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    .sfm-wheel > g, .sfm-wheel > .sfm-wheel__rim, .sfm-wheel__seg[data-kind="zone"].is-lit { animation: none !important; }
}