/* =====================================================================
   MHportfolio · Impeccable v4 motion enhancement · expert moderate
   Motion only. V5.99 remains the visual/layout system.
   ===================================================================== */

:root {
  --motion-ease: cubic-bezier(.16,1,.3,1);
  --motion-ease-soft: cubic-bezier(.22,.75,.18,1);
  --motion-ease-spring: cubic-bezier(.18,1.18,.32,1);
  --motion-fast: 260ms;
  --motion-med: 640ms;
  --motion-slow: 880ms;
  --motion-xslow: 1080ms;
  --motion-distance: 38px;
  --motion-side: 46px;
}

/* Useful site-level progress: motion communicates position, not decoration. */
html.motion-enabled .motion-progress {
  position: fixed;
  inset: 0 auto auto 0;
  width: var(--motion-progress, 0%);
  height: 3px;
  z-index: 10000;
  pointer-events: none;
  background: var(--green, #0B6B58);
  transform-origin: left center;
  box-shadow: 0 1px 0 rgba(255,255,255,.38);
  transition: width 90ms linear;
}

/* ---------------------------------------------------------------------
   1. Page-load choreography
   Clear enough to register, restrained enough to keep recruiter velocity.
   --------------------------------------------------------------------- */
html.motion-enabled .site-nav {
  animation: mh-nav-in 620ms var(--motion-ease) both;
}

html.motion-enabled .hero__rule,
html.motion-enabled .page-hero .case-id,
html.motion-enabled .case-v3-hero__meta,
html.motion-enabled .ventures-hero .case-id {
  animation: mh-kicker-in 620ms 70ms var(--motion-ease) both;
}

html.motion-enabled .hero__primary .hero__id {
  animation: mh-kicker-in 650ms 90ms var(--motion-ease) both;
}

html.motion-enabled .hero__primary h1,
html.motion-enabled .page-hero h1,
html.motion-enabled .case-v3-hero h1,
html.motion-enabled .ventures-hero h1 {
  animation: mh-headline-in 900ms 120ms var(--motion-ease) both;
}

html.motion-enabled .hero__primary .lede,
html.motion-enabled .page-hero__deck,
html.motion-enabled .case-v3-hero__deck,
html.motion-enabled .ventures-hero .lede {
  animation: mh-enter 760ms 250ms var(--motion-ease) both;
}

html.motion-enabled .hero__cta-row,
html.motion-enabled .page-hero__actions,
html.motion-enabled .case-v3-facts,
html.motion-enabled .ventures-status,
html.motion-enabled .venture-hero-actions {
  animation: mh-enter 760ms 350ms var(--motion-ease) both;
}

html.motion-enabled .hero__visual,
html.motion-enabled .case-v3-hero__media,
html.motion-enabled .hm-hero-media,
html.motion-enabled .about-portrait {
  animation: mh-hero-media-in 1040ms 190ms var(--motion-ease) both;
}

html.motion-enabled .hero__proof > * {
  animation: mh-proof-in 760ms var(--motion-ease) both;
}
html.motion-enabled .hero__proof > *:nth-child(1) { animation-delay: 420ms; }
html.motion-enabled .hero__proof > *:nth-child(2) { animation-delay: 500ms; }
html.motion-enabled .hero__proof > *:nth-child(3) { animation-delay: 580ms; }
html.motion-enabled .hero__proof > *:nth-child(4) { animation-delay: 660ms; }

@keyframes mh-nav-in {
  from { opacity: 0; transform: translate3d(0,-18px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes mh-kicker-in {
  from { opacity: 0; transform: translate3d(-20px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes mh-headline-in {
  from { opacity: 0; transform: translate3d(0,34px,0); filter: blur(3px); }
  to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); }
}
@keyframes mh-enter {
  from { opacity: 0; transform: translate3d(0,28px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes mh-proof-in {
  0% { opacity: 0; transform: translate3d(0,30px,0) scale(.975); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes mh-hero-media-in {
  0% { opacity: 0; transform: translate3d(0,34px,0) scale(.965); clip-path: inset(5% 4% 9% 4% round 12px); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); clip-path: inset(0 0 0 0 round 0); }
}

/* ---------------------------------------------------------------------
   2. Scroll reveal system
   Text, evidence, and media enter with different choreography.
   --------------------------------------------------------------------- */
html.motion-enabled .motion-reveal {
  opacity: 0;
  transform: translate3d(0,var(--motion-distance),0);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-slow) var(--motion-ease),
    clip-path var(--motion-xslow) var(--motion-ease);
  transition-delay: var(--motion-delay, 0ms);
  will-change: transform, opacity;
}

html.motion-enabled .motion-reveal[data-motion-direction="left"] {
  transform: translate3d(calc(var(--motion-side) * -1),0,0);
}
html.motion-enabled .motion-reveal[data-motion-direction="right"] {
  transform: translate3d(var(--motion-side),0,0);
}
html.motion-enabled .motion-reveal[data-motion-kind="copy"] {
  filter: blur(2px);
}
html.motion-enabled .motion-reveal[data-motion-kind="media"] {
  transform: translate3d(0,30px,0) scale(.972);
  clip-path: inset(6% 2% 8% 2% round 10px);
}
html.motion-enabled .motion-reveal[data-motion-kind="evidence"] {
  transform: translate3d(0,28px,0) scale(.985);
}

html.motion-enabled .motion-reveal.is-motion-in {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
  filter: blur(0);
  clip-path: inset(0 0 0 0 round 0);
}

/* Media has a second, slower settling beat. */
html.motion-enabled .motion-media img,
html.motion-enabled .motion-media video {
  transform: translate3d(var(--motion-pointer-x,0px), calc(var(--motion-pointer-y,0px) + var(--motion-parallax-y,0px)), 0) scale(1.035);
  transition: transform 1200ms var(--motion-ease), filter 500ms var(--motion-ease);
  transform-origin: center center;
  will-change: transform;
}
html.motion-enabled .motion-media.is-motion-in img,
html.motion-enabled .motion-media.is-motion-in video {
  transform: translate3d(var(--motion-pointer-x,0px), calc(var(--motion-pointer-y,0px) + var(--motion-parallax-y,0px)), 0) scale(1.008);
}

/* Draw section structure as the reader arrives. */
html.motion-enabled .section-head,
html.motion-enabled .venture-section__head,
html.motion-enabled .case-v3-section > .wrap > .case-v3-kicker {
  position: relative;
}
html.motion-enabled .motion-rule::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  margin-top: .7rem;
  background: currentColor;
  opacity: .22;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 900ms 170ms var(--motion-ease);
}
html.motion-enabled .motion-rule.is-motion-in::after { transform: scaleX(1); }

/* Numeric proof gets a subtle settle, not a fake count-up. */
html.motion-enabled .motion-number {
  display: inline-block;
  transform-origin: left bottom;
}
html.motion-enabled .motion-reveal.is-motion-in .motion-number {
  animation: mh-number-settle 700ms calc(var(--motion-delay, 0ms) + 120ms) var(--motion-ease-spring) both;
}
@keyframes mh-number-settle {
  0% { transform: translate3d(0,10px,0) scale(.92); opacity: .3; }
  70% { transform: translate3d(0,-1px,0) scale(1.018); opacity: 1; }
  100% { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}

/* ---------------------------------------------------------------------
   3. Interaction physics
   Noticeable on desktop; no layout or visual-system redesign.
   --------------------------------------------------------------------- */
html.motion-enabled .btn,
html.motion-enabled .nav-cta,
html.motion-enabled .text-link,
html.motion-enabled .brand,
html.motion-enabled .contact-band__email,
html.motion-enabled .site-nav a {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease);
}

html.motion-enabled .text-link__arrow {
  display: inline-block;
  transform-origin: center;
  transition: transform 340ms var(--motion-ease-spring);
}

@media (hover:hover) and (pointer:fine) {
  html.motion-enabled .btn:hover,
  html.motion-enabled .nav-cta:hover {
    transform: translate3d(0,-4px,0);
    box-shadow: 0 12px 28px rgba(8,48,39,.13);
  }
  html.motion-enabled .btn:active,
  html.motion-enabled .nav-cta:active {
    transform: translate3d(0,0,0) scale(.97);
    transition-duration: 110ms;
  }
  html.motion-enabled .text-link:hover,
  html.motion-enabled .contact-band__email:hover {
    transform: translate3d(5px,0,0);
  }
  html.motion-enabled .text-link:hover .text-link__arrow {
    transform: translate3d(7px,0,0) rotate(-4deg);
  }
  html.motion-enabled .brand:hover { transform: translate3d(2px,0,0); }

  html.motion-enabled .work-index-card,
  html.motion-enabled .exec-feature,
  html.motion-enabled .principle,
  html.motion-enabled .skill-card,
  html.motion-enabled .testimonial,
  html.motion-enabled .case-v3-decision,
  html.motion-enabled .venture-quick__item,
  html.motion-enabled .venture-loop__step,
  html.motion-enabled .evidence-row,
  html.motion-enabled .lifecycle__step,
  html.motion-enabled .hm-shot {
    transition:
      transform 430ms var(--motion-ease),
      border-color 330ms var(--motion-ease),
      background-color 330ms var(--motion-ease),
      box-shadow 430ms var(--motion-ease);
  }

  html.motion-enabled .work-index-card:hover,
  html.motion-enabled .principle:hover,
  html.motion-enabled .skill-card:hover,
  html.motion-enabled .testimonial:hover,
  html.motion-enabled .case-v3-decision:hover,
  html.motion-enabled .venture-quick__item:hover,
  html.motion-enabled .venture-loop__step:hover,
  html.motion-enabled .evidence-row:hover,
  html.motion-enabled .lifecycle__step:hover {
    transform: translate3d(0,-8px,0);
    box-shadow: 0 18px 44px rgba(8,48,39,.09);
  }

  html.motion-enabled .work-index-card__media,
  html.motion-enabled .exec-feature__media,
  html.motion-enabled .case-v3-hero__media,
  html.motion-enabled .case-v3-media-grid figure,
  html.motion-enabled .hm-shot,
  html.motion-enabled .about-portrait {
    overflow: hidden;
  }

  html.motion-enabled .work-index-card__media img,
  html.motion-enabled .exec-feature__media img,
  html.motion-enabled .case-v3-hero__media img,
  html.motion-enabled .case-v3-media-grid img,
  html.motion-enabled .hm-shot img,
  html.motion-enabled .about-portrait img {
    transition: transform 760ms var(--motion-ease), filter 420ms var(--motion-ease);
    transform-origin: center center;
  }
  html.motion-enabled .work-index-card:hover .work-index-card__media img,
  html.motion-enabled .exec-feature:hover .exec-feature__media img,
  html.motion-enabled .case-v3-hero__media:hover img,
  html.motion-enabled .case-v3-media-grid figure:hover img,
  html.motion-enabled .hm-shot:hover img,
  html.motion-enabled .about-portrait:hover img {
    transform: translate3d(var(--motion-pointer-x,0px), calc(var(--motion-pointer-y,0px) + var(--motion-parallax-y,0px)), 0) scale(1.045);
  }
}

/* Focus motion is equally intentional. */
html.motion-enabled :where(a,button,input,textarea,select):focus-visible {
  transition: outline-offset 180ms var(--motion-ease), box-shadow 240ms var(--motion-ease), transform 240ms var(--motion-ease);
  outline-offset: 5px;
}

/* ---------------------------------------------------------------------
   4. In-page orientation
   --------------------------------------------------------------------- */
html.motion-enabled .venture-nav a,
html.motion-enabled .case-v3-jump a {
  position: relative;
  transition: color 300ms var(--motion-ease), opacity 300ms var(--motion-ease), transform 300ms var(--motion-ease);
}
html.motion-enabled .venture-nav a::after,
html.motion-enabled .case-v3-jump a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--motion-ease);
}
html.motion-enabled .venture-nav a.is-current,
html.motion-enabled .case-v3-jump a.is-current {
  color: var(--green, #0B6B58);
  transform: translate3d(2px,0,0);
}
html.motion-enabled .venture-nav a.is-current::after,
html.motion-enabled .case-v3-jump a.is-current::after { transform: scaleX(1); }

/* ---------------------------------------------------------------------
   5. Password / form states
   --------------------------------------------------------------------- */
html.motion-enabled .deep-gate__scrim { animation: mh-scrim-in 320ms ease-out both; }
html.motion-enabled .deep-gate__panel { animation: mh-dialog-in 560ms var(--motion-ease-spring) both; }
@keyframes mh-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mh-dialog-in {
  0% { opacity: 0; transform: translate3d(0,34px,0) scale(.955); }
  72% { opacity: 1; transform: translate3d(0,-3px,0) scale(1.006); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
html.motion-enabled .contact-form input,
html.motion-enabled .contact-form textarea,
html.motion-enabled .contact-form select,
html.motion-enabled .deep-gate__input {
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}
html.motion-enabled .contact-form input:focus,
html.motion-enabled .contact-form textarea:focus,
html.motion-enabled .contact-form select:focus,
html.motion-enabled .deep-gate__input:focus {
  transform: translate3d(0,-3px,0);
}

/* Mobile keeps the same motion language; pointer depth simply drops away. */
@media (max-width:760px) {
  :root {
    --motion-distance: 30px;
    --motion-side: 28px;
    --motion-slow: 800ms;
  }
  html.motion-enabled .motion-progress { height: 2px; }
}

/* Accessibility requirement retained even though the default treatment is full motion. */
@media (prefers-reduced-motion: reduce) {
  html.motion-enabled *,
  html.motion-enabled *::before,
  html.motion-enabled *::after {
    scroll-behavior: auto !important;
  }
  html.motion-enabled .site-nav,
  html.motion-enabled .hero__rule,
  html.motion-enabled .hero__primary .hero__id,
  html.motion-enabled .hero__primary h1,
  html.motion-enabled .hero__primary .lede,
  html.motion-enabled .hero__cta-row,
  html.motion-enabled .hero__visual,
  html.motion-enabled .hero__proof > *,
  html.motion-enabled .page-hero .case-id,
  html.motion-enabled .page-hero h1,
  html.motion-enabled .page-hero__deck,
  html.motion-enabled .page-hero__actions,
  html.motion-enabled .case-v3-hero__meta,
  html.motion-enabled .case-v3-hero h1,
  html.motion-enabled .case-v3-hero__deck,
  html.motion-enabled .case-v3-facts,
  html.motion-enabled .case-v3-hero__media,
  html.motion-enabled .ventures-hero .case-id,
  html.motion-enabled .ventures-hero h1,
  html.motion-enabled .ventures-hero .lede,
  html.motion-enabled .ventures-status,
  html.motion-enabled .venture-hero-actions,
  html.motion-enabled .hm-hero-media,
  html.motion-enabled .about-portrait,
  html.motion-enabled .deep-gate__scrim,
  html.motion-enabled .deep-gate__panel,
  html.motion-enabled .motion-reveal.is-motion-in .motion-number {
    animation: none !important;
  }
  html.motion-enabled .motion-reveal,
  html.motion-enabled .motion-reveal[data-motion-direction="left"],
  html.motion-enabled .motion-reveal[data-motion-direction="right"],
  html.motion-enabled .motion-reveal[data-motion-kind="copy"],
  html.motion-enabled .motion-reveal[data-motion-kind="media"],
  html.motion-enabled .motion-reveal[data-motion-kind="evidence"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  html.motion-enabled .motion-rule::after { transform: scaleX(1); transition: none; }
  html.motion-enabled .motion-media img,
  html.motion-enabled .motion-media video { transform: none !important; transition: none !important; }
  html.motion-enabled .motion-progress { display: none; }
}


/* =====================================================================
   Editorial homepage + resume motion extension — regression-safe
   Motion deliberately returns to the exact pre-motion resting styles.
   No persistent media scale, parallax, pseudo-rules, or layout-affecting
   display changes are applied to these newer page compositions.
   ===================================================================== */

/* Hero choreography mirrors the case-study timing, then fully releases
   animation ownership so the resting render is the original layout. */
html.motion-enabled body[data-page="home"] .home-editorial-hero__kicker,
html.motion-enabled body[data-page="resume"] .resume-hero .home-editorial-hero__meta {
  animation: mh-kicker-in 650ms 90ms var(--motion-ease) both;
}
html.motion-enabled body[data-page="home"] .home-editorial-hero__title,
html.motion-enabled body[data-page="resume"] .resume-hero h1 {
  animation: mh-headline-in 900ms 120ms var(--motion-ease) both;
}
html.motion-enabled body[data-page="home"] .home-editorial-hero__lede,
html.motion-enabled body[data-page="resume"] .resume-hero .home-editorial-hero__deck {
  animation: mh-enter 760ms 250ms var(--motion-ease) both;
}
html.motion-enabled body[data-page="home"] .home-editorial-hero__signal > * {
  animation: mh-proof-in 700ms var(--motion-ease) both;
}
html.motion-enabled body[data-page="home"] .home-editorial-hero__signal > *:nth-child(1) { animation-delay: 330ms; }
html.motion-enabled body[data-page="home"] .home-editorial-hero__signal > *:nth-child(2) { animation-delay: 410ms; }
html.motion-enabled body[data-page="home"] .home-editorial-hero__signal > *:nth-child(3) { animation-delay: 490ms; }
html.motion-enabled body[data-page="home"] .home-editorial-hero__actions,
html.motion-enabled body[data-page="resume"] .resume-hero .home-editorial-hero__actions {
  animation: mh-enter 760ms 350ms var(--motion-ease) both;
}
html.motion-enabled body[data-page="home"] .home-editorial-hero__availability {
  animation: mh-enter 720ms 510ms var(--motion-ease) both;
}

/* Once the entrance completes, remove the animation layer completely.
   This is the key visual-regression guard: computed resting geometry and
   paint revert to the exact pre-motion page styles. */
html.motion-enabled.motion-home-settled body[data-page="home"] .home-editorial-hero__kicker,
html.motion-enabled.motion-home-settled body[data-page="home"] .home-editorial-hero__title,
html.motion-enabled.motion-home-settled body[data-page="home"] .home-editorial-hero__lede,
html.motion-enabled.motion-home-settled body[data-page="home"] .home-editorial-hero__signal > *,
html.motion-enabled.motion-home-settled body[data-page="home"] .home-editorial-hero__actions,
html.motion-enabled.motion-home-settled body[data-page="home"] .home-editorial-hero__availability,
html.motion-enabled.motion-resume-settled body[data-page="resume"] .resume-hero .home-editorial-hero__meta,
html.motion-enabled.motion-resume-settled body[data-page="resume"] .resume-hero h1,
html.motion-enabled.motion-resume-settled body[data-page="resume"] .resume-hero .home-editorial-hero__deck,
html.motion-enabled.motion-resume-settled body[data-page="resume"] .resume-hero .home-editorial-hero__actions {
  animation: none !important;
}

/* One-shot scroll entrance for new editorial page structures. Classes are
   removed by JS after transition completion, leaving no transform/filter/
   clipping state behind. */
html.motion-enabled .motion-safe-reveal {
  opacity: 0;
  transform: translate3d(0,var(--motion-distance),0);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
  transition-delay: var(--motion-safe-delay, 0ms);
  will-change: transform, opacity;
}
html.motion-enabled .motion-safe-reveal[data-motion-safe-direction="left"] {
  transform: translate3d(calc(var(--motion-side) * -1),0,0);
}
html.motion-enabled .motion-safe-reveal[data-motion-safe-direction="right"] {
  transform: translate3d(var(--motion-side),0,0);
}
html.motion-enabled .motion-safe-reveal[data-motion-safe-kind="evidence"] {
  transform: translate3d(0,28px,0) scale(.985);
}
html.motion-enabled .motion-safe-reveal[data-motion-safe-kind="media"] {
  transform: translate3d(0,30px,0) scale(.985);
}
html.motion-enabled .motion-safe-reveal.is-motion-safe-in {
  opacity: 1;
  transform: none;
}

/* Keep horizontal entrances inside collapsed editorial layouts. */
@media (max-width:1100px) {
  html.motion-enabled body[data-page="home"] .motion-safe-reveal[data-motion-safe-direction="left"],
  html.motion-enabled body[data-page="home"] .motion-safe-reveal[data-motion-safe-direction="right"],
  html.motion-enabled body[data-page="resume"] .motion-safe-reveal[data-motion-safe-direction="left"],
  html.motion-enabled body[data-page="resume"] .motion-safe-reveal[data-motion-safe-direction="right"] {
    transform: translate3d(0,var(--motion-distance),0);
  }
  html.motion-enabled .motion-safe-reveal.is-motion-safe-in { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.motion-enabled body[data-page="home"] .home-editorial-hero__kicker,
  html.motion-enabled body[data-page="home"] .home-editorial-hero__title,
  html.motion-enabled body[data-page="home"] .home-editorial-hero__lede,
  html.motion-enabled body[data-page="home"] .home-editorial-hero__signal > *,
  html.motion-enabled body[data-page="home"] .home-editorial-hero__actions,
  html.motion-enabled body[data-page="home"] .home-editorial-hero__availability,
  html.motion-enabled body[data-page="resume"] .resume-hero .home-editorial-hero__meta,
  html.motion-enabled body[data-page="resume"] .resume-hero h1,
  html.motion-enabled body[data-page="resume"] .resume-hero .home-editorial-hero__deck,
  html.motion-enabled body[data-page="resume"] .resume-hero .home-editorial-hero__actions {
    animation: none !important;
  }
  html.motion-enabled .motion-safe-reveal,
  html.motion-enabled .motion-safe-reveal[data-motion-safe-direction="left"],
  html.motion-enabled .motion-safe-reveal[data-motion-safe-direction="right"],
  html.motion-enabled .motion-safe-reveal[data-motion-safe-kind="media"],
  html.motion-enabled .motion-safe-reveal[data-motion-safe-kind="evidence"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}