/* Extracted from discord/shop.php for CSP compliance. */
[data-reveal] {
            opacity: 0;
            transform: translateY(34px);
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
        }

        [data-reveal].visible {
            opacity: 1;
            transform: translateY(0);
        }
        [data-reveal].visible.reveal-dim {
            opacity: 0.55;
        }

        @keyframes shard-pulse {

            0%,
            100% {
                transform: scale(1) translate(0, 0) rotate(var(--rot, 0deg));
            }

            50% {
                transform: scale(1.02) translate(calc(var(--tx, 0px)), calc(var(--ty, 0px))) rotate(calc(var(--rot, 0deg) + 1deg));
            }
        }

        @keyframes float-3d {

            0%,
            100% {
                transform: translateY(0) rotate(var(--rot, 0deg));
            }

            50% {
                transform: translateY(-12px) rotate(calc(var(--rot, 0deg) + 3deg));
            }
        }

        @keyframes deco-appear {
            from { opacity: 0; }
        }

        @keyframes pulse-light {

            0%,
            100% {
                opacity: 0.15;
                transform: scale(1);
            }

            50% {
                opacity: 0.25;
                transform: scale(1.1);
            }
        }

        .anim-shard-pulse {
            animation: shard-pulse 6s ease-in-out infinite, deco-appear 1.2s ease-out 0.15s both;
        }

        .anim-float-3d {
            animation: float-3d 7s ease-in-out infinite var(--float-delay, 0s), deco-appear 1.4s ease-out 0.35s both;
        }

        .anim-pulse {
            animation: pulse-light 5s ease-in-out infinite;
        }

        .anim-ray {
            animation: rotate-ray 90s linear infinite;
        }

        .anim-delay-2s {
            animation-delay: 2s;
        }

        .anim-delay-neg-1s {
            --float-delay: -1s;
        }

        .anim-delay-neg-1_5s {
            --float-delay: -1.5s;
        }

        .anim-delay-neg-2_5s {
            --float-delay: -2.5s;
        }

        .anim-dir-reverse {
            animation-direction: reverse;
        }

        .anim-dur-120s {
            animation-duration: 120s;
        }

        .anim-tx-5-ty-5 {
            --tx: 5px;
            --ty: 5px;
        }

        .anim-tx-10-ty-0-rot-neg-5 {
            --tx: 10px;
            --ty: 0px;
            --rot: -5deg;
        }

        .anim-tx-neg-5-ty-neg-5 {
            --tx: -5px;
            --ty: -5px;
        }

        .anim-tx-neg-10-ty-5 {
            --tx: -10px;
            --ty: 5px;
        }

        .anim-rot-neg-30 {
            --rot: -30deg;
        }

        .anim-rot-neg-20 {
            --rot: -20deg;
        }

        .anim-rot-neg-15 {
            --rot: -15deg;
        }

        .anim-rot-neg-10 {
            --rot: -10deg;
        }

        .anim-rot-15 {
            --rot: 15deg;
        }

        .anim-rot-20 {
            --rot: 20deg;
        }

        .anim-rot-45 {
            --rot: 45deg;
        }

        .anim-rot-170 {
            --rot: 170deg;
        }

        .anim-ray-25 {
            --r: 25deg;
        }

        .anim-ray-neg-35 {
            --r: -35deg;
        }

        .anim-ray-75 {
            --r: 75deg;
        }

        @keyframes rotate-ray {
            0% {
                transform: translate(-50%, -50%) rotate(var(--r, 0deg));
            }

            100% {
                transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 360deg));
            }
        }

        body {
            background: #0a0a0f;
            overflow-x: hidden;
        }

        .text-gd-phi {
            background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #ec4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .text-gd-purple {
            background: linear-gradient(135deg, #8b9fff 0%, #5865F2 45%, #a78bfa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 48px rgba(88, 101, 242, .45));
        }

        .h2-section {
            font-size: clamp(2.2rem, 5vw, 4rem);
        }

        .shine-btn {
            position: relative;
            overflow: hidden;
        }

        .shine-btn::after {
            content: "";
            position: absolute;
            top: 0;
            left: -120%;
            width: 60%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
            transform: skewX(-20deg);
            transition: left .55s cubic-bezier(.4, 0, .2, 1);
        }

        .shine-btn:hover::after {
            left: 160%;
        }

        .dot-grid {
            background-image: radial-gradient(circle, rgba(168, 85, 247, .08) 1px, transparent 1px);
            background-size: 28px 28px;
        }

        .dot-grid-vignette {
            background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent, #0a0a0f 80%);
        }

        .glow-card {
            background: rgba(11, 11, 22, 0.82);
            border: 1px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            position: relative;
            overflow: hidden;
            transition: border-color .4s ease, box-shadow .4s ease, transform .4s cubic-bezier(.4, 0, .2, 1), opacity .75s cubic-bezier(.16, 1, .3, 1);
        }

        .glow-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(168, 85, 247, .08), transparent);
            opacity: 0;
            transition: opacity .4s ease;
            pointer-events: none;
        }

        .glow-card:hover {
            transform: translateY(-6px);
            border-color: rgba(168, 85, 247, .22);
            box-shadow: 0 16px 48px -12px rgba(168, 85, 247, .18), 0 4px 16px -4px rgba(0, 0, 0, .6);
        }

        .glow-card:hover::before {
            opacity: 1;
        }

        .glow-card[data-glow="purple"]::before {
            background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(168, 85, 247, .08), transparent);
        }

        .glow-card[data-glow="yellow"]::before {
            background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(234, 179, 8, .06), transparent);
        }

        .glow-card[data-glow="yellow"]:hover {
            border-color: rgba(234, 179, 8, .22);
            box-shadow: 0 16px 48px -12px rgba(234, 179, 8, .15), 0 4px 16px -4px rgba(0, 0, 0, .6);
        }
        .glow-card[data-reveal]:not(.visible) {
            transition: opacity .75s cubic-bezier(.16, 1, .3, 1), transform .75s cubic-bezier(.16, 1, .3, 1);
        }