/* ==========================================================================
   IA SEM LIMITES · Animações em CSS
   Duas camadas de movimento:
   1. Este arquivo: keyframes, hover, loops e reveal sem dependência
      (data-isl-reveal, ligado pelo isl-ui.js).
   2. js/isl-motion.js: coreografia de scroll com GSAP (data-motion).
   Regra: só transform, opacity, filter e clip-path. Nada de width/height/top.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes isl-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--_c, var(--isl-accent)) 14%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--_c, var(--isl-accent)) 0%, transparent); }
}
@keyframes isl-ping {
  0%   { transform: scale(1); opacity: 0.7; }
  80%, 100% { transform: scale(2.6); opacity: 0; }
}
@keyframes isl-shimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
@keyframes isl-spin { to { transform: rotate(360deg); } }
@keyframes isl-beam { to { --isl-beam-angle: 360deg; } }
@keyframes isl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes isl-blink { 50% { opacity: 0; } }
@keyframes isl-marquee { to { transform: translateX(-50%); } }
@keyframes isl-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(4%, -3%, 0) scale(1.08); }
  66%  { transform: translate3d(-3%, 2%, 0) scale(0.96); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes isl-skeleton {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}
@keyframes isl-draw { to { stroke-dashoffset: 0; } }
@keyframes isl-rise {
  from { opacity: 0; transform: translateY(24px); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes isl-pill-wave {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.62); }
}

/* --------------------------------------------------------------------------
   REVEAL SEM GSAP  —  data-isl-reveal="up|down|left|right|scale|blur|fade"
   Sequência: data-isl-stagger="70" no pai.
   -------------------------------------------------------------------------- */
[data-isl-reveal] {
  --_x: 0; --_y: 0; --_s: 1; --_b: 0px;
  opacity: 0;
  transform: translate3d(var(--_x), var(--_y), 0) scale(var(--_s));
  filter: blur(var(--_b));
  transition:
    opacity var(--isl-dur-5) var(--isl-ease-out),
    transform var(--isl-dur-5) var(--isl-ease-out),
    filter var(--isl-dur-5) var(--isl-ease-out);
  transition-delay: var(--isl-reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-isl-reveal='up'], [data-isl-reveal=''] { --_y: 32px; }
[data-isl-reveal='down']  { --_y: -32px; }
[data-isl-reveal='left']  { --_x: -40px; }
[data-isl-reveal='right'] { --_x: 40px; }
[data-isl-reveal='scale'] { --_s: 0.94; }
[data-isl-reveal='blur']  { --_y: 16px; --_b: 12px; }
[data-isl-reveal].is-visible { opacity: 1; transform: none; filter: none; }

/* --------------------------------------------------------------------------
   PRÉ-ESTADO DO GSAP
   O <head> marca <html class="isl-js">. O isl-motion.js assume a partir daí.
   Se o GSAP não carregar, o próprio isl-motion.js (ou o failsafe do <head>)
   tira a classe e tudo aparece. Nada fica invisível pra sempre.
   -------------------------------------------------------------------------- */
.isl-js [data-motion='fade-up'],
.isl-js [data-motion='blur-in'],
.isl-js [data-motion='split-lines'],
.isl-js [data-motion='split-chars'],
.isl-js [data-motion='split-words'],
.isl-js [data-motion='mask-reveal'],
.isl-js [data-motion-stagger] > *,
.isl-js [data-hero-eyebrow],
.isl-js [data-hero-fade] { visibility: hidden; }

/* --------------------------------------------------------------------------
   HOVER E INTERAÇÃO
   -------------------------------------------------------------------------- */
.isl-hover-lift { transition: transform var(--isl-dur-3) var(--isl-ease-out), box-shadow var(--isl-dur-3) var(--isl-ease-out); }
.isl-hover-lift:hover { transform: translateY(-6px); box-shadow: var(--isl-shadow-3); }

.isl-press { transition: transform var(--isl-dur-1) var(--isl-ease-out); }
.isl-press:active { transform: scale(0.97); }

/* Zoom suave de mídia dentro de um contêiner com overflow hidden */
.isl-hover-zoom { overflow: hidden; }
.isl-hover-zoom img, .isl-hover-zoom video { transition: transform 1.2s var(--isl-ease-out); }
.isl-hover-zoom:hover img, .isl-hover-zoom:hover video { transform: scale(1.04); }

/* Brilho que atravessa no hover (botão, card) */
.isl-sheen { position: relative; overflow: hidden; isolation: isolate; }
.isl-sheen::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--isl-ease-out);
}
.isl-sheen:hover::after { transform: translateX(120%); }

/* Holofote que segue o cursor. JS escreve --mx/--my (isl-ui.js) */
.isl-spotlight { position: relative; isolation: isolate; }
.isl-spotlight::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 139, 255, 0.14), transparent 45%);
  opacity: 0; transition: opacity var(--isl-dur-3) var(--isl-ease-out);
}
.isl-spotlight:hover::before { opacity: 1; }

/* Seta que anda */
.isl-arrow { display: inline-block; transition: transform var(--isl-dur-2) var(--isl-ease-out); }
a:hover .isl-arrow, button:hover .isl-arrow { transform: translateX(3px); }
a:hover .isl-arrow--up, button:hover .isl-arrow--up { transform: translate(2px, -2px); }

/* Sublinhado que cresce da esquerda (link de texto) */
.isl-underline {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size var(--isl-dur-3) var(--isl-ease-out);
}
.isl-underline:hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   LOOPS
   -------------------------------------------------------------------------- */
.isl-anim-pulse   { animation: isl-pulse 2.2s ease-in-out infinite; }
.isl-anim-float   { animation: isl-float 6s ease-in-out infinite; }
.isl-anim-spin    { animation: isl-spin 1s linear infinite; }
.isl-anim-shimmer { background-size: 200% auto !important; animation: isl-shimmer 6s linear infinite; }
.isl-anim-aurora  { animation: isl-aurora 18s ease-in-out infinite; }
.isl-anim-blink   { animation: isl-blink 1s step-end infinite; }

/* Texto com gradiente correndo (CTA, palavra-chave do hero) */
.isl-grad-text--live {
  background-image: var(--isl-grad-infinity-loop);
  background-size: 200% auto;
  animation: isl-shimmer 6s linear infinite;
}

/* Marca: as três pílulas "respirando" como equalizador */
.isl-mark--live .isl-mark__pill { transform-origin: 50% 100%; animation: isl-pill-wave 1.6s var(--isl-ease-in-out) infinite; }
.isl-mark--live .isl-mark__pill:nth-child(2) { animation-delay: 0.18s; }
.isl-mark--live .isl-mark__pill:nth-child(3) { animation-delay: 0.36s; }

/* Desenho de traço SVG sem GSAP: path com pathLength="1" */
.isl-draw-css path, .isl-draw-css circle {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: isl-draw 2.4s var(--isl-ease-in-out) forwards;
}

/* --------------------------------------------------------------------------
   MENOS MOVIMENTO: tudo no estado final, nada some da tela
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-isl-reveal] { opacity: 1; transform: none; filter: none; }
  .isl-js [data-motion], .isl-js [data-motion-stagger] > * { visibility: visible !important; }
  .isl-marquee__track { animation: none !important; }
}