body {
  margin: 0;
  text-align: center;
  font-family: Arial, sans-serif;
  color: white;
  background: url('../img/backgound\ hero.jpg') no-repeat center center fixed;
  background-size: cover;
  padding-bottom: 50px;
  cursor: none;
}

#fakeCursor {
  position: fixed;
  width: 150px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  filter: drop-shadow(0 0 10px lime);
}

#cursorTrail {
  position: fixed;
  width: 15px;
  height: 15px;
  background: rgb(3, 25, 66);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 15px rgb(7, 201, 191), 0 0 30px rgb(5, 103, 184);
  transform: translate(-50%, -50%);
  z-index: 9999;
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.5);
  }
}

.spark {
  position: fixed;
  width: 8px;
  height: 8px;
  background: rgb(11, 235, 243);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 10px rgb(3, 96, 150), 0 0 20px rgb(40, 145, 216);
  animation: sparkMove 0.6s ease-out forwards;
}

@keyframes sparkMove {
  to {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

h1 {
  margin-top: 20px;
  font-size: 3em;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 30px;
  background: url('../img/marvel\ comic.jpg') center/cover no-repeat;
  position: relative;
}

.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.topbar * {
  position: relative;
  z-index: 1;
}

.left-link,
.right-link {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 8px;
}

.topbar h1 {
  color: white;
  text-shadow: 3px 3px 0 black;
}

.heroes {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 100px;
  flex-wrap: wrap;
}

.hero {
  width: clamp(100px, 15vw, 180px);
}

.hero:hover {
  filter: drop-shadow(0 0 15px cyan);
}

#ironman:hover,
#thor:hover {
  transform: translateY(-40px);
}

#spiderman:hover {
  transform: rotate(15deg);
}

#cap:hover {
  transform: translateY(10px);
}

#beam {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: cyan;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, white 0%, cyan 40%, blue 100%);
  box-shadow: inset 0 0 200px white, 0 0 100px cyan;
}

#flyingHammer {
  position: fixed;
  width: 80px;
  top: 50%;
  left: -100px;
  display: none;
}

#webContainer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.web {
  position: absolute;
  width: 4px;
  height: 0;
  background: white;
  transform-origin: top;
  box-shadow: 0 0 10px white;
}

@keyframes shootWeb {
  from {
    height: 0;
    opacity: 1;
  }
  to {
    height: 300px;
    opacity: 0;
  }
}

#flyingShield {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80px;
  transform: translate(-50%, -50%) scale(0);
  display: none;
  pointer-events: none;
}

@keyframes shieldZoom {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(3) rotate(720deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(5) rotate(1080deg);
    opacity: 0;
  }
}

@keyframes hammerFly {
  0% {
    left: -100px;
    transform: rotate(0deg);
  }
  50% {
    left: 80%;
    transform: rotate(720deg);
  }
  100% {
    left: -100px;
    transform: rotate(1440deg);
  }
}

.stone {
  position: fixed;
  top: -50px;
  width: 40px;
  pointer-events: auto;
  animation: fall linear infinite;
}

@keyframes fall {
  from {
    transform: translateY(-50px);
  }
  to {
    transform: translateY(110vh);
  }
}

@media (max-width: 768px) {
  .heroes {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
  }
  .hero {
    width: 120px;
  }
}

@media (max-width: 768px) {
  .topbar {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .left-link,
  .right-link {
    font-size: 0.9em;
  }
}

#marvel-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

.comic-strip-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flipping-frames {
  position: absolute;
  inset: 0;
  background: url('../img/marvel comic.jpg') repeat; /* 'repeat' is key here */
  background-size: 600px; /* Control the size of the comic 'tiles' */
  filter: contrast(1.1) brightness(0.8);
  /* 'linear' makes the speed exactly the same from start to finish */
  animation: constantScroll 20s linear infinite; 
}
.marvel-text {
  position: relative;
  background: #ed1d24;
  color: white;
  font-family: 'Impact', 'Arial Black', sans-serif;
  font-size: clamp(3rem, 15vw, 10rem);
  font-weight: 900;
  padding: 10px 30px;
  letter-spacing: -2px;
  border: 4px solid white;
  transform: scale(0);
  opacity: 0;
  /* Logo appears at 3s instead of 2.5s */
 animation: logoPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3s forwards,
 logoShake 0.2s linear 3.1s 2;}

@keyframes constantScroll {
  from { background-position: 0 0; }
  to { background-position: 2000px 1000px; } /* Moves 1000px over 20s = Slow & Steady */
}

@keyframes logoPop {
  0% { transform: scale(0); opacity: 0; }
  80% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes logoShake {
  0% { transform: scale(1) translateX(0); }
  25% { transform: scale(1.05) translateX(-5px); }
  75% { transform: scale(1.05) translateX(5px); }
  100% { transform: scale(1) translateX(0); }
}

.intro-finished {
  transform: translateY(-100%);
}