/* ===== Anti-FOUC das animações de entrada =====
   Os elementos já começam no estado inicial ANTES do primeiro paint.
   O JS apenas executa a transição para o estado visível. */
html.motion-js [data-motion="hero"],
html.motion-js .hero-anim-item,
html.motion-js [data-motion="scroll"],
html.motion-js .scroll-fade-in {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(12px);
}

/* Títulos divididos em palavras não aparecem inteiros por um frame
   antes do split ser preparado. Mantém o espaço de layout. */
html.motion-js .motion-reveal-words,
html.motion-js [data-motion-split="words"] {
  visibility: hidden;
}

html.motion-js .motion-reveal-words[data-motion-split-done="true"],
html.motion-js [data-motion-split="words"][data-motion-split-done="true"] {
  visibility: visible;
}

html.motion-js .motion-word,
html.motion-js .gsap-word-reveal {
  opacity: 0;
  transform: translateY(100%);
  filter: blur(8px);
}

/* Acessibilidade: nada fica escondido para quem desativa movimento. */
@media (prefers-reduced-motion: reduce) {
  html.motion-js .motion-reveal-words,
  html.motion-js [data-motion-split="words"] {
    visibility: visible !important;
  }

  html.motion-js [data-motion="hero"],
  html.motion-js .hero-anim-item,
  html.motion-js [data-motion="scroll"],
  html.motion-js .scroll-fade-in,
  html.motion-js .motion-word,
  html.motion-js .gsap-word-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/*
  Motion Effects Kit
  Extraído do comportamento/animações do site de referência.
  Este arquivo NÃO define paleta, tipografia, background global, espaçamentos de layout ou branding.
*/

:root {
  --motion-distance: 40px;
  --motion-blur: 12px;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-duration: 800ms;
}

/* 1) Entrada com blur + deslocamento */
.motion-blur-in,
.animate-blur-in {
  opacity: 0;
  filter: blur(var(--motion-blur));
  transform: translateY(20px);
  animation: motionBlurFadeIn 1s var(--motion-ease) forwards;
}

/* 2) Fade simples */
.motion-fade-in,
.animate-fade-in {
  opacity: 0;
  animation: motionFadeIn 1s ease-out forwards;
}

/* 3) Slide vertical simples */
.motion-slide-in,
.animate-slide-in {
  opacity: 0;
  transform: translateY(20px);
  animation: motionSlideIn var(--motion-duration) var(--motion-ease) forwards;
}

/* 4) Reveal de caracteres com máscara */
.motion-char-mask,
.char-clip-wrap {
  display: inline-flex;
  overflow: visible;
  line-height: inherit;
  vertical-align: baseline;
}

.motion-char,
.char-slide-down {
  display: inline-block;
  transform: translateY(-100%);
  animation: motionCharSlideDown 800ms var(--motion-ease) forwards;
}

/* 5) Reveal de palavras com máscara (o movimento é controlado pelo JS/GSAP) */
.motion-word-mask,
.gsap-reveal-wrapper {
  position: relative;
  display: inline-block;
  overflow: visible;
  vertical-align: baseline;
}

.motion-word,
.gsap-word-reveal {
  display: inline-block;
  transform: translateY(110%);
  will-change: transform, opacity, filter;
}

/* 6) Delays equivalentes ao site original */
.motion-delay-1, .stagger-1 { animation-delay: 100ms; }
.motion-delay-2, .stagger-2 { animation-delay: 200ms; }
.motion-delay-3, .stagger-3 { animation-delay: 300ms; }
.motion-delay-4, .stagger-4 { animation-delay: 400ms; }
.motion-delay-5, .stagger-5 { animation-delay: 500ms; }
.motion-delay-6, .stagger-6 { animation-delay: 600ms; }
.motion-delay-7, .stagger-7 { animation-delay: 700ms; }

/* 7) Flashlight: usa a cor atual do elemento, sem impor paleta */
.motion-flashlight,
.flashlight-target {
  position: relative;
  overflow: hidden;
}

.motion-flashlight::before,
.flashlight-target::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    600px circle at var(--motion-mouse-x, var(--mouse-x, 0px)) var(--motion-mouse-y, var(--mouse-y, 0px)),
    color-mix(in srgb, currentColor 16%, transparent),
    transparent 40%
  );
  border-radius: inherit;
  z-index: 0;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.motion-flashlight::after,
.flashlight-target::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: radial-gradient(
    800px circle at var(--motion-mouse-x, var(--mouse-x, 0px)) var(--motion-mouse-y, var(--mouse-y, 0px)),
    color-mix(in srgb, currentColor 3%, transparent),
    transparent 40%
  );
  border-radius: inherit;
  z-index: 1;
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}

.motion-flashlight-content,
.flashlight-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.motion-flashlight:hover::before,
.motion-flashlight:hover::after,
.flashlight-target:hover::before,
.flashlight-target:hover::after {
  opacity: 1;
}

/* 8) Movimentos de hover observados no site, sem alterar cor */
.motion-hover-lift,
.motion-hover-scale,
.motion-hover-scale-sm,
.motion-hover-icon {
  transition-property: transform;
  transition-timing-function: var(--motion-ease);
}

.motion-hover-lift { transition-duration: 500ms; }
.motion-hover-lift:hover { transform: translateY(-8px); }

.motion-hover-scale { transition-duration: 700ms; }
.motion-hover-scale:hover { transform: scale(1.05); }

.motion-hover-scale-sm { transition-duration: 500ms; }
.motion-hover-scale-sm:hover { transform: scale(1.03); }

.motion-hover-icon { transition-duration: 300ms; }
.motion-hover-icon:hover { transform: scale(1.10); }

/* Para aplicar o movimento em um filho ao passar o mouse no pai */
.motion-hover-parent:hover .motion-hover-child-lift { transform: translateY(-8px); }
.motion-hover-parent:hover .motion-hover-child-scale { transform: scale(1.05); }
.motion-hover-child-lift,
.motion-hover-child-scale {
  transition: transform 500ms var(--motion-ease);
}

/* 9) Pulse de opacidade equivalente ao animate-pulse usado no site */
.motion-pulse {
  animation: motionPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes motionBlurFadeIn {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes motionFadeIn {
  to { opacity: 1; }
}

@keyframes motionSlideIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motionCharSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes motionPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* Acessibilidade: desliga animações quando o usuário prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .motion-blur-in,
  .animate-blur-in,
  .motion-fade-in,
  .animate-fade-in,
  .motion-slide-in,
  .animate-slide-in,
  .motion-char,
  .char-slide-down,
  .motion-pulse {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .motion-word,
  .gsap-word-reveal,
  [data-motion="hero"],
  .hero-anim-item,
  [data-motion="scroll"],
  .scroll-fade-in {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}


/* Safety guard: animated text must never crop any glyph.
   Keeps the same word/character reveal motion, but removes hard clipping masks. */
.motion-word-mask,
.gsap-reveal-wrapper,
.motion-char-mask,
.char-clip-wrap {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

.motion-word,
.gsap-word-reveal,
.motion-char,
.char-slide-down {
  overflow: visible !important;
  padding-block: .08em;
  margin-block: -.08em;
}