/* =========================================================
   Careka Digital — Performance Fluid Layer
   Objetivo: manter a estética premium reduzindo jank, loops e pintura cara.
   ========================================================= */

html.perf-optimized {
  scroll-behavior: smooth;
}

html.is-hidden-by-tab *,
html.is-hidden-by-tab *::before,
html.is-hidden-by-tab *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

#fireCanvas,
canvas#fireCanvas {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Evita renderização antecipada das seções longas sem quebrar a navegação por âncora. */
main > section.sec:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: 920px;
}

/* A primeira tela e a área ativa do portfólio precisam permanecer sempre prontas. */
main > section.sec:first-child,
#portfolio,
#cta-final {
  content-visibility: visible;
}

/* Contenção de pintura nos blocos mais pesados. */
.panel,
.port-card,
.blogFeatured,
.blogMiniCard,
.pillarPanelV11,
.pillarServiceFullCardV11,
.serviceCatalogCard,
.modal,
.megaMenu {
  contain: layout paint style;
  backface-visibility: hidden;
}

.port-img,
.pillarMediaV11 img,
.serviceCatalogCard img,
.blogFeatured img {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Transições mais rápidas: continuam sofisticadas, mas deixam a página responder melhor. */
.reveal,
.motion-reveal,
.port-card,
.panel,
.blogFeatured,
.blogMiniCard,
.pillarPanelV11,
.serviceCatalogCard,
.btn,
.topbar,
.topbar__in {
  transition-duration: .42s !important;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}

.portfolioTrack {
  will-change: auto !important;
}

.portfolioViewport.is-navigating .portfolioTrack,
.portfolioViewport.is-dragging .portfolioTrack {
  will-change: transform !important;
}

/* Menos pintura em efeitos decorativos globais. */
body::before {
  opacity: .018 !important;
  background-image: none !important;
}

.port-glass {
  opacity: .42;
}

/* Título final com impacto, porém sem ocupar tela demais. */
.ctaFoundationTitle {
  font-size: clamp(2.7rem, 5.7vw, 6.2rem) !important;
  line-height: .94 !important;
  letter-spacing: .038em !important;
  max-width: 1120px !important;
}

/* Mobile: reduz blur/backdrop-filter, que é um dos maiores vilões de travamento. */
@media (hover: none), (max-width: 920px) {
  html.perf-lean {
    scroll-behavior: auto;
  }

  .panel,
  .port-card,
  .blogFeatured,
  .blogMiniCard,
  .pillarPanelV11,
  .pillarServiceFullCardV11,
  .serviceCatalogCard,
  .modal,
  .megaMenu,
  .topbar__in {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .port-glass,
  .hero-noise,
  .grain,
  .noise {
    display: none !important;
  }

  .reveal,
  .motion-reveal,
  .port-card,
  .panel,
  .blogFeatured,
  .blogMiniCard,
  .pillarPanelV11,
  .serviceCatalogCard {
    transition-duration: .32s !important;
  }

  main > section.sec:not(:first-child) {
    contain-intrinsic-size: 780px;
  }

  .ctaFoundationTitle {
    font-size: clamp(2.35rem, 12vw, 4.4rem) !important;
    line-height: .96 !important;
    letter-spacing: .032em !important;
  }
}

/* Respeita redução de movimento do sistema e evita travamento em aparelhos mais fracos. */
@media (prefers-reduced-motion: reduce) {
  html,
  html.motion-ready {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal,
  .motion-reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}