/* Motion layer (assets/motion.js). One easing for everything: calm out, no bounce. */
:root { --mo-ease: cubic-bezier(.16, 1, .3, 1); }

/* reading progress: a thin mint line under the header */
.mo-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; background: var(--accent);
  transform-origin: 0 50%; transform: scaleX(var(--mo-page, 0)); box-shadow: 0 0 10px var(--accent); }
html[dir="rtl"] .mo-progress { transform-origin: 100% 50%; }

/* header settles once you scroll */
html.motion header.top { transition: background .4s var(--mo-ease), box-shadow .4s var(--mo-ease); }
html.motion.mo-scrolled header.top { box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }

/* headings: words rise out of a mask, one after another */
.mo-words .mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.mo-words .mo-w > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--mo-ease); transition-delay: calc(var(--i) * 70ms); }
.mo-words.mo-in .mo-w > span { transform: none; }

/* sections arrive like a card that opens to the full width (calendly-style) */
.mo-stage { position: relative; isolation: isolate; }
.mo-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 520px at 80% 0%, var(--accent-glow), transparent 70%), var(--surface);
  opacity: .55; border-radius: calc((1 - var(--open, 0)) * 48px);
  clip-path: inset(0 calc((1 - var(--open, 0)) * 6%) round calc((1 - var(--open, 0)) * 48px)); }
html[data-theme="light"] .mo-stage::after { opacity: .9; }
html[dir="rtl"] .mo-stage::after { background: radial-gradient(900px 520px at 20% 0%, var(--accent-glow), transparent 70%), var(--surface); }
.mo-stage > .wrap { transform: translateY(calc((1 - var(--open, 1)) * 40px)); }

/* the journey: the line fills as you read; the chapter in focus is lit, the rest wait */
.log.mo-line .mo-fill { position: absolute; inset-inline-start: 162px; top: 16px; width: 2px; height: calc((100% - 32px) * var(--fill, 0));
  background: linear-gradient(var(--accent), var(--accent)); box-shadow: 0 0 12px var(--accent); border-radius: 2px; pointer-events: none; }
@media (max-width: 760px) { .log.mo-line .mo-fill { inset-inline-start: 7px; } }
html.motion #log > .step { transition: opacity .6s var(--mo-ease); }
html.motion #log.mo-line > .step:not(.mo-past):not(.mo-on) { opacity: .45; }
html.motion #log > .step .dot { transition: background .4s, border-color .4s, box-shadow .4s, transform .4s var(--mo-ease); }
html.motion #log > .step.mo-past .dot, html.motion #log > .step.mo-on .dot { border-color: var(--accent); }
html.motion #log > .step.mo-on .dot { background: var(--accent); box-shadow: 0 0 0 7px var(--accent-soft); transform: scale(1.15); }
html.motion #log > .step.mo-on .when { color: var(--accent); }
html.motion #log > .step .org-logo { transition: transform .6s var(--mo-ease); }
html.motion #log > .step.mo-on .org-logo { transform: scale(1.06); }

/* cards lean towards the pointer and carry a soft light */
.mo-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .5s var(--mo-ease), box-shadow .3s, border-color .3s; will-change: transform; position: relative; }
.mo-tilt.mo-hot { transition: transform .12s linear, box-shadow .3s, border-color .3s; }
.proj:hover .pwin.mo-tilt { --lift: -4px; }
.mo-tilt::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 45%); }
html[data-theme="light"] .mo-tilt::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 45%); }
.mo-tilt.mo-hot::before { opacity: 1; }
.b-face.mo-tilt::before, .b-me .b-face::before { display: none; }

/* images drift a little inside their frames */
.mo-par img { translate: 0 calc(var(--par, 0) * -28px); scale: 1.08; transition: translate .2s linear; }

/* primary buttons lean towards the cursor */
.send, .twin-door, .b-btn.solid, .vbtn, .mo-mag { transition: translate .5s var(--mo-ease), background .2s, border-color .2s, color .2s, box-shadow .2s; }
.mo-pull { translate: var(--tx, 0) var(--ty, 0); transition: translate .15s linear, background .2s, border-color .2s, color .2s, box-shadow .2s; }

/* Osama ⇄ Digital Osama: the new view is drawn as a circle growing from the click */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: mo-reveal .9s var(--mo-ease) both; }
@keyframes mo-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); } }

@media (prefers-reduced-motion: reduce) {
  .mo-progress { display: none; }
  ::view-transition-new(root) { animation: none; }
}