#heapIntro {
      background:
        radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.88) 60%, rgba(2,2,2,.96) 100%),
        url('../images/pix-drop-intro-bg.webp') center/cover no-repeat,
        rgba(2,2,2,.94) !important;
      animation: hpIntroBreath 18s ease-in-out infinite;
    }
    @keyframes hpIntroBreath {
      0%, 100% { background-size: auto, 108% auto, auto; background-position: center, 50% 50%, center; }
      50%      { background-size: auto, 114% auto, auto; background-position: center, 52% 48%, center; }
    }
    #heapIntro::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0px 1px, transparent 1px 3px);
      mix-blend-mode: overlay; opacity: .6; z-index: 0;
    }
    #heapIntro > * { position: relative; z-index: 1; }

    #heapIntro .hp-title { position: relative; display: inline-block; }
    #heapIntro .hp-title em { position: relative; display: inline-block; }

    #heapIntro .hp-enter {
      appearance: none; border: 0;
      display: inline-flex; align-items: center; gap: .9rem;
      padding: 1.1rem 2.4rem;
      font-family: var(--pp, 'Poppins', sans-serif);
      font-size: .8rem; font-weight: 700;
      letter-spacing: .25em; text-transform: uppercase;
      color: #fff; background: var(--red, #e92038);
      border-radius: 999px; cursor: pointer;
      box-shadow: 0 8px 30px rgba(233,32,56,.4);
      transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
      margin-bottom: 2rem;
    }
    #heapIntro .hp-enter:hover {
      background: #ff3047;
      box-shadow: 0 12px 40px rgba(233,32,56,.55);
      padding-right: 2.4rem;
    }
    #heapIntro .hp-enter:active { transform: scale(.98); }
    #heapIntro .hp-enter i { font-size: .75rem; animation: hpArr 1.4s ease-in-out infinite; }
    @keyframes hpArr { 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

    #heapIntro .hp-hint {
      font-family: var(--pp, 'Poppins', sans-serif);
      font-size: .4rem; letter-spacing: .3em; text-transform: uppercase;
      color: rgba(255,255,255,.32);
      display: flex; align-items: center; gap: .5rem;
    }
    #heapIntro .hp-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--red, #e92038);
      animation: hpDot 1.8s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes hpDot { 0%,100%{opacity:.25} 50%{opacity:1} }