/* ================================================================
   FOUR PILLARS — CIRCLES & WHEEL CENTERPIECE
   Load AFTER four-pillars-no-stripes.css (the last in your chain).

   Two things in one file:

   PART A — Circle treatment for pillar orientation cards
     The .fp-pillar-card-stem and .fp-pillar-card-branch elements
     get wrapped in colored ring circles. Outline-style (transparent
     center, colored ring, colored character) for a refined look
     that's deliberately different from CosmicTao's solid-filled
     approach.

   PART B — Wheel as proper centerpiece
     The .fpw section becomes the visual focal point of the results
     page. Ambient glow background, refined intro presentation,
     better visual containment.

   Pure CSS only — no JS changes required. Works with the existing
   inline color styles the render function sets on stem/branch
   text (via style="color: ...").
   ================================================================ */


/* ════════════════════════════════════════════════════════════════
   PART A — PILLAR CARD CIRCLES
   ════════════════════════════════════════════════════════════════ */

/* The pillar card layout: stem and branch sit inside .fp-pillar-card-chars
   as flex children. We make each one into a circle. The character text
   color is set inline by the renderer (e.g. style="color: #6FBF7F" for
   Wood); we use that same color for the ring border via currentColor.

   Trick: by setting color on the parent and the border to currentColor,
   we don't have to know each element's color in CSS. The renderer
   already paints the text the right color, and the ring inherits. */

.fp-pillar-card {
    /* Loosen the existing card layout so circles get vertical breathing room */
    padding: 1.5rem 1rem 1.25rem;
    text-align: center;
}

.fp-pillar-card-chars {
    /* Stack stem above branch with comfortable spacing */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    margin: 0.5rem 0 0.75rem;
}

/* The actual circles. Both stem and branch get the same treatment so
   they read as a pair (stem on top, branch on bottom — same as how
   classical BaZi charts are drawn). */
.fp-pillar-card-stem,
.fp-pillar-card-branch {
    /* Reset whatever box model the base CSS gave them */
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* The ring: 2px border in currentColor, slightly transparent.
       currentColor pulls from the inline color style the renderer sets,
       so Wood characters get a Wood ring, Fire characters get a Fire ring,
       etc. — no extra CSS per element needed. */
    border: 2px solid currentColor;
    /* Faint glow + slight inner ring for depth. The color-mix gives us
       a tinted shadow without hardcoding hex values per element. */
    box-shadow:
        inset 0 0 0 6px color-mix(in srgb, currentColor 6%, transparent),
        0 0 16px color-mix(in srgb, currentColor 12%, transparent);
    /* The character itself */
    font-family: 'Noto Serif SC', 'Songti SC', 'PingFang SC', serif;
    font-size: 1.85rem;
    font-weight: 500;
    line-height: 1;
    /* Background: very faint tint of the same color so the circle has
       some presence even before you notice the ring */
    background: radial-gradient(
        circle at 50% 50%,
        color-mix(in srgb, currentColor 8%, transparent) 0%,
        color-mix(in srgb, currentColor 3%, transparent) 70%,
        transparent 100%
    );
    /* Smooth transition for hover state below */
    transition:
        transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

/* The branch circle gets slightly bolder so the eye reads stem-on-top,
   branch-below as the classical structure — the branch is "heavier" */
.fp-pillar-card-branch {
    border-width: 2.5px;
}

/* Empty pillar (no birth hour) — the em-dash placeholder needs to read
   as deliberately empty, not broken */
.fp-pillar-card--empty .fp-pillar-card-stem,
.fp-pillar-card--empty .fp-pillar-card-branch {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.25);
    background: transparent;
    box-shadow: none;
    font-size: 1.4rem;
}

/* Hover state: subtle lift via shadow expansion. Crucially we do NOT
   transform the circles (no translateY) because the parent card already
   has a hover state from the no-stripes patch, and stacking transforms
   creates jitter. */
.fp-pillar-card:hover .fp-pillar-card-stem,
.fp-pillar-card:hover .fp-pillar-card-branch {
    box-shadow:
        inset 0 0 0 8px color-mix(in srgb, currentColor 8%, transparent),
        0 0 24px color-mix(in srgb, currentColor 22%, transparent);
}

/* The animal label below the circles — gets a touch more presence */
.fp-pillar-card-animal {
    font-size: 0.92rem;
    font-weight: 600;
    color: rgba(232, 224, 212, 0.92);
    margin-top: 0.5rem;
    letter-spacing: 0.01em;
}

/* The English caption underneath ("Yi Wood", etc.) — quiet, supportive */
.fp-pillar-card-en {
    font-size: 0.78rem;
    color: rgba(232, 224, 212, 0.55);
    margin-top: 0.2rem;
    letter-spacing: 0.02em;
}

/* The pillar label at the top of the card ("Year Pillar") — already
   styled in the elevation file, but give it a touch more bottom margin
   so it doesn't crowd the circles */
.fp-pillar-card-label {
    margin-bottom: 0.85rem;
}

/* Day Pillar circles get a slightly stronger ring since it's the
   reference for the whole chart (the Day Master) */
.fp-pillar-card--day .fp-pillar-card-stem {
    border-width: 2.5px;
    box-shadow:
        inset 0 0 0 7px color-mix(in srgb, currentColor 9%, transparent),
        0 0 24px color-mix(in srgb, currentColor 18%, transparent);
}


/* Mobile: shrink the circles so two cards fit side by side cleanly */
@media (max-width: 600px) {
    .fp-pillar-card-stem,
    .fp-pillar-card-branch {
        width: 52px;
        height: 52px;
        font-size: 1.55rem;
    }
    .fp-pillar-card {
        padding: 1.2rem 0.6rem 1rem;
    }
}


/* ════════════════════════════════════════════════════════════════
   PART B — WHEEL AS CENTERPIECE
   ════════════════════════════════════════════════════════════════ */

/* The wheel section becomes the "stage" of the page. We add:
   - An ambient glow behind it (subtle radial gradient)
   - Refined intro typography
   - Better containment so it reads as one composed object
   - A first-time hint that fades on first interaction
*/

.fpw {
    position: relative;
    margin: 3rem auto 2.5rem;
    padding: 1rem 0 2rem;
    /* Ambient glow behind the wheel — a soft gold radial that suggests
       "this is the focal point" without being decorative noise */
    background:
        radial-gradient(
            ellipse 80% 60% at 50% 45%,
            rgba(232, 197, 71, 0.04) 0%,
            transparent 70%
        );
}

/* Subtle outer "halo" — a soft ring that surrounds the whole wheel
   section, drawing the eye inward. Uses ::before to avoid disturbing
   the existing layout. */
.fpw::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 760px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(232, 197, 71, 0.025) 0%,
        rgba(199, 125, 255, 0.02) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    /* Slow ambient pulse — almost imperceptible, just enough to make
       the wheel feel "alive" rather than static. ~6s cycle so it never
       feels like UI motion. */
    animation: fpw-ambient-pulse 6s ease-in-out infinite;
}

/* Wheel children sit above the halo */
.fpw > * {
    position: relative;
    z-index: 1;
}

@keyframes fpw-ambient-pulse {
    0%, 100% {
        opacity: 0.85;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.04);
    }
}


/* Wheel intro paragraph: more presence, treats it as a section opener */
.fpw-intro {
    max-width: 640px;
    margin: 0 auto 1.5rem;
    font-size: 0.92rem;
    font-style: italic;
    color: rgba(232, 224, 212, 0.65);
    line-height: 1.7;
    text-align: center;
    /* Add a subtle eyebrow above using ::before */
    position: relative;
    padding-top: 1.75rem;
}

.fpw-intro::before {
    content: 'The Chart Wheel';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-style: normal;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(232, 197, 71, 0.85);
    font-weight: 500;
}


/* Wheel controls bar: refine to sit lower-key beneath the wheel,
   not competing visually */
.fpw-controls {
    margin: 1.5rem auto 0;
    padding: 0.85rem 1rem;
    max-width: 720px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.fpw-ctrl {
    /* Slightly more refined: pill shape, smaller text */
    border-radius: 999px;
    font-size: 0.72rem;
    padding: 0.4rem 0.95rem;
    letter-spacing: 0.02em;
}


/* The wheel SVG itself: drop a soft shadow so it feels like an object
   sitting on the page rather than a flat illustration */
.fpw-svg {
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.35));
}


/* First-time hint overlay: a small floating tag that says "tap any
   character" — fades in on results render, fades out on first click
   anywhere in the wheel. This is presentation only — the JS already
   handles the click; we're just adding the visual cue.

   To wire the fade-out: add a small JS hook that toggles
   .fpw--touched on the parent on first click of .fpw-clickable.
   I'll include the snippet in the deploy notes. */

.fpw-hint {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: rgba(232, 197, 71, 0.12);
    border: 1px solid rgba(232, 197, 71, 0.32);
    border-radius: 999px;
    font-size: 0.72rem;
    color: #E8C547;
    letter-spacing: 0.02em;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    animation: fpw-hint-appear 0.5s ease 1.5s forwards;
    transition: opacity 0.4s ease;
}

.fpw-hint::before {
    content: '↑';
    font-size: 0.85rem;
    opacity: 0.7;
}

/* When the wheel is "touched" (first click), the hint fades */
.fpw--touched .fpw-hint {
    opacity: 0 !important;
    pointer-events: none;
}

@keyframes fpw-hint-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Wheel body container: the existing flex layout that holds the balance
   panel + the SVG. Give it a more deliberate "frame" — a subtle inset
   panel that contains the visual */
.fpw-body {
    padding: 1.5rem 1rem;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}


/* The balance side panel: align it visually with the new frame */
.fpw-balance {
    background: rgba(20, 20, 28, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* Mobile: the wheel body stacks. Reduce padding and turn off the halo
   pulse (the wheel takes less space on small screens, the ambient
   effect is already softer in context) */
@media (max-width: 760px) {
    .fpw-body {
        padding: 1rem 0.5rem;
    }
    .fpw::before {
        width: 90%;
    }
}

@media (max-width: 600px) {
    .fpw-intro {
        font-size: 0.85rem;
        padding-top: 1.5rem;
    }
    .fpw::before {
        animation: none;
        opacity: 0.6;
    }
}


/* Respect reduced-motion: kill the ambient pulse */
@media (prefers-reduced-motion: reduce) {
    .fpw::before {
        animation: none;
    }
    .fpw-hint {
        animation: none;
        opacity: 1;
        transform: translateY(0);
    }
}


/* ════════════════════════════════════════════════════════════════
   END
   ================================================================ */