/* Shared marketing enhancements. Essential copy is visible before scripts run. */
.la-page main > section { scroll-margin-top: 6rem; }
.lw-product #product-details,
.lw-product #product-details section { scroll-margin-top: 6rem; }
.lw-product a:focus-visible,
.lw-product summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; }
.la-page main > section:first-child h1 { text-wrap: pretty; }
.lw-prompt-choice[aria-pressed="true"] {
    color: var(--brand);
    background: var(--surface-blue);
    border-color: currentColor;
}
.lw-prompt-choice:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

/* Prompt demo (_PromptDemo). Without script every panel is readable and no typing dots show; with it,
   agent-experience.js shows one panel and marks it data-lw-typing for a moment after a switch: the dots
   stand where the answer will be, then the answer and its card come in one after the other. */
.lw-prompt-panel[hidden] { display: none; }
.lw-prompt-panel:not([hidden]) { animation: lw-panel-in 260ms ease-out both; }
.lw-prompt-panel:not([data-lw-typing]) [data-lw-typing-dots],
.lw-prompt-panel[data-lw-typing] [data-lw-reply] { display: none; }
.lw-prompt-panel:not([hidden]):not([data-lw-typing]) [data-lw-reply] {
    animation: lw-answer-in 380ms cubic-bezier(.2, .8, .2, 1) both;
}
.lw-prompt-panel [data-lw-reply] + [data-lw-reply] { animation-delay: 140ms; }
.lw-prompt-panel:not([hidden]) .lw-prompt-instruction { animation: lw-answer-in 320ms ease-out both; }

/* The instruction's resting caret: the editor is focused, the sentence is what was typed. */
.lw-prompt-caret {
    display: inline-block;
    width: 2px;
    height: 1.15em;
    margin-left: 3px;
    vertical-align: -0.2em;
    border-radius: 1px;
    background: var(--brand);
    animation: la-caret 1.1s steps(1) infinite;
}

/* The widget's typing indicator (TypingDots), three dots breathing one after the other. */
.lw-typing { display: inline-flex; align-items: center; gap: 4px; }
.lw-typing > span {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: currentColor;
    animation: lw-typing-dot 1.2s ease-in-out infinite;
}
.lw-typing > span:nth-child(2) { animation-delay: .15s; }
.lw-typing > span:nth-child(3) { animation-delay: .3s; }

@keyframes lw-panel-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes lw-answer-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes lw-typing-dot {
    0%, 100% { transform: scale(.6); opacity: .5; }
    50% { transform: scale(1); opacity: 1; }
}
/* Product hero copy must not wait for a delayed entrance animation. */
.la-page main > section:first-child h1,
.la-page main > section:first-child h1 + p { animation: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lw-prompt-panel:not([hidden]),
    .lw-prompt-panel:not([hidden]):not([data-lw-typing]) [data-lw-reply],
    .lw-prompt-panel:not([hidden]) .lw-prompt-instruction,
    .lw-prompt-caret,
    .lw-typing > span { animation: none; }
}