/* animations-pro.css — dynamic animations layer */

/* ========== HERO WITH VIDEO BACKGROUND ==========
   Stack (back → front):
     1. .hero base — dark gradient (sempre dark, igual csurface.io atual)
     2. .hero-video-bg — vídeo cover full-bleed com blend mode
     3. .hero-overlay  — gradient overlay pra legibilidade
     4. .hero__inner   — conteúdo
*/
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #060818 0%, #1a1645 50%, #292460 100%) !important;
  color: #e7ecf5;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding-block: var(--sp-12) !important;
}
.hero::before { display: none !important; }

/* Vídeo encostado na borda ESQUERDA do hero */
.hero-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  object-position: left center; /* foco do vídeo ancorado na esquerda */
  z-index: 0;
  pointer-events: none;
  opacity: 0.75;
  mix-blend-mode: screen;
  /* Fade na borda direita do vídeo pra integrar suavemente com gradient */
  mask-image: linear-gradient(to left, transparent 0%, black 25%, black 100%);
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 25%, black 100%);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 20%, rgba(54, 208, 234, 0.12), transparent 60%),
    radial-gradient(ellipse 500px 400px at 0% 100%, rgba(124, 58, 237, 0.20), transparent 60%);
}

/* Canvas de partículas/rede dinâmica no fundo do hero (substitui o vídeo) */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.hero__inner .hero__title,
.hero__inner .hero__sub,
.hero__inner .eyebrow,
.hero__inner .hero__actions {
  max-width: 540px;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}
.hero__inner .hero__actions { display: flex; gap: var(--sp-3); justify-content: flex-end; }
.hero__inner .hero__title { max-width: 580px; }
@media (max-width: 640px) {
  .hero__inner { text-align: left; align-items: flex-start; }
  .hero__inner .hero__title,
  .hero__inner .hero__sub,
  .hero__inner .eyebrow,
  .hero__inner .hero__actions { text-align: left; margin-left: 0; margin-right: auto; }
  .hero__inner .hero__actions { justify-content: flex-start; }
}

@media (max-width: 900px) {
  .hero-video-bg {
    width: 100%;
    opacity: 0.35;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ========== HERO TOASTS — issue notifications over the video ========== */
.hero-toasts {
  position: absolute;
  inset: 0;
  z-index: 1; /* between overlay (1) and inner (2) — overlay já é não-clicável */
  pointer-events: none;
  overflow: hidden;
}
.hero-toast {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  max-width: 208px;
  padding: 7px 10px;
  background: rgba(8, 12, 32, 0.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(54, 208, 234, 0.12) inset;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  font-family: var(--font-body);
  color: #ffffff;
}
.hero-toast.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hero-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}
.hero-toast__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  flex-shrink: 0;
}
.hero-toast__sev {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
}
.hero-toast__zone {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-cyan);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-toast--critical .hero-toast__sev { background: #ef4444; color: #ffffff; }
.hero-toast--high     .hero-toast__sev { background: #f97316; color: #ffffff; }
.hero-toast--medium   .hero-toast__sev { background: #f59e0b; color: #1a1a1a; }
.hero-toast--low      .hero-toast__sev { background: #36d0ea; color: #060818; }
.hero-toast__icon {
  width: 24px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
}
.hero-toast--critical .hero-toast__icon { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.hero-toast--high     .hero-toast__icon { color: #fdba74; background: rgba(249, 115, 22, 0.12); }
.hero-toast--medium   .hero-toast__icon { color: #fcd34d; background: rgba(245, 158, 11, 0.12); }
.hero-toast--low      .hero-toast__icon { color: #67e8f9; background: rgba(54, 208, 234, 0.12); }
.hero-toast__icon svg { width: 14px; height: 14px; }

.hero-toast__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hero-toast__title {
  font-size: 11.5px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-toast__sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-toast__check { display: none; }
.hero-toast__check {
  align-self: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(54, 208, 234, 0.18);
  color: var(--brand-cyan);
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(54, 208, 234, 0.4);
  flex-shrink: 0;
}

/* Subtle severity-glow border on the left edge */
.hero-toast::before {
  content: '';
  position: absolute;
  left: 0; top: 12%; bottom: 12%;
  width: 2px;
  border-radius: 0 2px 2px 0;
}
.hero-toast--critical::before { background: linear-gradient(to bottom, transparent, #ef4444, transparent); }
.hero-toast--high::before     { background: linear-gradient(to bottom, transparent, #f97316, transparent); }
.hero-toast--medium::before   { background: linear-gradient(to bottom, transparent, #f59e0b, transparent); }
.hero-toast--low::before      { background: linear-gradient(to bottom, transparent, #36d0ea, transparent); }

@media (max-width: 900px) { .hero-toasts { display: none; } }

/* ========== CTEM JOURNEY ========== */
.ctem-journey { padding-block: var(--sp-12); }
.ctem-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-10);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3);
  position: relative;
}
@media (max-width: 1100px) { .ctem-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ctem-steps { grid-template-columns: 1fr; } }

/* connecting line */
.ctem-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(to right,
    rgba(54, 208, 234, 0.1),
    rgba(54, 208, 234, 0.55) 50%,
    rgba(124, 58, 237, 0.4));
  z-index: 0;
}
@media (max-width: 1100px) { .ctem-steps::before { display: none; } }

.ctem-step {
  position: relative;
  z-index: 1;
  padding: var(--sp-5) var(--sp-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ctem-step:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.ctem-step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.ctem-step__num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--gradient-accent);
  color: var(--accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 22px rgba(54, 208, 234, 0.30);
}
.ctem-step h3 {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-strong);
}
.ctem-step__what {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin-bottom: var(--sp-3);
}
.ctem-step__deliverables {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--border);
  padding-top: var(--sp-3);
}
.ctem-step__deliverables li {
  position: relative;
  padding-left: 18px;
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: 1.45;
}
.ctem-step__deliverables li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(54, 208, 234, 0.15);
}

/* outcomes row */
.ctem-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: linear-gradient(135deg, rgba(54, 208, 234, 0.08) 0%, rgba(124, 58, 237, 0.10) 100%);
  border: 1px solid rgba(54, 208, 234, 0.20);
  border-radius: var(--r-lg);
}
@media (max-width: 700px) { .ctem-outcomes { grid-template-columns: 1fr; } }
.ctem-outcome {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ctem-outcome strong {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.ctem-outcome span {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

/* Hero text branco-on-dark sempre — independente do theme toggle */
.hero .hero__title { color: #ffffff !important; }
.hero .hero__sub { color: rgba(231, 236, 245, 0.85) !important; max-width: 56ch; }
.hero .eyebrow { color: var(--brand-cyan) !important; }
.hero .btn--ghost { color: #e7ecf5; border-color: rgba(255, 255, 255, 0.25); }
.hero .btn--ghost:hover { color: #fff; border-color: var(--brand-cyan); background: rgba(54, 208, 234, 0.08); }

@media (max-width: 640px) {
  .hero { min-height: 60vh; }
  .hero-video-bg { opacity: 0.4; }
}

/* ========== HERO TITLE word-by-word reveal ========== */
.hero__title {
  position: relative;
}
.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: word-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero__title.has-anim .word:nth-child(1) { animation-delay: 100ms; }
.hero__title.has-anim .word:nth-child(2) { animation-delay: 180ms; }
.hero__title.has-anim .word:nth-child(3) { animation-delay: 260ms; }
.hero__title.has-anim .word:nth-child(4) { animation-delay: 340ms; }
.hero__title.has-anim .word:nth-child(5) { animation-delay: 420ms; }
.hero__title.has-anim .word:nth-child(6) { animation-delay: 500ms; }
.hero__title.has-anim .word:nth-child(7) { animation-delay: 580ms; }
.hero__title.has-anim .word:nth-child(8) { animation-delay: 660ms; }
.hero__title.has-anim .word:nth-child(9) { animation-delay: 740ms; }
.hero__title.has-anim .word:nth-child(10) { animation-delay: 820ms; }
.hero__title.has-anim .word:nth-child(11) { animation-delay: 900ms; }
.hero__title.has-anim .word:nth-child(12) { animation-delay: 980ms; }
@keyframes word-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ========== STAT cards — gradient border on hover ========== */
.stat {
  position: relative;
  overflow: hidden;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.stat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(54, 208, 234, 0.08), transparent);
  opacity: 0;
  transition: opacity 300ms var(--ease);
  pointer-events: none;
}
.stat:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.stat:hover::before { opacity: 1; }

/* ========== CARD — accent gradient sweep on hover ========== */
.card--accent {
  position: relative;
  overflow: hidden;
}
.card--accent::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(54, 208, 234, 0.08), transparent);
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.card--accent:hover::after {
  transform: translateX(50%);
}

/* ========== MARQUEE / Logo strip ========== */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--sp-8);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--text-faint);
  white-space: nowrap;
  opacity: 0.65;
  transition: opacity var(--t-fast) var(--ease);
}
.marquee__item:hover { opacity: 1; color: var(--text-strong); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ========== STEPS — connector line + glow ========== */
.step-card {
  position: relative;
  overflow: hidden;
}
.step-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0 0, rgba(54, 208, 234, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 400ms var(--ease);
  pointer-events: none;
}
.step-card:hover::before { opacity: 1; }
.step-num {
  position: relative;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.step-card:hover .step-num {
  transform: scale(1.08) rotate(-3deg);
}

/* ========== INTEGRATION pills — staggered fade-in ========== */
.integ-pill {
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.integ-pill:hover {
  transform: translateY(-2px) scale(1.04);
}

/* ========== TABLE — row reveal on scroll ========== */
.cmp-table tbody tr {
  opacity: 0;
  transform: translateY(8px);
  animation: row-rise 450ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cmp-table tbody tr:nth-child(1)  { animation-delay: 0ms; }
.cmp-table tbody tr:nth-child(2)  { animation-delay: 50ms; }
.cmp-table tbody tr:nth-child(3)  { animation-delay: 100ms; }
.cmp-table tbody tr:nth-child(4)  { animation-delay: 150ms; }
.cmp-table tbody tr:nth-child(5)  { animation-delay: 200ms; }
.cmp-table tbody tr:nth-child(6)  { animation-delay: 250ms; }
.cmp-table tbody tr:nth-child(7)  { animation-delay: 300ms; }
.cmp-table tbody tr:nth-child(8)  { animation-delay: 350ms; }
.cmp-table tbody tr:nth-child(9)  { animation-delay: 400ms; }
.cmp-table tbody tr:nth-child(n+10) { animation-delay: 450ms; }
@keyframes row-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ========== CTA button — animated shine ========== */
.btn--primary.pulse {
  position: relative;
  overflow: hidden;
}
.btn--primary.pulse::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: btn-shine 3s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes btn-shine {
  0%   { left: -100%; }
  50%  { left: 100%; }
  100% { left: 100%; }
}

/* ========== SECTION HEAD — animated underline ========== */
.section-head h2 {
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 3px;
  background: var(--gradient-accent);
  border-radius: var(--r-pill);
  transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.section-head h2.is-visible::after,
[data-reveal].is-visible .section-head h2::after,
.section-head[data-reveal].is-visible h2::after {
  width: 60%;
}
.section-head--left h2::after { left: 0; transform: none; }
.section-head--left h2.is-visible::after,
.section-head--left[data-reveal].is-visible h2::after {
  width: 40%;
}

/* ========== FAQ item — smoother open ========== */
.faq-item {
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.faq-item:hover {
  background: var(--bg-card-hover);
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}
.faq-item summary::after {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item[open] .faq-answer {
  animation: faq-slide-down 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes faq-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========== CALCULATOR sliders — animated thumb glow ========== */
.calc-field input[type="range"]::-webkit-slider-thumb {
  animation: thumb-glow 3s ease-in-out infinite;
}
@keyframes thumb-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(54, 208, 234, 0.4); }
  50%      { box-shadow: 0 0 24px rgba(54, 208, 234, 0.7); }
}

/* ========== ANIMATED COUNTER values — soft pulse on update ========== */
.calc-out__value, .stat__value {
  transition: color 200ms var(--ease);
}

/* ========== TIMELINE — node pulse ========== */
.timeline-when {
  position: relative;
  z-index: 1;
}
.timeline-when::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--gradient-accent);
  opacity: 0.4;
  animation: node-pulse 2s ease-in-out infinite;
  z-index: -1;
}
@keyframes node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.3); opacity: 0; }
}

/* ========== BLOB decorations (floating accent blobs) ========== */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  pointer-events: none;
  z-index: -1;
}
.blob--cyan {
  background: var(--brand-cyan);
  width: 400px; height: 400px;
}
.blob--purple {
  background: var(--brand-purple);
  width: 300px; height: 300px;
}

/* ========== REVEAL — improved with multiple variants ========== */
[data-reveal="fade"] {
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
[data-reveal="fade"].is-visible { opacity: 1; }

[data-reveal="zoom"] {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
[data-reveal="zoom"].is-visible {
  opacity: 1;
  transform: scale(1);
}

[data-reveal="slide-up"] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal="slide-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== Reduced motion — respect ========== */
@media (prefers-reduced-motion: reduce) {
  .hero-mesh, .blob, .marquee__track, .btn--primary.pulse::before,
  .calc-field input[type="range"]::-webkit-slider-thumb, .timeline-when::before {
    animation: none !important;
  }
  .hero__title .word { opacity: 1; transform: none; animation: none; }
  .cmp-table tbody tr { opacity: 1; transform: none; animation: none; }
  .hero-canvas { display: none; }
}