:root {
            --foyer-purple: #9d50bb; 
            --neon-pink: #ff00ff;
            --deep-navy: #0d0b2e;
            --vinyl-black: #121212;
            --fs-blue: #00d4ff;
            --asta-orange: #ff8c00;
        }

        html, body {
            margin: 0;
            padding: 0;
            background-color: var(--deep-navy);
            color: #ffffff;
            font-family: 'Inter', sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
        }

        .font-adumu {
            font-family: 'Archivo Black', sans-serif;
            text-transform: uppercase;
        }

        .bg-plakat {
            background: 
                radial-gradient(circle at 20% 30%, rgba(157, 80, 187, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, #0d0b2e 0%, #1a0f1f 100%);
            background-attachment: fixed;
        }

        /* Vinyl Record */
        .vinyl-container {
            position: relative;
            width: 280px;
            height: 280px;
            z-index: 10;
        }

        @media (min-width: 768px) {
            .vinyl-container { width: 320px; height: 320px; }
        }

        .vinyl-record {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, #333 0%, #000 70%, #111 100%);
            border: 4px solid #222;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
                    cursor: grab;
                    user-select: none;
                    touch-action: none;
        }

        .vinyl-record.dragging { cursor: grabbing; }

        .vinyl-grooves {
            position: absolute;
            width: 90%;
            height: 90%;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.05);
            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
        }

        .vinyl-label {
            width: 25%;
            height: 25%;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
        }

        .vinyl-hole {
            width: 15%;
            height: 15%;
            background: #0d0b2e;
            border-radius: 50%;
        }

        .neon-ray {
            position: absolute;
            width: 3px;
            height: 40%;
            background: linear-gradient(to top, var(--neon-pink), transparent);
            transform-origin: bottom center;
            bottom: 50%;
            left: calc(50% - 1.5px);
            box-shadow: 0 0 15px var(--neon-pink);
            opacity: 0.8;
        }

        /* Star Elements */
        .star-burst {
            position: absolute;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: black;
        }

        .date-star {
            width: 110px;
            height: 110px;
            right: -30px;
            top: 10px;
            transform: rotate(15deg);
            animation-delay: -1.3s;
            clip-path: polygon(50% 0%, 55% 20%, 75% 10%, 70% 30%, 95% 25%, 85% 45%, 100% 55%, 80% 65%, 90% 85%, 70% 80%, 65% 100%, 50% 85%, 35% 100%, 30% 80%, 10% 90%, 20% 65%, 0% 55%, 15% 45%, 5% 25%, 30% 30%, 25% 10%, 45% 20%);
        }

        .deco-star {
            width: 40px;
            height: 40px;
            background: white;
            position: absolute;
            animation-delay: -0.4s;
            filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        }

        .date-star,
        .deco-star {
            animation:
                subtle-star-blink 4.8s ease-in-out infinite,
                subtle-star-glow 7.2s ease-in-out infinite;
            will-change: opacity, filter;
        }

        @keyframes subtle-star-blink {
            0%,
            100% {
                opacity: 0.95;
                filter: brightness(1) drop-shadow(0 0 8px rgba(255,255,255,0.25));
            }
            50% {
                opacity: 0.72;
                filter: brightness(0.92) drop-shadow(0 0 5px rgba(255,255,255,0.16));
            }
        }

        @keyframes subtle-star-glow {
            0%,
            100% {
                box-shadow: 0 0 0 rgba(255, 255, 255, 0);
                filter: drop-shadow(0 0 8px rgba(255,255,255,0.25));
            }
            50% {
                box-shadow: 0 0 14px rgba(255, 234, 141, 0.664), 0 0 26px rgba(0, 212, 255, 0.05);
                filter: drop-shadow(0 0 11px rgba(255, 232, 138, 0.34));
            }
        }

        .ticket-badge {
            background: #ff3d00;
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 1rem;
            rotate: -5deg;
            box-shadow: 0 5px 15px rgba(255, 61, 0, 0.4);
            display: inline-block;
            transition: transform 600ms ease-in-out, box-shadow 600ms ease-in-out, filter 600ms ease-in-out;
            animation: ticket-pulse 3.8s ease-in-out infinite;
        }

        .ticket-badge:hover {
            transform: scale(1.14);
            transform-origin: center;
            z-index: 1;
        }

        .text-gradient {
            background: linear-gradient(to right, #ff00ff 0%, #00d4ff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .fsinfo {
            color: #00d4ff;
        }

        .asta {
            color: #ff8c00;
        }

        .glass {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: transform 600ms ease-in-out;
        }

        .glass:hover {
            /* Implement a resize without moving any of the other content */
            transform: scale(calc(107%));
            transform-origin: center;
            z-index: 1;
        }

        .border-left-pink { border-left: 6px solid var(--neon-pink) !important; }
        .border-left-purple { border-left: 6px solid var(--foyer-purple) !important; }

        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .animate-spin-slow { animation: spin 20s linear infinite; }

        @keyframes ticket-pulse {
            0%,
            100% {
                box-shadow: 0 5px 15px rgba(255, 61, 0, 0.4);
                filter: brightness(1);
            }
            50% {
                box-shadow: 0 8px 20px rgba(255, 61, 0, 0.55);
                filter: brightness(1.08);
            }
        }

        .shooting-star {
            position: absolute;
            top: 0;
            left: 0;
            width: 170px;
            height: 2px;
            pointer-events: none;
            z-index: 1;
            opacity: 0;
            transform: translate3d(var(--start-x, -20vw), var(--start-y, 18vh), 0) rotate(var(--angle, -18deg));
            transform-origin: left center;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95), rgba(157, 80, 187, 0.6));
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 14px rgba(0, 212, 255, 0.45));
            animation: shooting-star-flight var(--duration, 1400ms) ease-out forwards;
        }

        .shooting-star::after {
            content: "";
            position: absolute;
            right: -2px;
            top: 50%;
            width: 6px;
            height: 6px;
            transform: translateY(-50%);
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.95);
        }

        @keyframes shooting-star-flight {
            0% {
                opacity: 0;
                transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--angle));
            }
            12% {
                opacity: 1;
            }
            80% {
                opacity: 0.4;
            }
            100% {
                opacity: 0;
                transform: translate3d(calc(var(--start-x) + var(--travel-x)), calc(var(--start-y) + var(--travel-y)), 0) rotate(var(--angle));
            }
        }