/* 67 – meme energy: lime, hot pink, sticker shapes and a glitchy title. */
@font-face { font-family: "Anton"; src: url("/assets/fonts/anton-latin-400-e6b09352.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/space-grotesk-latin-wght-3b2bde23.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --inv-bg:
    repeating-linear-gradient(-45deg, rgba(198, 255, 0, .16) 0 18px, transparent 18px 36px),
    linear-gradient(180deg, #fbfff0 0%, #f6f0ff 100%);
  --inv-text: #111111;
  --inv-accent: #ff2e88;
  --inv-accent-soft: #c6ff00;
  --inv-accent-gradient: linear-gradient(135deg, #ff2e88, #7b2cff);
  --inv-highlight: #111111;
  --inv-highlight-strong: #111111;
  --inv-highlight-light: #c6ff00;
  --inv-highlight-dark: #111111;
  --inv-title-fill: linear-gradient(110deg, #111 0%, #111 40%, #7b2cff 50%, #111 60%, #111 100%);
  --inv-title-glow: drop-shadow(4px 4px 0 #c6ff00) drop-shadow(-3px -2px 0 #ff2e88);
  --inv-card-border: #111111;
  --inv-card-bg: #ffffff;
  --inv-shadow: rgba(17, 17, 17, .14);
  --inv-radius: 18px;
  --inv-font-body: "Space Grotesk", system-ui, sans-serif;
  --inv-font-display: "Anton", Impact, sans-serif;
  --inv-font-script: "Anton", Impact, sans-serif;
  --inv-font-heading: "Anton", Impact, sans-serif;
  --inv-title-size: clamp(3.6rem, 16vw, 7rem);
  --inv-floater-stroke: rgba(17, 17, 17, .2);
  --inv-floater-fill: linear-gradient(180deg, rgba(198, 255, 0, .5), rgba(255, 46, 136, .3));
}

.inv-title { text-transform: uppercase; letter-spacing: .02em; animation: inv-shine 5s linear infinite, glitch 3.2s steps(1) infinite; }
@keyframes glitch {
  0%, 92%, 100% { transform: none; }
  93% { transform: translate(-3px, 1px) skewX(-6deg); }
  95% { transform: translate(3px, -1px) skewX(4deg); }
  97% { transform: translate(-1px, 0) skewX(-2deg); }
}
.inv-eyebrow { background: #c6ff00; color: #111; border: 2px solid #111; box-shadow: 4px 4px 0 #111; transform: rotate(-2deg); }
.inv-age-side { font-family: "Anton", sans-serif; font-style: normal; text-transform: uppercase; color: #111; }
.inv-age-badge {
  border-radius: 22px; transform: rotate(-6deg);
  background: #c6ff00; border: 3px solid #111;
  box-shadow: 6px 6px 0 #111; animation: hand-weigh 1.4s ease-in-out infinite;
}
.inv-age-badge::before { display: none; }
.inv-age-badge span { color: #111; text-shadow: 3px 3px 0 #ff2e88; }
/* The "6 … 7" hand-weighing gesture */
@keyframes hand-weigh {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(-6px); }
}
.inv-ribbon { clip-path: none; border: 2px solid #111; border-radius: 12px; box-shadow: 4px 4px 0 #111; transform: rotate(1.5deg); text-transform: uppercase; }
.inv-card { box-shadow: 8px 8px 0 #111; }
.inv-card::before { inset: -3px; }
.inv-greeting { font-size: clamp(2.4rem, 9vw, 3.4rem); text-transform: uppercase; }
.inv-signature { font-size: 2rem; text-transform: uppercase; }
.inv-detail { border: 2px solid #111; box-shadow: 4px 4px 0 #111; }
.inv-detail h3, .inv-gift h3 { text-transform: uppercase; letter-spacing: .04em; }
.inv-chips li { border: 2px solid #111; background: #c6ff00; }
.inv-cd-box { border-color: #111; box-shadow: 3px 3px 0 #111; }
.inv-cd-num { color: #c6ff00; text-shadow: 2px 2px 0 #111; }
.inv-btn-primary, .inv-btn-secondary { border: 2px solid #111; box-shadow: 4px 4px 0 #111; }
.inv-btn-secondary { background: #c6ff00; color: #111; }
.inv-song-btn { border-radius: 24px; background: #c6ff00; color: #111; border-color: #111; box-shadow: 5px 5px 0 #111; }
.inv-song-hint { border: 2px solid #111; background: #fff; color: #111; }
.inv-divider { background: repeating-linear-gradient(90deg, #111 0 10px, transparent 10px 18px); }

/* Small headings stay solid for readability. */
.inv-detail h3, .inv-gift h3 { background: none; color: #111; filter: none; animation: none; text-shadow: 2px 2px 0 #c6ff00; }