/* ═══ SPLASH — Câmara UV Interativa ═══ */

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--preto);
  overflow: hidden;
  touch-action: none;
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), visibility .65s;
}

.splash__beat {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

/* Pulso rítmico — tela inteira, ~138 BPM */
.splash--beating .splash__beat {
  animation: splash-pulse 435ms ease-in-out infinite;
}

@keyframes splash-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  8%       { transform: scale(1.045); filter: brightness(1.1); }
  22%      { transform: scale(1.012); filter: brightness(1.03); }
  50%      { transform: scale(1.038); filter: brightness(1.08); }
  62%      { transform: scale(1.015); filter: brightness(1.04); }
  78%      { transform: scale(1.006); filter: brightness(1.01); }
}

.splash--beating.splash--hit .splash__beat {
  animation: splash-pulse-hit 420ms ease-out;
}

@keyframes splash-pulse-hit {
  0%   { transform: scale(1); filter: brightness(1); }
  18%  { transform: scale(1.07); filter: brightness(1.14); }
  45%  { transform: scale(1.02); filter: brightness(1.05); }
  100% { transform: scale(1); filter: brightness(1); }
}

.splash--ready .splash__beat,
.splash--out .splash__beat {
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

.splash--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash--ready .splash__reactor { animation: reactor-unlock .8s ease-out; }

@keyframes reactor-unlock {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); filter: brightness(1.4); }
  100% { transform: scale(1); }
}

body.splash-active { overflow: hidden; }
body.splash-active .app { visibility: hidden; }

.app { position: relative; min-height: 100dvh; }

/* Canvas partículas */
.splash__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Background */
.splash__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  --px: 0;
  --py: 0;
  transform: translate(calc(var(--px) * -14px), calc(var(--py) * -10px));
  transition: transform .12s ease-out;
}

.splash__bg-bio {
  position: absolute;
  top: 50%; left: 50%;
  width: min(120vw, 520px);
  transform: translate(-50%, -50%);
  opacity: .1;
  filter: drop-shadow(var(--glow-p));
  animation: splash-bio-spin 45s linear infinite;
}

@keyframes splash-bio-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.splash__bg-smoke {
  position: absolute;
  width: min(65vw, 260px);
  mix-blend-mode: screen;
  opacity: .5;
  animation: splash-smoke 8s ease-in-out infinite alternate;
}
.splash__bg-smoke--a { top: -10%; left: -18%; transform: rotate(-18deg); }
.splash__bg-smoke--b { bottom: -8%; right: -15%; transform: rotate(20deg) scaleX(-1); animation-delay: -4s; animation-direction: alternate-reverse; }

@keyframes splash-smoke {
  to { transform: translateY(-24px) rotate(-12deg) scale(1.05); opacity: .65; }
}

.splash__bg-grain {
  position: absolute;
  inset: 0;
  opacity: .055;
  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: 140px;
}

.splash__bg-scan {
  position: absolute;
  inset: 0;
  opacity: .045;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(186,23,189,.35) 2px, rgba(186,23,189,.35) 3px);
  animation: splash-scan 6s linear infinite;
}

@keyframes splash-scan {
  to { background-position: 0 80px; }
}

/* Órbita de elementos */
.splash__orbit {
  position: absolute;
  top: 50%; left: 50%;
  animation: splash-orbit linear infinite;
  animation-duration: var(--orbit-dur, 20s);
  filter: drop-shadow(0 0 8px rgba(186,23,189,.5));
}
.splash__orbit--formula {
  width: 56px;
  margin: -28px;
  --orbit-r: min(46vw, 185px);
  --orbit-dur: 22s;
  filter: drop-shadow(var(--glow-g));
  animation-delay: 0s;
}
.splash__orbit--flasks {
  width: 52px;
  margin: -26px;
  --orbit-r: min(44vw, 175px);
  --orbit-dur: 28s;
  animation-direction: reverse;
  filter: drop-shadow(var(--glow-g));
}
.splash__orbit--alert {
  width: 36px;
  margin: -18px;
  --orbit-r: min(40vw, 165px);
  --orbit-dur: 48s;
  filter: drop-shadow(var(--glow-o));
  animation-delay: -4s;
}

@keyframes splash-orbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); }
}

.splash__tape {
  position: absolute;
  left: 0; right: 0;
  height: 7px;
  z-index: 5;
  background: repeating-linear-gradient(-45deg, var(--laranja), var(--laranja) 8px, var(--preto) 8px, var(--preto) 16px);
}
.splash__tape--top { top: 0; }
.splash__tape--bottom { bottom: 0; }

/* FX */
.splash__fx {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.splash__fx-bio {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(186,23,189,.95)) drop-shadow(0 0 28px rgba(186,23,189,.5));
  animation: splash-fx-bio .7s ease-out forwards;
}

@keyframes splash-fx-bio {
  0%   { opacity: 0; transform: scale(.05) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1.1) rotate(20deg); }
  100% { opacity: 0; transform: scale(1.5) rotate(55deg); }
}

.splash__fx-burst {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--roxo);
  box-shadow: 0 0 16px rgba(186,23,189,.7), inset 0 0 10px rgba(186,23,189,.3);
  animation: splash-burst .55s ease-out forwards;
}

@keyframes splash-burst {
  0%   { width: 0; height: 0; opacity: 1; margin: 0; }
  100% { width: 160px; height: 160px; opacity: 0; margin: -80px; }
}

.splash__fx-spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  animation: splash-spark .55s ease-out forwards;
}

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

/* Morcegos */
.splash__bats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.splash__bat {
  position: absolute;
  width: 52px;
  animation: splash-bat-fly linear infinite;
}
.splash__bat img {
  width: 100%;
  display: block;
  animation: splash-bat-flap .12s ease-in-out infinite alternate;
}
.splash__bat--1 { top: 14%; animation-duration: 22s; }
.splash__bat--1 img {
  filter: brightness(0) saturate(100%) invert(28%) sepia(95%) saturate(6000%) hue-rotate(277deg) brightness(98%) contrast(95%) drop-shadow(0 0 8px rgba(186,23,189,.8));
}
.splash__bat--2 { top: 48%; animation-duration: 28s; animation-delay: -2s; animation-direction: reverse; }
.splash__bat--2 img {
  filter: brightness(0) saturate(100%) invert(62%) sepia(85%) saturate(520%) hue-rotate(47deg) brightness(96%) contrast(92%) drop-shadow(0 0 8px rgba(108,181,27,.8));
}
.splash__bat--3 { top: 72%; animation-duration: 25s; animation-delay: -4s; width: 40px; }

@keyframes splash-bat-fly {
  0%   { left: -60px; transform: translateY(0); }
  50%  { transform: translateY(-22px); }
  100% { left: calc(100% + 60px); transform: translateY(10px); }
}
@keyframes splash-bat-flap {
  to { transform: scaleY(.75); }
}

/* Cursor glow */
.splash__cursor {
  position: fixed;
  width: 80px; height: 80px;
  margin: -40px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  background: radial-gradient(circle, rgba(186,23,189,.25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .2s;
  mix-blend-mode: screen;
}
.splash__cursor.is-on { opacity: 1; }
.splash__cursor.is-charging {
  background: radial-gradient(circle, rgba(108,181,27,.35) 0%, rgba(186,23,189,.2) 40%, transparent 70%);
  transform: scale(1.3);
}

/* Core */
.splash__core {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));
}

/* Reactor interativo */
.splash__reactor {
  position: relative;
  width: min(72vw, 220px);
  height: min(72vw, 220px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease-out;
}

.splash__reactor-rumble {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.splash__reactor.is-pressed {
  transform: scale(.94);
}

.splash__ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.splash__ring-bg {
  stroke: rgba(45,21,34,.8);
  stroke-width: 4;
}

.splash__ring-fill {
  stroke: url(#splash-gradient);
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(186,23,189,.8));
  transition: stroke-dashoffset 0s linear;
}

.splash__ring-pulse {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgba(186,23,189,.2);
  animation: ring-pulse 3.5s ease-out infinite;
  opacity: 0;
}

.splash__reactor[data-charge="25"] .splash__ring-pulse,
.splash__reactor[data-charge="50"] .splash__ring-pulse,
.splash__reactor[data-charge="75"] .splash__ring-pulse,
.splash__reactor[data-charge="100"] .splash__ring-pulse {
  opacity: 1;
}

@keyframes ring-pulse {
  0%   { transform: scale(.85); opacity: .8; border-color: rgba(186,23,189,.5); }
  100% { transform: scale(1.15); opacity: 0; border-color: rgba(186,23,189,.15); }
}

.splash__reactor-glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(186,23,189,.3) 0%, transparent 65%);
  animation: glow-breathe 1.5s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes glow-breathe {
  to { transform: scale(1.1); opacity: .7; }
}

.splash__reactor.is-charging .splash__reactor-glow {
  animation: glow-breathe 1.4s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(186,23,189,.4) 0%, rgba(96,28,103,.15) 45%, transparent 70%);
}

.splash__bio-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  height: 46%;
  margin: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  animation: splash-bio-pulse 2.2s ease-in-out infinite;
}

.splash__bio {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.splash__reactor.is-charging .splash__bio-wrap {
  animation: splash-bio-pulse-fast 1.1s ease-in-out infinite;
}

@keyframes splash-bio-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes splash-bio-pulse-fast {
  0%, 100% { transform: translate(-50%, -50%) scale(1.02); }
  50%      { transform: translate(-50%, -50%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .splash__bg-bio, .splash__reactor-glow, .splash__bio-wrap { animation: none !important; }
  .splash__canvas { display: none; }
}