/* =================================================================
   BORING MARKETING LANDING PAGE STYLES
   Analytical Serenity: Confident, muted, with strategic amber warmth
   ================================================================= */

/* Fix Basecoat tooltip — allow wrapping */
[data-tooltip]::before {
    white-space: normal;
    text-overflow: unset;
    max-width: 240px;
    width: max-content;
    text-align: center;
    line-height: 1.4;
    overflow: visible;
}

/* Animation keyframes */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes draw-line {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes node-appear {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animation classes */
.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
    opacity: 0;
}

.animation-delay-100 {
    animation-delay: 100ms;
}

.animation-delay-200 {
    animation-delay: 200ms;
}

.animation-delay-300 {
    animation-delay: 300ms;
}

.animation-delay-400 {
    animation-delay: 400ms;
}

.animation-delay-500 {
    animation-delay: 500ms;
}

/* Scroll-triggered animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Flow step stagger */
.flow-step {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.flow-step.visible {
    opacity: 1;
    transform: translateY(0);
}

.flow-step[data-step="1"].visible { transition-delay: 0ms; }
.flow-step[data-step="2"].visible { transition-delay: 150ms; }
.flow-step[data-step="3"].visible { transition-delay: 300ms; }

/* =================================================================
   BEFORE/AFTER SECTION
   Old way dimmed, new way vibrant
   ================================================================= */

/* Strikethrough animation on old way items (on scroll) */
.before-after-old .visible li span {
    position: relative;
}

/* =================================================================
   DIFFERENTIATOR SECTION
   Surface breakdown bars with counter animation
   ================================================================= */

/* Bar fill animation — JS handles initial width:0 and triggers fill */
.surface-bar-fill {
    transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* =================================================================
   FAQ ACCORDION
   ================================================================= */

.faq-item {
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
}

.faq-item[data-state="open"] {
    border-color: var(--accent-brand);
}

.faq-answer {
    /* No transition — instant open/close */
}

/* =================================================================
   DRAFT AGENT ANIMATION
   Timer-based animation mimicking real draft agent workflow
   ================================================================= */

/* Shimmer / skeleton loading effect */
@keyframes draft-shimmer {
    0% { opacity: 0.4; }
    50% { opacity: 0.8; }
    100% { opacity: 0.4; }
}

.draft-shimmer {
    animation: draft-shimmer 1.5s ease-in-out infinite;
}

/* Fade-in for headline reveal */
@keyframes draft-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.draft-fade-in {
    animation: draft-fade-in 0.5s ease-out forwards;
}

/* Word count: tabular nums for stable width */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Draft step connector fill transition */
.draft-step-connector {
    transition: background-color 0.7s ease-out;
}

/* CoT tool card hover (subtle) */
.cot-tool {
    transition: all 0.3s ease-out;
}

/* Keyword badge popover — show on hover via CSS */
.kw-badge-container:hover .kw-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =================================================================
   BRIEF DEMO & OPPORTUNITY CARDS
   ================================================================= */

/* Brief demo opportunity hover states */
.brief-opportunity {
    transition: all 0.2s ease-out;
}

.brief-opportunity:hover {
    transform: translateX(4px);
}

/* Pricing toggle active state */
#billing-toggle[aria-checked="true"] {
    background-color: var(--accent-brand);
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Focus styles */
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-brand);
    outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .scroll-animate {
        opacity: 1;
        transform: none;
    }

    .flow-step {
        opacity: 1;
        transform: none;
    }

    [data-bar-width] {
        transition: none;
    }

    .draft-shimmer {
        animation: none;
        opacity: 0.5;
    }

    .draft-step-circle,
    .draft-step-connector,
    .cot-tool {
        transition: none;
    }
}