* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #000;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow-x: hidden;
}

/* Animált gradiens háttér */
.gradient-sweep {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 49%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 51%,
        transparent 100%
    );
    background-size: 100% 300%;
    animation: gradient-sweep 4s ease-in-out infinite;
}

@keyframes gradient-sweep {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 0% 100%;
    }
}

/* Disco háttér */
.disco-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Forgó fénysugarak */
.disco-lights {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 0, 0, 0.08) 15deg,
        transparent 30deg,
        transparent 45deg,
        rgba(0, 255, 100, 0.08) 60deg,
        transparent 75deg,
        transparent 90deg,
        rgba(0, 100, 255, 0.08) 105deg,
        transparent 120deg,
        transparent 135deg,
        rgba(212, 175, 55, 0.1) 150deg,
        transparent 165deg,
        transparent 180deg,
        rgba(255, 0, 150, 0.08) 195deg,
        transparent 210deg,
        transparent 225deg,
        rgba(0, 255, 255, 0.08) 240deg,
        transparent 255deg,
        transparent 270deg,
        rgba(255, 200, 0, 0.08) 285deg,
        transparent 300deg,
        transparent 315deg,
        rgba(150, 0, 255, 0.08) 330deg,
        transparent 345deg,
        transparent 360deg
    );
    animation: disco-rotate 20s linear infinite;
}

.disco-lights::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: conic-gradient(
        from 180deg at 50% 50%,
        transparent 0deg,
        rgba(255, 100, 0, 0.06) 20deg,
        transparent 40deg,
        transparent 70deg,
        rgba(0, 255, 200, 0.06) 90deg,
        transparent 110deg,
        transparent 140deg,
        rgba(255, 0, 100, 0.06) 160deg,
        transparent 180deg,
        transparent 210deg,
        rgba(100, 100, 255, 0.06) 230deg,
        transparent 250deg,
        transparent 280deg,
        rgba(255, 255, 0, 0.06) 300deg,
        transparent 320deg,
        transparent 360deg
    );
    animation: disco-rotate 15s linear infinite reverse;
}

@keyframes disco-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Csillogó pontok konténer */
.disco-sparkles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Egyedi csillogó pont */
.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    animation: sparkle-glow 2s ease-in-out infinite;
    box-shadow: 0 0 6px 2px currentColor;
}

@keyframes sparkle-glow {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Lézer konténer */
.laser-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

/* Lézer sugár */
.laser-beam {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 2px;
    transform-origin: left center;
    animation: laser-rotate 8s linear infinite, laser-pulse 2s ease-in-out infinite;
}

.laser-beam::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, currentColor 0%, transparent 100%);
    box-shadow:
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 40px currentColor;
}

@keyframes laser-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes laser-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    padding: 20px;
    text-align: center;
}

/* Videó szekció */
.video-section {
    position: relative;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border-radius: 16px;
    overflow: hidden;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Videó fölötti szöveg */
.video-hint {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #d4af37;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    opacity: 0;
    animation: zoomFromBack 3s cubic-bezier(0.17, 0.67, 0.35, 1.35) 1.5s forwards;
}

@keyframes zoomFromBack {
    0% {
        opacity: 0;
        transform: scale(0.05) perspective(600px) translateZ(-300px);
        text-shadow: none;
    }
    45% {
        opacity: 1;
        transform: scale(2) perspective(600px) translateZ(0);
        text-shadow: 0 0 40px #d4af37, 0 0 80px rgba(212, 175, 55, 0.5);
    }
    70% {
        transform: scale(0.85);
        text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
    }
    85% {
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
}

.video-hint.flash-out {
    animation: flashAndFade 1.2s ease-out forwards;
}

@keyframes flashAndFade {
    0% {
        opacity: 1;
        transform: scale(1);
        color: #d4af37;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    15% {
        opacity: 1;
        transform: scale(1.15);
        color: #fff;
        text-shadow: 0 0 20px #d4af37, 0 0 40px #d4af37, 0 0 60px #fff;
    }
    30% {
        opacity: 1;
        transform: scale(1);
        color: #d4af37;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
        color: #fff;
        text-shadow: 0 0 20px #d4af37, 0 0 40px #d4af37, 0 0 60px #fff;
    }
    70% {
        opacity: 1;
        transform: scale(1);
        color: #d4af37;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    }
    100% {
        opacity: 0;
        transform: scale(1);
        text-shadow: 0 0 0 transparent;
    }
}

.video-section.playing {
    background: #000;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.8),
        0 50px 100px rgba(0, 0, 0, 0.5);
    border: 2px solid #000;
    transform: translateY(-10px);
    min-height: auto;
}

.video-section video {
    width: 100%;
    height: auto;
    display: none;
    max-height: 80vh;
    object-fit: contain;
    cursor: pointer;
}

.video-section video.playing {
    display: block;
}

.pause-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

.pause-icon svg {
    width: 40px;
    height: 40px;
}

.pause-icon.hidden {
    display: none;
}

.play-btn {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a2e;
    border: none;
    padding: 20px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.play-btn svg {
    width: 24px;
    height: 24px;
}

.play-btn:hover {
    background: #fff;
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

.play-btn.hidden {
    display: none;
}

/* Meghívó szekció */
.invite-section {
    padding: 60px 20px;
}

/* Meghívó logó */
.invite-logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 30px;
}

/* Esemény dátum cím */
.event-header {
    font-size: 3.5rem;
    font-weight: 700;
    color: #d4af37;
    margin-bottom: 60px;
    min-height: 2.5em;
}

.event-header::after {
    content: '|';
    animation: blink 0.7s infinite;
}

.event-header.typing-done::after {
    display: none;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Lépések stílusa */
.steps {
    margin-bottom: 40px;
    display: inline-block;
    text-align: left;
}

.step {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #d4af37, #f0d060);
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: 50px;
    flex-shrink: 0;
}

.invite-section h1:not(.event-header) {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #e94560, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.invite-section p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

.generate-btn {
    display: block;
    margin: 0 auto;
    background: #000;
    color: #fff;
    border: 3px solid #d4af37;
    padding: 20px 50px;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
    }
}

.generate-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5);
}

.generate-btn:active {
    transform: translateY(0);
}

.generate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Vonalkód szekció */
.barcode-section {
    padding: 40px 20px;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.barcode-section h2 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: #fff;
}

#barcode-container {
    background: #fff;
    padding: 30px;
    border-radius: 16px;
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

#barcode-container svg {
    display: block;
}

.invite-info {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 30px;
}

.download-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 15px 40px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.download-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Utility */
.hidden {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .video-section {
        border-radius: 8px;
    }

    .video-hint {
        font-size: 1rem;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .event-header {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }

    .step {
        font-size: 1.3rem;
        gap: 10px;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .generate-btn {
        padding: 15px 35px;
        font-size: 1.1rem;
    }

    .play-btn {
        padding: 12px 25px;
        font-size: 14px;
    }

    #barcode-container {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .video-hint {
        font-size: 0.8rem;
        margin-bottom: 8px;
        letter-spacing: 0.5px;
    }

    .event-header {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }

    .step {
        font-size: 1.1rem;
        gap: 8px;
    }

    .step-number {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .generate-btn {
        padding: 12px 25px;
        font-size: 1rem;
    }

    .play-btn {
        padding: 10px 20px;
        font-size: 12px;
    }

    .barcode-section h2 {
        font-size: 1.3rem;
    }
}