/* ============================================================
   Title Block – Beautiful & Fully Editable
   ============================================================ */

/* ---- Base container ---- */
.title-block {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
}

/* ---- The actual title heading – uses CSS variables ---- */
.title-block h1 {
    margin: 0;
    line-height: var(--title-line-height, 1.2);
    word-break: break-word;

    /* ★ Use the CSS custom properties set by renderPreview ★ */
    font-size: var(--title-size, 32px);
    font-family: var(--title-font, Arial, sans-serif);
    color: var(--title-color, #000000);
    font-weight: var(--title-weight, normal);
    font-style: var(--title-style, normal);
    text-decoration: var(--title-decoration, none);
    text-transform: var(--title-transform, none);
    letter-spacing: var(--title-spacing, 0px);
    text-shadow: var(--title-shadow, none);
    border: var(--title-border, none);
    padding: var(--title-padding, 0px);

    /* Gradient support */
    background-image: var(--title-gradient, none);
    -webkit-background-clip: var(--title-bg-clip, initial);
    background-clip: var(--title-bg-clip, initial);
    -webkit-text-fill-color: var(--title-fill, initial);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

.title-block .title-animation-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: .15em solid orange;
    animation: typewriter 3s steps(40) 1s forwards, blink 1s step-end infinite;
}
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}
@keyframes blink {
    from, to { border-color: transparent; }
    50% { border-color: orange; }
}

.title-block .title-animation-fade {
    animation: fadeIn 2s ease-in forwards;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.title-block .title-animation-float {
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.title-block .title-animation-pulse {
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.title-block .title-animation-glitch {
    animation: glitch 0.5s infinite;
}
@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-5px, 5px); }
    40% { transform: translate(5px, -5px); }
    60% { transform: translate(-3px, 3px); }
    80% { transform: translate(3px, -3px); }
    100% { transform: translate(0); }
}

.title-block .title-animation-neon {
    animation: neonPulse 1.5s ease-in-out infinite alternate;
}
@keyframes neonPulse {
    from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff; }
    to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #0ff, 0 0 80px #0ff; }
}

.title-block .title-animation-bounce {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

.title-block .title-animation-shake {
    animation: shake 0.5s infinite;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}