/* ==========================================================================
   Efeitos. Tudo aqui é enfeite com propósito: se este arquivo (ou fx.js) faltar,
   o site continua inteiro. Respeita prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1. O título chega quebrado e é consertado por uma varredura ---------- */
.h-hero.fx-repair { position: relative; }
.js .h-hero.fx-repair .w { overflow: visible; }
.js .h-hero.fx-repair .w > span {
  transform: translate(var(--bx, 0), var(--by, 0)) rotate(var(--br, 0deg)) skewX(var(--bs, 0deg));
  text-shadow: -3px 0 rgba(255, 70, 70, .85), 3px 0 rgba(70, 225, 255, .85);
  /* fx-heal é a rede de segurança: mesmo sem JS o título se conserta sozinho */
  animation: fx-jit .24s steps(3, jump-none) infinite, fx-heal .5s 3.4s forwards;
}
.js .h-hero.fx-repair .w:nth-child(3n+1) > span { --bx: -7px; --by: 10px; --br: -3.5deg; }
.js .h-hero.fx-repair .w:nth-child(3n+2) > span { --bx: 9px; --by: -7px; --br: 2.5deg; --bs: -9deg; }
.js .h-hero.fx-repair .w:nth-child(3n) > span { --bx: -3px; --by: 15px; --br: 5deg; }
.js .h-hero.fx-repair em .w:nth-child(2n) > span { --bx: 12px; --by: 6px; --br: -5deg; --bs: 8deg; }
.js .h-hero.fx-repair .w.is-fixed > span {
  animation: none; transform: none; text-shadow: none; opacity: 1; clip-path: none;
  transition: transform .55s cubic-bezier(.2, 1.6, .35, 1), text-shadow .3s ease;
}
@keyframes fx-jit {
  0% { opacity: 1; clip-path: inset(0 0 0 0); }
  33% { opacity: .8; clip-path: inset(0 0 36% 0); text-shadow: 3px 0 rgba(255, 70, 70, .85), -3px 0 rgba(70, 225, 255, .85); }
  66% { opacity: .95; clip-path: inset(30% 0 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes fx-heal { to { transform: none; text-shadow: none; opacity: 1; clip-path: none; } }
.fx-scan {
  position: absolute; left: -4%; right: -4%; top: 0; height: 3px; pointer-events: none; z-index: 2;
  background: var(--amber); box-shadow: 0 0 22px 4px rgba(227, 167, 47, .75), 0 -26px 40px 8px rgba(227, 167, 47, .14);
}
.fx-log {
  position: absolute; left: 0; top: 100%; margin-top: 5px; white-space: nowrap; pointer-events: none;
  font-family: var(--mono); font-size: 12px; font-weight: 400; font-stretch: 100%; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
  color: var(--term-dim); opacity: 0; transition: opacity .5s ease;
}
.fx-log.is-on { opacity: 1; }
.fx-log b { color: var(--amber); font-weight: 400; }

/* ---------- 2. Botão "quebre esta tela" e a tela trincada ---------- */
.fx-crack-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 12px;
  border: 1.5px dashed rgba(255, 255, 255, .42); border-radius: 8px; background: rgba(6, 18, 14, .35); color: var(--on-dark-2);
  font-family: var(--mono); font-size: 13px; letter-spacing: .04em; text-align: left;
  transition: border-color .2s ease, color .2s ease, transform .2s var(--ease-out);
}
.fx-crack-btn:hover { border-color: var(--amber); color: #fff; transform: translateY(-1px); }
.fx-crack-btn svg { flex-shrink: 0; width: 20px; height: 20px; fill: none; stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-crack-btn[disabled] { opacity: .5; pointer-events: none; }

.fx-glass { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }
.fx-flash { position: fixed; inset: 0; z-index: 89; pointer-events: none; background: #fff; opacity: 0; animation: fx-flash .32s ease-out; }
@keyframes fx-flash { 0% { opacity: .22; } 100% { opacity: 0; } }
.fx-shake main, .fx-shake .header { animation: fx-shake .42s cubic-bezier(.3, .7, .3, 1); }
@keyframes fx-shake {
  0% { transform: translate(0, 0); } 12% { transform: translate(-9px, 5px) rotate(-.35deg); } 28% { transform: translate(7px, -4px) rotate(.3deg); }
  46% { transform: translate(-5px, 2px); } 66% { transform: translate(3px, -1px); } 100% { transform: translate(0, 0); }
}
.fx-repairline {
  position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 91; pointer-events: none;
  background: var(--amber); box-shadow: 0 0 26px 6px rgba(227, 167, 47, .8), 0 -40px 60px 10px rgba(227, 167, 47, .16);
}
.fx-card {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom, 0px) + 16px); z-index: 92; width: min(440px, calc(100vw - 32px));
  transform: translate(-50%, 24px); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s ease;
}
.fx-card.is-on { transform: translate(-50%, 0); opacity: 1; }
.fx-card .ticket__head { padding: 16px 20px; }
.fx-card .ticket__body { padding: 18px 20px 20px; gap: 14px; }
.fx-card h2 { font-size: 26px; }
.fx-card p { font-size: 16px; line-height: 1.45; color: var(--text-2); }
.fx-card__act { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-card__act .btn { flex: 1 1 180px; min-height: 48px; font-size: 16px; padding: 8px 16px; }
.fx-card__act .fx-link { flex: 1 1 100%; font-size: 15px; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.fx-stamp {
  position: fixed; left: 50%; top: 50%; z-index: 93; pointer-events: none; padding: 14px 26px; border: 4px solid var(--amber); border-radius: 10px;
  font-family: var(--font); font-weight: 800; font-stretch: 75%; font-size: clamp(28px, 6vw, 52px); line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  color: var(--amber); background: rgba(6, 18, 14, .9); transform: translate(-50%, -50%) rotate(-7deg) scale(2.2); opacity: 0;
  animation: fx-stamp 2.2s var(--ease-out) forwards;
}
.fx-stamp small { display: block; margin-top: 6px; font-family: var(--mono); font-size: 13px; font-weight: 400; font-stretch: 100%; letter-spacing: .1em; color: #F3D58C; }
@keyframes fx-stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(2.2); }
  14% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -50%) rotate(-7deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-7deg) scale(.96); }
}

/* ---------- 3. Faíscas de solda nos botões âmbar ---------- */
.fx-sparks { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 95; pointer-events: none; }

/* ---------- 4. Visor de multímetro ---------- */
.fx-meter { background: var(--green-900); color: var(--on-dark); border-bottom: 1px solid var(--term-line); }
.fx-meter__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fx-read {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; min-width: 0;
  padding: clamp(24px, 3vw, 36px) clamp(12px, 2vw, 28px); border-left: 1px dashed var(--term-line);
}
.fx-read:first-child { border-left: 0; padding-left: 0; }
.fx-read dt { font-family: var(--mono); font-size: 12px; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; color: var(--term-dim); }
.fx-read dd { display: flex; align-items: flex-end; gap: 10px; min-height: 58px; font-size: 52px; line-height: 1; font-weight: 800; font-stretch: 75%; color: var(--amber); }
.fx-lcd { display: inline-flex; gap: 7px; transform: skewX(-5deg); }
.fx-lcd svg { width: 32px; height: 54px; overflow: visible; }
.fx-lcd polygon { fill: rgba(227, 167, 47, .1); transition: fill .08s linear; }
.fx-lcd polygon.on { fill: var(--amber); filter: drop-shadow(0 0 5px rgba(227, 167, 47, .55)); }
.fx-unit { font-family: var(--mono); font-size: 13px; font-weight: 400; font-stretch: 100%; letter-spacing: .08em; color: #F3D58C; padding-bottom: 4px; }
@media (max-width: 820px) {
  .fx-meter__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-read:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fx-read:nth-child(n+3) { border-top: 1px dashed var(--term-line); }
  .fx-lcd svg { width: 26px; height: 44px; }
  .fx-read dd { min-height: 48px; font-size: 42px; }
}

/* ---------- 5. Progresso de leitura e trilho de seções ---------- */
.fx-progress {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--amber) 0 12px, transparent 12px 19px);
  transform-origin: left; transform: scaleX(var(--p, 0));
}
.fx-rail { display: none; }
@media (min-width: 1440px) and (hover: hover) {
  .fx-rail {
    position: fixed; left: 26px; top: 50%; z-index: 30; display: flex; flex-direction: column; gap: 0; transform: translateY(-50%);
    opacity: 0; transition: opacity .4s ease;
  }
  .fx-rail.is-on { opacity: 1; }
  .fx-rail::before { content: ''; position: absolute; left: 8px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--border-2); }
  .fx-rail::after {
    content: ''; position: absolute; left: 8px; top: 9px; width: 3px; border-radius: 2px; background: var(--amber);
    height: calc((100% - 18px) * var(--p, 0)); box-shadow: 0 0 10px rgba(227, 167, 47, .7);
  }
  .fx-rail a { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 40px; text-decoration: none; color: var(--text-3); }
  .fx-rail a i { flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; border: 4px solid var(--border-2); background: var(--bg); transition: border-color .25s ease, transform .25s var(--ease-out), background .25s ease; }
  .fx-rail a.is-past i { border-color: var(--amber); }
  .fx-rail a.is-now i { border-color: var(--amber); background: var(--amber); transform: scale(1.18); }
  .fx-rail a span {
    font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; padding: 5px 9px; border-radius: 6px;
    background: var(--text); color: var(--bg); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s var(--ease-out);
  }
  .fx-rail a:hover span, .fx-rail a:focus-visible span { opacity: 1; transform: none; }
  .is-testing .fx-rail { display: none; }
}

/* ---------- 6. Portfólio: inclinação 3D com reflexo ---------- */
@media (hover: hover) and (pointer: fine) {
  .pf__frame { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)); transform-style: preserve-3d; will-change: transform; }
  .pf__link:hover .pf__frame, .pf__link:focus-visible .pf__frame { --tx: -4px; --ty: -4px; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)); }
  .pf__frame.is-tilting { transition: box-shadow .3s var(--ease-out); }
  .pf__shot::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 46%);
  }
  .pf__link:hover .pf__shot::after { opacity: 1; }
}

/* ---------- 9. Sinal orbitando o símbolo em "Quem atende" ---------- */
.fx-orbit { stroke-dasharray: 40 425; animation: fx-orbit 3.6s linear infinite; opacity: .9; }
@keyframes fx-orbit { to { stroke-dashoffset: -465; } }

/* ---------- 10. Anel de solda que segue o ponteiro (só mouse) ---------- */
.fx-ring {
  position: fixed; left: 0; top: 0; z-index: 96; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; pointer-events: none;
  border: 3px solid var(--amber); box-shadow: 0 0 0 1px rgba(10, 26, 20, .5), inset 0 0 0 1px rgba(10, 26, 20, .35);
  opacity: 0; transition: opacity .25s ease, width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), background .2s ease, border-width .2s ease;
}
.fx-ring.is-on { opacity: .9; }
.fx-ring.is-link { width: 52px; height: 52px; margin: -26px 0 0 -26px; background: rgba(227, 167, 47, .14); }
.fx-ring.is-down { width: 20px; height: 20px; margin: -10px 0 0 -10px; background: var(--amber); }
.is-testing .fx-ring { display: none; }

/* ---------- 7. Troca de tema em círculo, a partir do botão ---------- */
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: fx-reveal .65s cubic-bezier(.3, .7, .2, 1); }
@keyframes fx-reveal {
  from { clip-path: circle(0 at var(--vx, 90%) var(--vy, 36px)); }
  to { clip-path: circle(150vmax at var(--vx, 90%) var(--vy, 36px)); }
}

/* ---------- Menos movimento: nada disso roda ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .h-hero.fx-repair .w > span { animation: none !important; transform: none !important; text-shadow: none !important; clip-path: none !important; opacity: 1 !important; }
  .fx-shake main, .fx-shake .header { animation: none !important; }
  ::view-transition-new(root) { animation: none; }
}
@media print { .fx-rail, .fx-progress, .fx-crack-btn { display: none !important; } }

/* ---------- 11. Logo em destaque: selo com o mascote, órbita de sinal e brilho no nome ---------- */
.brand { gap: 14px; }
.brand__badge {
  position: relative; flex: none; width: 50px; height: 50px; border-radius: 50%; display: block;
  background: radial-gradient(circle at 50% 35%, #FFFFFF, #DCE6FF 78%); border: 3px solid var(--amber);
  box-shadow: 0 0 0 3px rgba(227, 167, 47, .18), 0 6px 16px -6px rgba(0, 0, 0, .6);
  animation: lg-pop .8s cubic-bezier(.2, 1.5, .4, 1) .15s both;
}
.brand__badge::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(255, 243, 210, 0) 0 72%, rgba(255, 243, 210, .95) 92%, rgba(255, 243, 210, 0) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  animation: lg-orbit 3.4s linear infinite;
}
/* o mascote do selo é estilizado em mascote.css */
.lg-eyes { transform-box: fill-box; transform-origin: center; animation: lg-blink 4.8s ease-in-out 2s infinite; }
.lg-wrench { transform-box: fill-box; transform-origin: 60% 90%; animation: lg-wave 5.6s ease-in-out 1.4s infinite; }
.lg-thumb { transform-box: fill-box; transform-origin: 50% 100%; }

.brand:hover .lg-wrench { animation: lg-spin .7s var(--ease-out); }
.brand:hover .lg-thumb { animation: lg-thumb .6s var(--ease-out); }
.header .brand__name {
  background: linear-gradient(100deg, #FFFFFF 0 42%, #FBE7B0 50%, #FFFFFF 58% 100%) 120% 0 / 260% 100% no-repeat, #FFFFFF;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #FFFFFF;
  animation: lg-shine 6s ease-in-out 1.6s infinite;
}
@keyframes lg-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lg-jump { 0% { transform: translateY(60%) scale(.6); opacity: 0; } 60% { transform: translateY(-12%) scale(1.04); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes lg-hop { 40% { transform: translateY(-14%) scale(1.05, .97); } 70% { transform: translateY(0) scale(.97, 1.03); } }
@keyframes lg-orbit { to { transform: rotate(360deg); } }
@keyframes lg-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes lg-wave { 0%, 78%, 100% { transform: rotate(0); } 84% { transform: rotate(-16deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }
@keyframes lg-spin { to { transform: rotate(-360deg); } }
@keyframes lg-thumb { 40% { transform: translateY(-3px) rotate(-10deg); } }
@keyframes lg-shine { 0%, 62% { background-position: 120% 0, 0 0; } 100% { background-position: -60% 0, 0 0; } }
@media (max-width: 600px) { .brand { gap: 10px; } .brand__badge { width: 44px; height: 44px; } }

/* ---------- 12. Portfólio: faixa "este site" ---------- */
.pf-banner {
  grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px;
  padding: clamp(24px, 3.4vw, 40px); border-radius: 12px; background: var(--green-800); color: #FFFFFF; box-shadow: var(--shadow-hard); margin-right: 8px;
}
.pf-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(#14574A 1px, transparent 1px), linear-gradient(90deg, #14574A 1px, transparent 1px); background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.pf-banner > * { position: relative; }
.pf-banner__txt { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-banner__tag { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--term-dim); }
.pf-banner h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.02; }
.pf-banner p { color: var(--on-dark-2); max-width: 36em; }
@media (min-width: 601px) and (max-width: 900px) { .pf-grid > .pf:nth-last-of-type(2) { grid-column: 1 / -1; } }

/* ---------- 13. Raio-X do site: a página vira planta técnica ---------- */
.fx-xray {
  --bg: #04131F; --bg-raised: #061B2B; --bg-sunken: #082236; --text: #CFEFFF; --text-2: #9FD2EC; --text-3: #6FA9C6; --border: #124A66; --border-2: #1A6488;
  --muted-fill: #124A66; --link: #7FE0FF; --brand: #46C8F0; --sel-bg: #46C8F0; --sel-fg: #04131F; --accent-ink: #7FE0FF; --accent-deep: #46C8F0; --accent-wash: #082C40;
  --device: #02101A; --device-screen: #0B2A3E; --hero-bg: #051A2A; --dark-bg: #03101A; --term-bg: #020C14; --term-border: #124A66; --term-line: #0D3750; --term-dim: #6FA9C6;
  --green-800: #061F31; --green-900: #03101A; color-scheme: dark;
}
.fx-xray body { background-image: linear-gradient(rgba(70, 200, 240, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 200, 240, .07) 1px, transparent 1px); background-size: 24px 24px; }
.fx-xray main *, .fx-xray .header *, .fx-xray .footer * { outline: 1px solid rgba(70, 200, 240, .22); outline-offset: -1px; }
.fx-xray main img { filter: grayscale(1) contrast(1.15) brightness(.75); opacity: .55; }
.fx-xray .cx-canvas, .fx-xray .cx-fallback { opacity: .35; filter: hue-rotate(40deg); }
.fx-xray main section[id], .fx-xray .hero { position: relative; }
.fx-xray main section[id]::after, .fx-xray .hero::after {
  content: '<section id="' attr(id) '">'; position: absolute; left: 0; top: 0; z-index: 5; padding: 4px 9px; pointer-events: none;
  font-family: var(--mono); font-size: 11px; line-height: 1.2; letter-spacing: .04em; background: #46C8F0; color: #04131F;
}
.fx-hud {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px) + 10px); z-index: 94; transform: translateX(-50%); width: min(720px, calc(100vw - 24px));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px 12px 18px; border-radius: 12px; border: 1.5px solid #46C8F0;
  background: rgba(2, 12, 20, .94); color: #CFEFFF; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; letter-spacing: .02em;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .8); animation: fx-hud-in .45s var(--ease-out);
}
@keyframes fx-hud-in { from { transform: translate(-50%, 30px); opacity: 0; } }
.fx-hud b { color: #7FE0FF; font-weight: 400; }
.fx-hud__txt { flex: 1 1 320px; min-width: 0; }
.fx-hud button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 0; background: #46C8F0; color: #04131F; font-family: var(--font); font-weight: 700; font-size: 15px; }
.fx-xray .fab, .fx-xray .draft { display: none; }

/* o selo do logo ocupa mais espaço: o menu aperta um pouco e vira sanduíche mais cedo */
.brand { flex-shrink: 0; }
.nav { gap: clamp(12px, 1.25vw, 24px); }
.nav a { font-size: 15px; }
.header__act .btn--sm { padding-inline: 14px; }
@media (max-width: 1180px) {
  .brand { flex-shrink: 1; }
}