/* UmkaPro Premium Motion v1 — subtle, performant, reduced-motion safe */
:root{
  --umka-motion-ease:cubic-bezier(.22,.72,.25,1);
  --umka-motion-fast:260ms;
  --umka-motion-base:620ms;
}

/* Reveal is enabled only after JS marks the document ready. Content stays visible without JS. */
html.umka-motion-ready .umka-motion-item{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.988);
  filter:blur(3px);
  transition:
    opacity var(--umka-motion-base) var(--umka-motion-ease),
    transform var(--umka-motion-base) var(--umka-motion-ease),
    filter 520ms var(--umka-motion-ease),
    border-color 320ms ease,
    box-shadow 420ms ease,
    background-color 320ms ease;
  transition-delay:var(--umka-motion-delay,0ms);
  will-change:opacity,transform,filter;
}
html.umka-motion-ready .umka-motion-item.umka-motion-left{
  transform:translate3d(-28px,0,0) scale(.99);
}
html.umka-motion-ready .umka-motion-item.umka-motion-right{
  transform:translate3d(28px,0,0) scale(.99);
}
html.umka-motion-ready .umka-motion-item.is-inview{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:none;
  will-change:auto;
}

/* Hero arrives slightly faster and more confidently. */
html.umka-motion-ready .umka-motion-hero{
  transition-duration:720ms;
}

/* Premium card interaction. */
:is(.card,.service-card-premium,.service-tile,.install-card,.shot,.qa,.faq__item,.kpi,.visual,.slide){
  transition:
    transform 420ms var(--umka-motion-ease),
    border-color 320ms ease,
    box-shadow 420ms ease,
    background-color 320ms ease;
  transform-origin:center center;
}
:is(.card,.service-card-premium,.service-tile,.install-card,.shot,.visual,.slide) img{
  transition:transform 760ms var(--umka-motion-ease),filter 520ms ease;
  transform:translateZ(0) scale(1.001);
  backface-visibility:hidden;
}
@media (hover:hover) and (pointer:fine){
  :is(.card--link,.service-card-premium,.service-tile,.install-card,.shot,.visual,.slide):hover{
    transform:translate3d(0,-6px,0);
    border-color:rgba(215,165,68,.32)!important;
    box-shadow:0 24px 58px rgba(0,0,0,.30),0 0 0 1px rgba(215,165,68,.08) inset;
  }
  :is(.card--link,.service-card-premium,.service-tile,.install-card,.shot,.visual,.slide):hover img{
    transform:translateZ(0) scale(1.035);
    filter:saturate(1.04) contrast(1.02);
  }
  .service-card-icon,.stepnum--icon,.iconbtn{
    transition:transform 360ms var(--umka-motion-ease),border-color 280ms ease,background-color 280ms ease,box-shadow 320ms ease;
  }
  :is(.card--link,.service-card-premium,.service-tile):hover .service-card-icon,
  .card:hover .stepnum--icon{
    transform:translate3d(0,-2px,0) scale(1.045);
    border-color:rgba(215,165,68,.42)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.22),0 0 22px rgba(215,165,68,.09);
  }
}

/* Buttons: subtle lift and a very restrained light pass. */
.btn,.umka-messenger__button{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform 260ms var(--umka-motion-ease),box-shadow 340ms ease,filter 260ms ease,border-color 260ms ease!important;
}
.btn::before,.umka-messenger__button::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-45% auto -45% -35%;
  width:28%;
  transform:skewX(-18deg) translateX(-220%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  transition:transform 720ms var(--umka-motion-ease);
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.umka-messenger__button:hover{transform:translate3d(0,-2px,0)}
  .btn:hover::before,.umka-messenger__button:hover::before{transform:skewX(-18deg) translateX(620%)}
}

/* Menus and details open smoothly. */
.nav__details[open] .nav__submenu{
  transform-origin:top left;
  animation:umka-menu-in 240ms var(--umka-motion-ease) both;
}
.drawer__details[open] .drawer__submenu,
details.qa[open] > :not(summary),
details.faq__item[open] > :not(summary),
.faq details[open] > :not(summary){
  animation:umka-details-in 300ms var(--umka-motion-ease) both;
}
.umka-messenger__details[open] .umka-messenger__menu{
  animation:umka-menu-up 240ms var(--umka-motion-ease) both;
}
.drawer[aria-hidden="false"] .drawer__panel,
.drawer.is-open .drawer__panel,
.drawer.open .drawer__panel{
  animation:umka-drawer-in 360ms var(--umka-motion-ease) both;
}

@keyframes umka-menu-in{
  from{opacity:0;transform:translate3d(0,-7px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes umka-menu-up{
  from{opacity:0;transform:translate3d(0,9px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes umka-details-in{
  from{opacity:0;transform:translate3d(0,-7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes umka-drawer-in{
  from{opacity:.5;transform:translate3d(18px,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* Section headings get a quiet animated gold accent. */
.sectionhead{position:relative}
.sectionhead::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-14px;
  width:44px;
  height:1px;
  background:linear-gradient(90deg,rgba(215,165,68,.9),rgba(215,165,68,0));
  transform-origin:left center;
  transform:scaleX(.15);
  opacity:.35;
  transition:transform 700ms var(--umka-motion-ease),opacity 500ms ease;
}
.sectionhead.is-inview::after,
.umka-motion-item.is-inview.sectionhead::after{
  transform:scaleX(1);
  opacity:1;
}

/* Keep motion lighter on phones. */
@media (max-width:760px){
  html.umka-motion-ready .umka-motion-item{
    transform:translate3d(0,15px,0) scale(.994);
    filter:blur(1.5px);
    transition-duration:500ms;
    transition-delay:min(var(--umka-motion-delay,0ms),140ms);
  }
  html.umka-motion-ready .umka-motion-item.umka-motion-left,
  html.umka-motion-ready .umka-motion-item.umka-motion-right{
    transform:translate3d(0,15px,0) scale(.994);
  }
  html.umka-motion-ready .umka-motion-item.is-inview{transform:none;filter:none}
  .sectionhead::after{bottom:-10px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  html.umka-motion-ready .umka-motion-item,
  html.umka-motion-ready .umka-motion-item.is-inview,
  :is(.card,.service-card-premium,.service-tile,.install-card,.shot,.qa,.faq__item,.kpi,.visual,.slide),
  :is(.card,.service-card-premium,.service-tile,.install-card,.shot,.visual,.slide) img,
  .btn,.umka-messenger__button,.sectionhead::after{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    animation:none!important;
    transition:none!important;
  }
}