/* Calm celestial movement with independent concentric layers. */
.hero-art { isolation:isolate; }
.celestial { position:relative; z-index:1; animation:compass-float 10s ease-in-out infinite; }
.taiji-motion { transform-box:fill-box; transform-origin:center; animation:taiji-turn 21.25s linear infinite; }
.trigrams-motion { transform-box:view-box; transform-origin:250px 250px; animation:taiji-turn 27.5s linear infinite reverse; }
.compass-orbit { transform-origin:250px 250px; animation:taiji-turn 13.75s linear infinite; }
.hero-sparks { position:absolute; inset:-2%; pointer-events:none; z-index:2; }
.hero-sparks span { position:absolute; left:var(--x); top:var(--y); width:3px; height:3px; border-radius:50%; background:#b49355; box-shadow:0 0 7px #b4935566; opacity:0; animation:star-drift var(--duration) ease-in-out var(--delay) infinite; }
.hero-sparks span:nth-child(3n) { width:5px; height:5px; background:transparent; box-shadow:none; }
.hero-sparks span:nth-child(3n)::before,.hero-sparks span:nth-child(3n)::after { content:''; position:absolute; background:#b49355; }
.hero-sparks span:nth-child(3n)::before { width:1px; height:7px; top:-1px; left:2px; }
.hero-sparks span:nth-child(3n)::after { width:7px; height:1px; left:-1px; top:2px; }
.hero-copy>.eyebrow { animation:hero-arrive .85s cubic-bezier(.2,.7,.2,1) .05s both; }
.hero-copy>h1 { animation:hero-arrive 1.1s cubic-bezier(.2,.7,.2,1) .15s both; }
.hero-copy>.hero-description { animation:hero-arrive 1s cubic-bezier(.2,.7,.2,1) .28s both; }
.hero-copy>.hero-buttons { animation:hero-arrive .9s cubic-bezier(.2,.7,.2,1) .4s both; }
.hero-copy>.hero-footnote { animation:hero-arrive .9s cubic-bezier(.2,.7,.2,1) .5s both; }
.motion-reveal { opacity:0; transform:translateY(20px); transition:opacity .75s ease var(--reveal-delay,0ms),transform .85s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms); }
.motion-reveal.motion-visible { opacity:1; transform:translateY(0); }
.course-card.motion-visible:hover { transform:translateY(-5px); }
.course-art svg { transition:transform .8s cubic-bezier(.2,.7,.2,1); }
@media(hover:hover) {
  .course-card:hover .course-art svg,.dashboard-course:hover .course-art svg { transform:scale(1.035); }
  .button span { transition:transform .25s ease; }
  .button:hover span { transform:translate(3px,-2px); }
  .round-arrow { transition:transform .3s ease,background .3s ease,color .3s ease; }
  .course-card:hover .round-arrow { transform:rotate(12deg); background:var(--ink); color:var(--paper-light); }
  .topic svg { transition:transform .45s ease; }
  .topic:hover svg { transform:translateY(-3px) rotate(-5deg); }
  .library-card { transition:border-color .3s ease,background .3s ease; }
  .library-card:hover { border-color:#b49a65; background:#fffaf0; }
}
dialog[open] { animation:dialog-arrive .3s cubic-bezier(.2,.7,.2,1) both; }
dialog[open]::backdrop { animation:backdrop-arrive .3s ease both; }
.progress-fill { transition:width .65s cubic-bezier(.2,.7,.2,1); }
.header nav.open { animation:menu-arrive .25s ease both; }
#motion-toggle { border:0; background:none; padding:0; color:inherit; font:inherit; letter-spacing:inherit; }
#motion-toggle:hover { color:var(--copper); }
#motion-toggle:disabled { cursor:default; }
.hero.motion-offscreen .celestial,.hero.motion-offscreen .taiji-motion,.hero.motion-offscreen .trigrams-motion,.hero.motion-offscreen .compass-orbit,.hero.motion-offscreen .hero-art::before,.hero.motion-offscreen .hero-sparks span { animation-play-state:paused; }
.motion-sleep *,.motion-sleep *::before,.motion-sleep *::after { animation-play-state:paused!important; }
.motion-disabled *,.motion-disabled *::before,.motion-disabled *::after { animation:none!important; transition:none!important; }
.motion-disabled .motion-reveal { opacity:1; transform:none; }
.motion-disabled .hero-sparks { display:none; }
@keyframes compass-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes taiji-turn { to { transform:rotate(360deg); } }
@keyframes aura-breathe { 0%,100% { opacity:.35; transform:scale(.94); } 50% { opacity:.9; transform:scale(1.04); } }
@keyframes star-drift { 0%,100% { opacity:0; transform:translateY(6px) scale(.7); } 35%,65% { opacity:.55; } 85% { opacity:0; transform:translateY(-14px) scale(1); } }
@keyframes hero-arrive { from { opacity:0; transform:translateY(17px); } to { opacity:1; transform:translateY(0); } }
@keyframes dialog-arrive { from { opacity:0; transform:translateY(10px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes backdrop-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes menu-arrive { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:620px) { .hero-sparks span:nth-child(even) { display:none; } .motion-reveal { transform:translateY(12px); } .footer-bottom { row-gap:14px; } }
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .motion-reveal { opacity:1!important; transform:none!important; }
  .hero-sparks { display:none; }
}

/* Larger, high-contrast Vietnamese labels stay crisp in the rotating diagram. */
.celestial { filter:none; }
.trigram-label { font-family:var(--sans); font-size:14px; font-weight:650; letter-spacing:.8px; fill:#233b32; stroke:#f4edda; stroke-width:1.6px; stroke-linejoin:round; paint-order:stroke fill; text-rendering:geometricPrecision; }
.orbit-caption { font-size:10px; font-weight:600; letter-spacing:2px; color:#75603b; }
.mystic-mark { font-weight:550; color:#75603b; }
.art-caption { font-size:12px; letter-spacing:.3px; color:#626a54; }
@media(max-width:620px) { .orbit-caption { font-size:9px; letter-spacing:1.7px; } .art-caption { font-size:10px; } .mystic-mark { font-size:8px; } }

/* Bát Quái Khai Môn: only the moving layers move; labels remain upright. */
.celestial.bagua-diagram{animation:none;filter:none;overflow:visible}
.bagua-fixed-gates,.bagua-fixed-names{transform:none;animation:none}
.bagua-name.trigram-label{font-size:13px;letter-spacing:.6px;stroke-width:2.2px;fill:#233b32;text-rendering:geometricPrecision}
.bagua-name.is-open{fill:#876022}
.bagua-hao-base{fill:none;stroke:#284637;stroke-width:3;stroke-linecap:butt}
.bagua-hao-light{fill:none;stroke:#d6a33e;stroke-width:2.15;stroke-linecap:butt;filter:drop-shadow(0 0 2px #c5a44b99)}
.bagua-core-aura{filter:drop-shadow(0 0 2px #c5a44b99)}
.bagua-eye-trail{fill:none;stroke-width:2;stroke-linecap:round;opacity:.1}
.bagua-eye-trail--light{stroke:#fff2b7}.bagua-eye-trail--dark{stroke:#6e8b6e}
.bagua-ray-out,.bagua-ray-return{fill:none;stroke:#c49a38;stroke-width:1.4;filter:drop-shadow(0 0 2px #c5a44b99)}
.bagua-ray-head{fill:#fff0aa;stroke:#b18b38;stroke-width:.4;filter:drop-shadow(0 0 2px #c5a44b99)}
.bagua-edge-spark{filter:drop-shadow(0 0 2px #c5a44b99)}
.bagua-golden-wave{filter:drop-shadow(0 0 2px #c5a44b99)}
.bagua-vignette{pointer-events:none}
@media(max-width:620px){.bagua-name.trigram-label{font-size:14px;letter-spacing:.3px}.bagua-hao-base{stroke-width:3.3}.bagua-hao-light{stroke-width:2.4}}