/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Full height */
html, body {
  height: 100%;
}

/* Page background */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  background: url("assets/MooshFest_Landing_Page_BG.jpg") center / cover no-repeat fixed;

  /* iOS-friendly viewport height */
  min-height: 100svh;
  display: grid;
  place-items: center;

  padding: 24px 14px; /* breathing room so nothing touches edges */
}

/* Main container */
.hero {
  width: min(92vw, 520px);    /* “poster width” on phones, capped on desktop */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Main content PNG */
.hero-content {
  width: 100%;
  height: auto;              /* never distort */
  max-height: 76svh;         /* prevents it from becoming too tall */
  object-fit: contain;       /* extra safety */
  display: block;
  animation:    
    poster-drift 8s ease-in-out infinite,
    poster-breathe 9s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes poster-drift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(1px, -2px) rotate(-0.15deg);
  }
  50% {
    transform: translate(-1px, 1px) rotate(0.15deg);
  }
  75% {
    transform: translate(1px, 2px) rotate(-0.1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes poster-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* CTA button */
.cta {
  display: inline-block;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cta img {
  height: 45px;              /* your half-size */
  width: auto;
  max-width: 70vw;
  display: block;
}

/* Hover / focus */
.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px) scale(1.03);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

/* Mobile */
@media (max-width: 600px) {
  .hero {
    padding: 1.25rem;
  }

  .hero-content {
    margin-bottom: 1.5rem;
  }

  .cta img {
    max-width: 260px;
  }
}

.ufo {
  position: fixed;
  top: -20px;           /* starts above the screen */
  left: -20vw;           /* starts left/off-screen */
  width: 140px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.95;

  /* 1 animation controls the path, another adds gentle bob */
  animation:
    ufo-path 20s linear infinite,
    ufo-bob 2.8s ease-in-out infinite;
}

/* Moves into view near the top, cruises across, exits right, resets */
@keyframes ufo-path {
  0% {
    transform: translate(-10vw, -140px);
    opacity: 0.5;
  }
  8% {
    transform: translate(8vw, 40px); /* enters and settles near top */
    opacity: 1;
  }
  85% {
    transform: translate(110vw, 40px); /* cruises across top */
    opacity: 1;
  }
  100% {
    transform: translate(130vw, -120px); /* exits up/right before reset */
    opacity: 0.5;
  }
}

/* Gentle hover/bob (very subtle) */
@keyframes ufo-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -20px; }
}

/* Mobile tweak */
@media (max-width: 600px) {
  .ufo {
    top: -32px;
    width: 115px;
    animation-duration: 10s, 2.5s;
  }
}

/* CTA button wrapper */
.cta {
  display: inline-block;
  margin-top: 1rem;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* Button image */
.cta img {
  width: auto;
  height: 60px;        /* control button size */
  max-width: 90vw;
  display: block;
  margin: 0 auto;
}

/* Hover / focus */
.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.35));
}

/* Mobile */
@media (max-width: 600px) {
  .cta img {
    height: 50px;
  }
}

@media (max-width: 420px) and (max-height: 740px) {
  .hero-content { max-height: 70svh; }
  .cta img { height: 50px; }
  body { padding: 18px 12px; }
}

.humanoid {
  position: fixed;
  left: 35%;
  bottom: -230px;              /* start off-screen */
  transform: translateX(-50%);
  width: 160px;                /* adjust size */
  height: auto;

  pointer-events: none;
  z-index: 5;

  animation: humanoid-pop 10s ease-in-out infinite;
}

/* up -> hold -> down -> wait */
@keyframes humanoid-pop {
  0%   { transform: translateX(-50%) translateY(0);     opacity: 0.5; }
  10%  { transform: translateX(-50%) translateY(-205px); opacity: 1; }
  45%  { transform: translateX(-50%) translateY(-205px); opacity: 1; }
  60%  { transform: translateX(-50%) translateY(0);     opacity: 1; }
  100% { transform: translateX(-50%) translateY(0);     opacity: 1; }
}

@media (max-width: 600px) {
  .humanoid {
    width: 120px;
    bottom: -220px;
  }
}