/* Serenity motion — "breathe, don't bounce".
   Calm, slow, layered motion for the whole site. Load AFTER serenity.css, with motion.js in <head> (not deferred):
   <link rel="stylesheet" href="../motion.css">  <script src="../motion.js"></script>
   Everything here uses the individual `translate` / `scale` / `rotate` properties, so it stacks on top of
   any `transform` a component already has instead of replacing it.
   Hidden start states only apply when motion.js has run (html.m-js) — no JS = everything visible. */

:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);        /* long, soft settle (expo-out) */
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);    /* in-out for wipes */
  --m-spring: cubic-bezier(.34, 1.45, .64, 1);  /* tiny overshoot for chips/pills */
  --m-dur: 1.1s;
}

/* ───────── Page boot: content waits for motion.js to tag it, then fades up (max 2.5s safety in JS) ───────── */
html.m-js:not(.m-on) main, html.m-js:not(.m-on) .site-foot { opacity: 0; }
html.m-js main, html.m-js .site-foot { transition: opacity .6s ease; }
html.m-js .site-head { animation: m-nav-in 1s var(--m-ease) both; }
@keyframes m-nav-in { from { translate: 0 -100%; opacity: 0; } }

/* ───────── Scroll reveals ───────── */
.m-js [data-m] { transition-property: opacity, translate, scale, rotate, filter, clip-path; transition-duration: var(--m-dur); transition-timing-function: var(--m-ease); transition-delay: var(--d, 0s); }

.m-js [data-m="up"]:not(.m-in)    { opacity: 0; translate: 0 32px; filter: blur(6px); }
.m-js [data-m="fade"]:not(.m-in)  { opacity: 0; }
.m-js [data-m="pop"]              { transition-timing-function: var(--m-spring); transition-duration: .9s; }
.m-js [data-m="pop"]:not(.m-in)   { opacity: 0; scale: .82; }
.m-js [data-m="swing"]:not(.m-in) { opacity: 0; translate: 0 60px; rotate: -7deg; }
.m-js [data-m="panel"]:not(.m-in) { opacity: 0; scale: .965; }
.m-js [data-m="wipe"]             { transition-timing-function: var(--m-ease-io); transition-duration: 1.2s; }
.m-js [data-m="wipe"]:not(.m-in)  { clip-path: inset(0 100% 0 0 round 24px); }
.m-js [data-m="wipe"].m-in        { clip-path: inset(-12px -12px -12px -12px round 24px); }

/* Photos: soft unmask + slow zoom settle (parallax photos settle at --ps) */
.m-js [data-m="img"]              { transition-duration: 1.6s, 1.6s, 1.8s; transition-property: opacity, clip-path, scale; }
.m-js [data-m="img"]:not(.m-in)   { opacity: 0; scale: 1.14; clip-path: inset(9% 9% 9% 9% round 32px); }
.m-js [data-m="img"].m-in         { scale: var(--ps, 1); clip-path: inset(-24px -24px -24px -24px round 0); } /* negative inset: keeps outlines + offset shadows visible */

/* Headlines: each word rises out of its own mask */
.m-w  { display: inline-block; overflow: clip; overflow-clip-margin: .2em; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.m-wi { display: inline-block; transition: translate 1.15s var(--m-ease), opacity 1.15s var(--m-ease), rotate 1.15s var(--m-ease); transition-delay: var(--d, 0s); }
.m-js .m-split:not(.m-in) .m-wi { translate: 0 108%; rotate: 0 0 1 4deg; opacity: 0; }

/* ───────── Ambient "breathing" for chips, pins, dots, tags ───────── */
@keyframes m-breathe { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--fy, -7px); } }
.m-js .m-float.m-in { animation: m-breathe var(--fd, 6s) ease-in-out var(--fdl, 0s) infinite; }
@keyframes m-dot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.m-js .m-dots.m-in i { animation: m-dot 3.2s ease-in-out infinite; }
.m-js .m-dots.m-in i:nth-child(2) { animation-delay: .4s; } .m-js .m-dots.m-in i:nth-child(3) { animation-delay: .8s; } .m-js .m-dots.m-in i:nth-child(4) { animation-delay: 1.2s; }

/* CTA tie-dye slowly drifts like fabric in a breeze */
@keyframes m-drift { 0% { scale: 1.02; translate: 0 0; } 50% { scale: 1.14; translate: -2% 1.5%; } 100% { scale: 1.06; translate: 2% -1%; } }
.m-js .cta::before { animation: m-drift 22s ease-in-out infinite alternate; }

/* ───────── Hover: magnetic buttons + shine ───────── */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%); translate: -130% 0; transition: translate .9s var(--m-ease); }
.btn:hover::after { translate: 130% 0; }
.m-mag { transition: translate .5s var(--m-ease); }
.m-mag.m-mag-on { transition-duration: .18s; }

/* Warm spotlight that follows the cursor inside cards */
.m-spot-host { position: relative; isolation: isolate; }
.m-spot { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(225, 147, 125, .16), rgba(243, 222, 138, .08) 40%, transparent 70%); }
.m-spot-host:hover > .m-spot { opacity: 1; }
.m-lift { transition: translate .6s var(--m-ease), box-shadow .6s var(--m-ease); }
.m-lift:hover { translate: 0 -6px; box-shadow: 0 28px 50px -30px rgba(141, 105, 89, .45); }

/* Hero cursor glow (behind content) */
.m-glow-host { position: relative; isolation: isolate; }
.m-glow { position: absolute; z-index: -1; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(225, 147, 125, .28), rgba(243, 222, 138, .14) 45%, transparent 70%); filter: blur(30px); opacity: 0; transition: opacity 1s ease; }
.m-glow-host:hover > .m-glow { opacity: 1; }

/* ───────── Chrome: smart sticky nav + reading progress ───────── */
.site-head { transition: translate .5s var(--m-ease), box-shadow .4s ease, background-color .4s ease; }
.site-head.m-scrolled { background: rgba(252, 250, 247, .86); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line-soft); }
/* no hide-on-scroll (navcheck) */
.m-progress { position: fixed; z-index: 60; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--peach), var(--butter)); transform-origin: 0 50%; scale: var(--p, 0) 1; pointer-events: none; }

/* Tab panels cross-fade when switched */
.m-js [role="tabpanel"]:not([hidden]) { animation: m-tab .7s var(--m-ease) both; }
@keyframes m-tab { from { opacity: 0; translate: 0 14px; filter: blur(4px); } }

/* ───────── Page-to-page: soft cross-fade (View Transitions, Chrome/Edge/Safari 18+) ───────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: m-vt-out .35s ease both; }
::view-transition-new(root) { animation: m-vt-in .6s var(--m-ease) both; }
@keyframes m-vt-out { to { opacity: 0; translate: 0 -12px; } }
@keyframes m-vt-in { from { opacity: 0; translate: 0 18px; } }

/* ───────── Respect reduced motion: show everything, move nothing ───────── */
@media (prefers-reduced-motion: reduce) {
  html.m-js main, html.m-js .site-foot { opacity: 1 !important; }
  .m-js [data-m], .m-js .m-split .m-wi { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  .m-js .m-float, .m-js .cta::before, .m-js .m-dots i, .m-js .site-head, .m-js [role="tabpanel"] { animation: none !important; }
  .btn::after, .m-glow, .m-progress { display: none; }
  .m-lift:hover { translate: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* the word split must never change how a heading wraps: page rules like `h1 span {display:block}` must not reach the motion word spans (Farhan 2026-10-10) */
.m-split .m-w { display: inline-block !important; width: auto !important; float: none !important; }
.m-split .m-wi { display: inline-block !important; }

/* the word split wraps each word in a span: page rules aimed at a phrase span (e.g. `.hero h1 span {color: var(--muted)}`) must not
   restyle every word. Words take colour and font from their real parent, so a muted/italic phrase stays muted/italic and the rest stays ink (Farhan 2026-10-10) */
.m-split .m-w, .m-split .m-wi { color: inherit !important; font-style: inherit !important; font-weight: inherit !important; font-family: inherit !important; }