/* ==========================================================================
   Bonsa Studio — base do site
   Cores da marca, fundo claro/escuro, sistema de idiomas, cursor e
   animação de entrada das seções. Carregado em todas as páginas.
   ========================================================================== */

/* ---------- Cores da marca (tema claro) ---------- */
:root {
  --bonsa-bg: #dddad0;
  --bonsa-bg-rgb: 221, 218, 208;
  --bonsa-stroke: #d8d6d2;
  --bonsa-text: #141d1f;
  --bonsa-gold: #9f8368;
  --bonsa-toggle-bg: #eeece8;
  --bonsa-panel-bg: #dddad0;
  --bonsa-line: rgba(20,29,31,.15);
  --bonsa-svg-icon: #777;
  --bonsa-page-bg: #edece8;

  --bg: #edece8;
  --bg-soft: #dedad1;
  --text: #141d1f;
  --text-sub: #1e2828;
  --gold: #9e8367;
  --detail: #d8d6d2;
  --tag-bg: var(--bg-soft);
  --card-dark: #141d1f;
  --card-light: var(--gold);
  --panel-bg: #141d1f;
  --panel-text: #edece8;
  --panel-sub: #dedad1;
  --panel-accent: var(--gold);
  --panel-bg-rgb: 20, 29, 31;
  --bar-grad: linear-gradient(var(--gold), #edece8);
}

/* ---------- Cores da marca (tema escuro) ---------- */
html.bonsa-dark,
body.bonsa-dark {
  --bonsa-bg: #1c2526;
  --bonsa-bg-rgb: 28, 37, 38;
  --bonsa-stroke: #252c2d;
  --bonsa-text: #eeece8;
  --bonsa-toggle-bg: #141d1f;
  --bonsa-panel-bg: #1c2526;
  --bonsa-line: rgba(238,236,232,.15);
  --bonsa-svg-icon: #939393;
  --bonsa-page-bg: #141d1f;

  --bg: #141d1f;
  --bg-soft: #1e2828;
  --text: #eeece8;
  --text-sub: #dedad1;
  --detail: #252c2d;
  --card-dark: #1e2828;
  --panel-bg: #edece8;
  --panel-text: #141d1f;
  --panel-sub: #1e2828;
  --panel-bg-rgb: 237, 236, 232;
  --bar-grad: linear-gradient(var(--gold), #141d1f);
}

/* ---------- Fundo da página ---------- */
html, body { background-color: var(--bg) !important; transition: background-color .9s ease; }
html.bonsa-dark, html.bonsa-dark body, body.bonsa-dark { background-color: #141d1f !important; }
body {
  padding-top: 0 !important;
}

/* ---------- Idiomas: cada texto existe em PT e EN; o inativo fica oculto ---------- */
[data-lang-pt], [data-lang-en] {
  transition: opacity .35s ease;
}
html[data-lang="pt"] [data-lang-pt], html[data-lang="en"] [data-lang-en] {
  opacity: 1;
}
html[data-lang="pt"] [data-lang-en],
html[data-lang="en"] [data-lang-pt] {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}
html:not([data-lang]) [data-lang-en] { display: none; }
html.bonsa-lang-switching [data-lang-pt],
html.bonsa-lang-switching [data-lang-en] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.bonsa-lang-switching [data-lang-pt],
  html.bonsa-lang-switching [data-lang-en] { opacity: 1 !important; }
}

/* ---------- Blocos do plugin dentro do Elementor: sem fundo nem espaçamento extra ---------- */
.elementor-widget-shortcode,
.elementor-widget-shortcode > .elementor-widget-container,
.elementor-widget-shortcode .elementor-shortcode,
.elementor-widget-html,
.elementor-widget-html > .elementor-widget-container {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ---------- Cursor personalizado (só em computador) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.bonsa-cursor-on, html.bonsa-cursor-on * {
    cursor: none !important;
  }
}
.bonsa-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--bonsa-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483647;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, background .2s ease, opacity .2s ease;
  opacity: 0;
}
.bonsa-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--bonsa-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2147483646;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, border-color .25s ease, background .25s ease, opacity .2s ease;
  opacity: 0;
}
.bonsa-cursor-ring.is-hover {
  width: 56px;
  height: 56px;
  background: rgba(159,131,104,.12);
  border-color: var(--bonsa-gold);
}
.bonsa-cursor-dot.is-hover {
  opacity: 0;
}
.bonsa-cursor-ring.is-click {
  width: 26px;
  height: 26px;
}

/* ---------- Entrada das seções em cascata (usado pela grade de projetos) ---------- */
.bonsa-sec {
  position:relative;
}
.bonsa-sec > .bonsa-hidden-ctl {
  display:none !important;
}
.bonsa-sec > .bonsa-it {
  opacity:1;
  will-change:opacity, transform, filter;
}
.bonsa-sec.bonsa-armed > .bonsa-it {
  opacity:0;
  transform:translateY(14px);
  filter:blur(6px);
}
.bonsa-sec.bonsa-in > .bonsa-it {
  animation:bonsa-sec-rise .5s cubic-bezier(.4,0,.2,1) both;
  animation-delay:var(--d, 0s);
}
.bonsa-sec.bonsa-out > .bonsa-it {
  animation:bonsa-sec-fall .3s cubic-bezier(.4,0,.2,1) both;
  animation-delay:var(--od, 0s);
}
.bonsa-sec.bonsa-out-nav > .bonsa-it {
  animation:bonsa-sec-fall .45s cubic-bezier(.7,0,.2,1) both;
  animation-delay:var(--od, 0s);
}
@keyframes bonsa-sec-rise{
  0%  { opacity:0; transform:translateY(14px); filter:blur(6px); }
  100%{ opacity:1; transform:translateY(0);    filter:blur(0); }
}
@keyframes bonsa-sec-fall{
  0%  { opacity:1; transform:translateY(0);     filter:blur(0); }
  100%{ opacity:0; transform:translateY(-10px); filter:blur(5px); }
}
.bonsa-sec {
  transition:background-color .9s ease;
}
@media (prefers-reduced-motion:reduce) {
  .bonsa-sec > .bonsa-it, .bonsa-sec.bonsa-in > .bonsa-it, .bonsa-sec.bonsa-out > .bonsa-it, .bonsa-sec.bonsa-out-nav > .bonsa-it {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .bonsa-sec.bonsa-armed > .bonsa-it {
    opacity:1 !important;
  }
}