/* ====================================================
   HERO SECTION — Freeform Canvas Layout
   Compact uniform floating draggable stickers (7 cutouts)
   ==================================================== */

#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  background-color: var(--clr-red);
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Draggable Canvas Area — covers entire hero section */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
}

/* Floating Mood Board Stickers — Uniform Slightly Larger Size */
.hero__sticker {
  position: absolute;
  width: clamp(105px, 10vw, 140px);
  height: clamp(105px, 10vw, 140px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.42));
  transition: filter 0.2s ease;
  z-index: 30;
}

.hero__sticker:hover {
  filter: drop-shadow(0 15px 26px rgba(0, 0, 0, 0.55));
}

.hero__sticker:active,
.hero__sticker.is-dragging {
  cursor: grabbing !important;
  filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.72));
  animation-play-state: paused !important;
}

.hero__sticker img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Default Spread Positions & Floating Bobbing Animations */
.hero__sticker--cupcake {
  top: 14%;
  left: 7%;
  animation: float-cupcake 4s ease-in-out infinite;
}

.hero__sticker--batman {
  top: 38%;
  left: 5%;
  animation: float-batman 3.7s ease-in-out infinite 0.3s;
}

.hero__sticker--banana {
  top: 62%;
  left: 7%;
  animation: float-banana 4.3s ease-in-out infinite 0.7s;
}

.hero__sticker--nyan {
  top: 80%;
  left: 15%;
  animation: float-nyan 4.5s ease-in-out infinite 1.1s;
}

.hero__sticker--horn {
  top: 14%;
  left: 62%;
  animation: float-horn 3.9s ease-in-out infinite 0.5s;
}

.hero__sticker--ironman {
  top: 36%;
  right: 4%;
  animation: float-ironman 4.1s ease-in-out infinite 0.9s;
}

.hero__sticker--kafka {
  top: 76%;
  right: 8%;
  animation: float-kafka 4.4s ease-in-out infinite 1.3s;
}

@keyframes float-cupcake {
  0%, 100% { transform: translateY(0px) rotate(-8deg); }
  50%      { transform: translateY(-10px) rotate(-5deg); }
}

@keyframes float-batman {
  0%, 100% { transform: translateY(0px) rotate(4deg); }
  50%      { transform: translateY(-9px) rotate(7deg); }
}

@keyframes float-banana {
  0%, 100% { transform: translateY(0px) rotate(-6deg); }
  50%      { transform: translateY(-11px) rotate(-3deg); }
}

@keyframes float-nyan {
  0%, 100% { transform: translateY(0px) rotate(2deg); }
  50%      { transform: translateY(-8px) rotate(5deg); }
}

@keyframes float-horn {
  0%, 100% { transform: translateY(0px) rotate(10deg); }
  50%      { transform: translateY(-12px) rotate(13deg); }
}

@keyframes float-ironman {
  0%, 100% { transform: translateY(0px) rotate(-5deg); }
  50%      { transform: translateY(-9px) rotate(-2deg); }
}

@keyframes float-kafka {
  0%, 100% { transform: translateY(0px) rotate(7deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}

/* Content positioned in hero */
.hero__content {
  position: relative;
  z-index: 5;
  width: 100%;
  pointer-events: none;
}

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: var(--sp-8);
  right: var(--sp-8);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: white;
  opacity: 0;
  animation: fade-in var(--dur-slow) var(--ease-expo) 1.2s forwards;
}

.hero__scroll-line {
  width: 40px;
  height: 1px;
  background: white;
  animation: scroll-line 2s var(--ease-expo) infinite 1.5s;
}

@keyframes scroll-line {
  0%, 100% { width: 40px; opacity: 1; }
  50%       { width: 60px; opacity: 0.5; }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .hero__sticker {
    width: clamp(70px, 17vw, 95px);
    height: clamp(70px, 17vw, 95px);
  }
  .hero__sticker--cupcake {
    top: 11%;
    left: 4%;
  }
  .hero__sticker--batman {
    top: 30%;
    left: 3%;
  }
  .hero__sticker--banana {
    top: 60%;
    left: 4%;
  }
  .hero__sticker--nyan {
    top: 80%;
    left: 8%;
  }
  .hero__sticker--horn {
    top: 11%;
    left: 70%;
  }
  .hero__sticker--ironman {
    top: 32%;
    right: 3%;
  }
  .hero__sticker--kafka {
    top: 78%;
    right: 4%;
  }
}