/* Foundations of yoga (/syllabus/foundations.html): the four animations (yuj and the definitions,
   the Muṇḍaka bow, the darśana tree, the lamp of sādhaka and bādhaka), the history timeline and small
   layout helpers. Stage, cards, verses and tables come from course.css and style.css.
   Animation states only apply once the page script adds .fd-ready, so the page reads fine without JS. */

.course-head .books i { color: rgba(255, 255, 255, .9); }

/* ---------- layout helpers ---------- */
.fd-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px 20px; align-items: start; margin: 8px 0 18px; }
.fd-figs .figure { max-width: none; margin: 0; }
.fd-figs .table-scroll { margin: 0; }
.fd-figs .table-scroll .gloss { min-width: 0; }
.gloss .deva { font-size: 1.15rem; }
.verse .iast { color: var(--sage-dk); }
.verse .cite { margin: 0; }

/* ---------- history timeline ---------- */
.fd-eras { position: relative; list-style: none; padding: 0 !important; margin: 1.4em 0 1.2em; }
.fd-eras::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--night-3), var(--gold)); }
.fd-eras li { position: relative; margin: 0 0 .9em; padding-left: 40px; }
.fd-eras li::before { content: ""; position: absolute; left: 4px; top: .4em; width: 16px; height: 16px; border-radius: 50%; background: var(--cream); border: 2px solid var(--gold); box-shadow: 0 0 0 4px rgba(197, 165, 90, .16); }
.fd-eras li:last-child::before { background: var(--gold); }
.fd-eras p { margin: 0; }
.fd-era { font-size: .88rem; color: var(--muted); margin-bottom: .2em !important; }
.fd-era b { font: 400 1.2rem/1.3 var(--serif); color: var(--char); margin-right: .15em; }

/* ---------- cards ---------- */
.fd-myths .card h4 { font-size: 1.05rem; }
.fd-myths .tag-line { color: var(--terra-dk); }
.fd-lists ul { margin: 0; padding-left: 1.1em; }
.fd-list-help { border-top: 4px solid var(--sage-dk); }
.fd-list-hurt { border-top: 4px solid var(--terra); }
.fd-list-hurt .tag-line { color: var(--terra-dk); }

/* ---------- shared animation pieces ---------- */
.fd-yuj [hidden], .fd-bow [hidden], .fd-tree-stage [hidden], .fd-lamp [hidden] { display: none !important; }
.stage .deva { color: #fff; }
.stage .iast { color: var(--glow); }
.stage .cite a { color: var(--glow); }
.fd-lbl { font: italic 500 24px var(--serif-it); fill: rgba(255, 255, 255, .84); }
.fd-lbl-gold { fill: var(--glow); }
.fd-lbl-sage { fill: #C3D3B8; }
.fd-lbl-small { fill: rgba(255, 255, 255, .62); }
.fd-stars circle { fill: #fff; opacity: .5; }

/* ---------- 1. yuj ---------- */
.fd-yuj-svg { max-width: 760px; margin: 0 auto; }
.fd-strand { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fd-strand-a { stroke: #DCE3F4; filter: drop-shadow(0 0 4px rgba(220, 227, 244, .55)); }
.fd-strand-b { stroke: var(--glow); filter: drop-shadow(0 0 5px rgba(243, 223, 168, .7)); }
.fd-lbl-a { fill: #DCE3F4; }
.fd-lbl-b { fill: var(--glow); }
.fd-beam { stroke: rgba(243, 223, 168, .75); stroke-width: 3; stroke-linecap: round; fill: none; }
.fd-point { fill: #fff; }
.fd-root { font: 400 56px var(--deva); fill: #fff; }
.fd-root-iast { font: italic 500 26px var(--serif-it); fill: var(--glow); }
.fd-ready .fd-merge > * { opacity: 0; transition: opacity .9s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1), stroke-dashoffset 1.4s ease; }
.fd-ready .fd-beam { stroke-dasharray: 200; stroke-dashoffset: 200; }
.fd-ready .fd-halo { transform: scale(.2); transform-box: fill-box; transform-origin: center; }
.fd-ready .lit .fd-merge > * { opacity: 1; }
.fd-ready .lit .fd-halo { transform: none; }
.fd-ready .lit .fd-beam { stroke-dashoffset: 0; transition-delay: .2s; }
.fd-ready .lit .fd-root { transition-delay: .25s; }
.fd-ready .lit .fd-root-iast { transition-delay: .55s; }

.fd-senses { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0 !important; margin: 6px auto 18px; }
.fd-senses li { margin: 0; padding: .4em .9em; border-radius: 999px; border: 1px solid rgba(243, 223, 168, .35); background: rgba(255, 255, 255, .05); font-size: .85rem; color: rgba(255, 255, 255, .8); transition: opacity .7s, background .7s, border-color .7s; }
.fd-senses span { font-family: var(--deva); font-size: 1rem; color: #fff; }
.fd-senses i { font-family: var(--serif-it); font-size: 1.05rem; color: var(--glow); }
.fd-senses b { font-weight: 600; color: #fff; }
.fd-ready .fd-senses li { opacity: .3; }
.fd-ready .fd-senses li.on { opacity: 1; background: rgba(243, 223, 168, .14); border-color: var(--glow); }

.fd-deck { max-width: 640px; margin: 0 auto; }
.fd-card { margin: 0 0 12px; padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(243, 223, 168, .25); text-align: center; }
.fd-card .deva { font-size: 1.32rem; line-height: 1.6; margin: 0 0 .35em; }
.fd-card .iast { font-size: 1.12rem; margin: 0 0 .7em; }
.fd-card .cite { margin: 0; }
.fd-src { font: 600 .74rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--glow) !important; margin: 0 0 .8em; }
.fd-mean { font-size: .95rem; margin: 0 0 .5em; }
.fd-ready .fd-deck { display: grid; }
.fd-ready .fd-card { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.fd-ready .fd-card.on { opacity: 1; visibility: visible; transition: opacity .7s ease; }

.fd-dots { display: flex; justify-content: center; gap: 4px; margin-top: 12px; }
.stage .fd-dots button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.stage .fd-dots button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--glow); transition: background .3s; }
.stage .fd-dots button:hover { background: rgba(255, 255, 255, .1); }
.stage .fd-dots button[aria-current="true"]::before { background: var(--glow); }

/* ---------- 2. the bow ---------- */
.fd-bow-svg { max-width: 640px; margin: 0 auto; }
.fd-bow-hit { cursor: pointer; outline: none; }
.fd-bow-limb { fill: none; stroke: var(--glow); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(243, 223, 168, .5)); transition: stroke .3s; }
.fd-bow-hit:hover .fd-bow-limb, .fd-bow-hit:focus-visible .fd-bow-limb { stroke: #fff; }
.fd-bow-hit:focus-visible .fd-string { stroke: var(--glow); stroke-width: 2.4; }
.fd-string { fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 1.4; }
.fd-om { font: 400 34px var(--deva); fill: var(--glow); }
.fd-shaft { stroke: #EDE6D6; stroke-width: 2.6; stroke-linecap: round; }
.fd-head { fill: #fff; }
.fd-fletch { fill: none; stroke: var(--terra); stroke-width: 2; stroke-linecap: round; }
.fd-arrow-lbl { transition: opacity .6s; }
.fd-ring { fill: none; stroke: rgba(243, 223, 168, .5); stroke-width: 1.4; transition: stroke .8s, stroke-width .8s; }
.fd-bull { fill: rgba(243, 223, 168, .7); transition: fill .8s; }
.fd-target-glow { opacity: .25; transition: opacity 1.2s; }
.fd-pulse { fill: none; stroke: var(--glow); stroke-width: 2; opacity: 0; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.fd-bow-svg.flown .fd-arrow-lbl { opacity: .3; }
.fd-bow-svg.hit .fd-ring { stroke: var(--glow); stroke-width: 2; }
.fd-bow-svg.hit .fd-target-glow { opacity: .85; }
.fd-bow-svg.merged .fd-target-glow { opacity: 1; }
.fd-bow-svg.merged .fd-bull { fill: #fff; }
.fd-bow-svg.hit .fd-pulse { animation: fd-ring-out 1.6s ease-out 2; }
@keyframes fd-ring-out { from { transform: scale(1); opacity: .9; } to { transform: scale(8); opacity: 0; } }

/* ---------- 3. the darśana tree ---------- */
.fd-tree-grid { display: grid; gap: 18px; align-items: center; }
.fd-tree { max-width: 560px; margin: 0 auto; }
.fd-ground { stroke: rgba(255, 255, 255, .18); stroke-width: 1; }
.fd-tree .grow { fill: none; stroke-linecap: round; }
.fd-trunk { stroke: #E9D7A6; stroke-width: 7; }
.fd-branch-a { stroke: var(--glow); stroke-width: 4; }
.fd-branch-b { stroke: #C3D3B8; stroke-width: 4; }
.fd-roots-a path { stroke: rgba(243, 223, 168, .75); stroke-width: 2.4; }
.fd-roots-b path { stroke: rgba(195, 211, 184, .75); stroke-width: 2.4; }
.fd-twigs-a path { stroke: rgba(243, 223, 168, .8); stroke-width: 2; }
.fd-twigs-b path { stroke: rgba(195, 211, 184, .85); stroke-width: 2; }
.fd-branch-lbl { font: 600 23px var(--sans); letter-spacing: .18em; fill: var(--glow); }
.fd-branch-lbl-b { fill: #C3D3B8; }
.fd-fruit { cursor: pointer; outline: none; }
.fd-fruit circle { fill: rgba(243, 223, 168, .16); stroke: var(--glow); stroke-width: 1.6; transition: fill .4s, stroke .3s, stroke-width .3s; }
.fd-fruit-b circle { fill: rgba(195, 211, 184, .16); stroke: #C3D3B8; }
.fd-fruit text { font: italic 500 24px var(--serif-it); fill: rgba(255, 255, 255, .88); transition: fill .4s; }
.fd-fruit:hover circle, .fd-fruit:focus-visible circle { stroke-width: 3.5; }
.fd-fruit:focus-visible circle { stroke: #fff; }
.fd-fruit.partner circle { fill: rgba(243, 223, 168, .42); }
.fd-fruit.on circle { fill: var(--glow); filter: drop-shadow(0 0 10px rgba(243, 223, 168, .9)); }
.fd-fruit-b.on circle { fill: #D6E5CB; filter: drop-shadow(0 0 10px rgba(214, 229, 203, .85)); }
.fd-fruit.on text { fill: #fff; }
.fd-tree.picking .fd-fruit:not(.on):not(.partner) { opacity: .55; }
/* growth: paths draw from the roots up, then the fruits ripen one by one */
.fd-ready .fd-tree .grow { stroke-dasharray: 1; transition: stroke-dashoffset 1.1s ease; }
.fd-ready .fd-tree:not(.grown) .grow { stroke-dashoffset: 1; transition: none; }
.fd-ready .fd-tree .fd-trunk { transition-delay: .35s; }
.fd-ready .fd-tree .fd-branch-a, .fd-ready .fd-tree .fd-branch-b { transition-delay: .9s; }
.fd-ready .fd-tree .fd-twigs-a path, .fd-ready .fd-tree .fd-twigs-b path { transition-delay: 1.6s; }
.fd-ready .fd-tree .fd-fruit { transform-box: fill-box; transform-origin: center; transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.5, .5, 1); transition-delay: calc(2s + var(--i, 0) * .12s); }
.fd-ready .fd-tree.settled .fd-fruit { transition-delay: 0s; }
.fd-ready .fd-tree:not(.grown) .fd-fruit { opacity: 0; transform: scale(.3); transition: none; }
.fd-ready .fd-tree .fd-lbl { transition: opacity .8s ease .2s; }
.fd-ready .fd-tree:not(.grown) .fd-lbl { opacity: 0; transition: none; }

.fd-panel { padding: 20px 22px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(243, 223, 168, .25); }
.fd-panel-meta { font: 600 .72rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--glow) !important; margin: 0 0 .5em; }
.fd-panel-name { font: 400 1.6rem/1.2 var(--serif); color: #fff; margin: 0 0 .6em; }
.fd-panel-dl { display: grid; grid-template-columns: auto 1fr; gap: .5em 1em; margin: 0; font-size: .93rem; }
.fd-panel-dl dt { font: 600 .72rem/1.7 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.fd-panel-dl dd { margin: 0; color: rgba(255, 255, 255, .9); }

/* ---------- 4. the lamp ---------- */
.fd-lamp { --lvl: .5; }
.fd-lamp::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 50% 32%, rgba(243, 223, 168, .2), transparent 70%); opacity: calc(var(--lvl) * 1.3); transition: opacity .8s; }
.fd-lamp-grid { display: grid; gap: 14px; align-items: center; }
.fd-lamp-svg { max-width: 210px; margin: 0 auto; }
.fd-lamp-glow { opacity: .55; }
.fd-wick { stroke: #3B2A20; stroke-width: 3; stroke-linecap: round; }
.fd-diya { fill: #A8553E; stroke: #E9B97A; stroke-width: 1.5; }
.fd-diya-rim { fill: none; stroke: var(--glow); stroke-width: 1.6; opacity: .85; }
.fd-diya-foot { fill: none; stroke: #E9B97A; stroke-width: 3; stroke-linecap: round; }
.fd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fd-col { display: grid; gap: 6px; align-content: start; }
.fd-col-h { font: 600 .7rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 4px !important; }
.fd-col-help { color: var(--glow) !important; }
.fd-col-hurt { color: #F2B9A6 !important; }
.stage .fd-q { display: grid; gap: 1px; text-align: left; padding: .5em .75em; border-radius: 12px; font: 400 .8rem/1.25 var(--sans); overflow-wrap: anywhere; }
.fd-q b { font: italic 500 1.05rem/1.2 var(--serif-it); }
.fd-q small { font-size: .78rem; color: rgba(255, 255, 255, .72); }
.stage .fd-q:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .45); }
.stage .fd-q[aria-pressed="true"] { background: var(--glow); border-color: var(--glow); color: var(--night); }
.stage .fd-q-hurt[aria-pressed="true"] { background: #EA9A80; border-color: #EA9A80; color: #2A1712; }
.stage .fd-q[aria-pressed="true"] small { color: rgba(18, 24, 49, .78); }

@media (min-width: 700px) {
  .fd-lamp-grid { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (min-width: 860px) {
  .fd-tree-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
@media (max-width: 480px) {
  .fd-panel-dl { grid-template-columns: 1fr; gap: .1em; }
  .fd-panel-dl dd { margin-bottom: .5em; }
  .fd-card { padding: 16px 14px; }
  .fd-card .deva { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .fd-stars circle { animation: fd-twinkle 5s ease-in-out infinite alternate; }
  .fd-stars circle:nth-child(2n) { animation-delay: -2.5s; }
  .fd-stars circle:nth-child(3n) { animation-duration: 7s; }
  .fd-ready .lit .fd-halo { animation: fd-breathe 5s ease-in-out 1.4s infinite; }
}
@keyframes fd-twinkle { from { opacity: .2; } to { opacity: .8; } }
@keyframes fd-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@media (prefers-reduced-motion: reduce) {
  .fd-yuj *, .fd-bow *, .fd-tree-stage *, .fd-lamp *, .fd-lamp::after { transition: none !important; animation: none !important; }
}