:root {
  /* Motion Physics Curves (Awwwards / Modern UI standards) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-soft: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Native scrolling keeps wheel and touch input on the browser's fast path. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Lenis' recommended root states; these only exist on supported desktops. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: clip;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

.elementor-animation-float {
  transition-duration: .35s;
  transition-property: transform, box-shadow;
  transition-timing-function: var(--ease-spring-soft);
}
.elementor-animation-float:active,
.elementor-animation-float:focus,
.elementor-animation-float:hover {
  transform: translateY(-8px) scale(1.02);
}

/* ==========================================================================
   Hero Section Motion Keyframes (Cinematic Stagger & Dynamic Physics)
   ========================================================================== */
@keyframes heroVideoCinematic {
  0% {
    transform: translate(-50%, -50%) scale(1.09);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes heroLogoEnter {
  0% {
    transform: translateY(-24px) scale(0.9);
    opacity: 0;
  }
  65% {
    transform: translateY(3px) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes heroTitleCinematic {
  0% {
    transform: translateY(28px) scale(0.98);
    opacity: 0;
  }
  70% {
    transform: translateY(-3px) scale(1.01);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes heroCtaPopIn {
  0% {
    transform: translateY(24px) scale(0.94);
    opacity: 0;
  }
  55% {
    transform: translateY(-5px) scale(1.08);
    opacity: 1;
  }
  78% {
    transform: translateY(2px) scale(0.98);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes heroCardLeftSlide {
  0% {
    transform: translate3d(-48px, 0, 0) scale(0.96);
    opacity: 0;
    filter: blur(5px);
  }
  70% {
    transform: translate3d(4px, 0, 0) scale(1.01);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes heroVideoCardSlide {
  0% {
    transform: translate3d(48px, 0, 0) scale(0.96);
    opacity: 0;
    filter: blur(5px);
  }
  70% {
    transform: translate3d(-4px, 0, 0) scale(1.01);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

/* Micro-animations */
@keyframes ctaEnergyPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.015);
  }
}

@keyframes ctaShimmer {
  0% {
    transform: translateX(-180%) skewX(-22deg);
    opacity: 0;
  }
  8% {
    opacity: 0.85;
  }
  42% {
    transform: translateX(280%) skewX(-22deg);
    opacity: 0.85;
  }
  50%, 100% {
    transform: translateX(280%) skewX(-22deg);
    opacity: 0;
  }
}

@keyframes cardAmbientFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

/* ==========================================================================
   Reusable Modern Scroll Animation Classes (Bidirectional Scroll & Rewind)
   ========================================================================== */
.scroll-bottom {
  opacity: 0;
  transform: translateY(24px);
  /* Saída (Rebobinação): rápida, suave e fluida */
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.scroll-left {
  opacity: 0;
  transform: translateX(-28px);
  /* Saída (Rebobinação) */
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.scroll-right {
  opacity: 0;
  transform: translateX(28px);
  /* Saída (Rebobinação) */
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.scroll-scale-up {
  opacity: 0;
  transform: scale(0.94);
  /* Saída (Rebobinação) */
  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Entrada (.ativo): expansiva, cinematográfica e elegante */
.scroll-bottom.ativo,
.scroll-top.ativo,
.scroll-left.ativo,
.scroll-right.ativo {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition: opacity 0.65s var(--ease-out-expo),
              transform 0.65s var(--ease-out-expo) !important;
}

.scroll-scale-up.ativo {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.65s var(--ease-spring),
              transform 0.65s var(--ease-spring) !important;
}

/* Revela os títulos sem cobrir o fundo animado; a folga preserva os glifos da Semakin. */
.elementor-9 .section-title-curtain--motion-ready {
  padding-block: .14em .08em;
  margin-block: -.14em -.08em;
  opacity: 1 !important;
  clip-path: inset(100% var(--curtain-inline-bleed, -1.5em) -.35em var(--curtain-inline-bleed, -1.5em));
  transition-property: opacity, transform, clip-path !important;
  transition-duration: .65s, .65s, .76s !important;
}

.elementor-9 .section-title-curtain--motion-ready.is-curtain-visible {
  clip-path: inset(-.35em var(--curtain-inline-bleed, -1.5em) -.35em var(--curtain-inline-bleed, -1.5em));
}

.elementor-9 .testimonial-reveal-title {
  --curtain-inline-bleed: -100vw;
}

/* ==========================================================================
   Custom Minimal Scrollbar (Dark Green Pill with Auto-Hide)
   ========================================================================== */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE & Edge */
  overflow-x: clip;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Edge */
  width: 0 !important;
  height: 0 !important;
}

.custom-scrollbar-track {
  position: fixed;
  top: 0;
  right: 0;
  width: 14px;
  height: 100vh;
  z-index: 999999;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.custom-scrollbar-thumb {
  position: absolute;
  top: 0;
  right: 4px;
  width: 6px;
  min-height: 36px;
  border-radius: 9999px;
  background-color: #0D3D2F;
  border: 1px solid rgba(197, 245, 66, 0.35);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: auto;
  cursor: grab;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.2s ease,
              background-color 0.2s ease,
              border-color 0.2s ease;
  will-change: transform, opacity;
}

.custom-scrollbar-thumb:hover,
.custom-scrollbar-thumb.is-dragging {
  width: 8px;
  background-color: #124e3c;
  border-color: rgba(197, 245, 66, 0.6);
  cursor: grabbing;
}

.custom-scrollbar-thumb.is-visible {
  opacity: 0.95;
}

/* Ensure mobile devices have 100% native instant scrolling */
@media (max-width: 768px) and (hover: none) {
  html,
  body {
    scroll-behavior: auto !important;
  }
}
/* Scroll reveals stay readable when the user requests less motion. */
@media (prefers-reduced-motion: reduce) {
  .scroll-bottom,
  .scroll-left,
  .scroll-right,
  .scroll-scale-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .elementor-9 .section-title-curtain--motion-ready {
    padding-block: 0 !important;
    margin-block: 0 !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* Título da jornada de fases: a cortina segue o .ativo controlado pelo fases-journey.js
   (mesmo gatilho do resto do cabeçalho), então entra e sai animada junto com o badge e o subtítulo. */
.elementor-9 .fases-reveal-title.section-title-curtain--motion-ready {
  transform: none !important;
  clip-path: inset(100% -1.5em -.35em -1.5em) !important;
  transition: clip-path .5s cubic-bezier(0.4, 0, 0.2, 1) .16s !important;
}

.elementor-9 .fases-reveal-title.section-title-curtain--motion-ready.ativo {
  clip-path: inset(-.35em -1.5em -.35em -1.5em) !important;
  transition: clip-path .76s cubic-bezier(0.16, 1, 0.3, 1) .08s !important;
}

@media (prefers-reduced-motion: reduce) {
  .elementor-9 .fases-reveal-title.section-title-curtain--motion-ready {
    clip-path: none !important;
    transition: none !important;
  }
}