/* ===================== CASES — CURTAIN ===================== */
.cs-curtain {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 9999;
  pointer-events: none;
  animation: cs-curtain-out 1.05s cubic-bezier(0.7, 0, 0.2, 1) .05s forwards;
}
@keyframes cs-curtain-out {
  0%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* ===================== CASES — INTRO ===================== */
#cases-head {
  position: relative;
  padding: 170px 0 60px;
  text-align: center;
  overflow: hidden;
  background: var(--bg);
}
/* Aurora purple/cyan atrás do título */
.cs-aurora {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(123,45,255,.14), transparent 60%),
    radial-gradient(ellipse 30% 25% at 30% 60%, rgba(0,204,255,.10), transparent 60%),
    radial-gradient(ellipse 30% 25% at 70% 40%, rgba(0,102,255,.08), transparent 60%);
  filter: blur(22px);
  opacity: 0;
  transform: scale(0.85);
  animation: cs-aurora-bloom 2.2s cubic-bezier(0.2, 0.7, 0.2, 1) .15s forwards,
             cs-aurora-drift 16s ease-in-out 2.4s infinite alternate;
}
@keyframes cs-aurora-bloom { to { opacity: 1; transform: scale(1); } }
@keyframes cs-aurora-drift {
  0%   { transform: scale(1)    translateX(0)     translateY(0); }
  50%  { transform: scale(1.04) translateX(20px)  translateY(-10px); }
  100% { transform: scale(1)    translateX(-12px) translateY(8px); }
}
#cases-head::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(123,45,255,.10), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(0,204,255,.06), transparent 70%);
  pointer-events: none;
}
#cases-head::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 44px);
  opacity: 0;
  pointer-events: none;
  animation: cs-grid-in 1.6s ease-out 1s forwards;
}
@keyframes cs-grid-in { to { opacity: .55; } }
.cs-head-inner {
  position: relative; z-index: 2;
  max-width: 820px; margin: 0 auto; padding: 0 32px;
}
.cs-head-inner > * { position: relative; z-index: 2; }
.cs-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--purple);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(123,45,255,.06);
  border: 1px solid rgba(123,45,255,.2);
  margin-bottom: 24px;
  opacity: 0;
  transform: translateY(-8px);
  animation: cs-eyebrow-in .8s cubic-bezier(0.2, 0.7, 0.2, 1) .55s both;
}
@keyframes cs-eyebrow-in { to { opacity: 1; transform: translateY(0); } }
.cs-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--purple);
  opacity: 0;
  animation: cs-dot-on .4s ease-out 1.1s both,
             pulse 1.8s ease-in-out 1.5s infinite;
}
@keyframes cs-dot-on {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(123,45,255,.6); }
}

/* Title — word reveal */
.cs-title {
  font-size: clamp(40px, 6vw, 76px);
  font-weight: 300; line-height: 1.04;
  letter-spacing: -.025em;
  color: #fff; margin: 0 0 18px;
}
.cs-title .accent {
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-title .sw-line { display: inline-block; vertical-align: top; }
.cs-title .sw-word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: cs-word-rise .9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.cs-title .sw-line:nth-child(1) .sw-word:nth-child(1) { animation-delay: .75s; }
.cs-title .sw-line:nth-child(1) .sw-word:nth-child(2) { animation-delay: .82s; }
.cs-title .sw-line:nth-child(1) .sw-word:nth-child(3) { animation-delay: .89s; }
.cs-title .sw-line:nth-child(3) .sw-word:nth-child(1) { animation-delay: 1.02s; }
.cs-title .sw-line:nth-child(3) .sw-word:nth-child(2) { animation-delay: 1.09s; }
.cs-title .sw-line:nth-child(3) .sw-word:nth-child(3) { animation-delay: 1.18s; }
.cs-title .sw-line:nth-child(3) .sw-word:nth-child(4) { animation-delay: 1.25s; }
@keyframes cs-word-rise { to { transform: translateY(0); opacity: 1; } }

.cs-sub {
  font-size: 15px; font-weight: 300;
  color: #a9aebf; line-height: 1.7;
  max-width: 620px; margin: 0 auto 28px;
  opacity: 0;
  filter: blur(6px);
  animation: cs-sub-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 1.55s both;
}
@keyframes cs-sub-in { to { opacity: 1; filter: blur(0); } }

.cs-head-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: #aaa;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  transition: all .3s;
  opacity: 0;
  transform: translateY(8px);
  animation: cs-cta-in .9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.85s both;
  overflow: hidden;
}
@keyframes cs-cta-in { to { opacity: 1; transform: translateY(0); } }
/* Shimmer sutil que percorre o CTA periodicamente */
.cs-head-cta::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -60%;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transform: skewX(-20deg);
  animation: cs-cta-shimmer 4.5s ease-in-out 3s infinite;
}
@keyframes cs-cta-shimmer {
  0%, 60% { left: -60%; }
  100% { left: 160%; }
}
.cs-head-cta:hover {
  color: #fff;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.04);
  gap: 14px;
}
.cs-head-cta svg { transition: transform .3s; }
.cs-head-cta:hover svg { transform: translateY(2px); }

/* ===================== CASE CARDS ===================== */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.cs-card {
  position: relative;
  padding: 40px 36px 36px;
  background: var(--l-card);
  border: 1px solid var(--l-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--l-shadow);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .3s;
  /* Estado inicial — entrada por scroll */
  opacity: 0;
  transform: translateY(40px) scale(0.97);
}
.cs-grid.is-revealed .cs-card {
  animation: cs-card-rise .95s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  /* Stagger diagonal: cards (0,1,2,3) → delays 0, 100, 100, 200ms */
  animation-delay: calc(.15s + var(--i, 0) * .1s);
}
@keyframes cs-card-rise {
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Linha decorativa do topo: agora acende e cresce na entrada (line draw),
   além de continuar visível ao hover. */
.cs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; right: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: 0;
  transition: opacity .4s, left .9s cubic-bezier(0.2, 0.7, 0.2, 1), right .9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cs-grid.is-revealed .cs-card::before {
  left: 0; right: 0;
  opacity: 1;
  transition-delay: calc(.55s + var(--i, 0) * .1s);
}
/* Mouse spotlight — gradient radial que segue o cursor */
.cs-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0,204,255,.06),
    transparent 50%
  );
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.cs-card.purple::after {
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(123,45,255,.06),
    transparent 50%
  );
}
.cs-card.green::after {
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(34,197,94,.06),
    transparent 50%
  );
}
.cs-card:hover::after { opacity: 1; }
.cs-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0,204,255,.32);
  box-shadow: var(--l-shadow-h), 0 0 24px rgba(0,204,255,.10);
}
.cs-card:hover::before { opacity: 1; }

.cs-card.purple::before { background: linear-gradient(90deg, transparent, var(--purple), transparent); }
.cs-card.purple:hover { border-color: rgba(123,45,255,.32); box-shadow: var(--l-shadow-h), 0 0 24px rgba(123,45,255,.10); }

.cs-card.green::before { background: linear-gradient(90deg, transparent, #22c55e, transparent); }
.cs-card.green:hover { border-color: rgba(34,197,94,.32); box-shadow: var(--l-shadow-h), 0 0 24px rgba(34,197,94,.10); }

.cs-client {
  font-size: 10px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 12px;
}
.cs-card.purple .cs-client { color: var(--purple); }
.cs-card.green .cs-client { color: #22c55e; }

.cs-card h3 {
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500; color: var(--l-text);
  letter-spacing: -.015em;
  line-height: 1.25;
  margin-bottom: 22px;
}
.cs-metric {
  display: flex; align-items: baseline; gap: 12px;
  padding: 18px 0;
  margin-bottom: 22px;
  border-top: 1px solid var(--l-border);
  border-bottom: 1px solid var(--l-border);
}
.cs-metric-val {
  font-size: clamp(38px, 5vw, 52px);
  font-weight: 400;
  letter-spacing: -.03em;
  line-height: 1;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  position: relative;
}
/* "Pop" sutil ao terminar a contagem — escala leve e flash do gradient */
.cs-metric-val.is-counted {
  animation: cs-metric-pop .65s cubic-bezier(0.2, 0.7, 0.2, 1);
}
@keyframes cs-metric-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.cs-metric-label {
  font-size: 12.5px; font-weight: 400;
  color: var(--l-muted); line-height: 1.5;
}
.cs-metric-label strong { color: var(--l-text); font-weight: 500; }

.cs-desc {
  font-size: 13.5px; font-weight: 400;
  color: var(--l-muted); line-height: 1.7;
  margin-bottom: 22px;
}
.cs-desc strong { color: var(--l-text); font-weight: 500; }

.cs-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--cyan);
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,204,255,.06);
  border: 1px solid rgba(0,204,255,.18);
}
.cs-card.purple .cs-tag {
  color: var(--purple);
  background: rgba(123,45,255,.06);
  border-color: rgba(123,45,255,.18);
}
.cs-card.green .cs-tag {
  color: #22c55e;
  background: rgba(34,197,94,.06);
  border-color: rgba(34,197,94,.18);
}

/* "Por que escolher" — head com clip-reveal por linha */
.cs-why-head {
  text-align: center;
  margin-bottom: 8px;
}
.cs-why-head .section-eyebrow {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .6s ease, transform .6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cs-why-head.is-revealed .section-eyebrow {
  opacity: 1; transform: translateY(0);
}
.cs-why-head .section-title .reveal-line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.cs-why-head .section-title .reveal-line::before {
  /* Wrapper interno via pseudo-element não funciona, então usamos
     opacity + transform direto no .reveal-line e clip via overflow. */
  content: '';
}
.cs-why-head .section-title .reveal-line {
  position: relative;
  padding-bottom: 0.1em;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.7, 0, 0.2, 1);
}
.cs-why-head.is-revealed .section-title .reveal-line:nth-child(1) {
  clip-path: inset(0 0 0 0);
  transition-delay: .25s;
}
.cs-why-head.is-revealed .section-title .reveal-line:nth-child(2) {
  clip-path: inset(0 0 0 0);
  transition-delay: .5s;
}

/* ===================== FEATURES ===================== */
.cs-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.cs-feature {
  padding: 28px 26px 24px;
  background: var(--l-card);
  border: 1px solid var(--l-border);
  border-radius: 18px;
  box-shadow: var(--l-shadow);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .3s;
  /* Estado inicial — entrada por scroll */
  opacity: 0;
  transform: translateY(28px);
}
.cs-features.is-revealed .cs-feature {
  animation: cs-feature-rise .85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(.18s + var(--i, 0) * .12s);
}
@keyframes cs-feature-rise {
  to { opacity: 1; transform: translateY(0); }
}
.cs-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(0,204,255,.32);
  box-shadow: var(--l-shadow-h);
}
.cs-feature-ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--cyan);
  background: rgba(0,204,255,.08);
  border: 1px solid rgba(0,204,255,.2);
  margin-bottom: 18px;
  transition: transform .4s var(--ease);
  transform: scale(0.4);
  opacity: 0;
}
.cs-features.is-revealed .cs-feature-ic {
  animation: cs-icon-pop .7s cubic-bezier(0.4, 1.6, 0.5, 1) both;
  animation-delay: calc(.55s + var(--i, 0) * .12s);
}
@keyframes cs-icon-pop {
  0%   { transform: scale(0.4) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(3deg);   opacity: 1; }
  100% { transform: scale(1) rotate(0);         opacity: 1; }
}
.cs-feature:hover .cs-feature-ic {
  transform: rotate(-5deg) scale(1.05);
}
.cs-feature-ic.purple { color: var(--purple); background: rgba(123,45,255,.08); border-color: rgba(123,45,255,.2); }
.cs-feature-ic.green { color: #22c55e; background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.2); }
.cs-feature-ic.blue { color: #6699ff; background: rgba(0,102,255,.08); border-color: rgba(0,102,255,.2); }

.cs-feature h3 {
  font-size: 15px; font-weight: 500;
  color: var(--l-text); margin-bottom: 10px;
  letter-spacing: -.005em;
  line-height: 1.35;
}
.cs-feature p {
  font-size: 12.5px; font-weight: 400;
  color: var(--l-muted); line-height: 1.65;
}

/* ===================== BANNER REVEAL ===================== */
.banner-wrap[data-reveal="banner"] {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition:
    opacity 1.05s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 1.05s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.banner-wrap[data-reveal="banner"].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 1024px) {
  .cs-grid { grid-template-columns: 1fr; }
  .cs-features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  #cases-head { padding: 130px 0 40px; }
  .cs-head-inner { padding: 0 20px; }
  .cs-title { font-size: 40px; }
  .cs-card { padding: 32px 24px 28px; }
  .cs-features { grid-template-columns: 1fr; }
}

/* Acessibilidade: motion-reduced — desliga mask reveals, blur, stagger
   complexo. Tudo aparece imediatamente em estado final. */
@media (prefers-reduced-motion: reduce) {
  .cs-curtain { animation: none; opacity: 0; visibility: hidden; }
  .cs-aurora { animation: none; opacity: 1; transform: none; }
  #cases-head::after { animation: none; opacity: .55; }
  .cs-eyebrow,
  .cs-eyebrow .dot,
  .cs-title .sw-word,
  .cs-sub,
  .cs-head-cta,
  .cs-card,
  .cs-card::before,
  .cs-feature,
  .cs-feature-ic,
  .cs-why-head .section-eyebrow,
  .cs-why-head .section-title .reveal-line,
  .banner-wrap[data-reveal="banner"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .cs-card::before { left: 0 !important; right: 0 !important; }
  .cs-head-cta::after { display: none; }
}