/* =========================================================
   VIBES — scroll-driven pixel-art shower around the text
   ========================================================= */

/* Section is tall so we have scroll distance to drive the
   animation. The .vibes-stage inside is position:sticky so the
   content + items stay pinned to the viewport while the user
   scrolls through the section's height. */
.vibes {
  /* Matches .nav-inner height in css/nav.css. The stage extends
     under the sticky nav, so we offset content + the items area
     by this much to avoid the nav obscuring the top of the layout. */
  --nav-h: 64px;
  position: relative;
  /* data-p-end="0.625": animation uses 100vh of travel (same as before),
     remaining ~60vh is a dwell pause before the next section appears. */
  height: 260vh;
}
@media (max-width: 900px) {
  .vibes { height: 228vh; } /* ~80vh animation + ~48vh dwell */
}

.vibes-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: grid;
  place-items: center;
  /* Push the centered text down so it lives below the nav, not
     under it. */
  padding-top: var(--nav-h);
  overflow: hidden;
}

.vibes-items {
  position: absolute;
  /* Items container starts just below the nav so percentage-based
     top/left positions map to the visible area, not behind the nav. */
  inset: var(--nav-h) 0 0 0;
  pointer-events: none;
  z-index: 1;
}

.vibes-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 24px;
  max-width: 760px;
  pointer-events: none;
}

.vibes-content h3 {
  font-size: clamp(40px, 7vw, 88px);
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0 0 22px;
  line-height: .96;
  text-shadow: 0 8px 40px rgba(0,0,0,.6);
}
.vibes-content p {
  font-size: 17px;
  color: var(--text-2);
  margin: 0 auto;
  max-width: 540px;
  text-shadow: 0 4px 24px rgba(0,0,0,.6);
}

.vibes-item {
  position: absolute;
  top: 0; left: 0;
  width: 72px; height: 72px;
  will-change: left, top, transform;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55));
  pointer-events: none;
}
.vibes-item img {
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
/* Mobile item sizes are picked in JS to match the mobile layout. */

/* =========================================================
   Sparkle / rarity effects
   ::before  — primary star, top-right, bigger, animates first
   ::after   — secondary star, mid-left, smaller, half-phase offset
   ========================================================= */
@keyframes sparkle-twinkle {
  0%   { opacity: 0;   transform: scale(0.15) rotate(0deg);   }
  18%  { opacity: 1;   transform: scale(1.2)  rotate(80deg);  }
  50%  { opacity: 0.75;transform: scale(0.9)  rotate(185deg); }
  78%  { opacity: 0.35;transform: scale(0.55) rotate(265deg); }
  100% { opacity: 0;   transform: scale(0.15) rotate(360deg); }
}

/* Shared shape + position for both pseudo-elements */
.vibes-item--sparkle::before,
.vibes-item--sparkle::after {
  content: '✦';
  position: absolute;
  line-height: 1;
  pointer-events: none;
  /* inherit animation; each tier overrides duration below */
  animation: sparkle-twinkle 2.4s ease-in-out infinite;
}

/* Primary — top-right corner */
.vibes-item--sparkle::before {
  font-size: 15px;
  top: -11px;
  right: -7px;
}

/* Secondary — mid-left edge, smaller, opposite phase */
.vibes-item--sparkle::after {
  font-size: 9px;
  top: 36%;
  left: -10px;
  animation-delay: -1.2s;
}

/* ---- Gold tier (Diamond Ring, Lucky Cat, Golden Trophy) ---- */
.vibes-item--sparkle-gold {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.55))
    drop-shadow(0 0 10px rgba(255,215,0,.45));
}
.vibes-item--sparkle-gold::before {
  color: #FFD700;
  text-shadow: 0 0 7px rgba(255,215,0,.95);
}
.vibes-item--sparkle-gold::after {
  color: #FFC107;
  text-shadow: 0 0 5px rgba(255,193,7,.9);
}

/* ---- Silver / blue tier (Magic Wand, Ninja Star, Tophat) ---- */
.vibes-item--sparkle-silver {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.55))
    drop-shadow(0 0 10px rgba(100,200,255,.4));
}
.vibes-item--sparkle-silver::before,
.vibes-item--sparkle-silver::after {
  animation-duration: 1.95s;
}
.vibes-item--sparkle-silver::before {
  color: #7DD3FC;
  text-shadow: 0 0 7px rgba(125,211,252,.95);
}
.vibes-item--sparkle-silver::after {
  color: #38BDF8;
  text-shadow: 0 0 5px rgba(56,189,248,.9);
  animation-delay: -0.97s;
}

/* ---- Rainbow / rare tier (Magic 8 Ball, Hearts Card) ---- */
.vibes-item--sparkle-rainbow {
  filter:
    drop-shadow(0 8px 16px rgba(0,0,0,.55))
    drop-shadow(0 0 13px rgba(200,100,255,.45));
}
.vibes-item--sparkle-rainbow::before,
.vibes-item--sparkle-rainbow::after {
  animation-duration: 2.85s;
}
.vibes-item--sparkle-rainbow::before {
  color: #E879F9;
  text-shadow: 0 0 8px rgba(232,121,249,.95);
}
.vibes-item--sparkle-rainbow::after {
  color: #A855F7;
  text-shadow: 0 0 6px rgba(168,85,247,.9);
  animation-delay: -1.42s;
}