/* Mavens Hive animation add-on: NO background changes */
/* This file only animates existing elements. It does not change body/page backgrounds. */

:root {
  --mh-anim-fast: 180ms;
  --mh-anim-med: 420ms;
  --mh-anim-slow: 780ms;
  --mh-ease: cubic-bezier(.22, 1, .36, 1);
}

html {
  scroll-behavior: smooth;
}

body.mh-animations-ready header {
  animation: mhSlideDown .68s var(--mh-ease) both;
}

body.mh-animations-ready main {
  animation: mhPageFade .75s ease both;
}

.minecraft-heading,
.pixel-text,
.hero-logo {
  will-change: transform, opacity, filter;
}

body.mh-animations-ready .minecraft-heading {
  animation: mhHeroRise .78s var(--mh-ease) .08s both;
}

body.mh-animations-ready .pixel-text {
  animation: mhHeroRise .84s var(--mh-ease) .18s both;
}

body.mh-animations-ready .hero-logo,
body.mh-animations-ready img[src*="logo"]:not(.no-animate) {
  animation: mhLogoFloat 5.8s ease-in-out infinite;
}

.nav-link,
a,
button,
.join-server-btn,
.glass-panel,
.store-card,
.vote-card,
.staff-card {
  transition-property: transform, box-shadow, border-color, filter, opacity;
  transition-duration: var(--mh-anim-med);
  transition-timing-function: var(--mh-ease);
}

.nav-link {
  display: inline-flex;
  align-items: center;
}

.nav-link:hover {
  transform: translateY(-2px);
}

.join-server-btn,
.button-shine,
a[class*="bg-primary"],
button[class*="bg-primary"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.join-server-btn {
  animation: mhButtonGlow 2.8s ease-in-out infinite;
}

.join-server-btn:hover,
.button-shine:hover,
a[class*="bg-primary"]:hover,
button[class*="bg-primary"]:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.08);
}

.join-server-btn .material-symbols-outlined,
.button-shine .material-symbols-outlined {
  animation: mhIconPulse 1.8s ease-in-out infinite;
}

.glass-panel:hover,
.store-card:hover,
.vote-card:hover,
.staff-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .28), 0 0 28px rgba(242, 202, 80, .10);
  border-color: rgba(242, 202, 80, .34) !important;
}

.mh-reveal {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .72s ease, transform .72s var(--mh-ease), filter .72s ease;
  transition-delay: var(--mh-delay, 0ms);
  will-change: opacity, transform;
}

.mh-reveal.mh-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mh-reveal-left {
  opacity: 0;
  transform: translateX(-22px);
}

.mh-reveal-right {
  opacity: 0;
  transform: translateX(22px);
}

.mh-reveal-left.mh-visible,
.mh-reveal-right.mh-visible {
  opacity: 1;
  transform: translateX(0);
}

.mh-soft-pop {
  animation: mhSoftPop .45s var(--mh-ease) both;
}

#copy-toast,
.toast,
[role="alert"] {
  animation: mhToastPop .38s var(--mh-ease) both;
}

.material-symbols-outlined {
  transition: transform var(--mh-anim-med) var(--mh-ease), filter var(--mh-anim-med) ease;
}

a:hover .material-symbols-outlined,
button:hover .material-symbols-outlined {
  transform: translateY(-1px) scale(1.08);
  filter: none;
}

@keyframes mhPageFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mhSlideDown {
  from { opacity: 0; transform: translateY(-18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mhHeroRise {
  from { opacity: 0; transform: translateY(18px) scale(.98); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes mhTextGlow {
  0%, 50%, 100% { filter: none; }
}

@keyframes mhLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes mhButtonGlow {
  0%, 100% { box-shadow: 0 0 18px rgba(242, 202, 80, .28); }
  50% { box-shadow: 0 0 34px rgba(242, 202, 80, .52), 0 0 52px rgba(242, 202, 80, .20); }
}

@keyframes mhIconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

@keyframes mhSoftPop {
  from { transform: scale(.96); opacity: .75; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes mhToastPop {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Visible but subtle transparent particle overlay. Existing backgrounds/images remain unchanged. */
html,
body {
  position: relative;
}

.mh-particle-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: screen;
}

/* Keep website content above the transparent particle layer. */
body > header,
body > main,
body > footer,
body > nav,
body > section,
body > form,
body > .mh-footer,
body > #copy-toast {
  position: relative;
}

body > main,
body > footer,
body > section,
body > form,
body > .mh-footer {
  z-index: 10;
}

@media (max-width: 640px) {
  .mh-particle-layer {
    opacity: .42;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .mh-reveal,
  .mh-reveal-left,
  .mh-reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }

  .mh-particle-layer {
    display: none !important;
  }
}

/* Floating Discord mascot image only */
.mh-floating-mascot {
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
  animation: mhMascotFloat 3.4s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

/* No card/background: this wrapper is invisible, only the image shows */
.mh-floating-mascot-box {
  width: auto;
  height: auto;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: transform .22s ease, filter .22s ease;
}

.mh-floating-mascot-box img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.45));
}

.mh-floating-tooltip {
  opacity: 0;
  transform: translateX(8px) translateY(4px) scale(.96);
  pointer-events: none;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(8, 8, 12, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-family: var(--mh-site-font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: opacity .22s ease, transform .22s ease;
}

.mh-floating-mascot:hover .mh-floating-mascot-box,
.mh-floating-mascot:focus-visible .mh-floating-mascot-box {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 0 16px rgba(242, 202, 80, 0.28));
}

.mh-floating-mascot:hover .mh-floating-tooltip,
.mh-floating-mascot:focus-visible .mh-floating-tooltip {
  opacity: 1;
  transform: translateX(0) translateY(-4px) scale(1);
}

@keyframes mhMascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 768px) {
  .mh-floating-mascot {
    right: 12px;
    bottom: 92px;
    gap: 8px;
  }

  .mh-floating-mascot-box img {
    width: 62px;
    height: 62px;
  }

  .mh-floating-tooltip {
    font-size: 12px;
    padding: 7px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mh-floating-mascot {
    animation: none !important;
  }
}