/* =========================
   ANIMAÇÕES GLOBAIS
========================= */

:root{
  --ease-premium: cubic-bezier(.22, 1, .36, 1);
  --shadow-soft: 0 18px 40px rgba(2, 8, 23, .10);
  --shadow-strong: 0 24px 60px rgba(2, 8, 23, .18);
}

html{
  scroll-behavior: smooth;
}

body{
  overflow-x: hidden;
}

/* Estado inicial das animações ao rolar */
.reveal{
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .8s var(--ease-premium),
    transform .8s var(--ease-premium),
    filter .8s var(--ease-premium);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Variações */
.reveal-left{
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity .9s var(--ease-premium),
    transform .9s var(--ease-premium),
    filter .9s var(--ease-premium);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.reveal-left.is-visible{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-right{
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity .9s var(--ease-premium),
    transform .9s var(--ease-premium),
    filter .9s var(--ease-premium);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.reveal-right.is-visible{
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.reveal-scale{
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity .8s var(--ease-premium),
    transform .8s var(--ease-premium),
    filter .8s var(--ease-premium);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}

.reveal-scale.is-visible{
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Delay em cascata */
.delay-1{ transition-delay: .08s; }
.delay-2{ transition-delay: .16s; }
.delay-3{ transition-delay: .24s; }
.delay-4{ transition-delay: .32s; }
.delay-5{ transition-delay: .40s; }

/* =========================
   HEADER / MENU
========================= */

.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition:
    background-color .35s ease,
    box-shadow .35s ease,
    border-color .35s ease,
    transform .35s ease;
}

.site-header.is-scrolled{
  box-shadow: 0 10px 30px rgba(2, 8, 23, .12);
}

/* Links do menu */
.site-nav a{
  position: relative;
  transition: color .25s ease, opacity .25s ease;
}

.site-nav a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: width .3s var(--ease-premium);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after{
  width: 100%;
}

/* =========================
   BOTÕES
========================= */

.btn{
  position: relative;
  overflow: hidden;
  transition:
    transform .25s var(--ease-premium),
    box-shadow .25s var(--ease-premium),
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease;
  will-change: transform;
}

.btn:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.btn:active{
  transform: translateY(-1px) scale(.99);
}

.btn::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-120%);
  transition: transform .8s ease;
}

.btn:hover::before{
  transform: translateX(120%);
}

/* =========================
   CARDS
========================= */

.card,
.hero-card,
.service-card,
.portfolio-card,
.kpi-card,
.compliance-card{
  transition:
    transform .35s var(--ease-premium),
    box-shadow .35s var(--ease-premium),
    border-color .35s ease,
    background-color .35s ease;
  transform-origin: center;
  will-change: transform;
}

.card:hover,
.hero-card:hover,
.service-card:hover,
.portfolio-card:hover,
.kpi-card:hover,
.compliance-card:hover{
  transform: translateY(-10px) scale(1.01);
  box-shadow: var(--shadow-strong);
}

/* brilho sutil no hover */
.card-shine{
  position: relative;
  overflow: hidden;
}

.card-shine::after{
  content: "";
  position: absolute;
  top: -20%;
  left: -130%;
  width: 70%;
  height: 160%;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  transition: left .9s ease;
  pointer-events: none;
}

.card-shine:hover::after{
  left: 150%;
}

/* =========================
   IMAGENS
========================= */

.media-zoom{
  overflow: hidden;
  border-radius: inherit;
}

.media-zoom img{
  display: block;
  width: 100%;
  height: auto;
  transition: transform .8s var(--ease-premium), filter .5s ease;
  will-change: transform;
}

.media-zoom:hover img{
  transform: scale(1.06);
}

/* =========================
   TÍTULOS
========================= */

.section-title{
  transition: letter-spacing .3s ease, transform .3s ease;
}

.section-title:hover{
  letter-spacing: .3px;
}

/* =========================
   KPIs / CONTADORES
========================= */

.kpi-number{
  font-variant-numeric: tabular-nums;
}

/* =========================
   FORMULÁRIOS
========================= */

input,
select,
textarea{
  transition:
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

input:focus,
select:focus,
textarea:focus{
  transform: translateY(-1px);
}

/* =========================
   HERO
========================= */

.hero{
  position: relative;
  overflow: hidden;
}

.hero::before{
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(59,130,246,.16), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.06), transparent 22%),
    radial-gradient(circle at 70% 70%, rgba(59,130,246,.10), transparent 24%);
  animation: heroFloat 16s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroFloat{
  from{
    transform: translate3d(0,0,0) scale(1);
  }
  to{
    transform: translate3d(0,-16px,0) scale(1.03);
  }
}

/* Texto hero aparecendo com sequência */
.hero-tag,
.hero h1,
.hero p,
.hero-actions,
.hero-card{
  opacity: 0;
  transform: translateY(18px);
  animation: heroIntro .9s var(--ease-premium) forwards;
}

.hero-tag{ animation-delay: .10s; }
.hero h1{ animation-delay: .22s; }
.hero p{ animation-delay: .34s; }
.hero-actions{ animation-delay: .46s; }
.hero-card{ animation-delay: .58s; }

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

/* =========================
   REDUÇÃO DE MOVIMENTO
========================= */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }

  *,
  *::before,
  *::after{
    animation: none !important;
    transition: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}