/* ============================================================
   CodeNitro — Motion & Premium Layer
   ============================================================ */

/* Scroll progress bar */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad-primary); z-index: 200;
  box-shadow: 0 0 12px rgba(32,216,255,.7); transition: width .1s linear;
}

/* Particle constellation canvas */
.fx-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }

/* Animated aurora blobs */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5;
  mix-blend-mode: screen; will-change: transform;
}
.aurora .a1 { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: radial-gradient(circle, #0077ff, transparent 65%); animation: auroraA 22s ease-in-out infinite; }
.aurora .a2 { width: 40vw; height: 40vw; right: -6vw; top: 4vw; background: radial-gradient(circle, #8B5CF6, transparent 65%); animation: auroraB 26s ease-in-out infinite; }
.aurora .a3 { width: 42vw; height: 42vw; left: 30vw; top: 40vh; background: radial-gradient(circle, #20D8FF, transparent 65%); animation: auroraC 30s ease-in-out infinite; opacity: .35; }
@keyframes auroraA { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8vw,6vh) scale(1.15);} }
@keyframes auroraB { 0%,100%{transform:translate(0,0) scale(1.05);} 50%{transform:translate(-7vw,8vh) scale(.9);} }
@keyframes auroraC { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-6vw,-8vh) scale(1.2);} }

/* Grid slow drift */
.bg-grid { animation: gridDrift 40s linear infinite; }
@keyframes gridDrift { from{ background-position: 0 0, 0 0; } to{ background-position: 64px 64px, 64px 64px; } }

/* ---------- Kinetic headline rotator ---------- */
.rotator { display: inline; position: relative; }
.rotator .rot-word {
  display: inline; background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  /* caret = borda direita que gruda no fim da última palavra (nunca cai pra outra linha) */
  border-right: .06em solid var(--cyan); padding-right: .08em;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 50%{ border-right-color: transparent; } }

/* ---------- Tech marquee ---------- */
.marquee-wrap { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(11,16,32,.5); padding: 18px 0; overflow: hidden; position: relative; }
.marquee-wrap::before, .marquee-wrap::after { content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.marquee-wrap::before { left:0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee-wrap::after { right:0; background: linear-gradient(270deg, var(--bg), transparent); }
.marquee { display: flex; width: max-content; gap: 0; animation: marquee 32s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
.marquee .m-item { display:inline-flex; align-items:center; gap:10px; padding: 0 34px; font-family: var(--font-sub); font-weight:700; font-size:1.05rem; color: var(--muted); white-space:nowrap; letter-spacing:.02em; }
.marquee .m-item .d { width:6px; height:6px; border-radius:50%; background: var(--cyan); box-shadow:0 0 10px var(--cyan); }
.marquee .m-item:hover { color:#fff; }
@keyframes marquee { from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ---------- Showcase carousel (slides) ---------- */
.showcase { padding: var(--sp-7) 0; position: relative; }
.sc-viewport { overflow: hidden; width: 100%; }
.sc-track { display: flex; transition: transform .7s cubic-bezier(.65,.05,.25,1); will-change: transform; }
.sc-slide { flex: 0 0 100%; min-width: 0; padding: 6px; }
.sc-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(32,216,255,.10), transparent 60%),
    linear-gradient(180deg, #0A1122, #070B16);
  display: grid; grid-template-columns: 1fr; gap: 0;
}
@media (min-width: 940px){ .sc-card { grid-template-columns: 1.05fr 1fr; } }
.sc-media { padding: clamp(20px,3vw,34px); display:flex; align-items:center; min-width:0; }
.sc-media .mock { transform: perspective(1200px) rotateY(4deg); transition: transform .5s; }
.sc-slide.is-active .sc-media .mock { animation: floatCard 6s ease-in-out infinite; }
@keyframes floatCard { 0%,100%{ transform: perspective(1200px) rotateY(4deg) translateY(0);} 50%{ transform: perspective(1200px) rotateY(4deg) translateY(-10px);} }
.sc-body { padding: clamp(22px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center; border-top:1px solid var(--line); }
@media (min-width: 940px){ .sc-body { border-top:0; border-left:1px solid var(--line); } }
.sc-body .idx { font-family: var(--font-head); font-weight:800; font-size:.85rem; color: var(--cyan); letter-spacing:.2em; }
.sc-body h3 { font-size: clamp(1.5rem,3vw,2.1rem); margin:10px 0 12px; }
.sc-body p { color: var(--muted); }
.sc-metrics { display:flex; gap:22px; flex-wrap:wrap; margin:20px 0 22px; }
.sc-metrics .m .v { font-family:var(--font-head); font-weight:800; font-size:1.5rem; color:#fff; }
.sc-metrics .m .v.cy{ color:var(--cyan);} .sc-metrics .m .v.gr{ color:var(--green);}
.sc-metrics .m .l { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; font-family:var(--font-sub); font-weight:600; margin-top:4px; }
.sc-controls { display:flex; align-items:center; gap:16px; margin-top:26px; }
.sc-arrow { width:48px; height:48px; border-radius:50%; display:grid; place-items:center; box-shadow: inset 0 0 0 1px var(--line); background: rgba(255,255,255,.02); color:#fff; transition:.2s; flex:0 0 auto; }
.sc-arrow:hover { box-shadow: inset 0 0 0 1px var(--cyan); background: rgba(32,216,255,.08); transform: translateY(-2px); }
.sc-arrow svg { width:20px; height:20px; }
.sc-dots { display:flex; gap:9px; flex:1; align-items:center; }
.sc-dot { width:9px; height:9px; border-radius:50%; background: var(--line); transition:.3s; cursor:pointer; }
.sc-dot.active { width:30px; border-radius:6px; background: var(--grad-primary); }
.sc-count { font-family:var(--font-head); font-weight:700; font-size:.9rem; color:var(--muted); }
.sc-count b{ color:#fff; }

/* ---------- Tilt ---------- */
.tilt { transform-style: preserve-3d; transition: transform .18s ease; }

/* ---------- Button shine ---------- */
.btn-primary, .btn-wa { position: relative; overflow: hidden; }
.btn-primary::after, .btn-wa::after {
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); transition: left .6s;
}
.btn-primary:hover::after, .btn-wa:hover::after { left: 140%; }

/* ---------- Animated flow arrows ---------- */
.flow-arrow svg path { stroke-dasharray: 6 5; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -22; } }

/* ---------- Reveal variants ---------- */
.reveal.rv-left { transform: translateX(-40px); }
.reveal.rv-right { transform: translateX(40px); }
.reveal.rv-scale { transform: scale(.94); }
.reveal.rv-blur { filter: blur(10px); }
.reveal.in.rv-left, .reveal.in.rv-right { transform: none; }
.reveal.in.rv-scale { transform: none; }
.reveal.in.rv-blur { filter: none; }

/* ---------- Live pulse ring ---------- */
.pulse-ring { position: relative; }
.pulse-ring::before {
  content:""; position:absolute; inset:-4px; border-radius:inherit;
  box-shadow: 0 0 0 0 rgba(32,216,255,.5); animation: ring 2.4s ease-out infinite;
}
@keyframes ring { to { box-shadow: 0 0 0 14px rgba(32,216,255,0); } }

/* ---------- Section entrance for stat bars (hero mock) ---------- */
.live-bar { animation: barPulse 3s ease-in-out infinite; transform-origin: bottom; }
.live-bar:nth-child(2){ animation-delay:.2s;} .live-bar:nth-child(3){ animation-delay:.4s;} .live-bar:nth-child(4){ animation-delay:.6s;} .live-bar:nth-child(5){ animation-delay:.8s;} .live-bar:nth-child(6){ animation-delay:1s;} .live-bar:nth-child(7){ animation-delay:1.2s;}
@keyframes barPulse { 0%,100%{ transform: scaleY(1); opacity:.85;} 50%{ transform: scaleY(1.12); opacity:1;} }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora span, .bg-grid, .marquee, .sc-slide.is-active .sc-media .mock,
  .flow-arrow svg path, .pulse-ring::before, .live-bar, .rotator .rot-word { animation: none !important; border-right-color: transparent !important; }
  .sc-track { transition: none; }
}