/* ==========================================================================
   LABORATÓRIO FRESSATO — Animações e revelações de scroll
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sistema de revelação por scroll — [data-reveal]
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition:
    opacity .9s var(--ease-out),
    transform 1s var(--ease-out),
    clip-path 1.1s var(--ease-out),
    filter .9s var(--ease-out);
}

[data-reveal="up"]     { transform: translateY(38px); }
[data-reveal="down"]   { transform: translateY(-28px); }
[data-reveal="left"]   { transform: translateX(-44px); }
[data-reveal="right"]  { transform: translateX(44px); }
[data-reveal="scale"]  { transform: scale(.93); }
[data-reveal="rise"]   { transform: translateY(58px) scale(.97); }
[data-reveal="blur"]   { filter: blur(9px); transform: translateY(20px); }
[data-reveal="zoom"]   { clip-path: inset(6%); transform: scale(1.12); }

/* As variantes de cortina recortam os FILHOS, nunca o próprio elemento
   observado — um elemento totalmente recortado tem área de interseção zero
   e o IntersectionObserver nunca dispararia (e as imagens lazy nunca
   chegariam a carregar). */
[data-reveal="clip"], [data-reveal="clip-l"] { opacity: 1; }
[data-reveal="clip"] > *, [data-reveal="clip-l"] > * {
  transition: clip-path 1.1s var(--ease-out);
}
[data-reveal="clip"] > *   { clip-path: inset(0 0 100% 0); }
[data-reveal="clip-l"] > * { clip-path: inset(0 100% 0 0); }
[data-reveal="clip"].seen > *,
[data-reveal="clip-l"].seen > * { clip-path: inset(-25%); }

[data-reveal].seen {
  opacity: 1;
  transform: none;
  filter: none;
}

/* A variante zoom é a única que recorta o próprio elemento — e termina com
   folga negativa, para não cortar o que vaza da caixa de propósito
   (fotos flutuantes, selos, contadores). */
[data-reveal="zoom"].seen { clip-path: inset(-25%); }

/* stagger — o pai distribui o atraso entre os filhos */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }
[data-stagger="fast"] > * { transition-delay: calc(var(--i, 0) * 55ms); }
[data-stagger="slow"] > * { transition-delay: calc(var(--i, 0) * 130ms); }

[data-delay="1"] { transition-delay: .09s; }
[data-delay="2"] { transition-delay: .18s; }
[data-delay="3"] { transition-delay: .27s; }
[data-delay="4"] { transition-delay: .36s; }
[data-delay="5"] { transition-delay: .45s; }
[data-delay="6"] { transition-delay: .54s; }

/* --------------------------------------------------------------------------
   2. Revelação de texto por palavra (JS injeta os spans)
   -------------------------------------------------------------------------- */
.split-line {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  padding-bottom: .09em;
  margin-bottom: -.09em;
}
.split-word {
  display: inline-block;
  transform: translateY(112%) rotate(3deg);
  opacity: 0;
  transition: transform 1.05s var(--ease-out), opacity .7s var(--ease-out);
  transition-delay: calc(var(--w, 0) * 52ms + var(--base, 0ms));
}
.split-ready .split-word { transform: translateY(0) rotate(0); opacity: 1; }

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0); opacity: .6; }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); opacity: 1; }
}

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

@keyframes floatySlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(1.5deg); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes wheel {
  0%   { opacity: 0; transform: translateY(0); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(13px); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes fillIn {
  to { fill-opacity: 1; }
}

@keyframes loadBar {
  0%   { transform: translateX(-115%); }
  100% { transform: translateX(345%); }
}

@keyframes ecgRun {
  from { stroke-dashoffset: 4000; }
  to   { stroke-dashoffset: 0; }
}

@keyframes shimmer {
  from { background-position: -220% 0; }
  to   { background-position: 220% 0; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, -4%) scale(1.05); }
  66%  { transform: translate(-2%, 3%) scale(.97); }
  100% { transform: translate(0, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   4. Aplicações
   -------------------------------------------------------------------------- */
.float-slow { animation: floatySlow 7s ease-in-out infinite; }
.float-med  { animation: floaty 5.5s ease-in-out infinite; }

/* brilho que atravessa (usado em selos e destaques) */
.shine {
  position: relative;
  overflow: hidden;
}
.shine::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  background-size: 220% 100%;
  animation: shimmer 4.5s var(--ease-in-out) infinite;
  pointer-events: none;
}

/* orbes de fundo que respiram devagar */
.orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: -1;
  filter: blur(60px);
  animation: drift 22s ease-in-out infinite;
}
.orb-a { width: 380px; aspect-ratio: 1; background: rgba(36,80,127,.34); }
.orb-b { width: 300px; aspect-ratio: 1; background: rgba(192,86,58,.2); animation-duration: 28s; animation-direction: reverse; }
.orb-c { width: 260px; aspect-ratio: 1; background: rgba(231,169,62,.14); animation-duration: 34s; }

/* contador */
.num[data-count] { font-variant-numeric: tabular-nums; }

/* elemento que segue o scroll (parallax leve) */
[data-parallax] { will-change: transform; }

/* aparição de item de menu / dropdown */
.pop-in { animation: popIn .45s var(--ease-out) both; }

/* --------------------------------------------------------------------------
   5. Respeito a prefers-reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; }
  .split-word { opacity: 1 !important; transform: none !important; }
  .preloader { display: none !important; }
  .page-veil { display: none !important; }
  .orb, .ecg .pulse, .float-whats::before { animation: none !important; }
  .marquee-track { animation: none !important; }
}