.main-content {
  position: relative;
  overflow: hidden;
}

.background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none; /* children opt back in individually */
}


/* Floating Background Images */

@keyframes floatDrift {
  0%   { transform: translateX(0px)  translateY(0px)   rotate(var(--rot-start, -3deg)); }
  33%  { transform: translateX(18px) translateY(-10px) rotate(var(--rot-mid,    1deg)); }
  66%  { transform: translateX(8px)  translateY(12px)  rotate(var(--rot-end,   -1deg)); }
  100% { transform: translateX(0px)  translateY(0px)   rotate(var(--rot-start, -3deg)); }
}

.bg-float {
  position: absolute;
  pointer-events: none;
  opacity: 0.92;
  object-fit: contain;
  border-radius: 2px;
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.18));
  animation: floatDrift ease-in-out infinite;
  will-change: transform;
}

/* Individual positions, sizes, timings, and rotations */
.bf-1  { left: 2%; top: 28%; width: 100px; animation-duration: 28s; animation-delay:   0s;  --rot-start: -4deg; --rot-mid:  2deg; --rot-end: -1deg; z-index: 1}
.bf-2  { left: 6%; top: 20%; width: 170px; animation-duration: 34s; animation-delay:  -8s;  --rot-start:  5deg; --rot-mid: -2deg; --rot-end:  3deg; z-index: 5; }
.bf-3  { left: 18%; top: 25%; width: 120px; animation-duration: 40s; animation-delay: -15s;  --rot-start: -2deg; --rot-mid:  4deg; --rot-end: -3deg; z-index: 1}
.bf-4  { left: 20%; top: 39%; width: 150px; animation-duration: 32s; animation-delay:  -4s;  --rot-start:  7deg; --rot-mid: -3deg; --rot-end:  5deg; z-index: 5; }
.bf-5  { left: 0%; top: 34%; width: 500px; animation-duration: 38s; animation-delay: -20s;  --rot-start: -6deg; --rot-mid:  1deg; --rot-end: -4deg; z-index: 0; }
.bf-6  { left: 0%; top: 73%; width: 90px; animation-duration: 26s; animation-delay: -10s;  --rot-start:  3deg; --rot-mid: -5deg; --rot-end:  2deg; z-index: 1}
.bf-7  { left: 20%; top: 70%; width: 180px; animation-duration: 44s; animation-delay:  -5s;  --rot-start: -1deg; --rot-mid:  6deg; --rot-end: -2deg; z-index: 1}
.bf-8  { left: 38%; top: 49%; width: 580px; animation-duration: 36s; animation-delay: -18s;  --rot-start:  -3deg; --rot-mid: 1deg; --rot-end:  3deg; z-index: 1}
.bf-9  { left: 75%; top: 35%; width: 200px; animation-duration: 30s; animation-delay: -12s;  --rot-start: -3deg; --rot-mid:  3deg; --rot-end: -5deg; z-index: 1}
.bf-10 { left: 70%; top: 35%; width: 90px; animation-duration: 42s; animation-delay:  -7s;  --rot-start:  4deg; --rot-mid: -4deg; --rot-end:  2deg; z-index: 1}
.bf-11 { left: 52%; top: 16%; width: 400px; animation-duration: 29s; animation-delay: -25s;  --rot-start: -5deg; --rot-mid:  2deg; --rot-end: -3deg; z-index: 0; }
.bf-12 { left: 40%; top: 6%; width: 175px; animation-duration: 37s; animation-delay:  -3s;  --rot-start:  2deg; --rot-mid: -6deg; --rot-end:  4deg; z-index: 5;}

/* Stamp Nav Links */

.stamp {
  position: absolute;
  pointer-events: all;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  text-decoration: none;
  z-index: 10;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.stamp:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.stamp img {
  display: block;
  object-fit: contain;
}

.wrapper {
  position: absolute;
  left: 39%;
  top: 40%;
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  pointer-events: none;
  z-index: 8;
}

/* Stamp positions — matching the screenshot layout */
.stamp-01       { left:  8%; top:  10%; }
.stamp-01 img   { width: clamp(190px, 21vw, 280px); }

.stamp-02       { left: 54%; top: 14%; }
.stamp-02 img   { width: clamp(190px, 18vw, 270px); }

.stamp-03       { left:  0%; top: 50%; }
.stamp-03 img   { width: clamp(200px, 22vw, 280px); }

.stamp-04 img   { width: clamp(200px, 22vw, 280px); }

.stamp-04 {
  position: relative;
  pointer-events: all;
  padding: 0 0 0 110px; 
}

.stamp-05       { left: 33%; top: 69%; }
.stamp-05 img   { width: clamp(140px, 11vw, 250px); }

a h4 {
    color: var(--color-text-primary); 
}

/* Title & Subtitle */

.title, .subtitle {
  pointer-events: none;
}

.title img {
  width: 250px;
  display: block;
  object-fit: contain;
}

.subtitle {
  padding: 0 0 0 140px; 
}

@media screen and (max-width: 810px) {
  body {
    height: auto;
    overflow: visible;
  }

  .background {
    position: relative;
    inset: auto;
    width: 100%;
    height: 2000px;
    flex-shrink: 0;
    overflow: hidden;
    isolation: isolate;
  }

  .mobile-top-bar {
    position: relative;
    z-index: 20;
  }

  .main-content {
    height: auto;
    overflow-y: auto;
    min-height: 150vh;
    overflow: visible;
  }
  
  .stamp-01       { left:  6%; top:  8%; }
  .stamp-02       { left: auto; right: 6%; top: 18%; }
  .stamp-03       { left:  8%; top: 56%; }
  .stamp-05       { left: 45%; top: 72%; }

  .wrapper {
    left: 8%;
    width: 84%;
    top: 37%;
  }

  .stamp-04 {
    padding-left: 0;
    margin-left: auto;
    width: max-content;
  }

  .subtitle {
    padding-left: 0;
    text-align: right;
  }

  .bf-1  { left: -2%; top: 28%; width: 100px; animation-duration: 28s; animation-delay:   0s;  --rot-start: -4deg; --rot-mid:  2deg; --rot-end: -1deg; z-index: 1}
  .bf-2  { left: 2%; top: 20%; width: 170px; animation-duration: 34s; animation-delay:  -8s;  --rot-start:  5deg; --rot-mid: -2deg; --rot-end:  3deg; z-index: 5; }
  .bf-3  { left: 18%; top: 25%; width: 120px; animation-duration: 40s; animation-delay: -15s;  --rot-start: -2deg; --rot-mid:  4deg; --rot-end: -3deg; z-index: 1}
  .bf-4  { left: 15%; top: 39%; width: 150px; animation-duration: 32s; animation-delay:  -4s;  --rot-start:  7deg; --rot-mid: -3deg; --rot-end:  5deg; z-index: 5; }
  .bf-5  { left: -10%; top: 34%; width: 500px; animation-duration: 38s; animation-delay: -20s;  --rot-start: -6deg; --rot-mid:  1deg; --rot-end: -4deg; z-index: 0; }
  .bf-6  { left: 0%; top: 73%; width: 90px; animation-duration: 26s; animation-delay: -10s;  --rot-start:  3deg; --rot-mid: -5deg; --rot-end:  2deg; z-index: 1}
  .bf-7  { left: 18%; top: 75%; width: 180px; animation-duration: 44s; animation-delay:  -5s;  --rot-start: -1deg; --rot-mid:  6deg; --rot-end: -2deg; z-index: 1}
  .bf-8  { left: 38%; top: 52%; width: 580px; animation-duration: 36s; animation-delay: -18s;  --rot-start:  -3deg; --rot-mid: 1deg; --rot-end:  3deg; z-index: 1}
  .bf-9  { left: 75%; top: 30%; width: 200px; animation-duration: 30s; animation-delay: -12s;  --rot-start: -3deg; --rot-mid:  3deg; --rot-end: -5deg; z-index: 1}
  .bf-10 { left: 65%; top: 28%; width: 90px; animation-duration: 42s; animation-delay:  -7s;  --rot-start:  4deg; --rot-mid: -4deg; --rot-end:  2deg; z-index: 1}
  .bf-11 { left: 45%; top: 12%; width: 400px; animation-duration: 29s; animation-delay: -25s;  --rot-start: -5deg; --rot-mid:  2deg; --rot-end: -3deg; z-index: 0; }
  .bf-12 { left: 40%; top: 0%; width: 175px; animation-duration: 37s; animation-delay:  -3s;  --rot-start:  2deg; --rot-mid: -6deg; --rot-end:  4deg; z-index: 5;}

}