/* MMC Design System v10.2 — Motion, Performance & Mobile First */
:root{
  --mmc-motion-xs:120ms;
  --mmc-motion-sm:220ms;
  --mmc-motion-md:420ms;
  --mmc-motion-lg:760ms;
  --mmc-motion-xl:1100ms;
  --mmc-ease-standard:cubic-bezier(.2,0,0,1);
  --mmc-ease-emphasized:cubic-bezier(.2,.8,.2,1);
  --mmc-mobile-gutter:18px;
  --mmc-touch:48px;
}

/* Mobile-first foundations */
html{overflow-x:clip;scroll-padding-top:84px}
body{min-width:320px;overflow-x:clip}
main{display:block;min-width:0}
section{position:relative;min-width:0}
.container,.mmc-container,.mmc-container--sm,.mmc-container--md,.mmc-container--xl{padding-inline:0}
img{height:auto}
iframe{max-width:100%}
button,a,input,select,textarea{touch-action:manipulation}

/* Better tap targets and focus */
a,button,[role="button"]{-webkit-tap-highlight-color:transparent}
button,.btn,.mmc-btn,.nav-toggle,.menu-toggle{min-inline-size:var(--mmc-touch)}
:focus-visible{outline:3px solid rgba(86,124,141,.36);outline-offset:3px}

/* Motion primitives */
[data-motion]{will-change:transform,opacity}
.mmc-motion-enabled [data-motion="fade-up"]{opacity:0;transform:translate3d(0,30px,0)}
.mmc-motion-enabled [data-motion="fade-down"]{opacity:0;transform:translate3d(0,-24px,0)}
.mmc-motion-enabled [data-motion="fade-in"]{opacity:0}
.mmc-motion-enabled [data-motion="slide-inline"]{opacity:0;transform:translate3d(28px,0,0)}
.mmc-motion-enabled[dir="rtl"] [data-motion="slide-inline"]{transform:translate3d(-28px,0,0)}
.mmc-motion-enabled [data-motion="scale-in"]{opacity:0;transform:scale(.94)}
[data-motion].is-inview{opacity:1;transform:none;transition:
  opacity var(--mmc-motion-lg) var(--mmc-ease-emphasized),
  transform var(--mmc-motion-lg) var(--mmc-ease-emphasized)}
[data-motion-delay="1"]{transition-delay:80ms!important}
[data-motion-delay="2"]{transition-delay:160ms!important}
[data-motion-delay="3"]{transition-delay:240ms!important}
[data-motion-delay="4"]{transition-delay:320ms!important}

/* Stagger children */
.mmc-motion-enabled .mmc-stagger>*{opacity:0;transform:translateY(18px)}
.mmc-stagger.is-inview>*{opacity:1;transform:none;transition:opacity var(--mmc-motion-lg) var(--mmc-ease-emphasized),transform var(--mmc-motion-lg) var(--mmc-ease-emphasized)}
.mmc-stagger.is-inview>*:nth-child(2){transition-delay:80ms}
.mmc-stagger.is-inview>*:nth-child(3){transition-delay:160ms}
.mmc-stagger.is-inview>*:nth-child(4){transition-delay:240ms}
.mmc-stagger.is-inview>*:nth-child(5){transition-delay:320ms}
.mmc-stagger.is-inview>*:nth-child(6){transition-delay:400ms}

/* Premium interactions */
.mmc-card,.card,.btn,.mmc-btn,.project-card,.service-card{transform:translateZ(0);backface-visibility:hidden}
@media (hover:hover){
  .mmc-card:hover,.card:hover,.project-card:hover,.service-card:hover{transform:translateY(-8px) scale(1.008)}
  .mmc-btn:hover,.btn:hover{transform:translateY(-2px)}
}

/* Page transition */
.mmc-page-transition{position:fixed;inset:0;z-index:99999;pointer-events:none;background:linear-gradient(135deg,var(--mmc-navy-950),var(--mmc-navy-800));transform:scaleY(0);transform-origin:bottom;opacity:0}
.mmc-page-transition.is-entering{animation:mmc-page-in .7s var(--mmc-ease-emphasized) both}
.mmc-page-transition.is-leaving{pointer-events:auto;animation:mmc-page-out .5s var(--mmc-ease-emphasized) both}
@keyframes mmc-page-in{0%{transform:scaleY(1);opacity:1;transform-origin:top}100%{transform:scaleY(0);opacity:1;transform-origin:top}}
@keyframes mmc-page-out{0%{transform:scaleY(0);opacity:1;transform-origin:bottom}100%{transform:scaleY(1);opacity:1;transform-origin:bottom}}

/* Skeletons and loading */
.mmc-skeleton{position:relative;overflow:hidden;background:#eaf0f4;border-radius:var(--mmc-radius-sm)}
.mmc-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:mmc-shimmer 1.4s infinite}
@keyframes mmc-shimmer{100%{transform:translateX(100%)}}
img[data-lazy]{opacity:0;transition:opacity var(--mmc-motion-md) ease}
img[data-lazy].is-loaded{opacity:1}

/* Mobile-first layout rules */
@media (max-width:767px){
  :root{
    --mmc-gutter:var(--mmc-mobile-gutter);
    --mmc-section:clamp(3.5rem,14vw,5rem);
    --mmc-h1:clamp(2.15rem,11vw,3.4rem);
    --mmc-h2:clamp(1.85rem,9vw,2.7rem);
    --mmc-h3:clamp(1.4rem,7vw,2rem);
  }
  .container,.mmc-container,.mmc-container--sm,.mmc-container--md,.mmc-container--xl{width:calc(100% - (var(--mmc-mobile-gutter) * 2));max-width:none}
  .mmc-section{padding-block:var(--mmc-section)}
  .mmc-grid{grid-template-columns:1fr;gap:1rem}
  .mmc-grid>*{grid-column:1/-1!important;min-width:0}
  .mmc-cluster{gap:.75rem}
  .mmc-stack{gap:1rem}
  .mmc-btn,.btn{width:100%;min-height:52px}
  .mmc-btn+.mmc-btn,.btn+.btn{margin-inline-start:0}
  h1,h2,h3{overflow-wrap:anywhere;text-wrap:balance}
  p{overflow-wrap:anywhere}
  .mmc-lead{font-size:1rem;line-height:1.8}
  .mmc-card__body{padding:1.15rem}
  .mmc-table-wrap{margin-inline:calc(var(--mmc-mobile-gutter) * -1);border-radius:0;border-inline:0}
  .mmc-tabs{margin-inline:calc(var(--mmc-mobile-gutter) * -1);padding-inline:var(--mmc-mobile-gutter);border-radius:0;background:transparent;scrollbar-width:none}
  .mmc-tabs::-webkit-scrollbar{display:none}
  video[autoplay]{object-position:center}
  .hero,.page-hero,.cinematic-hero{min-height:min(760px,100svh)}
  .hero-content,.page-hero__content,.cinematic-hero__content{padding-top:clamp(5.5rem,18vw,7rem);padding-bottom:2.5rem}
  .floating-contact,.contact-fab{inset-inline:auto var(--mmc-mobile-gutter);bottom:calc(var(--mmc-mobile-gutter) + env(safe-area-inset-bottom))}
}

@media (max-width:380px){
  :root{--mmc-mobile-gutter:14px}
  .mmc-btn,.btn{font-size:.92rem;padding-inline:1rem}
}

/* Performance-friendly effects */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-motion],.mmc-stagger>*{opacity:1!important;transform:none!important}
  .mmc-page-transition{display:none!important}
}
@media (prefers-reduced-data:reduce){
  video[autoplay]{display:none!important}
  .hero,.cinematic-hero{background-image:var(--mobile-poster,none)!important}
}