/* Shared event-type introduction. Without this sheet the script leaves the page alone. */
:root { --use-case-intro-ready: 1; }
.use-case-intro {
    position: fixed; inset: 0; margin: 0; border: 0;
    width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
    padding: 32px 24px 84px; color: #fff; background: #040416;
    overflow: auto; overscroll-behavior: contain;
}
.use-case-intro[open] { display: flex; align-items: center; justify-content: center; }
.use-case-intro::backdrop { background: #040416; }
.use-case-intro__surface { position: relative; z-index: 1; width: min(100%, 960px); margin: auto; text-align: center; }
.use-case-intro__image {
    display: block; width: auto; height: auto; max-width: 100%; max-height: min(58vh, 600px);
    margin: 0 auto; border-radius: 18px; object-fit: contain;
    box-shadow: 0 24px 90px rgba(224, 0, 240, .18);
}
.use-case-intro__heading {
    max-width: 900px; margin: 24px auto 0; color: #fff;
    font: 800 clamp(1.3rem, 3.2vw, 2rem)/1.3 Inter, system-ui, sans-serif;
    letter-spacing: -.01em; text-wrap: balance;
}
.use-case-intro__skip {
    position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 2; min-height: 44px; padding: 10px 18px; border: 1px solid #ffffff80;
    border-radius: 999px; background: #17172d; color: #fff; font: 600 .875rem/1.4 Inter, system-ui, sans-serif;
    cursor: pointer;
}
.use-case-intro__skip:hover { background: #302a50; }
.use-case-intro__skip:focus-visible { outline: 3px solid #e879f9; outline-offset: 4px; }
.use-case-intro__decoration { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.use-case-intro__shimmer {
    position: absolute; inset: -20%; pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, #ffffff40 50%, transparent 60%);
    transform: translateX(-110%);
}
@media (prefers-reduced-motion: no-preference) {
    .use-case-intro[data-state="entering"] .use-case-intro__surface { animation: use-case-surface .65s .15s both; }
    .use-case-intro[data-state="entering"] .use-case-intro__shimmer { animation: use-case-sweep .7s .1s both; }
    .use-case-intro[data-state="closing"] { animation: use-case-exit .3s both; }
}
@keyframes use-case-surface { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes use-case-sweep { to { transform: translateX(110%); } }
@keyframes use-case-exit { to { opacity: 0; } }
@media (max-width: 767px) {
    .use-case-intro { padding: 24px 18px 84px; }
    .use-case-intro__image { max-height: 52vh; border-radius: 12px; }
    .use-case-intro__heading { margin-top: 22px; }
}