/* Apollo — CAN SLIM Market Timing · WOO HQ + WOO History Explorer + page motion (2026-10-18). */
:root { --wx-ease: cubic-bezier(0.22, 1, 0.36, 1); --wx-up: #22c55e; --wx-down: #ef4444; --wx-amber: #f5a524; --wx-accent: #00d4ff; }

/* ── scroll reveal (only when JS has opted in) ──────────────────────────── */
.ct-reveal-on .ct-page > .ct-card,
.ct-reveal-on .ct-page > .ct-banner,
.ct-reveal-on .ct-page > .woo-hq,
.ct-reveal-on .ct-page > .ct-lc-divider { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--wx-ease), transform 0.7s var(--wx-ease); }
.ct-reveal-on .ct-page > .ct-in { opacity: 1; transform: none; }
.ct-card { transition: border-color 0.3s, box-shadow 0.3s; }
.ct-card:hover { border-color: #34405a; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28); }

/* ── HQ ─────────────────────────────────────────────────────────────────── */
.woo-hq { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 26px 20px; margin-bottom: 18px; border: 1px solid #2a3346; background: #121827; }
.woo-hq.is-open { border-color: rgba(34, 197, 94, 0.45); }
.woo-hq.is-closed { border-color: rgba(239, 68, 68, 0.45); }
.woo-hq-glow { position: absolute; inset: -40% -10% auto auto; width: 70%; height: 180%; pointer-events: none; filter: blur(10px); animation: wx-float 14s ease-in-out infinite alternate; }
.is-open .woo-hq-glow { background: radial-gradient(closest-side, rgba(34, 197, 94, 0.20), transparent); }
.is-closed .woo-hq-glow { background: radial-gradient(closest-side, rgba(239, 68, 68, 0.20), transparent); }
@keyframes wx-float { to { transform: translate(-8%, 6%) scale(1.08); } }
.woo-hq > * { position: relative; }
.woo-hq-top { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
.woo-hq-status { display: flex; gap: 18px; align-items: center; }
.woo-orb { width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; }
.is-open .woo-orb { background: var(--wx-up); box-shadow: 0 0 22px var(--wx-up); }
.is-closed .woo-orb { background: var(--wx-down); box-shadow: 0 0 22px var(--wx-down); }
.woo-orb::before, .woo-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: wx-ping 2.4s ease-out infinite; }
.woo-orb::after { animation-delay: 1.2s; }
@keyframes wx-ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.2); opacity: 0; } }
.woo-kicker { color: #8b9bb4; font-size: 0.76rem; letter-spacing: 0.8px; text-transform: uppercase; }
.woo-flag { font-size: 2.2rem; font-weight: 900; letter-spacing: 1px; line-height: 1.1; margin: 2px 0; }
.is-open .woo-flag { background: linear-gradient(90deg, #4ade80, #a7f3d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.is-closed .woo-flag { background: linear-gradient(90deg, #ff6b6b, #fecaca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.woo-sub { color: #c4cfdf; font-size: 0.92rem; }
.woo-kpis { display: flex; gap: 12px; flex-wrap: wrap; }
.woo-kpi { min-width: 120px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); text-align: center; }
.woo-kpi-v { display: block; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.woo-kpi-l { display: block; font-size: 0.72rem; color: #8b9bb4; margin-top: 2px; }

.woo-watch-title { margin: 22px 0 10px; font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #cfe0f2; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.woo-watch-tier { text-transform: none; letter-spacing: 0; font-weight: 500; color: #8b9bb4; font-size: 0.85rem; }
.woo-watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.woo-path { padding: 14px 16px; border-radius: 14px; background: rgba(10, 14, 23, 0.55); border: 1px solid #263048; transition: transform 0.3s var(--wx-ease), border-color 0.3s; }
.woo-path:hover { transform: translateY(-2px); border-color: rgba(0, 212, 255, 0.4); }
.woo-path.is-hit { border-color: rgba(239, 68, 68, 0.55); }
.woo-path-h { font-size: 0.8rem; color: #8b9bb4; display: flex; align-items: center; gap: 8px; }
.woo-path-n { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; background: rgba(0, 212, 255, 0.14); color: var(--wx-accent); }
.woo-path-big { font-size: 1.15rem; font-weight: 800; margin: 8px 0 4px; }
.woo-path-s { font-size: 0.8rem; color: #8fa1bd; line-height: 1.5; }
.woo-steps { display: flex; gap: 6px; margin-top: 10px; }
.woo-step { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 700; color: #5f6f88; border: 1px dashed #33405a; }
.woo-step.is-ftd { border-color: rgba(0, 212, 255, 0.5); color: var(--wx-accent); }
.woo-step.is-done { background: rgba(34, 197, 94, 0.18); border: 1px solid rgba(34, 197, 94, 0.55); color: #86efac; animation: wx-pop 0.5s var(--wx-ease) both; }
@keyframes wx-pop { from { transform: scale(0.6); opacity: 0; } }
.woo-gauge { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; margin: 6px 0 8px; }
.woo-gauge b { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--wx-down), var(--wx-amber), var(--wx-up)); animation: wx-grow 1.4s 0.3s var(--wx-ease) forwards; }
@keyframes wx-grow { to { width: var(--w); } }

.woo-vs { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #2a3346; }
.woo-vs:empty { display: none; }
.woo-vs-h { font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: #cfe0f2; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.woo-vs-open { background: none; border: 0; color: var(--wx-accent); cursor: pointer; font: inherit; font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.woo-vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 10px; animation: wx-rise 0.6s var(--wx-ease); }
.woo-vs-grid div, .wx-det-stats div { display: flex; flex-direction: column; gap: 2px; }
.woo-vs-grid span, .wx-det-stats span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.7px; color: #6b7a90; }
.woo-vs-grid b, .wx-det-stats b { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.woo-vs-grid small, .wx-det-stats small { font-size: 0.74rem; color: #8b9bb4; }
@keyframes wx-rise { from { opacity: 0; transform: translateY(8px); } }

/* ── explorer ───────────────────────────────────────────────────────────── */
.woo-x-insight { display: flex; gap: 22px; align-items: center; padding: 16px 18px; border-radius: 14px; background: linear-gradient(110deg, rgba(0, 212, 255, 0.10), rgba(124, 92, 255, 0.06)); border: 1px solid rgba(0, 212, 255, 0.25); margin-bottom: 16px; flex-wrap: wrap; }
.wx-ins-big { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.wx-ins-num { font-size: 2.6rem; font-weight: 900; color: var(--wx-accent); line-height: 1; text-shadow: 0 0 24px rgba(0, 212, 255, 0.35); font-variant-numeric: tabular-nums; }
.wx-ins-unit { font-size: 0.72rem; color: #8fa1bd; text-transform: uppercase; letter-spacing: 0.7px; margin-top: 4px; text-align: center; }
.wx-ins-text { flex: 1; min-width: 260px; color: #c7d2e0; font-size: 0.92rem; line-height: 1.65; }

.woo-x-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.woo-x-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 0.72rem; color: #8b9bb4; text-transform: uppercase; letter-spacing: 0.6px; }
.woo-x-controls select { background: #10141f; color: #e6edf6; border: 1px solid #2a3346; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 0.86rem; text-transform: none; letter-spacing: 0; transition: border-color 0.2s; }
.woo-x-controls select:focus { outline: none; border-color: var(--wx-accent); }
.woo-x-seg { display: flex; align-items: center; gap: 4px; background: #10141f; border: 1px solid #2a3346; border-radius: 10px; padding: 3px; }
.woo-x-seg-l { font-size: 0.72rem; color: #8b9bb4; padding: 0 6px; text-transform: uppercase; letter-spacing: 0.6px; }
.woo-x-seg button { background: none; border: 0; color: #8b9bb4; font: inherit; font-size: 0.84rem; padding: 6px 11px; border-radius: 7px; cursor: pointer; transition: all 0.25s var(--wx-ease); }
.woo-x-seg button:hover { color: #e6edf6; }
.woo-x-seg button.is-on { background: rgba(0, 212, 255, 0.16); color: #e6edf6; box-shadow: inset 0 0 0 1px rgba(0, 212, 255, 0.45); }

.woo-x-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 1000px) { .woo-x-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .woo-x-tiles { grid-template-columns: repeat(2, 1fr); } }
.wx-tile { padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); animation: wx-rise 0.5s var(--wx-ease) both; }
.wx-tile:nth-child(2) { animation-delay: 0.04s; } .wx-tile:nth-child(3) { animation-delay: 0.08s; } .wx-tile:nth-child(4) { animation-delay: 0.12s; } .wx-tile:nth-child(5) { animation-delay: 0.16s; } .wx-tile:nth-child(6) { animation-delay: 0.2s; }
.wx-tile-l { font-size: 0.68rem; color: #6b7a90; text-transform: uppercase; letter-spacing: 0.7px; }
.wx-tile-v { font-size: 1.45rem; font-weight: 800; margin: 4px 0 1px; font-variant-numeric: tabular-nums; }
.wx-tile-s { font-size: 0.72rem; color: #8b9bb4; }

.woo-x-ribbon-wrap { position: relative; margin: 6px 0 4px; }
.woo-x-ribbon { position: relative; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); overflow: hidden; }
.wx-seg { position: absolute; top: 0; bottom: 0; transition: opacity 0.35s, filter 0.25s, transform 0.25s; }
.wx-seg-win { background: linear-gradient(180deg, #34d27e, #16a34a); cursor: pointer; top: 4px; bottom: 4px; border-radius: 2px; }
.wx-seg-win.is-big { background: linear-gradient(180deg, #86efac, #22c55e); box-shadow: 0 0 10px rgba(34, 197, 94, 0.6); }
.wx-seg-win:hover { filter: brightness(1.35); transform: scaleY(1.15); z-index: 2; }
.wx-seg-win.is-dim { opacity: 0.18; }
.wx-seg-win.is-sel { box-shadow: 0 0 0 2px #e6edf6, 0 0 14px rgba(255, 255, 255, 0.6); z-index: 3; }
.wx-seg-corr { background: rgba(239, 68, 68, 0.28); top: 12px; bottom: 12px; }
.wx-seg-corr.is-deep { background: rgba(239, 68, 68, 0.6); top: 9px; bottom: 9px; }
.woo-x-ribbon-axis { position: relative; height: 18px; margin-top: 4px; }
.woo-x-ribbon-axis span { position: absolute; transform: translateX(-50%); font-size: 0.68rem; color: #6b7a90; }
.woo-x-tip { position: absolute; bottom: 44px; transform: translateX(-50%); background: #1c2539; border: 1px solid #33405a; border-radius: 10px; padding: 8px 12px; font-size: 0.78rem; color: #e6edf6; white-space: nowrap; pointer-events: none; z-index: 5; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); line-height: 1.5; }

.woo-x-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
@media (max-width: 900px) { .woo-x-charts { grid-template-columns: 1fr; } }
.woo-x-chart { background: rgba(10, 14, 23, 0.45); border: 1px solid #263048; border-radius: 14px; padding: 14px; }
.woo-x-chart-h { font-size: 0.86rem; font-weight: 700; color: #cfe0f2; margin-bottom: 8px; }
.woo-x-canvas { position: relative; height: 290px; }

.woo-x-detail { border: 1px solid rgba(0, 212, 255, 0.35); border-radius: 16px; padding: 16px 18px; margin: 16px 0; background: linear-gradient(160deg, rgba(0, 212, 255, 0.06), rgba(10, 14, 23, 0.4)); animation: wx-rise 0.5s var(--wx-ease); }
.wx-det-head { display: flex; justify-content: space-between; gap: 12px; }
.wx-det-k { font-size: 0.7rem; color: #6b7a90; text-transform: uppercase; letter-spacing: 0.8px; }
.wx-det-t { font-size: 1.2rem; font-weight: 800; margin: 2px 0 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wx-det-x { background: none; border: 0; color: #8b9bb4; font-size: 1.6rem; cursor: pointer; line-height: 1; height: 30px; transition: transform 0.2s, color 0.2s; }
.wx-det-x:hover { color: #e6edf6; transform: rotate(90deg); }
.wx-det-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 14px 0; }
.wx-det-canvas { position: relative; height: 260px; }

.woo-x-table-wrap { max-height: 520px; overflow: auto; border: 1px solid #263048; border-radius: 12px; }
.woo-x-table { width: 100%; font-size: 0.82rem; }
.woo-x-table thead th { position: sticky; top: 0; background: #151b2b; z-index: 1; cursor: pointer; user-select: none; white-space: nowrap; transition: color 0.2s; }
.woo-x-table thead th:hover { color: #e6edf6; }
.woo-x-table th.is-sorted { color: var(--wx-accent); }
.woo-x-table th.is-sorted[data-dir="asc"]::after { content: " ▲"; font-size: 0.65rem; }
.woo-x-table th.is-sorted[data-dir="desc"]::after { content: " ▼"; font-size: 0.65rem; }
.woo-x-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.woo-x-table tbody tr { cursor: pointer; transition: background 0.2s; }
.woo-x-table tbody tr:hover { background: rgba(0, 212, 255, 0.06); }
.woo-x-table tbody tr.is-sel { background: rgba(0, 212, 255, 0.12); }
.woo-x-table td { white-space: nowrap; }

.wx-o { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid; letter-spacing: 0.3px; }
.wx-o-fail { color: #fca5a5; border-color: rgba(239, 68, 68, 0.5); background: rgba(239, 68, 68, 0.08); }
.wx-o-short { color: #fcd34d; border-color: rgba(245, 165, 36, 0.5); background: rgba(245, 165, 36, 0.08); }
.wx-o-durable { color: #86efac; border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.08); }
.wx-o-big { color: #0a0e17; border-color: #4ade80; background: linear-gradient(90deg, #4ade80, #a7f3d0); }
.wx-o-open { color: #67e8f9; border-color: rgba(0, 212, 255, 0.5); background: rgba(0, 212, 255, 0.08); }

@media (max-width: 600px) {
    .woo-hq { padding: 18px 16px; }
    .woo-flag { font-size: 1.7rem; }
    .woo-kpi { min-width: 0; flex: 1; padding: 10px; }
    .woo-kpi-v { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .woo-hq-glow, .woo-orb::before, .woo-orb::after { animation: none; }
    .woo-gauge b { animation: none; width: var(--w); }
}