/* Dynamikk — efeitos de cinema (par do assets/js/efeitos-cinema.js) */

/* ---------- Transição entre páginas: a página nova abre em íris a partir do clique ---------- */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: menu-lateral; }
.site-header { view-transition-name: cabecalho-do-site; }
::view-transition-group(menu-lateral), ::view-transition-group(cabecalho-do-site) { animation-duration: .5s; }
::view-transition-old(root) { animation: saida-cinema .5s cubic-bezier(.7,0,.3,1) both; }
::view-transition-new(root) { animation: iris-cinema .75s cubic-bezier(.75,0,.2,1) both; }
@keyframes saida-cinema { to { opacity: .2; transform: scale(.94); filter: blur(6px) brightness(.7); } }
@keyframes iris-cinema {
  from { clip-path: circle(0% at var(--iris-x, 50%) var(--iris-y, 40%)); filter: brightness(1.5) saturate(1.3); }
  60% { filter: brightness(1.08); }
  to { clip-path: circle(150% at var(--iris-x, 50%) var(--iris-y, 40%)); filter: none; }
}

/* ---------- Títulos: cada palavra sobe para o lugar, e o título assenta com um leve brilho ---------- */
.titulo-revela .rt-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .02em .03em; margin: -.02em -.03em; }
.titulo-revela .rt-i { display: inline-block; transform: translateY(112%) rotate(4deg); opacity: 0; animation: rt-sobe .72s cubic-bezier(.2,.9,.28,1) both; }
@keyframes rt-sobe { to { transform: none; opacity: 1; } }
.titulo-brilho { animation: rt-assenta 1s ease-out 1; }
@keyframes rt-assenta { 0% { text-shadow: none; } 45% { text-shadow: 0 0 26px rgba(58,214,253,.6); } 100% { text-shadow: none; } }

/* ---------- Ícones que se desenham ---------- */
.icone-traco:not(.desenha) :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.icone-traco.desenha :is(path, circle, rect, line, polyline, polygon, ellipse) {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: traco-do-icone .5s cubic-bezier(.65,0,.35,1) var(--traco-atraso, 0ms) forwards;
}
.icone-traco.desenha :is(path, circle, rect, line, polyline, polygon, ellipse):nth-child(2) { animation-delay: calc(var(--traco-atraso, 0ms) + 65ms); }
.icone-traco.desenha :is(path, circle, rect, line, polyline, polygon, ellipse):nth-child(3) { animation-delay: calc(var(--traco-atraso, 0ms) + 130ms); }
.icone-traco.desenha :is(path, circle, rect, line, polyline, polygon, ellipse):nth-child(n+4) { animation-delay: calc(var(--traco-atraso, 0ms) + 175ms); }
@keyframes traco-do-icone { 0% { stroke-dashoffset: 1; filter: drop-shadow(0 0 0 transparent); } 70% { filter: drop-shadow(0 0 5px rgba(58,214,253,.9)); } 100% { stroke-dashoffset: 0; filter: drop-shadow(0 0 0 transparent); } }

/* glifos (ícone num quadrado colorido) ganham anel de luz girando */
@property --giro-do-anel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.glyph { position: relative; isolation: isolate; }
.glyph::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s ease;
  background: conic-gradient(from var(--giro-do-anel), transparent 0 60%, rgba(58,214,253,.95) 75%, #fff 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px;
  animation: giro-do-anel 2.4s linear infinite;
}
.bloco-vivo:hover .glyph::after, .glyph:hover::after { opacity: 1; }
@keyframes giro-do-anel { to { --giro-do-anel: 360deg; } }

/* ---------- Plano em destaque com borda de luz girando ---------- */
.plan-featured, .plan-vip { isolation: isolate; }
.plan-featured::after, .plan-vip::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; pointer-events: none; padding: 2px;
  background: conic-gradient(from var(--giro-do-anel), transparent 0 55%, #3AD6FD 70%, #0B5CFF 80%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: giro-do-anel 4s linear infinite;
}
.plan-vip::after { background: conic-gradient(from var(--giro-do-anel), transparent 0 55%, #FFD166 70%, #FF9F1C 80%, transparent 92%); animation-duration: 5s; }
.planos-revelados .plan-featured { animation: pulso-do-plano 1.2s cubic-bezier(.2,.8,.2,1) .9s both; }
@keyframes pulso-do-plano { 0% { box-shadow: 0 0 0 0 rgba(58,214,253,.0); } 30% { box-shadow: 0 0 0 10px rgba(58,214,253,.35), 0 0 80px rgba(11,92,255,.55); } 100% { box-shadow: 0 0 0 0 rgba(58,214,253,0); } }

/* ---------- Faíscas e onda no clique ---------- */
.faiscas { position: fixed; width: 0; height: 0; z-index: 10000; pointer-events: none; }
.faiscas i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 10px currentColor; animation: faisca .7s cubic-bezier(.15,.8,.3,1) both; }
.faiscas b { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(58,214,253,.9); animation: onda-do-clique .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes faisca { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--fx), var(--fy)) scale(0); opacity: 0; } }
@keyframes onda-do-clique { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(4.5); opacity: 0; } }

/* ---------- Brilho que atravessa os botões principais ---------- */
.btn-primary, .btn-glow, .btn-light { position: relative; }
.btn-brilho { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.btn-brilho::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
  animation: brilho-do-botao 4.5s ease-in-out infinite;
}
.btn:hover .btn-brilho::before { animation-duration: 1.1s; }
@keyframes brilho-do-botao { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* ---------- Luz que segue o cursor e anel (site, só com mouse) ---------- */
.luz-cursor, .anel-cursor { position: fixed; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; will-change: transform; }
.luz-cursor { width: 600px; height: 600px; z-index: 2; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(58,214,253,.13) 0%, rgba(11,92,255,.08) 35%, transparent 70%); }
.anel-cursor { width: 36px; height: 36px; z-index: 9999; border-radius: 50%; border: 1.5px solid rgba(58,214,253,.75);
  box-shadow: 0 0 14px rgba(58,214,253,.45), inset 0 0 10px rgba(58,214,253,.25); transition: opacity .3s ease, scale .25s cubic-bezier(.2,.8,.2,1), background-color .25s ease, border-color .25s ease; }
.cursor-ativo .luz-cursor { opacity: 1; }
.cursor-ativo .anel-cursor { opacity: .9; }
.anel-cursor.sobre-link { scale: 1.65; background-color: rgba(58,214,253,.1); border-color: rgba(255,255,255,.9); }
.anel-cursor.apertado { scale: .75; }

/* ---------- Mostras de tela com profundidade ao rolar (navegadores com scroll-timeline) ---------- */
@supports (animation-timeline: view()) {
  .site main section:not(.hero) .shot-frame { animation: tela-em-profundidade linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
  @keyframes tela-em-profundidade { from { transform: perspective(1200px) rotateX(16deg) scale(.9); filter: brightness(.7); } to { transform: none; filter: none; } }
  .site main section:not(.hero) .section-head { animation: titulo-sobe linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  @keyframes titulo-sobe { from { opacity: .3; translate: 0 40px; letter-spacing: .02em; } to { opacity: 1; translate: 0 0; } }
}

/* ---------- App: entrada em cascata dos blocos da página ---------- */
.app-body .content > :not(script):nth-child(-n+10) { animation: entrada-do-bloco .6s cubic-bezier(.2,.8,.2,1) both; }
.app-body .content > :nth-child(2) { animation-delay: .05s; } .app-body .content > :nth-child(3) { animation-delay: .1s; }
.app-body .content > :nth-child(4) { animation-delay: .15s; } .app-body .content > :nth-child(5) { animation-delay: .2s; }
.app-body .content > :nth-child(6) { animation-delay: .25s; } .app-body .content > :nth-child(n+7) { animation-delay: .3s; }
@keyframes entrada-do-bloco { from { opacity: 0; translate: 0 18px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: none; } }
/* item ativo do menu com faixa de luz */
.app-body .side-link.is-active { position: relative; overflow: hidden; }
.app-body .side-link.is-active::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%); translate: -100% 0; animation: faixa-do-menu 3.5s ease-in-out 1s infinite; pointer-events: none; }
@keyframes faixa-do-menu { 0%, 75% { translate: -100% 0; } 100% { translate: 100% 0; } }
/* números do topo dos cartões com brilho ao passar o mouse */
.app-body .kpi strong, .app-body .fx-kpi strong { transition: text-shadow .3s ease, letter-spacing .3s ease; }
.app-body .kpi:hover strong, .app-body .fx-kpi:hover strong { text-shadow: 0 0 22px rgba(11,92,255,.35); }

/* ---------- Perguntas e respostas: mais ar quando a resposta abre ---------- */
.section-faq .faq { margin-bottom: 14px; padding: 2px 24px; transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.section-faq .faq summary { padding: 20px 0; line-height: 1.4; }
.section-faq .faq[open] summary { padding-bottom: 16px; border-bottom: 1px solid rgba(58,214,253,.22); margin-bottom: 20px; }
.section-faq .faq[open] { background: rgba(255,255,255,.07); }
.section-faq .faq p { padding: 0 0 24px; margin: 0; line-height: 1.85; max-width: 62ch; }
.section-faq .faq[open] p { animation: faq-abre .45s cubic-bezier(.2,.8,.2,1); }
@keyframes faq-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .icone-traco :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .glyph::after, .plan-featured::after, .plan-vip::after, .btn-brilho, .luz-cursor, .anel-cursor { display: none; }
  .app-body .content > *, .titulo-revela .rt-i, .titulo-brilho, .section-faq .faq[open] p { animation: none !important; }
  .titulo-revela .rt-i { transform: none; opacity: 1; }
}