/* Roast page styles */

/* Input placeholder */
.roast-input::placeholder {
    color: var(--text);
    opacity: 0.35;
}

/* Input focus glow */
.roast-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

/* Fire loader animation */
.fire-loader {
    font-size: 3rem;
    animation: fire-pulse 0.8s ease-in-out infinite;
}

@keyframes fire-pulse {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.3) rotate(10deg);
        opacity: 0.7;
    }
}

/* Typing cursor */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: var(--primary);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.7s step-end infinite;
}

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

/* Result card slide-up */
.result-card {
    animation: slide-up 0.5s ease-out;
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* BMC modal */
.bmc-modal-content {
    animation: modal-bounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modal-bounce {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Fade-in-up animation */
.fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}

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

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }

/* Floating icon overrides for roast page */
.floating-icon {
    position: absolute;
    font-size: 2rem;
    opacity: 0.15;
    animation: roast-float 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes roast-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(15deg); }
}

.icon-1 { top: 10%; left: 10%; animation-delay: 0s; }
.icon-2 { top: 20%; right: 15%; animation-delay: 1s; }
.icon-3 { bottom: 30%; left: 20%; animation-delay: 2s; }
.icon-4 { bottom: 20%; right: 10%; animation-delay: 3s; }
.icon-5 { top: 40%; left: 5%; animation-delay: 4s; }
.icon-6 { top: 15%; right: 40%; animation-delay: 5s; }

/* Prose styles for roast markdown */
#roast-text p {
    margin-bottom: 0.75em;
}

#roast-text strong {
    color: var(--primary);
}

#roast-text ul {
    list-style-type: disc;
    padding-left: 1.5em;
    margin-bottom: 0.75em;
}

#roast-text li {
    margin-bottom: 0.25em;
}

/* Floating bubble animations */
.floating-bubble-1 { animation-delay: 0s; }
.floating-bubble-2 { animation-delay: 2s; }
.floating-bubble-3 { animation-delay: 4s; }

/* Mobile responsive */
@media (max-width: 768px) {
    .floating-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .floating-icon {
        font-size: 1rem;
        opacity: 0.08;
    }

    .icon-5,
    .icon-6 {
        display: none;
    }
}