/* Explain: App-specific component classes, including 3D text and animated gradient border buttons. */
/* Hero headline — deep 3D extrude (chunky stepped side wall) */
/* Hero headline — solid flat extrude (stepped side wall, no gradient) */
.hero-title-3d {
    letter-spacing: 0.14em;
    color: #ffffff;
    text-shadow:
        2px 2px 0 #0ea5e9,
        4px 4px 0 #0ea5e9,
        6px 6px 0 #0ea5e9,
        8px 8px 0 #0ea5e9,
        10px 10px 0 #0ea5e9,
        12px 12px 0 #0ea5e9,
        14px 14px 0 #0ea5e9,
        16px 16px 0 #0ea5e9,
        18px 18px 0 #0ea5e9,
        20px 20px 0 #0ea5e9,
        22px 22px 0 #0ea5e9,
        24px 24px 0 #0ea5e9,
        26px 26px 0 #0ea5e9,
        28px 28px 0 #0ea5e9,
        30px 16px 26px rgba(0, 0, 0, 0.45);
}

/* Transparent streaming buttons with animated gradient border */
.gradient-border-btn {
    position: relative;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 9999px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(90deg, #1DB954, #0ea5e9, #f97316, #FA243C, #0ea5e9, #1DB954);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 100%;
    background-position: 0% 50%, 0% 50%;
    animation: gradient-flow 4s linear infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gradient-border-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.4);
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%, 0% 50%;
    }
    100% {
        background-position: 0% 50%, 100% 50%;
    }
}