/* ============================================================
   ALITHOS — shared motion layer (js/motion.js adds the classes).
   Nothing here hides content unless JS has run (html.m-on), and
   everything is off under prefers-reduced-motion.
   ============================================================ */

/* ---------- scroll reveal ---------- */
html.m-on .m-r{opacity:0; transform:translateY(22px); transition:opacity .75s cubic-bezier(.2,.6,.2,1), transform .75s cubic-bezier(.2,.6,.2,1); transition-delay:var(--md,0s)}
html.m-on .m-r.m-left{transform:translateX(-26px)}
html.m-on .m-r.m-scale{transform:scale(.96) translateY(14px)}
html.m-on .m-r.m-in{opacity:1; transform:none}
html.m-on tr.m-r{transform:translateX(-14px)}
html.m-on tr.m-r.m-in{transform:none}

/* ---------- headline word cascade ---------- */
.m-words .m-w{display:inline-block; white-space:pre}
html.m-on .m-words .m-w{opacity:0; transform:translateY(.55em) rotate(2deg); filter:blur(6px); animation:mWord .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(var(--wi) * 55ms + 120ms)}
@keyframes mWord{to{opacity:1; transform:none; filter:none}}
html.m-on .page-hero .eyebrow, html.m-on .article-hero .eyebrow,
html.m-on .page-hero .sec-sub, html.m-on .article-hero .byline, html.m-on .page-hero .hero-ctas, html.m-on .crumbs{opacity:0; animation:mFade .9s ease forwards; animation-delay:.55s}
html.m-on .page-hero .eyebrow, html.m-on .article-hero .eyebrow, html.m-on .crumbs{animation-delay:.05s}
@keyframes mFade{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------- hero blueprint FX (page + article heroes) ---------- */
.page-hero, .article-hero{position:relative; overflow:hidden}
.m-hero-fx{position:absolute; inset:0; pointer-events:none; z-index:0}
.page-hero > .wrap, .article-hero > .wrap{position:relative; z-index:1}
.m-hero-fx .m-grid{position:absolute; inset:-60px; background-image:linear-gradient(rgba(159,180,196,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(159,180,196,.06) 1px, transparent 1px); background-size:44px 44px; animation:mGrid 40s linear infinite; mask-image:radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 70% 40%, #000 0%, transparent 75%)}
@keyframes mGrid{to{transform:translate(44px,44px)}}
.m-hero-fx .m-glow{position:absolute; width:620px; height:620px; right:-120px; top:-200px; background:radial-gradient(circle, rgba(46,159,232,.16), transparent 65%); animation:mGlow 14s ease-in-out infinite alternate}
@keyframes mGlow{to{transform:translate(-160px,90px)}}
.m-hero-fx .m-scan{position:absolute; left:0; right:0; height:1px; top:0; background:linear-gradient(90deg, transparent, rgba(92,188,245,.55), transparent); animation:mScan 7s ease-in-out infinite; opacity:.7}
@keyframes mScan{0%{top:12%} 50%{top:88%} 100%{top:12%}}
.m-plan{position:absolute; right:max(24px, calc((100vw - 1200px) / 2)); top:50%; width:min(36vw, 470px); transform:translateY(-42%); opacity:.9}
.m-plan path, .m-plan line, .m-plan rect{fill:none; stroke:rgba(92,188,245,.7); stroke-width:1.2; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(46,159,232,.45))}
.m-plan .m-dim{stroke:rgba(212,167,44,.65)}
.m-plan .m-lbl{fill:rgba(159,180,196,.75); font:600 9px Consolas, monospace; stroke:none; filter:none; letter-spacing:.08em}
html.m-on .m-plan .m-draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:mDraw 2.4s cubic-bezier(.5,0,.2,1) forwards; animation-delay:calc(var(--di) * 70ms + .3s)}
html.m-on .m-plan .m-lbl{opacity:0; animation:mFade 1s ease forwards; animation-delay:2.2s}
@keyframes mDraw{to{stroke-dashoffset:0}}
/* article heroes use a 940px text column: park the plan in the gutter to its right so it never sits under the headline */
.article-hero .m-plan{left:calc(50% + 250px); right:auto; width:min(calc(50vw - 290px), 440px)}
@media (max-width:1099px){ .m-plan{display:none} }

/* ---------- reading progress ---------- */
.m-progress{position:fixed; left:0; top:0; height:3px; width:100%; z-index:200; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--teal), var(--teal-hi) 70%, var(--gold)); box-shadow:0 0 10px rgba(46,159,232,.6); pointer-events:none}

/* ---------- sticky side table of contents (wide screens) ---------- */
.m-side-toc{position:fixed; top:120px; width:250px; max-height:calc(100vh - 160px); overflow:auto; z-index:20; padding:16px 0 16px 18px; border-left:1px solid var(--line-l); opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s}
.m-side-toc.on{opacity:1; visibility:visible}
.m-side-toc .toc-k{font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:0 0 10px}
.m-side-toc ol{list-style:none; margin:0; padding:0}
.m-side-toc a{display:block; font-size:.84rem; line-height:1.35; padding:6px 0 6px 12px; margin-left:-19px; border-left:2px solid transparent; color:var(--slate); text-decoration:none; transition:color .2s, border-color .2s}
.m-side-toc a:hover{color:var(--teal-deep)}
.m-side-toc a.on{color:var(--ink); border-left-color:var(--teal); font-weight:700}
.guide-toc a.on{font-weight:700; color:var(--ink)}

/* ---------- smooth details (FAQ) ---------- */
details.m-acc > :not(summary){overflow:hidden}
.faq details, .faq-inline details{transition:background .3s}
.faq details[open], .faq-inline details[open]{background:linear-gradient(90deg, rgba(46,159,232,.06), transparent 70%)}
.faq summary::after, .faq-inline summary::after{transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.faq details[open] summary::after{transform:rotate(45deg)}

/* ---------- key figures + cards ---------- */
.key-figures .kf{transition:transform .3s, box-shadow .3s, border-color .3s}
.key-figures .kf:hover{transform:translateY(-3px); border-color:rgba(46,159,232,.45); box-shadow:0 14px 30px rgba(14,34,51,.1)}
.hub-card{position:relative; overflow:hidden}
.hub-card::after{content:""; position:absolute; inset:0; background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(46,159,232,.16), transparent 45%); opacity:0; transition:opacity .3s; pointer-events:none}
.hub-card:hover::after{opacity:1}
.post-card{transition:transform .3s, border-color .3s}

/* ---------- homepage benchmark: range bars + cascade ---------- */
.bench td{position:relative}
.bench td .m-bar{position:absolute; left:14px; right:14px; bottom:5px; height:3px; border-radius:2px; background:rgba(159,180,196,.16); overflow:hidden}
.bench td .m-bar i{position:absolute; top:0; bottom:0; left:var(--a); width:var(--b); border-radius:2px; background:linear-gradient(90deg, var(--teal), var(--teal-hi)); transform-origin:left; transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--md,0s) + .25s)}
.bench tr.m-in td .m-bar i{transform:scaleX(1)}
.bench tbody td, .bench thead th{transition:background .25s, color .25s}
.bench td.m-col, .bench th.m-col{background:rgba(46,159,232,.1); color:var(--light)}
.bench thead th.m-col{box-shadow:inset 0 -2px 0 var(--teal)}
.bench tbody tr:hover th{color:var(--teal-hi)}

@media (prefers-reduced-motion: reduce){
  html.m-on .m-r, html.m-on .m-words .m-w, html.m-on .page-hero .eyebrow, html.m-on .article-hero .eyebrow, html.m-on .page-hero .sec-sub,
  html.m-on .article-hero .byline, html.m-on .page-hero .hero-ctas, html.m-on .crumbs{opacity:1!important; transform:none!important; filter:none!important; animation:none!important}
  .m-hero-fx .m-grid, .m-hero-fx .m-glow, .m-hero-fx .m-scan{animation:none}
  html.m-on .m-plan .m-draw{stroke-dashoffset:0; animation:none}
  html.m-on .m-plan .m-lbl{opacity:1; animation:none}
  .bench td .m-bar i{transform:scaleX(1); transition:none}
}
details.m-acc{overflow:hidden}