/* ── shehab.cloud motion layer ───────────────────────────────────────
   Loaded after redesign.css on portfolio pages. Everything here is gated on
   html.motion, which Base.astro adds only when the visitor does not prefer
   reduced motion, so without JS or with reduced motion the page is static. */

:root { --m-ease: cubic-bezier(.2, .7, .2, 1); --m-ease-io: cubic-bezier(.65, 0, .35, 1); --m-ring: rgba(0, 113, 227, .14); --m-arrow: #0071e3 }
html:not([data-theme=light]) { --m-ring: rgba(139, 188, 255, .22); --m-arrow: #8bbcff }

@keyframes m-rise { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: none } }
@keyframes m-rise-soft { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes m-art { from { opacity: 0; transform: translateY(60px) scale(.94) } to { opacity: 1; transform: none } }
@keyframes m-gradient { from { background-position: 0% 50% } to { background-position: 100% 50% } }
@keyframes m-shrink { from { width: 100% } }
@keyframes m-node { 0%, 40%, 100% { outline: 0 solid var(--m-ring) } 18% { outline: 7px solid var(--m-ring) } }
@keyframes m-arrow { 0%, 100% { transform: none } 30% { color: var(--m-arrow); transform: translateY(3px) } }
@keyframes m-shine { from { transform: translateX(-130%) skewX(-18deg) } to { transform: translateX(230%) skewX(-18deg) } }

/* ── Hero entrance (on load) ─────────────────────────── */
html.motion .hero-tagline  { animation: m-rise .7s var(--m-ease) .05s both }
html.motion .hero-title    { animation: m-rise .8s var(--m-ease) .18s both }
html.motion .hero-title span { animation: m-rise .8s var(--m-ease) .42s both, m-gradient 9s var(--m-ease-io) 1.3s infinite alternate; background-size: 220% 100% }
html.motion .hero-subtitle { animation: m-rise .7s var(--m-ease) .62s both }
html.motion .hero-actions  { animation: m-rise .7s var(--m-ease) .76s both }
html.motion .hero-art      { animation: m-art 1.1s var(--m-ease) .7s both }
html.motion .hero-focus span { animation: m-rise-soft .6s var(--m-ease) both }
html.motion .hero-focus span:nth-child(1) { animation-delay: 1.15s }
html.motion .hero-focus span:nth-child(2) { animation-delay: 1.27s }
html.motion .hero-focus span:nth-child(3) { animation-delay: 1.39s }

/* Pointer parallax on the hero art (motion.js sets --px/--py in -1..1 on the wrapper; the img keeps its float) */
html.motion .hero-art { --px: 0; --py: 0 }
html.motion .hero-art.parallax { animation: none; opacity: 1; transform: translate(calc(var(--px) * 14px), calc(var(--py) * 10px)); transition: transform .6s var(--m-ease) }

/* ── Primary button: one shine sweep on hover ─────────── */
html.motion .hero-actions a:first-child { position: relative; overflow: hidden }
html.motion .hero-actions a:first-child::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(-130%) skewX(-18deg); pointer-events: none }
html.motion .hero-actions a:first-child:hover::after { animation: m-shine .9s var(--m-ease) }

/* ── Staggered grids (motion.js sets --i per child and adds .in when the grid enters) ── */
html.motion .projects-grid:not(.in) .project-card,
html.motion .credentials-strip:not(.in) .credential-tag,
html.motion .recognition:not(.in) > a { opacity: 0 }
html.motion .projects-grid.in .project-card { animation: m-rise .75s var(--m-ease) both; animation-delay: calc(var(--i, 0) * .13s) }
html.motion .credentials-strip.in .credential-tag { animation: m-rise-soft .55s var(--m-ease) both; animation-delay: calc(.1s + var(--i, 0) * .08s) }
html.motion .recognition.in > a { animation: m-rise .65s var(--m-ease) both; animation-delay: calc(var(--i, 0) * .12s) }
/* article cards already reveal one by one; this staggers cards that enter on the same row */
html.motion .article-card.reveal.visible { animation-delay: calc(var(--i, 0) * .09s) }

/* ── Project diagrams come alive once their container is in view ── */
html.motion .architecture-flow > div { outline: 0 solid var(--m-ring); outline-offset: 0 }
html.motion .in .architecture-flow > div { animation: m-node 3.9s ease-in-out infinite; animation-delay: calc(1s + var(--n, 0) * 1.3s) }
html.motion .in .architecture-flow > span { animation: m-arrow 3.9s ease-in-out infinite; animation-delay: calc(1.5s + var(--n, 0) * 1.3s) }
html.motion .in .metric-row.after .metric-track i { animation: m-shrink 1.5s var(--m-ease) .7s both }

/* ── Hover micro-motion ─────────────────────────────── */
html.motion .project-visual:not(.project-preview) { transition: transform .5s var(--m-ease) }
html.motion .project-card:hover .project-visual:not(.project-preview) { transform: scale(1.015) }
html.motion .dashboard-tab { transition: background .25s var(--m-ease), color .25s var(--m-ease), transform .25s var(--m-ease) }
html.motion .dashboard-tab:active { transform: scale(.96) }
html.motion .dashboard-summary-tile.tick { animation: m-rise-soft .45s var(--m-ease) both }

/* ── Nav: sliding ink under the current section ──────── */
html.motion .nav-links { position: relative }
html.motion .nav-ink { position: absolute; bottom: -3px; height: 2px; border-radius: 2px; background: var(--blue); left: var(--x, 0); width: var(--w, 0); opacity: var(--o, 0); transition: left .4s var(--m-ease), width .4s var(--m-ease), opacity .3s; pointer-events: none }

@media (prefers-reduced-motion: reduce) {
  html.motion *, html.motion *::before, html.motion *::after { animation: none !important; transition: none !important }
  html.motion .projects-grid .project-card, html.motion .credentials-strip .credential-tag, html.motion .recognition > a { opacity: 1 }
}