/* Chemical Trance Halloween — Chamber Zero */

:root {
  --preto:   #060404;
  --roxo:    #BA17BD;
  --verde:   #6CB51B;
  --laranja: #C14613;
  --branco:  #EFDEEE;
  --roxo-dk: #601C67;
  --cinza:   #2D1522;

  --glow-p: 0 0 20px rgba(186,23,189,.55), 0 0 60px rgba(186,23,189,.2);
  --glow-g: 0 0 20px rgba(108,181,27,.55), 0 0 60px rgba(108,181,27,.2);
  --glow-o: 0 0 20px rgba(193,70,19,.6),  0 0 60px rgba(193,70,19,.25);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--preto);
  color: var(--branco);
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

/* ═══ CHAMBER — elementos PNG como ambiente ═══ */
.chamber {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  --px: 0;
  --py: 0;
  transition: transform .4s ease-out;
  transform: translate(calc(var(--px) * -8px), calc(var(--py) * -6px));
}

.chamber img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Biohazard — núcleo radiativo central */
.chamber__bio {
  top: 50%;
  left: 50%;
  width: min(95vw, 420px);
  transform: translate(-50%, -54%);
  opacity: .13;
  filter: drop-shadow(var(--glow-p));
  animation: core-pulse 5s ease-in-out infinite;
}

@keyframes core-pulse {
  0%, 100% { opacity: .11; transform: translate(-50%, -54%) scale(1); }
  50%      { opacity: .17; transform: translate(-50%, -54%) scale(1.03); }
}

/* Fumaça — camadas orgânicas */
.chamber__smoke {
  width: min(55vw, 220px);
  mix-blend-mode: screen;
  opacity: .55;
  animation: smoke-rise 12s ease-in-out infinite alternate;
}
.chamber__smoke--a {
  top: -5%;
  left: -12%;
  transform: rotate(-15deg);
}
.chamber__smoke--b {
  bottom: 5%;
  right: -15%;
  transform: rotate(25deg) scaleX(-1);
  animation-delay: -6s;
  animation-direction: alternate-reverse;
}

@keyframes smoke-rise {
  to { transform: translateY(-18px) rotate(-12deg); opacity: .65; }
}
.chamber__smoke--b { animation-name: smoke-rise-b; }
@keyframes smoke-rise-b {
  to { transform: translateY(-14px) rotate(28deg) scaleX(-1); opacity: .6; }
}

/* Fórmula — canto superior */
.chamber__formula {
  top: 8%;
  right: -6%;
  width: 110px;
  opacity: .55;
  filter: drop-shadow(var(--glow-g));
  animation: float 8s ease-in-out infinite alternate;
}

/* Vidrarias — canto inferior */
.chamber__flasks {
  bottom: 6%;
  left: -8%;
  width: 120px;
  opacity: .5;
  filter: drop-shadow(var(--glow-g));
  animation: float 9s ease-in-out infinite alternate-reverse;
}

@keyframes float {
  to { transform: translateY(-10px); }
}

/* Washes de cor da paleta */
.chamber__wash {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}
.chamber__wash--purple {
  width: 280px; height: 280px;
  top: -60px; left: 50%;
  transform: translateX(-50%);
  background: rgba(186,23,189,.12);
}
.chamber__wash--green {
  width: 200px; height: 200px;
  bottom: 10%; right: -40px;
  background: rgba(108,181,27,.08);
}

.chamber__grain {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* Faixa hazard */
.hazard-tape {
  position: fixed;
  left: 0; right: 0;
  height: 6px;
  z-index: 10;
  background: repeating-linear-gradient(
    -45deg,
    var(--laranja), var(--laranja) 8px,
    var(--preto) 8px, var(--preto) 16px
  );
  opacity: .85;
}
.hazard-tape--top { top: 0; }
.hazard-tape--bottom { bottom: 0; }

/* ═══ GATE — conteúdo principal ═══ */
.gate {
  position: relative;
  z-index: 2;
  max-width: 440px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(20px + var(--safe-t)) 20px calc(16px + var(--safe-b));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
}

/* ── Header impactante ── */
.gate__head {
  text-align: center;
  position: relative;
}

.gate__alert {
  width: 52px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
  filter:
    drop-shadow(0 0 4px rgba(193,70,19,.95))
    drop-shadow(0 0 14px rgba(193,70,19,.55))
    drop-shadow(0 0 28px rgba(193,70,19,.25));
  animation: alert-flicker 4s ease-in-out infinite;
}

@keyframes alert-flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: .7; }
  96% { opacity: 1; }
  98% { opacity: .85; }
}

.gate__title {
  display: flex;
  flex-direction: column;
  line-height: .88;
  margin-bottom: 10px;
}

.gate__line {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gate__line--a {
  font-size: clamp(2rem, 10vw, 2.6rem);
  color: var(--branco);
  text-shadow: 0 2px 0 var(--roxo-dk);
}

.gate__line--b {
  font-size: clamp(3rem, 15vw, 4rem);
  color: var(--roxo);
  text-shadow: var(--glow-p), 0 3px 0 var(--roxo-dk);
  margin: -2px 0;
  animation: trance-glow 3s ease-in-out infinite alternate;
}

.gate__title--home .gate__line--b {
  animation: none;
  text-shadow: none;
}

@keyframes trance-glow {
  to { text-shadow: 0 0 30px rgba(186,23,189,.8), 0 0 80px rgba(186,23,189,.35), 0 3px 0 var(--roxo-dk); }
}

.gate__line--c {
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(1.4rem, 7vw, 1.8rem);
  color: var(--branco);
  text-transform: lowercase;
  text-shadow: 0 0 12px rgba(193,70,19,.4);
  position: relative;
}

.gate__line--c::after {
  content: '';
  display: block;
  width: 60%;
  height: 3px;
  margin: 4px auto 0;
  background: linear-gradient(90deg, transparent, var(--laranja), transparent);
  box-shadow: var(--glow-o);
}

.gate__date {
  font-family: 'Bebas Neue', sans-serif;
  font-size: .9rem;
  letter-spacing: .35em;
  color: var(--verde);
  text-shadow: var(--glow-g);
}

/* ── Nav — pulsos de acesso ── */
.gate__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pulse {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  background: rgba(45,21,34,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(239,222,238,.06);
  color: var(--branco);
  text-decoration: none;
  overflow: hidden;
  transition: transform .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}

button.pulse {
  width: 100%;
  border: 1px solid rgba(239,222,238,.06);
  font: inherit;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.pulse::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent, var(--roxo));
  box-shadow: 0 0 12px var(--accent, var(--roxo));
}

.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 60%, rgba(255,255,255,.03) 100%);
  pointer-events: none;
}

.pulse:active {
  transform: scale(.98);
  background: rgba(96,28,103,.3);
}

.pulse:focus-visible {
  outline: 2px solid var(--roxo);
  outline-offset: 2px;
}

.pulse--purple { --accent: var(--roxo); }

.pulse--disabled,
.pulse[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(.35);
}

.pulse--disabled:active,
.pulse[aria-disabled="true"]:active {
  transform: none;
  background: rgba(45, 21, 34, .55);
}

.pulse--disabled .pulse__idx,
.pulse--disabled .pulse__txt,
.pulse[aria-disabled="true"] .pulse__idx,
.pulse[aria-disabled="true"] .pulse__txt {
  color: rgba(239, 222, 238, .55);
  text-shadow: none;
}

.pulse--green  { --accent: var(--verde); border-color: rgba(108,181,27,.12); }
.pulse--green .pulse__idx { color: var(--verde); text-shadow: var(--glow-g); }
.pulse--green .pulse__txt { color: var(--verde); }

.pulse--orange {
  --accent: var(--laranja);
  background: linear-gradient(135deg, rgba(193,70,19,.25) 0%, rgba(45,21,34,.6) 100%);
  border-color: rgba(193,70,19,.3);
  box-shadow: var(--glow-o);
  min-height: 52px;
}
.pulse--orange .pulse__idx {
  color: var(--laranja);
  text-shadow: var(--glow-o);
  font-size: .85rem;
}
.pulse--orange .pulse__txt {
  color: var(--branco);
  font-size: .72rem;
}

.pulse__idx {
  flex-shrink: 0;
  width: 28px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--roxo);
  text-shadow: var(--glow-p);
  text-align: center;
}

.pulse__txt {
  flex: 1;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.25;
}

.pulse__txt small {
  display: block;
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: none;
  color: rgba(239,222,238,.45);
  margin-top: 1px;
}

/* ── Footer ── */
.gate__foot {
  text-align: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(239,222,238,.18);
}

@media (min-height: 780px) {
  .gate { gap: 28px; padding-top: calc(32px + var(--safe-t)); }
  .pulse { min-height: 50px; }
  .pulse__txt { font-size: .72rem; }
}

/* ═══ FX LAYER — morcegos, fumaça, partículas (acima do conteúdo) ═══ */
.fx {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

body.splash-active #fx-layer {
  z-index: 99;
}

.fx-bat {
  position: absolute;
  top: var(--bat-top, 30%);
  left: 0;
  width: 72px;
  height: auto;
  opacity: 0;
  animation-duration: var(--bat-dur, 10s);
  animation-timing-function: linear;
  animation-delay: var(--bat-delay, 0s);
  animation-fill-mode: forwards;
}

.fx-bat--css {
  opacity: 1;
  animation: none;
}

.fx-bat--css .fx-bat__track {
  animation-duration: var(--bat-dur, 10s);
  animation-timing-function: linear;
  animation-delay: var(--bat-delay, 0s);
  animation-iteration-count: infinite;
  will-change: transform;
}

.fx-bat--css.fx-bat--left .fx-bat__track  { animation-name: bat-loop-left; }
.fx-bat--css.fx-bat--right .fx-bat__track { animation-name: bat-loop-right; }

.fx-bat:not(.fx-bat--css) {
  animation-iteration-count: 1;
}

.fx-bat__body {
  animation: bat-flap .16s ease-in-out infinite alternate;
  transform-origin: center center;
}

.fx-bat__img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.fx-bat--css .fx-bat__img {
  filter: drop-shadow(0 0 6px rgba(186, 23, 189, .6));
}

.fx-bat--css.fx-bat--green .fx-bat__img {
  filter: drop-shadow(0 0 6px rgba(108, 181, 27, .6));
}

/* Morcegos spawnados via JS */
.fx-bat:not(.fx-bat--css).fx-bat--left  { left: -80px; }
.fx-bat:not(.fx-bat--css).fx-bat--right { right: -80px; left: auto; }

.fx-bat:not(.fx-bat--css).fx-bat--purple .fx-bat__img {
  filter: drop-shadow(0 0 6px rgba(186, 23, 189, .6));
}

.fx-bat:not(.fx-bat--css).fx-bat--green .fx-bat__img {
  filter: drop-shadow(0 0 6px rgba(108, 181, 27, .6));
}

.fx-bat--left  { animation-name: bat-fly-left; }
.fx-bat--right { animation-name: bat-fly-right; }

@keyframes bat-loop-left {
  0%   { transform: translate3d(-15vw, 0, 0) scale(var(--bat-scale, 1)); }
  25%  { transform: translate3d(25vw, -18px, 0) scale(var(--bat-scale, 1)); }
  50%  { transform: translate3d(55vw, 12px, 0) scale(var(--bat-scale, 1)); }
  75%  { transform: translate3d(85vw, -10px, 0) scale(var(--bat-scale, 1)); }
  100% { transform: translate3d(115vw, 6px, 0) scale(var(--bat-scale, 1)); }
}

@keyframes bat-loop-right {
  0%   { transform: translate3d(115vw, 0, 0) scale(var(--bat-scale, 1)); }
  25%  { transform: translate3d(85vw, -14px, 0) scale(var(--bat-scale, 1)); }
  50%  { transform: translate3d(55vw, 16px, 0) scale(var(--bat-scale, 1)); }
  75%  { transform: translate3d(25vw, -8px, 0) scale(var(--bat-scale, 1)); }
  100% { transform: translate3d(-15vw, 4px, 0) scale(var(--bat-scale, 1)); }
}

.fx-bat--css.fx-bat--right .fx-bat__img {
  transform: scaleX(-1);
}

@keyframes bat-fly-left {
  0%   { left: -80px;  opacity: 0; transform: scale(var(--bat-scale,1)) translateY(0); }
  8%   { opacity: .9; }
  25%  { transform: scale(var(--bat-scale,1)) translateY(-18px); }
  50%  { transform: scale(var(--bat-scale,1)) translateY(12px); }
  75%  { transform: scale(var(--bat-scale,1)) translateY(-10px); }
  92%  { opacity: .9; }
  100% { left: calc(100% + 80px); opacity: 0; transform: scale(var(--bat-scale,1)) translateY(6px); }
}

@keyframes bat-fly-right {
  0%   { right: -80px; opacity: 0; transform: scaleX(-1) scale(var(--bat-scale,1)) translateY(0); }
  8%   { opacity: .9; }
  25%  { transform: scaleX(-1) scale(var(--bat-scale,1)) translateY(-14px); }
  50%  { transform: scaleX(-1) scale(var(--bat-scale,1)) translateY(16px); }
  75%  { transform: scaleX(-1) scale(var(--bat-scale,1)) translateY(-8px); }
  92%  { opacity: .9; }
  100% { right: calc(100% + 80px); opacity: 0; transform: scaleX(-1) scale(var(--bat-scale,1)) translateY(4px); }
}

@keyframes bat-flap {
  from { transform: scaleY(1) rotate(0deg); }
  to   { transform: scaleY(0.82) rotate(-3deg); }
}

/* Biohazard no clique */
.fx-bio {
  position: fixed;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transform: rotate(var(--bio-rot, 0deg)) scale(0.2);
  filter:
    drop-shadow(0 0 8px rgba(186,23,189,.9))
    drop-shadow(0 0 20px rgba(186,23,189,.5));
  animation: bio-burst var(--bio-dur, 1.6s) ease-out forwards;
}

@keyframes bio-burst {
  0%   { opacity: 0; transform: rotate(var(--bio-rot,0deg)) scale(0.15); }
  25%  { opacity: 1; transform: rotate(var(--bio-rot,0deg)) scale(1); }
  70%  { opacity: .85; transform: rotate(var(--bio-rot,0deg)) scale(1.08); }
  100% { opacity: 0; transform: rotate(calc(var(--bio-rot,0deg) + 15deg)) scale(1.25); }
}

/* Partículas neon */
.fx-spark {
  position: fixed;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  animation: spark-fly .7s ease-out forwards;
}

@keyframes spark-fly {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0); }
}

/* Pulse reage ao toque */
.pulse.is-hit {
  animation: pulse-hit .35s ease-out;
}

@keyframes pulse-hit {
  0%   { box-shadow: 0 0 0 0 rgba(186,23,189,.5); }
  50%  { box-shadow: 0 0 20px 4px rgba(186,23,189,.25); }
  100% { box-shadow: none; }
}

.pulse--green.is-hit { animation-name: pulse-hit-green; }
@keyframes pulse-hit-green {
  0%   { box-shadow: 0 0 0 0 rgba(108,181,27,.5); }
  50%  { box-shadow: 0 0 20px 4px rgba(108,181,27,.25); }
  100% { box-shadow: none; }
}

.pulse--orange.is-hit { animation-name: pulse-hit-orange; }
@keyframes pulse-hit-orange {
  0%   { box-shadow: var(--glow-o), 0 0 0 0 rgba(193,70,19,.6); }
  50%  { box-shadow: var(--glow-o), 0 0 24px 6px rgba(193,70,19,.35); }
  100% { box-shadow: var(--glow-o); }
}

@media (prefers-reduced-motion: reduce) {
  .chamber { transform: none; }
  .chamber__bio, .chamber__smoke, .chamber__formula, .chamber__flasks,
  .gate__alert, .gate__line--b { animation: none; }
  .pulse:active { transform: none; }
  .fx-bat { animation-duration: 20s; }
  .fx-bio { animation-duration: 2s; }
}