/* Cross Terminais — motion
   Substitui as animações de entrada do Elementor (zoomInDown, bounceInLeft, slideInRight)
   por revelações curtas e discretas. Só ativa com JS + sem "reduzir movimento". */

:root {
  --mo-ease: cubic-bezier(.16, 1, .3, 1);
  --mo-dur: .8s;
  --mo-dist: 28px;
  --mo-yellow: #F2CD00;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Estado inicial (só quando motion.js marcou o <html>) */
  html.mo-js [data-reveal] {
    opacity: 0;
    transition:
      opacity var(--mo-dur) var(--mo-ease) var(--d, 0s),
      transform var(--mo-dur) var(--mo-ease) var(--d, 0s),
      clip-path 1.1s var(--mo-ease) var(--d, 0s);
    will-change: opacity, transform;
  }
  html.mo-js [data-reveal="up"]    { transform: translate3d(0, var(--mo-dist), 0); }
  html.mo-js [data-reveal="scale"] { transform: scale(.96); }
  html.mo-js [data-reveal="wipe"]  { opacity: 1; clip-path: inset(0 100% 0 0 round 12px); }

  /* Estado final */
  html.mo-js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0 round 0);
    will-change: auto;
  }

  /* Imagem do "Sobre": leve zoom-out acompanhando o wipe */
  html.mo-js [data-reveal="wipe"] img {
    transform: scale(1.08);
    transition: transform 1.4s var(--mo-ease) var(--d, 0s);
  }
  html.mo-js [data-reveal="wipe"].is-in img { transform: none; }

  /* Cards de serviço: elevação no hover (o fundo amarelo já existe no Elementor) */
  .elementskit-infobox {
    transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease), background-color .3s ease;
  }
  .elementskit-infobox:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35);
  }
  .elementskit-infobox .elementskit-box-header i,
  .elementskit-infobox .elementskit-box-header svg {
    transition: transform .45s var(--mo-ease);
  }
  .elementskit-infobox:hover .elementskit-box-header i,
  .elementskit-infobox:hover .elementskit-box-header svg {
    transform: translateY(-3px) scale(1.08);
  }

  /* Botão do hero */
  .elementor-element-23a4261 .elementor-button {
    transition: transform .3s var(--mo-ease), box-shadow .3s var(--mo-ease), color .2s ease;
  }
  .elementor-element-23a4261 .elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(242, 205, 0, .65);
  }

  /* Botões da faixa de contato */
  .cross-contato__btn {
    transition: background .2s, color .2s, transform .3s var(--mo-ease), box-shadow .3s var(--mo-ease) !important;
  }
  .cross-contato__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35);
  }

  /* Links do menu (só desktop): sublinhado desliza */
  @media (min-width: 1025px) {
    .elementskit-navbar-nav > li > a { position: relative; }
    .elementskit-navbar-nav > li > a::after {
      content: "";
      position: absolute;
      left: 15px; right: 15px; bottom: 8px;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s var(--mo-ease);
    }
    .elementskit-navbar-nav > li > a:hover::after { transform: scaleX(1); }
  }

  /* Vídeos: cantos e sombra suaves */
  .elementor-widget-video .elementor-wrapper {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .45);
  }
}

/* Âncoras não ficam escondidas atrás do topo */
#sobre, #servicos, #contato { scroll-margin-top: 24px; }