/* Último ato: luz cênica, roteiro de papel e elenco em WebGL. */
.contact-stage {
  --body: "Geist", sans-serif; --mono: "Geist Mono", monospace;
  --t-tag: .72rem; --t-deck: 2.8rem; --t-line: 1rem;
  position: relative; isolation: isolate; overflow: hidden;
  background: #080a0b; color: #eee9dd; text-align: center;
  padding: 112px 24px 60px;
  background-image: radial-gradient(ellipse at 50% 48%, #37322644, transparent 60%);
}
.contact-stage::before, .contact-stage::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 16%; z-index: -1;
  background: repeating-linear-gradient(90deg, #0009, #171a19 22%, #080a0b 46%);
  opacity: .35; mask-image: linear-gradient(#000, transparent 85%); pointer-events: none;
}
.contact-stage::before { left: 0; } .contact-stage::after { right: 0; transform: scaleX(-1); }
.stage-light { position: absolute; top: -110px; height: 1080px; width: 560px; pointer-events: none; z-index: -1; transform-origin: 50% 0; filter: blur(14px); opacity: .55; background: linear-gradient(180deg, #fff0cb30, #ffebbc09 72%, transparent); clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%); }
.stage-light-left { opacity: calc(.4 + var(--stage-power, 0) * .3); transition: opacity 1.2s ease; left: calc(50% - 480px); transform: rotate(-19deg); }
.stage-light-right { right: calc(50% - 480px); transform: rotate(19deg); opacity: .28; }
.stage-floor { position: absolute; bottom: 90px; left: -10%; width: 120%; height: 300px; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, #e7d3a520, transparent 61%), repeating-linear-gradient(90deg, transparent 0 89px, #a4927410 90px 91px); transform: perspective(350px) rotateX(57deg); mask-image: radial-gradient(ellipse, #000, transparent 70%); }
.stage-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.stage-canvas canvas { display: block; width: 100%; height: 100%; }
.stage-heading { position: relative; z-index: 2; margin: 0 auto 60px; }
.stage-kicker { display: flex; align-items: center; justify-content: center; gap: 12px; color: #bbb4a7; font-size: 10px; letter-spacing: .16em; }
.stage-kicker span { width: 6px; height: 6px; background: #d6ff00; border-radius: 50%; box-shadow: 0 0 12px #d6ff0088; }
.stage-heading h2 { font-family: var(--disp); font-size: clamp(68px, 7.6vw, 112px); font-weight: 400; letter-spacing: -.05em; line-height: .87; margin: 28px 0 24px; }
.stage-heading h2 em { color: #d8ef91; font-weight: 400; }
.stage-heading > p:last-child { font-size: 14px; color: #b9b6aa; }
.script-wrap { position: relative; z-index: 2; width: min(600px, 100%); margin: auto; text-align: left; color: #302c24; background: #eee7d6; padding: 38px 42px 28px; transform: rotate(-1deg); border-radius: 2px 3px 16px 2px; box-shadow: 0 40px 90px #0009, 2px 4px 0 #c9c0ab, 5px 9px 0 #e2dac8, 6px 11px 0 #a29986, 0 0 110px #f4e2b41a; background-image: repeating-linear-gradient(0deg, #86734704 0 1px, transparent 1px 4px), radial-gradient(ellipse at 0 0, #fff9e5, transparent 75%); }
.script-wrap::after { content: ''; pointer-events: none; position: absolute; inset: 12px; border: 1px solid #79694320; }
.script-clip { position: absolute; top: -20px; right: 49px; width: 18px; height: 56px; border: 3px solid #9c9d95; border-radius: 13px; transform: rotate(15deg); box-shadow: inset 1px 0 1px #fff, 2px 1px 2px #0003; z-index: 2; }
.script-clip::after { content: ''; position: absolute; inset: 4px 3px -5px; border: 2px solid #92938b; border-radius: 8px; }
.script-meta { display: flex; justify-content: space-between; font: 9px var(--mono); letter-spacing: .1em; border-bottom: 1px solid #3e392750; padding-bottom: 16px; color: #746951; }
.script-title { font: 400 46px/.98 var(--disp); letter-spacing: -.025em; margin: 26px 0 18px; }
.script-title em { color: #796244; }
.script-direction { font: 8px/1.5 var(--mono); letter-spacing: .075em; color: #746951; }
.contact-stage .cta-fields { gap: 9px 24px; margin-top: 28px; }
.contact-stage .ff-lab { font-family: var(--mono); font-size: 10px; line-height: 1.5; color: #524a3b; }
.script-num { color: #9c8b6b; font-size: 9px; margin-right: 5px; }
.contact-stage .ff-opt { opacity: 1; color: #756b59; font-size: 8px; }
.contact-stage .ff-in { border: 0; border-bottom: 1px solid #998d76; border-radius: 0; background: transparent; box-shadow: none; padding: 10px 0 9px; font: 400 17px/1.3 var(--body); color: #262820; }
.contact-stage .ff-in:focus-visible { outline: 2px solid #727c41; outline-offset: 4px; transform: none; box-shadow: none; background: #ffffff40; }
.contact-stage .ff-err { font-size: 9px; min-height: 22px; color: #993d2d; }
.contact-stage .ff.is-bad .ff-in { box-shadow: none; border-color: #b14936; }
.contact-stage .ff.is-complete .ff-lab::after { content: ' ✓'; color: #496128; }
.contact-stage .ff.is-complete .ff-in { border-color: #748841; }
.script-energy { margin-top: 4px; }
.script-energy-label { display: flex; justify-content: space-between; gap: 8px; font: 9px var(--mono); color: #555339; }
.script-meter { height: 5px; background: #c9c2ab; border-radius: 4px; margin-top: 9px; overflow: hidden; }
.script-meter i { display: block; width: var(--energy, 0%); height: 100%; background: #6c8130; transition: width .7s cubic-bezier(.2,.8,.2,1); }
.script-energy > p { font-size: 9px; color: #72694f; margin-top: 7px; line-height: 1.5; }
.contact-stage .cta-act { display: block; margin-top: 24px; }
.contact-stage .btn-big, .contact-stage .script-mail { width: 100%; display: flex; justify-content: space-between; align-items: center; background: #292f23; color: #f0f4df; border: 1px solid #292f23; border-radius: 3px; font: 500 14px var(--body); padding: 17px 20px; box-shadow: 0 3px 0 #13190c; text-transform: none; letter-spacing: 0; }
.contact-stage .btn-big:hover, .contact-stage .script-mail:hover { background: #414d30; transform: translateY(-2px); }
.contact-stage .cta-note { font-size: 9px; color: #6c6554; text-align: center; margin-top: 13px; }
.contact-stage .ff-status { font-size: 10px; min-height: 12px; margin-top: 12px; }
.contact-stage .ff-fail { font-size: 12px; color: #883b2b; }
.contact-stage .cta-done { background: none; border: 0; box-shadow: none; padding: 35px 0; margin: 0; }
.contact-stage .cta-done-h { font-size: 48px; font-weight: 400; }
.contact-stage .cta-done-p { font-size: 17px; line-height: 1.6; margin: 24px 0; }
.contact-stage [hidden] { display: none !important; }
.script-back { background: none; border: 0; color: #474b33; text-decoration: underline; font: 12px var(--body); padding: 18px 0 0; cursor: pointer; }
.stage-whisper { position: relative; z-index: 4; color: #c8c7b7; font-family: var(--disp); font-style: italic; font-size: 21px; margin: 46px auto 0; min-height: 28px; max-width: 480px; }
.stage-end { position: relative; font-size: 9px; letter-spacing: .13em; color: #8a8c80; margin: 70px 0 0; }
.stage-end span { display: block; font-size: 28px; color: #d6ff00; margin-top: 18px; }
body.in-contact-stage .sec-pill-wrap { opacity: 0; pointer-events: none; }
@media (max-width: 1000px) {
  .contact-stage { padding-bottom: 100px; }
  .stage-whisper { margin-top: 180px; }
}
@media (max-width: 760px) {
  .contact-stage { padding: 82px 22px 90px; }
  .stage-heading { margin-bottom: 48px; }
  .stage-heading h2 { font-size: 70px; }
  .stage-heading > p:last-child { font-size: 12px; }
  .stage-kicker { font-size: 8px; gap: 8px; }
  .script-wrap { padding: 30px 26px 24px; transform: rotate(-.6deg); }
  .script-meta { font-size: 7px; letter-spacing: .02em; }
  .script-title { font-size: 38px; }
  .script-direction { font-size: 7px; }
  .contact-stage .cta-fields { margin-top: 22px; gap: 2px; }
  .contact-stage .ff-in { font-size: 16px; padding: 9px 0; }
  .contact-stage .ff-lab { font-size: 11px; }
  .stage-whisper { font-size: 19px; max-width: 290px; }
  .stage-end { margin-top: 42px; }
  .contact-stage .btn-big { font-size: 13px; padding: 16px 13px; }
  .stage-light-left { opacity: calc(.4 + var(--stage-power, 0) * .3); transition: opacity 1.2s ease; left: calc(50% - 340px); }
  .stage-light-right { right: calc(50% - 340px); }
  body.in-contact-stage .bang-dock { bottom: 10px !important; }
  body:has(.contact-stage input:focus) .bang-dock { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-stage *, .contact-stage *::after { transition: none !important; animation: none !important; }
  .script-wrap { transform: none; }
}

/* O frasco só aparece quando está montado no palco do formulário. */
body > .bang-dock { display: none !important; }
.reactor-label, .reactor-cable { display: none; }
.stage-reactor { position: absolute; z-index: 4; width: 140px; left: calc(50% - 425px); top: 800px; }
.stage-reactor .bang-dock { position: relative !important; left: auto !important; bottom: auto !important; align-items: center !important; width: 100%; gap: 0 !important; opacity: 1 !important; visibility: visible !important; }
.stage-reactor .reactor-label { display: block; text-align: center; font: 7px/1.6 var(--mono); letter-spacing: .08em; color: #c4c4a8; margin: 0 0 8px; }
.stage-reactor .reactor-value { display: block; color: #d6ff00; font-size: 14px; letter-spacing: 0; }
.stage-reactor #bang-tube { --tw: 62px !important; --th: 128px !important; margin: 0; border: 2px solid #859080; border-radius: 13px 13px 25px 25px; }
.stage-reactor .tube-mouth { top: 3px; height: 8px; }
.stage-reactor .reactor-cable { display: block; width: 4px; height: 22px; border-left: 1px solid #677446; border-right: 1px solid #252c19; background: #343e24; box-shadow: 0 0 8px #d6ff0011; }
.stage-reactor .is-armed .reactor-cable { background: #d6ff00; box-shadow: 0 0 12px #d6ff00aa; }
.stage-reactor #bang-btn { font-size: 10px !important; padding: 12px 14px !important; border-radius: 8px; border: 2px solid #655341; box-shadow: 0 5px 0 #332a20, 0 7px 16px #0008; }
.stage-reactor #bang-btn.is-armed { background: #ec6441; box-shadow: 0 5px 0 #702f20, 0 0 30px #ef64313b; }
.stage-reactor.is-pouring #bang-tube { box-shadow: 0 0 26px #d6ff0080, inset 0 0 20px #d6ff0020; }
.stage-whisper { margin-top: 75px; }
@media (max-width: 1200px) {
  .stage-reactor { left: calc(50% - 65px); width: 130px; }
  .stage-whisper { margin-top: 350px; }
  .stage-reactor #bang-tube { --tw: 48px !important; --th: 105px !important; }
  .stage-reactor .reactor-label { font-size: 6px; }
  .stage-reactor #bang-btn { font-size: 9px !important; padding: 11px 9px !important; }
}
.stage-reactor #bang-btn:not(.is-armed) { display: grid; }
.stage-reactor #bang-btn { width: 132px; height: 44px; position: relative; }
.stage-reactor #bang-btn > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.stage-reactor #bang-btn > .bang-btn-c { font-size: 8px; }
@media (max-width: 1200px) {
  .stage-reactor #bang-btn { width: 124px; }
  .stage-reactor #bang-btn > span { font-size: 9px; }
}
/* A assinatura manda um pulso ao detonador. A trava só cai no fim do trajeto. */
.stage-ignition { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; opacity: 0; }
.stage-ignition path { fill: none; stroke: #dcff76; stroke-width: 4; stroke-linecap: round; stroke-dasharray: .12 .88; filter: drop-shadow(0 0 7px #d6ff00); }
.is-igniting .stage-ignition { opacity: 1; }
.is-igniting .stage-ignition path { animation: ignition-flight 1.15s ease-in-out both; }
@keyframes ignition-flight { from { stroke-dashoffset: .12; } to { stroke-dashoffset: -1; } }
.is-igniting .script-wrap { box-shadow: 0 0 70px #d6ff0040, 0 40px 90px #0009, 2px 4px 0 #c9c0ab, 5px 9px 0 #e2dac8; }
.is-released .cta-done-h { color: #4f612d; }
@media (max-width: 760px) {
  .contact-stage .btn-big { font-size: 12px; line-height: 1.4; gap: 14px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .stage-ignition { display: none; } }

#script-clear { margin-left: 20px; color: #796c57; }

.script-wrap:has(.cta-done:not([hidden])) { display: grid; align-content: center; }

/* A assinatura é o convite para acender a cena. */
.contact-stage button.btn-big[type="submit"] {
  background: #d6ff00; color: #191919; border-color: #c2e600;
  box-shadow: 0 5px 0 #718516, 0 8px 20px #0002;
  cursor: pointer; font-weight: 600;
}
.contact-stage button.btn-big[type="submit"]:hover {
  background: #e4ff59; transform: translateY(-2px);
  box-shadow: 0 7px 0 #718516, 0 10px 24px #0003;
}
.contact-stage button.btn-big[type="submit"]:focus-visible {
  outline: 3px solid #191919; outline-offset: 5px;
}
.contact-stage button.btn-big[type="submit"]:active {
  transform: translateY(3px); box-shadow: 0 2px 0 #718516;
}
.contact-stage button.btn-big[type="submit"]:disabled {
  cursor: wait; opacity: .65; animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  body.in-contact-stage .contact-stage button.btn-big[type="submit"]:not(:disabled):not(:hover):not(:focus-visible):not(:active) {
    animation: script-invite 5s ease-in-out infinite;
  }
}
@keyframes script-invite {
  0%, 80%, 100% { transform: translateX(0) rotate(0); }
  83%, 89% { transform: translateX(-2px) rotate(-.35deg); }
  86%, 92% { transform: translateX(2px) rotate(.35deg); }
  95% { transform: translateX(-1px); }
}