/* ==========================================================================
   Bella Kitchen Cabinetry — bellakitchencabinetry.com
   Desenvolvido 100% pela NEO Startup · https://neostartup.com.br
   ========================================================================== */
/* Bella Kitchen Cabinetry — apoio das animacoes GSAP (assets/js/bella-motion.js).
   Tudo aqui so vale com html.bm, que o <head> liga quando o visitante nao pediu
   "reduzir movimento". Sem o JS, html.bm-on entra sozinho em 3s e nada fica escondido. */

/* topo das paginas internas: some ate o GSAP montar a entrada (evita piscar) */
.bm:not(.bm-on) .page-title .content-box { visibility: hidden; }

/* parallax das fotos de fundo sem mostrar as bordas */
.bm .page-title,
.bm .video-section { overflow: hidden; }
.bm .page-title .bg-layer,
.bm .video-section .bg-layer { will-change: transform; }

/* linhas dos titulos: a mascara do SplitText corta so na vertical,
   para acentos e descendentes (g, j, p) nao serem cortados */
.bm .line-mask { padding-bottom: .08em; margin-bottom: -.08em; }

/* cortina das fotos */
.bm .bm-curtain { overflow: hidden; }
/* o layout base poe "transition: all .7s" em todo img; durante a cortina isso faz o zoom
   do GSAP chegar atrasado (parece um segundo efeito). Desliga so enquanto a cortina roda. */
.bm .bm-curtain img { transition: none !important; }

/* ==========================================================================
   Menu (desktop e cabecalho fixo): micro-transicoes
   ========================================================================== */
:root { --bm-ease: cubic-bezier(.2, .7, .2, 1); }

/* traco fino que cresce sob o link (entra pela esquerda, sai pela direita) */
.main-menu .navigation > li > a { transition: color .35s var(--bm-ease), opacity .35s var(--bm-ease); }
.main-menu .navigation > li > a::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 24px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform .5s var(--bm-ease);
}
.main-menu .navigation > li:hover > a::before,
.main-menu .navigation > li:focus-within > a::before,
.main-menu .navigation > li.current > a::before { transform: scaleX(1); transform-origin: left center; }

/* foco: os outros itens esmaecem enquanto o mouse esta no menu */
.main-menu .navigation:hover > li > a { opacity: .55; }
.main-menu .navigation:hover > li.current > a { opacity: .8; }
.main-menu .navigation:hover > li:hover > a { opacity: 1; }

/* dropdown (Recursos): desliza e os itens entram em cascata; abre tambem pelo teclado */
.main-menu .navigation > li > ul {
  display: block; margin-top: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px);
  transition: opacity .35s var(--bm-ease), transform .5s var(--bm-ease), visibility 0s linear .5s;
}
.main-menu .navigation > li.dropdown:hover > ul,
.main-menu .navigation > li.dropdown:focus-within > ul {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none; margin-top: 0;
  transition: opacity .35s var(--bm-ease), transform .5s var(--bm-ease), visibility 0s;
}
.main-menu .navigation > li > ul > li {
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--bm-ease), transform .45s var(--bm-ease);
}
.main-menu .navigation > li.dropdown:hover > ul > li,
.main-menu .navigation > li.dropdown:focus-within > ul > li { opacity: 1; transform: none; }
.main-menu .navigation > li.dropdown:hover > ul > li:nth-child(1),
.main-menu .navigation > li.dropdown:focus-within > ul > li:nth-child(1) { transition-delay: .06s; }
.main-menu .navigation > li.dropdown:hover > ul > li:nth-child(2),
.main-menu .navigation > li.dropdown:focus-within > ul > li:nth-child(2) { transition-delay: .11s; }
.main-menu .navigation > li.dropdown:hover > ul > li:nth-child(3),
.main-menu .navigation > li.dropdown:focus-within > ul > li:nth-child(3) { transition-delay: .16s; }
.main-menu .navigation > li.dropdown:hover > ul > li:nth-child(4),
.main-menu .navigation > li.dropdown:focus-within > ul > li:nth-child(4) { transition-delay: .21s; }
.main-menu .navigation > li > ul > li > a,
.main-menu .navigation > li > ul > li > a::before { transition: padding .4s var(--bm-ease), color .3s var(--bm-ease), opacity .3s var(--bm-ease); }
.main-menu .navigation > li.dropdown > a::after { transition: transform .45s var(--bm-ease); }

/* cabecalho fixo: desce de cima com curva macia (o layout base usava fade linear) */
/* aparece quando a rolagem para e some enquanto rola (classe bm-scrolling no bella.js) */
.main-header .sticky-header {
  transform: translateY(-100%);
  transition: transform .4s var(--bm-ease), opacity .3s ease, visibility 0s linear .4s;
}
.main-header.fixed-header .sticky-header {
  animation: none; transform: none; box-shadow: 0 10px 30px rgba(38, 37, 44, .08);
  transition: transform .5s var(--bm-ease), opacity .3s ease, visibility 0s;
}
.main-header.fixed-header.bm-scrolling .sticky-header { transform: translateY(-100%); box-shadow: none; }

/* logo e botao do painel lateral */
.main-header .logo-box a { display: inline-block; transition: opacity .35s var(--bm-ease); }
.main-header .logo-box a:hover { opacity: .8; }
.main-header .nav-btn svg { transition: transform .5s var(--bm-ease); }
.main-header .nav-btn:hover svg { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
  .main-menu .navigation > li > a::before,
  .main-menu .navigation > li > ul,
  .main-menu .navigation > li > ul > li,
  .main-menu .navigation > li > a { transition: none !important; }
  .main-header .sticky-header, .main-header.fixed-header .sticky-header { transition: none; }
}

/* ==========================================================================
   Painel lateral: abre na hora e rapido (o layout base esperava 0,6s e levava mais 0,7s)
   ========================================================================== */
.xs-sidebar-widget {
  right: 0; transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease, visibility 0s linear .35s;
}
.xs-sidebar-group.isActive .xs-sidebar-widget {
  right: 0; transform: none;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), opacity .2s ease, visibility 0s;
}
.xs-sidebar-group .xs-overlay { transition: opacity .3s ease, z-index 0s; }
.xs-sidebar-group .sidebar-widget-container { transition: opacity .3s ease .1s; }
@media (prefers-reduced-motion: reduce) {
  .xs-sidebar-widget, .xs-sidebar-group.isActive .xs-sidebar-widget,
  .xs-sidebar-group .xs-overlay, .xs-sidebar-group .sidebar-widget-container { transition: none; }
}