/* Lyons Wealth — PH · Changing markets (ph_markets)
   Source: flexible_css.css (Philosophy design). Loaded only on pages that use this layout.
   Every selector is scoped (.pho.pho-markets); nothing is global. Animated states only
   apply while html.pho-anim is set; without JS everything is shown. */

.pho.pho-markets { position:relative; overflow:hidden; background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 60%,var(--navy) 100%); isolation:isolate; }
.pho.pho-markets .wrap { position:relative; z-index:2; }
.pho.pho-markets .mk-glow { position:absolute; border-radius:50%; pointer-events:none; z-index:0; }
.pho.pho-markets .mk-glow--a { width:48vw; height:48vw; top:-18vw; left:-12vw; background:radial-gradient(circle,rgba(255,196,81,.16),transparent 65%); animation:phMkDrift 20s ease-in-out infinite; }
.pho.pho-markets .mk-glow--b { width:42vw; height:42vw; bottom:-18vw; right:-10vw; background:radial-gradient(circle,rgba(255,196,81,.1),transparent 65%); animation:phMkDrift 26s ease-in-out infinite reverse; }
.pho.pho-markets .mk-grid { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent); mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent); animation:phMkGrid 30s linear infinite; }

/* cycle chart */
.pho.pho-markets .cycle { position:relative; margin-top:clamp(10px,2vh,20px); }
.pho.pho-markets .cycle svg { display:block; width:100%; height:auto; overflow:visible; }
.pho.pho-markets .cycle__base { stroke:rgba(255,255,255,.14); stroke-width:1; stroke-dasharray:4 6; animation:phMkDash 2.4s linear infinite; }
.pho.pho-markets .cycle__scan { opacity:0; }
.pho.pho-markets .cycle__path { fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linecap:round; }
.pho.pho-markets .cycle__dot { fill:var(--navy); stroke:var(--gold); stroke-width:2; transform-box:fill-box; transform-origin:center; }
.pho.pho-markets .cycle__dot--warn { fill:var(--gold); }
.pho.pho-markets .cycle__ring { fill:none; stroke:var(--gold); stroke-width:1.5; opacity:0; transform-box:fill-box; transform-origin:center; }
.pho.pho-markets .cycle__marker { fill:#fff; opacity:0; filter:drop-shadow(0 0 6px rgba(255,196,81,.9)); transition:opacity .6s ease; }
.pho.pho-markets .cycle__lbl { fill:#C9D3DD; font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; }
.pho.pho-markets .cycle__lbl--gold { fill:var(--gold); }
.pho.pho-markets .cycle__cap { margin-top:14px; text-align:center; font-size:11px; letter-spacing:.06em; color:#8796A5; }

/* compare */
.pho.pho-markets .compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:clamp(48px,7vh,72px); }
.pho.pho-markets .compare--1 { grid-template-columns:1fr; max-width:640px; margin-left:auto; margin-right:auto; }
.pho.pho-markets .compare__col { position:relative; overflow:hidden; padding:clamp(28px,3vw,40px); border-radius:6px; border:1px solid rgba(183,194,206,.2); background:rgba(27,49,73,.55); backdrop-filter:blur(6px); transition:opacity .9s ease, transform 1s var(--ease), border-color .4s ease, background .4s ease; }
.pho.pho-markets .compare__col--we { border-color:rgba(255,196,81,.45); }
.pho.pho-markets .compare__col::before { content:""; position:absolute; top:0; left:0; height:2px; width:100%; background:var(--gold); transform-origin:left; transition:transform 1.2s var(--ease) 1.4s; }
.pho.pho-markets .compare__col--not::before { background:#7A8896; transform-origin:right; }
.pho.pho-markets .compare__col:hover { background:rgba(27,49,73,.85); border-color:rgba(255,196,81,.6); }
.pho.pho-markets .compare__tag { font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; color:var(--gold); }
.pho.pho-markets .compare__col--not .compare__tag { color:#9AA8B5; }
.pho.pho-markets .compare__col h3 { margin-top:10px; font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.2vw,24px); color:#fff; }
.pho.pho-markets .compare__col ul { list-style:none; margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.pho.pho-markets .compare__col li { display:flex; gap:14px; align-items:flex-start; font-size:15px; line-height:1.6; color:#C9D3DD; transition:opacity .6s ease, transform .6s var(--ease); }
.pho.pho-markets .compare__col li::before { content:""; flex-shrink:0; width:14px; height:1px; margin-top:12px; background:var(--gold); transform-origin:left; transition:transform .6s var(--ease); }
.pho.pho-markets .compare__col--not li::before { background:#7A8896; }
.pho.pho-markets .markets__note { margin-top:30px; text-align:center; font-family:var(--serif); font-style:italic; font-size:clamp(20px,2vw,26px); color:#E4EAF0; transition:opacity 1s ease 2.4s, letter-spacing 1.4s var(--ease) 2.4s; }

/* ---- animated states (html.pho-anim; section gets .is-in when visible) ---- */
.pho-anim .pho.pho-markets .mk-head > * { opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .9s var(--ease); }
.pho-anim .pho.pho-markets.is-in .mk-head > * { opacity:1; transform:none; }
.pho-anim .pho.pho-markets.is-in .mk-head > *:nth-child(2) { transition-delay:.12s; }
.pho-anim .pho.pho-markets.is-in .mk-head > *:nth-child(3) { transition-delay:.24s; }

.pho-anim .pho.pho-markets .cycle__area { opacity:0; transition:opacity 1.4s ease 1.6s; }
.pho-anim .pho.pho-markets .cycle__path { stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 2.6s var(--ease) .3s; }
.pho-anim .pho.pho-markets .cycle__dot { opacity:0; transform:scale(0); transition:opacity .4s ease, transform .6s cubic-bezier(.3,1.6,.5,1); }
.pho-anim .pho.pho-markets .cycle__lbl { opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s var(--ease); }
.pho-anim .pho.pho-markets .cycle__cap { opacity:0; transition:opacity .8s ease 2.8s; }
.pho-anim .pho.pho-markets.is-in .cycle__path { stroke-dashoffset:0; }
.pho-anim .pho.pho-markets.is-in .cycle__area { opacity:1; }
.pho-anim .pho.pho-markets.is-in .cycle__dot { opacity:1; transform:scale(1); }
.pho-anim .pho.pho-markets.is-in .cycle__lbl { opacity:1; transform:none; }
.pho-anim .pho.pho-markets.is-in .cycle__cap { opacity:1; }
.pho-anim .pho.pho-markets.is-in .cycle__scan { animation:phMkScan 6s ease-in-out 3s infinite; }
.pho-anim .pho.pho-markets.is-in .cycle__ring.r1 { animation:phMkRipple 2.6s ease-out 1.6s infinite; }
.pho-anim .pho.pho-markets.is-in .cycle__ring.r2 { animation:phMkRipple 2.6s ease-out 2.9s infinite; }
.pho-anim .pho.pho-markets.is-in .cycle__marker.is-live { opacity:1; }
.pho-anim .pho.pho-markets.is-in .d1 { transition-delay:.7s; }
.pho-anim .pho.pho-markets.is-in .d2 { transition-delay:1.25s; }
.pho-anim .pho.pho-markets.is-in .d3 { transition-delay:1.85s; }
.pho-anim .pho.pho-markets.is-in .d4 { transition-delay:2.35s; }

.pho-anim .pho.pho-markets .compare__col { opacity:0; }
.pho-anim .pho.pho-markets .compare__col--we { transform:translateX(-40px); }
.pho-anim .pho.pho-markets .compare__col--not { transform:translateX(40px); }
.pho-anim .pho.pho-markets .compare__col::before { transform:scaleX(0); }
.pho-anim .pho.pho-markets .compare__col li { opacity:0; transform:translateY(10px); }
.pho-anim .pho.pho-markets .compare__col li::before { transform:scaleX(0); }
.pho-anim .pho.pho-markets.is-in .compare__col { opacity:1; transform:none; transition-delay:.9s; }
.pho-anim .pho.pho-markets.is-in .compare__col--not { transition-delay:1.1s; }
.pho-anim .pho.pho-markets.is-in .compare__col:hover { transition-delay:0s; }
.pho-anim .pho.pho-markets.is-in .compare__col::before { transform:scaleX(1); }
.pho-anim .pho.pho-markets.is-in .compare__col li, .pho-anim .pho.pho-markets.is-in .compare__col li::before { opacity:1; transform:none; }
.pho-anim .pho.pho-markets.is-in .compare__col li:nth-child(1) { transition-delay:1.5s; }
.pho-anim .pho.pho-markets.is-in .compare__col li:nth-child(1)::before { transition-delay:1.6s; }
.pho-anim .pho.pho-markets.is-in .compare__col li:nth-child(2) { transition-delay:1.7s; }
.pho-anim .pho.pho-markets.is-in .compare__col li:nth-child(2)::before { transition-delay:1.8s; }
.pho-anim .pho.pho-markets.is-in .compare__col li:nth-child(n+3) { transition-delay:1.9s; }
.pho-anim .pho.pho-markets.is-in .compare__col li:nth-child(n+3)::before { transition-delay:2s; }

.pho-anim .pho.pho-markets .markets__note { opacity:0; letter-spacing:.06em; }
.pho-anim .pho.pho-markets.is-in .markets__note { opacity:1; letter-spacing:0; }

@keyframes phMkDrift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(4vw,3vw) scale(1.08); } }
@keyframes phMkGrid { to { background-position:64px 64px, 64px 64px; } }
@keyframes phMkDash { to { stroke-dashoffset:-20; } }
@keyframes phMkRipple { 0% { transform:scale(1); opacity:.8; } 100% { transform:scale(3.4); opacity:0; } }
@keyframes phMkScan { 0% { transform:translateX(0); opacity:0; } 10% { opacity:1; } 80% { opacity:1; } 100% { transform:translateX(1120px); opacity:0; } }

@media (max-width:820px) {
  .pho.pho-markets .compare { grid-template-columns:1fr; }
  .pho-anim .pho.pho-markets .compare__col--we, .pho-anim .pho.pho-markets .compare__col--not { transform:translateY(30px); }
  .pho-anim .pho.pho-markets.is-in .compare__col--we, .pho-anim .pho.pho-markets.is-in .compare__col--not { transform:none; }
  .pho.pho-markets .cycle__lbl { font-size:20px; }
}
@media (prefers-reduced-motion:reduce) {
  .pho.pho-markets .mk-glow, .pho.pho-markets .mk-grid, .pho.pho-markets .cycle__base, .pho.pho-markets .cycle__scan, .pho.pho-markets .cycle__ring { animation:none !important; }
  .pho.pho-markets .cycle__marker { display:none; }
}