/* Em frente ↔ Enfrente! — punk fonts + glitch photo BG */

.slogan-stage {
  position: relative;
  margin: 0.35rem 0 1rem;
  min-height: 8.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  overflow: hidden;
  padding: 0.75rem 0.5rem 0.35rem;
  border: 3px solid #000;
  background: #111;
}

.slogan-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: contrast(1.35) grayscale(1);
  mix-blend-mode: screen;
  transition: opacity 0.12s steps(2);
}

.slogan-stage.is-frente .slogan-bg {
  opacity: 0.55;
  animation: bg-glitch 0.45s steps(3) infinite;
}

.slogan-stage.is-enfrente .slogan-bg {
  opacity: 0;
}

.slogan-bg::before,
.slogan-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  opacity: 0;
}

.slogan-stage.is-frente .slogan-bg::before {
  opacity: 0.45;
  mix-blend-mode: hard-light;
  animation: bg-slice-a 0.55s steps(2) infinite;
  filter: hue-rotate(120deg) contrast(2);
}

.slogan-stage.is-frente .slogan-bg::after {
  opacity: 0.35;
  mix-blend-mode: lighten;
  animation: bg-slice-b 0.4s steps(2) infinite;
  filter: hue-rotate(-90deg);
}

@keyframes bg-glitch {
  0%, 100% { transform: translate(0, 0) scale(1.05); }
  30% { transform: translate(-4px, 2px) scale(1.08); }
  60% { transform: translate(5px, -2px) scale(1.04); }
}

@keyframes bg-slice-a {
  0%, 100% { clip-path: inset(0 0 70% 0); transform: translate(-6px, 0); }
  50% { clip-path: inset(40% 0 20% 0); transform: translate(8px, 0); }
}

@keyframes bg-slice-b {
  0%, 100% { clip-path: inset(60% 0 0 0); transform: translate(4px, 0); }
  50% { clip-path: inset(10% 0 50% 0); transform: translate(-7px, 0); }
}

.slogan-word {
  position: relative;
  z-index: 2;
  font-size: clamp(1.7rem, 8vw, 2.45rem);
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  min-height: 1.2em;
  padding: 0.2em 0.4em;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.72);
  box-shadow: 4px 4px 0 var(--acid);
  transform-origin: center;
}

.slogan-word[data-mode="enfrente"] {
  background: var(--stamp);
  color: #fff;
  border-color: #000;
  box-shadow: 4px 4px 0 #000;
}

.slogan-word[data-font="mustasurma"] { font-family: "Mustasurma", Impact, sans-serif; }
.slogan-word[data-font="hitme"] { font-family: "HitMePunk", Impact, sans-serif; }
.slogan-word[data-font="hitme2"] { font-family: "HitMePunkAlt", Impact, sans-serif; }
.slogan-word[data-font="dharma"] { font-family: "DharmaPunk", Impact, sans-serif; }
.slogan-word[data-font="dharma2"] { font-family: "DharmaPunk2", Impact, sans-serif; }

.slogan-word.is-glitching {
  animation: slogan-rgb 0.28s steps(2) infinite;
}

.slogan-word.is-trembling {
  animation: slogan-tremble 0.12s steps(2) infinite;
}

@keyframes slogan-tremble {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-2px, 1px) rotate(-0.8deg); }
  50% { transform: translate(2px, -1px) rotate(0.6deg); }
  75% { transform: translate(-1px, 2px) rotate(0.4deg); }
  100% { transform: translate(0, 0); }
}

@keyframes slogan-rgb {
  0%, 100% { text-shadow: none; }
  40% {
    text-shadow: -3px 0 var(--cyan-glitch), 3px 0 var(--magenta-glitch);
    transform: translate(-3px, 0);
  }
  70% {
    text-shadow: 4px 0 var(--cyan-glitch), -2px 0 var(--magenta-glitch);
    transform: translate(4px, 0) skewX(-2deg);
  }
}

.slogan-hint {
  position: relative;
  z-index: 2;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acid);
  text-align: center;
}

.emoji-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  font-size: 1.85rem;
  line-height: 1;
  user-select: none;
  min-height: 2rem;
}

.emoji-row .e {
  display: inline-block;
  transform-origin: 50% 80%;
  filter: drop-shadow(2px 2px 0 #000);
}

.slogan-stage[data-var="alt"] .e:nth-child(1) { animation: e-pump 0.55s ease-in-out infinite; }
.slogan-stage[data-var="alt"] .e:nth-child(2) { animation: e-pump 0.55s ease-in-out infinite 0.28s; }
.slogan-stage[data-var="smash"] .e { animation: e-smash 0.7s ease-in-out infinite; }
.slogan-stage[data-var="wave"] .e:nth-child(1) { animation: e-wave 0.8s ease-in-out infinite; }
.slogan-stage[data-var="wave"] .e:nth-child(2) { animation: e-wave 0.8s ease-in-out infinite 0.4s; }
.slogan-stage[data-var="spin"] .e:nth-child(1) { animation: e-spin 0.9s ease-in-out infinite; }
.slogan-stage[data-var="spin"] .e:nth-child(2) { animation: e-spin 0.9s ease-in-out infinite reverse; }
.slogan-stage[data-var="stutter"] .e:nth-child(1) { animation: e-stutter 1.1s steps(2) infinite; }
.slogan-stage[data-var="stutter"] .e:nth-child(2) { animation: e-stutter 1.1s steps(2) infinite 0.55s; }

@keyframes e-pump {
  0%, 100% { transform: translateY(6px) scale(0.92); }
  50% { transform: translateY(-10px) scale(1.12); }
}
@keyframes e-smash {
  0%, 100% { transform: translateY(8px) scale(0.9); }
  40% { transform: translateY(-14px) scale(1.2); }
  55% { transform: translateY(2px) scale(1.05); }
}
@keyframes e-wave {
  0%, 100% { transform: translateY(4px) rotate(-18deg); }
  50% { transform: translateY(-12px) rotate(18deg); }
}
@keyframes e-spin {
  0%, 100% { transform: translateY(4px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(22deg); }
}
@keyframes e-stutter {
  0%, 40% { transform: translateY(8px); opacity: 1; }
  45%, 55% { transform: translateY(-14px) scale(1.15); opacity: 0.85; }
  60%, 100% { transform: translateY(2px); opacity: 1; }
}

.login-load {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  background: #050505;
  color: #f5f0e4;
}

.login-load.is-on { display: grid; }

.login-load .slogan-stage {
  width: min(92vw, 420px);
  min-height: 11rem;
}

.login-load .slogan-word {
  font-size: clamp(2rem, 9vw, 3.2rem);
}

.login-load .slogan-hint { color: #f0e100; }
.login-load .emoji-row { font-size: 2.4rem; gap: 1.4rem; }