/* Efeitos compartilhados de todos os temas da LP (hover, reveal, depth, mobile app). */
:root {
  --ba-fx-ease: cubic-bezier(.22, 1, .36, 1);
  --ba-fx-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ba-depth-1: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .18);
  --ba-depth-2: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px -16px rgba(15, 23, 42, .28);
  --ba-depth-3: 0 8px 16px rgba(15, 23, 42, .08), 0 32px 64px -24px rgba(15, 23, 42, .35);
  --ba-glow: color-mix(in srgb, var(--brand, #be185d) 35%, transparent);
  --ba-mx: 50%;
  --ba-my: 40%;
}

/* ---------- Scroll reveal (fallback sem GSAP) ---------- */
[data-fx] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s var(--ba-fx-ease), transform .7s var(--ba-fx-ease);
  will-change: opacity, transform;
}
[data-fx].is-in {
  opacity: 1;
  transform: none;
}
[data-fx="fade"] { transform: none; }
[data-fx="left"] { transform: translate3d(-22px, 0, 0); }
[data-fx="right"] { transform: translate3d(22px, 0, 0); }
[data-fx="scale"] { transform: scale(.96); }

[data-fx-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .65s var(--ba-fx-ease), transform .65s var(--ba-fx-ease);
  transition-delay: calc(var(--ba-i, 0) * 55ms);
}
[data-fx-stagger].is-in > *,
.ba-motion-ready [data-fx-stagger] > * {
  opacity: 1;
  transform: none;
}

/* ---------- Microinterações (escopo refinado) ---------- */
button, [role="button"], .ba-fx-lift, .btn-brand, .ba-depth-card {
  transition:
    transform .22s var(--ba-fx-ease),
    box-shadow .28s var(--ba-fx-ease),
    opacity .2s ease,
    filter .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover,
  [role="button"]:hover,
  .ba-fx-lift:hover,
  .btn-brand:hover,
  .ba-depth-card:not(.ba-tilt):hover {
    transform: translateY(-3px);
  }
  button:not(:disabled):active,
  [role="button"]:active,
  .ba-fx-lift:active,
  .btn-brand:active,
  .ba-depth-card:not(.ba-tilt):active {
    transform: translateY(0) scale(.985);
  }

  img.ba-fx-img,
  .ba-fx-img img,
  .ba-media img {
    transition: transform .7s var(--ba-fx-ease-out), filter .5s ease;
  }
  .group:hover img.ba-fx-img,
  a:hover img.ba-fx-img,
  button:hover img.ba-fx-img,
  .ba-media:hover img,
  .ba-depth-card:hover .ba-media img {
    transform: scale(1.05);
  }
}

/* Links de navegação: underline revelado, sem “pulo” */
.ba-nav-link {
  position: relative;
  display: inline-flex;
  transition: color .2s ease, opacity .2s ease;
}
.ba-nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.2em;
  height: 1.5px;
  border-radius: 99px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s var(--ba-fx-ease);
  opacity: .75;
}
@media (hover: hover) and (pointer: fine) {
  .ba-nav-link:hover::after,
  .ba-nav-link.is-active::after {
    transform: scaleX(1);
  }
}
.ba-nav-link.is-active {
  opacity: 1;
}

/* ---------- Profundidade / layering ---------- */
.ba-depth-card {
  box-shadow: var(--ba-depth-1);
  isolation: isolate;
}
@media (hover: hover) and (pointer: fine) {
  .ba-depth-card:hover {
    box-shadow: var(--ba-depth-2);
  }
}

.ba-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ba-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .28));
  opacity: 0;
  transition: opacity .4s var(--ba-fx-ease);
  pointer-events: none;
  z-index: 1;
}
.ba-media:hover::after {
  opacity: 1;
}

/* Brilho diagonal em mídias / CTAs */
.ba-shine {
  position: relative;
  overflow: hidden;
}
.ba-shine::before {
  content: '';
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255, 255, 255, .28) 48%,
    transparent 62%
  );
  transform: translateX(-40%) rotate(8deg);
  transition: transform .85s var(--ba-fx-ease);
  pointer-events: none;
  z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
  .ba-shine:hover::before,
  .group:hover .ba-shine::before {
    transform: translateX(40%) rotate(8deg);
  }
}

.ba-glass {
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), var(--ba-depth-1);
}

/* Spotlight ambiente (temas dark — coordenadas via JS) */
.ba-ambient-spot {
  position: relative;
}
.ba-ambient-spot::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
    520px circle at var(--ba-mx) var(--ba-my),
    var(--ba-glow),
    transparent 55%
  );
  opacity: .45;
  transition: opacity .4s ease;
}

/* Orbes decorativos flutuantes (opcional, se o tema tiver .ba-orb) */
.ba-orb {
  pointer-events: none;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .45;
  will-change: transform;
  animation: ba-orb-drift 14s ease-in-out infinite alternate;
}
.ba-orb--brand {
  background: radial-gradient(circle, color-mix(in srgb, var(--brand, #be185d) 55%, transparent), transparent 70%);
}
@keyframes ba-orb-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, -22px, 0) scale(1.08); }
}

/* CTA com halo suave */
.ba-cta-glow {
  box-shadow:
    0 10px 30px -12px color-mix(in srgb, var(--brand, #be185d) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--brand, #be185d) 25%, transparent);
}
@media (hover: hover) and (pointer: fine) {
  .ba-cta-glow:hover {
    box-shadow:
      0 16px 40px -10px color-mix(in srgb, var(--brand, #be185d) 65%, transparent),
      0 0 0 1px color-mix(in srgb, var(--brand, #be185d) 40%, transparent);
  }
}

/* Campos de formulário — feedback de foco */
.ba-field-focus input:not([type="checkbox"]):not([type="radio"]),
.ba-field-focus select,
.ba-field-focus textarea,
input.ba-input,
select.ba-input,
textarea.ba-input {
  transition: border-color .2s ease, box-shadow .25s var(--ba-fx-ease), background-color .2s ease;
}
.ba-field-focus input:not([type="checkbox"]):not([type="radio"]):focus,
.ba-field-focus select:focus,
.ba-field-focus textarea:focus,
input.ba-input:focus,
select.ba-input:focus,
textarea.ba-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--brand, #be185d) 55%, #94a3b8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #be185d) 22%, transparent);
}

/* WhatsApp float com presença */
.ba-wa-float {
  position: relative;
  transition: transform .25s var(--ba-fx-ease), box-shadow .25s ease !important;
  box-shadow:
    0 10px 28px rgba(37, 211, 102, .35),
    0 0 0 0 rgba(37, 211, 102, .45) !important;
  animation: ba-wa-pulse 2.6s var(--ba-fx-ease) infinite;
}
.ba-wa-float::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, .45);
  animation: ba-wa-ring 2.6s ease-out infinite;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .ba-wa-float:hover {
    transform: scale(1.08) translateY(-2px) !important;
    animation-play-state: paused;
  }
}
@keyframes ba-wa-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .4); }
  50% { box-shadow: 0 14px 32px rgba(37, 211, 102, .45), 0 0 0 10px rgba(37, 211, 102, 0); }
}
@keyframes ba-wa-ring {
  0% { transform: scale(.92); opacity: .7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Mobile: sensação de app (dock, toques, respiro) */
@media (max-width: 767px) {
  html {
    -webkit-tap-highlight-color: transparent;
  }
  /* NÃO usar overflow-x: clip/hidden em html/body — isso cria containing
     block e quebra position:fixed dos modais (agendamento, lightbox). */
  /* Compensa preview bar + header sticky ao navegar por âncoras */
  section[id] {
    scroll-margin-top: calc(var(--zuri-preview-offset, 0px) + 4.75rem);
  }
  body.ba-has-dock {
    padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
  }
  /* Dock já tem atalho do WhatsApp — esconde o FAB flutuante no mobile */
  body.ba-has-dock a[aria-label="Conversar no WhatsApp"] {
    display: none !important;
  }
  body > header {
    padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right));
  }
  /* Não padar a section inteira (quebrava heros full-bleed e dobrava px-4).
     Safe-area só nos containers internos já com padding. */
  body > section > .max-w-6xl,
  body > section > .max-w-5xl,
  body > section > .max-w-4xl,
  body > section > .max-w-3xl,
  body > footer > .max-w-6xl {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }
  button, a.btn, .btn, [role="button"] {
    min-height: 44px;
  }
  .ba-app-dock {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    display: flex;
    gap: .55rem;
    padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--dark, #111111) 88%, transparent);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, .22);
  }
  .ba-app-dock .ba-dock-book {
    flex: 1;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--brand, #be185d);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
    box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--brand, #be185d) 70%, transparent);
    transition: transform .2s var(--ba-fx-ease), filter .2s ease;
  }
  .ba-app-dock .ba-dock-book:active {
    transform: scale(.98);
  }
  .ba-app-dock .ba-dock-book:focus-visible,
  .ba-app-dock .ba-dock-wa:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  .ba-app-dock .ba-dock-wa {
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .35);
    transition: transform .2s var(--ba-fx-ease);
  }
  .ba-app-dock .ba-dock-wa:active {
    transform: scale(.96);
  }
}

@media (min-width: 768px) {
  .ba-app-dock { display: none !important; }
}

/* Modal aberto: esconde dock, trava scroll e garante fixed no viewport */
body.ba-modal-open {
  overflow: hidden !important;
}
body.ba-modal-open .ba-app-dock {
  display: none !important;
}
.ba-modal-backdrop,
.ba-modal-sheet {
  position: fixed !important;
  /* Garante que transform de transição não “prenda” o modal a um ancestral */
  margin: 0;
}

/* GSAP (theme-motion.js): o texto do hero espera o GSAP; depois ele controla os reveals. */
.ba-motion:not(.ba-motion-ready) #inicio :is(h1, p, a, button, form) { visibility: hidden; }
.ba-motion-ready [data-fx] { opacity: 1; transform: none; transition: none; }
.ba-tweening { transition: none !important; }
.ba-magnetic {
  transition-property: background-color, border-color, color, opacity, filter !important;
  will-change: transform;
}
.ba-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  z-index: 80;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand, #be185d) 70%, white),
    var(--brand, #be185d),
    color-mix(in srgb, var(--brand, #be185d) 55%, #111)
  );
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  box-shadow: 0 0 12px var(--ba-glow);
}

/* Tilt 3D suave (controlado pelo GSAP; fallback CSS) */
.ba-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  section .grid,
  section .snap-row {
    perspective: 1100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-fx],
  [data-fx-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ba-orb,
  .ba-wa-float,
  .ba-wa-float::before {
    animation: none !important;
  }
  .ba-ambient-spot::before {
    display: none !important;
  }
}