/* Shared motion and small visuals for the inner pages (Sep 26, 2026).
 *
 * Nothing here hides content unless motion.js has run and marked <html>
 * with .m-on, so a page without JavaScript reads exactly as before. Motion
 * answers scroll and taps; nothing loops except the portal tour and a few
 * travelling dots that only run while on screen. Reduced motion shows
 * everything at rest.
 */

/* ---- reveal on scroll ---- */
.m-on [data-m]{opacity:0;transform:translateY(18px)}
.m-on [data-m="fade"]{transform:none}
.m-on [data-m="scale"]{transform:scale(.975)}
.m-on [data-m].m-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,1,.36,1) var(--m-d,0s),transform .9s cubic-bezier(.22,1,.36,1) var(--m-d,0s)}

/* ---- lines that draw themselves ---- */
.m-on [data-draw]{stroke-dasharray:var(--m-len,600);stroke-dashoffset:var(--m-len,600)}
.m-on .m-in [data-draw],.m-on [data-draw].m-in{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s cubic-bezier(.45,0,.2,1) var(--m-dd,.15s)}

/* ---- bars that grow ---- */
.m-on [data-grow]{transform:scaleY(.04);transform-origin:bottom;transform-box:fill-box}
.m-on .m-in [data-grow]{transform:none;transition:transform .9s cubic-bezier(.22,1,.36,1) var(--m-dd,0s)}
.m-on [data-grow-x]{transform:scaleX(0);transform-origin:left}
.m-on .m-in [data-grow-x]{transform:none;transition:transform 1s cubic-bezier(.22,1,.36,1) var(--m-dd,0s)}

/* ---- reading progress on long pages ---- */
.m-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:70;background:#F2EEE7;opacity:.55;transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---- small shared pieces ---- */
.m-tag{display:inline-block;font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9D9588}
.m-panel{border-radius:18px;background:rgba(255,248,236,.058);box-shadow:inset 0 1px 3px rgba(255,248,236,.104);border:0.5px solid rgba(255,248,236,.07)}
.m-glass{border-radius:22px;background:linear-gradient(152deg,rgba(255,248,236,.064) 0%,rgba(255,248,236,.046) 46%,rgba(255,248,236,.039) 100%);border:0.5px solid rgba(255,248,236,.06);border-top-color:rgba(255,248,236,.118);border-left-color:rgba(255,248,236,.096);box-shadow:0 1px 0 rgba(255,248,236,.085) inset,0 16px 34px -16px rgba(0,0,0,.51)}
.m-lift{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
@media (hover:hover){.m-lift:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,248,236,.085) inset,0 22px 40px -18px rgba(0,0,0,.646)}}

@media (prefers-reduced-motion:reduce){
  .m-on [data-m],.m-on [data-draw],.m-on [data-grow],.m-on [data-grow-x]{opacity:1 !important;transform:none !important;stroke-dashoffset:0 !important;transition:none !important}
  .m-progress{display:none}
  .m-lift,.m-lift:hover{transition:none;transform:none}
}