/* Custom application overrides specifically for Higgaion.io */

body {
  background-image: radial-gradient(circle at 50% 0%, #17243e 0%, #0a0e17 60%);
  background-attachment: fixed;
}

/* Precise crop coordinates to hide the baked text in the logo JPG */
.nav-logo-crop {
  height: 64px;
  width: 64px; /* Fixed width needed for background mapping */
  clip-path: inset(0 20% 25% 20%); /* Cropping the text out from the bottom & tightening sides */
  margin-top: 5px; /* Pulls the logo up instead of pushing it down */
  margin-bottom: -5px; /* Adjust vertical bottom offset aggressively */
  margin-left: -15px; /* Tighten the gap caused by the crop box */
  margin-right: -15px;
}

/* Explicit size controls for the main levitating logo */
.hero-logo-size {
  height: 350px;
  width: 250px; /* Fixed width needed for background mapping */
  margin-top: -3rem;
  margin-bottom: 3.5rem;
  position: relative;
  left: -16px; /* Nudges left to fix the asymmetric AI-generated visual weight */
  
  /* WebKit mix-blend-mode with transform clipping bug fix */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Background image mapping for iOS transparency fix */
.st-logo-bg {
  background-image: url('../img/logo.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Interactive Particle Canvas Geometry */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* Mobile responsive constraints for the localized overrides */
@media (max-width: 768px) {
  header {
    padding-top: 220px !important;
  }
  
  .nav-logo-crop {
    height: 50px;
    width: 50px;
    margin-top: 10px;
    margin-bottom: -10px;
  }
  .hero-logo-size {
    height: 140px;
    width: 100px;
    margin-top: -1rem;
    margin-bottom: 2.5rem;
    left: -6px; /* Smaller nudge ratio for mobile scaling */
  }
}

/* GDPR Cookie Banner */
.gdpr-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
  border-top-color: var(--st-color-neon) !important;
}

.gdpr-banner.show {
  transform: translateY(0);
}