/* MiriaSmile V210 — motion design leve, acessível e performático */
html{scroll-behavior:smooth}

:root{
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-ease-out:cubic-bezier(.16,1,.3,1);
  --motion-fast:220ms;
  --motion-base:480ms;
  --motion-slow:700ms;
}

/* Só escondemos elementos quando o JavaScript confirmou que está ativo. */
.motion-enabled .motion-reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:
    opacity var(--motion-base) var(--motion-ease-out),
    transform var(--motion-base) var(--motion-ease-out);
  transition-delay:var(--motion-delay,0ms);
  will-change:opacity,transform;
}
.motion-enabled .motion-reveal.motion-from-left{transform:translate3d(-28px,0,0)}
.motion-enabled .motion-reveal.motion-from-right{transform:translate3d(28px,0,0)}
.motion-enabled .motion-reveal.motion-scale{transform:scale(.975)}
.motion-enabled .motion-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}

/* V300: primeira dobra sem animação para preservar o LCP. */
.motion-hero-item{opacity:1!important;transform:none!important;animation:none!important}

/* Cabeçalhos ganham profundidade sutil ao rolar. */
.site-header,.seo-header,.project-header,.catalog-header{
  transition:background-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) ease,padding var(--motion-fast) ease,backdrop-filter var(--motion-fast) ease;
}
.site-header.motion-header-scrolled,
.seo-header.motion-header-scrolled,
.project-header.motion-header-scrolled,
.catalog-header.motion-header-scrolled{
  box-shadow:0 12px 34px rgba(64,27,48,.09);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Microinterações consistentes. */
a,button,input,select,textarea,summary{transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) var(--motion-ease)}
.btn,.seo-actions a,.seo-wa,.header-whatsapp,.footer-social,.footer-contact-line,.catalog-actions a,.detail-actions a,.public-pagination a{
  transform:translateZ(0);
}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.seo-actions a:hover,.seo-wa:hover,.header-whatsapp:hover,.catalog-actions a:hover,.detail-actions a:hover{
    transform:translateY(-2px);
  }
  .footer-social:hover,.footer-contact-line:hover,.public-pagination a:hover{transform:translateY(-1px)}

  .rental-card,.portfolio-card,.seo-card-grid article,.seo-blog-grid article,.premium-city-grid article,.catalog-card,.decor-card,.related-card,.feature-card,.process-card,.why-card,.testimonial-card{
    transition:transform 300ms var(--motion-ease),box-shadow 300ms ease,border-color 300ms ease;
    transform:translateZ(0);
  }
  .rental-card:hover,.portfolio-card:hover,.seo-card-grid article:hover,.seo-blog-grid article:hover,.premium-city-grid article:hover,.catalog-card:hover,.decor-card:hover,.related-card:hover,.feature-card:hover,.process-card:hover,.why-card:hover,.testimonial-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 42px rgba(70,31,53,.11);
  }
  .rental-card img,.portfolio-card img,.seo-card-grid article img,.seo-blog-grid article img,.catalog-card img,.decor-card img,.related-card img,.gallery-item img,.project-gallery img{
    transition:transform 650ms var(--motion-ease-out),filter 350ms ease;
  }
  .rental-card:hover img,.portfolio-card:hover img,.seo-card-grid article:hover img,.seo-blog-grid article:hover img,.catalog-card:hover img,.decor-card:hover img,.related-card:hover img,.gallery-item:hover img,.project-gallery a:hover img{
    transform:scale(1.035);
  }
}

/* Imagens entram suavemente quando terminam de carregar. */
.motion-image{opacity:1;filter:none;transition:filter 260ms ease}
.motion-image.is-loaded{opacity:1;filter:none}

/* FAQ e detalhes. */
details>summary{cursor:pointer}
details>summary::marker{transition:transform var(--motion-fast) ease}
details[open]>:not(summary){animation:msDetailsOpen 320ms var(--motion-ease-out)}
@keyframes msDetailsOpen{from{opacity:0;transform:translate3d(0,-7px,0)}to{opacity:1;transform:none}}

/* Botão de WhatsApp: respiração rara e discreta. */
.floating-whatsapp{animation:msWhatsappBreath 5.5s ease-in-out infinite;transform-origin:center}
@keyframes msWhatsappBreath{0%,82%,100%{transform:scale(1)}88%{transform:scale(1.045)}94%{transform:scale(1)}}

/* Filtros e grids não piscam ao atualizar. */
.catalog-grid,.seo-card-grid,.seo-blog-grid,.portfolio-grid,.rental-track{transition:opacity 220ms ease}
.motion-filtering{opacity:.55;pointer-events:none}

/* Navegação mobile. */
.main-nav,.catalog-nav,.project-nav{transition:opacity 260ms ease,transform 300ms var(--motion-ease-out),visibility 260ms ease}
.menu-toggle span{transition:transform 260ms ease,opacity 180ms ease}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Respeita acessibilidade e economiza bateria. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .motion-enabled .motion-reveal,.motion-enabled .motion-hero-item{opacity:1!important;transform:none!important}
}

@media (max-width:767px){
  .motion-enabled .motion-reveal{transform:translate3d(0,14px,0);transition-duration:380ms}
  .motion-enabled .motion-reveal.motion-from-left,.motion-enabled .motion-reveal.motion-from-right{transform:translate3d(0,14px,0)}
  .floating-whatsapp{animation:none}
}

/* V300 acessibilidade */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.carousel-arrow:focus-visible,.header-whatsapp:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #8a1f55!important;outline-offset:3px!important}