/* =========================================================================
   "Doodle crew" wordmark — the closing scene above the footer.
   Every moving part is its own element animated with transform / opacity,
   so the compositor does the work; inked letters are drawn once per word.
   ========================================================================= */

.vs-crew {
    --crew-ink: var(--vs-ink, #0a1628);
    --crew-paper: #ffffff;
    --crew-accent: var(--vs-brand, #0a63f6);
    position: relative;
    overflow: hidden;
    /* Headroom so a speech bubble over a sitter is never clipped; no room
       below, so the crew stands right on the footer's top line. */
    padding: 64px 16px 0;
}

.vs-crew-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.vs-crew-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --- Stage -------------------------------------------------------------- */
.vs-crew-stage {
    position: relative;
    z-index: 1;
    width: min(100%, 1180px);
    margin: 0 auto;
    contain: layout style;
    pointer-events: none;
}

.vs-crew-word {
    position: absolute;
    inset: 0;
}

.vs-crew-letter,
.vs-crew-dust,
.vs-crew-mate {
    position: absolute;
}

.vs-crew-stage svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Before the script has laid the scene out (or without it at all). */
.vs-crew-fallback {
    margin: 0;
    text-align: center;
    font-weight: 800;
    font-size: clamp(3rem, 13vw, 10rem);
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(100deg, var(--vs-navy, #0a1628), var(--vs-brand, #0a63f6));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.vs-crew.is-ready .vs-crew-fallback {
    display: none;
}

/* --- Letters ------------------------------------------------------------ */
.vs-crew-letter {
    z-index: 3;
    opacity: 0;
    transform-origin: 50% 85%;
    pointer-events: auto;
    will-change: transform, opacity;
}

.vs-crew.is-playing .vs-crew-letter {
    animation: vs-crew-stamp 0.62s cubic-bezier(0.2, 0.9, 0.25, 1.2) var(--d, 0ms) both;
}

.vs-crew-glyph text {
    fill: url(#vs-crew-grad);
    font-family: var(--vs-font, "Inter", system-ui, sans-serif);
}

/* Letters wobble under the pointer. */
.vs-crew-glyph {
    transform-origin: 50% 85%;
}

.vs-crew-letter:hover .vs-crew-glyph {
    animation: vs-crew-wobble 0.5s ease-in-out;
}

@keyframes vs-crew-stamp {
    0% { opacity: 0; transform: translateY(-46%) scale(1.35) rotate(calc(var(--r, 0deg) * 2)); }
    55% { opacity: 1; transform: translateY(3%) scale(1.04, 0.94) rotate(var(--r, 0deg)); }
    78% { transform: translateY(-1.5%) scale(0.99, 1.02) rotate(var(--r, 0deg)); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(calc(var(--r, 0deg) * 0.35)); }
}

@keyframes vs-crew-wobble {
    25% { transform: rotate(-5deg) scale(1.03); }
    55% { transform: rotate(4deg); }
    80% { transform: rotate(-2deg); }
}

/* A puff of ink as each letter lands. */
.vs-crew-dust {
    z-index: 4;
    opacity: 0;
    transform-origin: 50% 100%;
}

.vs-crew-dust path {
    fill: none;
    stroke: var(--crew-ink);
    stroke-width: 3;
    stroke-linecap: round;
}

.vs-crew.is-playing .vs-crew-dust {
    animation: vs-crew-puff 0.45s ease-out var(--d, 0ms) both;
}

@keyframes vs-crew-puff {
    0% { opacity: 0; transform: scale(0.6); }
    30% { opacity: 0.85; }
    100% { opacity: 0; transform: scale(1.25); }
}

/* --- The crew ----------------------------------------------------------- */
.vs-crew-mate {
    z-index: 5;
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.vs-crew-mate.is-behind { z-index: 2; }
.vs-crew-mate.is-hands { z-index: 6; pointer-events: none; }

.vs-crew-mate:focus-visible {
    outline: 2px solid var(--vs-brand, #0a63f6);
    outline-offset: 4px;
    border-radius: 12px;
}

.vs-crew-arrive,
.vs-crew-hop {
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
}

.vs-crew-arrive {
    opacity: 0;
    will-change: transform, opacity;
}

.vs-crew.is-playing .vs-crew-mate .vs-crew-arrive {
    animation: vs-crew-pop 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) var(--d, 0ms) both;
}

.vs-crew.is-playing .vs-crew-mate.is-top .vs-crew-arrive {
    animation-name: vs-crew-plop;
}

.vs-crew.is-playing .vs-crew-mate.is-behind .vs-crew-arrive {
    animation-name: vs-crew-rise;
    animation-timing-function: cubic-bezier(0.3, 0.8, 0.3, 1);
}

@keyframes vs-crew-pop {
    0% { opacity: 0; transform: translateY(30%) scale(0.6); }
    100% { opacity: 1; transform: none; }
}

@keyframes vs-crew-plop {
    0% { opacity: 0; transform: translateY(-60%); }
    60% { opacity: 1; transform: translateY(4%) scale(1.06, 0.92); }
    100% { opacity: 1; transform: none; }
}

@keyframes vs-crew-rise {
    0% { opacity: 0; transform: translateY(55%); }
    100% { opacity: 1; transform: none; }
}

.vs-crew-hop.is-hop {
    animation: vs-crew-hop 0.55s cubic-bezier(0.3, 0.7, 0.4, 1);
}

@keyframes vs-crew-hop {
    30% { transform: translateY(-22%) scale(0.96, 1.06); }
    55% { transform: translateY(0) scale(1.06, 0.94); }
    75% { transform: translateY(-4%); }
}

/* Idle habits, on the character's own layer. */
.vs-crew-art { transform-origin: 50% 100%; }
.vs-crew-art.is-bob { animation: vs-crew-bob 2.8s ease-in-out infinite alternate; }
.vs-crew-art.is-peck { animation: vs-crew-peck 3.6s ease-in-out infinite; }
.vs-crew-art.is-sway { animation: vs-crew-sway-idle 3.2s ease-in-out infinite alternate; }

@keyframes vs-crew-bob { to { transform: translateY(-6%); } }
@keyframes vs-crew-sway-idle {
    from { transform: rotate(-4deg); }
    to { transform: rotate(4deg); }
}
@keyframes vs-crew-peck {
    0%, 80%, 90%, 100% { transform: none; }
    85% { transform: rotate(14deg); }
    94% { transform: rotate(10deg); }
}

/* Line art: light ink on a dark body, in the site's palette. */
.vs-crew-art path,
.vs-crew-art circle,
.vs-crew-art ellipse,
.vs-crew-art rect {
    fill: var(--crew-paper);
    stroke: var(--crew-ink);
    stroke-width: 3.2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.vs-crew-art .n { fill: none; }
.vs-crew-art .thin { stroke-width: 2; }
.vs-crew-art .thick { stroke-width: 4.5; }
.vs-crew-art .k { fill: var(--crew-ink); }
.vs-crew-art .a { fill: var(--crew-accent); }
.vs-crew-art .o { fill: var(--vs-brand-300, #7eb6fb); }
.vs-crew-art .r { fill: var(--vs-cyan, #19c2ff); }
.vs-crew-art .sh { fill: rgba(10, 22, 40, 0.18); stroke: none; }
.vs-crew-art [fill] { fill: url(#vs-crew-hatch); }
.vs-crew-art [stroke="none"] { stroke: none; }

/* Eyes: whites with dark pupils, or ink dots on the face. */
.vs-crew-art .vs-crew-white { fill: #fff; stroke-width: 2.4; }
.vs-crew-art .vs-crew-dot { fill: var(--crew-ink); stroke: none; }
.vs-crew-art .has-white .vs-crew-dot { fill: var(--vs-navy, #0a1628); }
.vs-crew-art .vs-crew-glint { fill: #fff; stroke: none; }

.vs-crew-pupil {
    transition: transform 0.2s ease-out;
}

.vs-crew-eye {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.07s ease;
}

.vs-crew-mate.is-blink .vs-crew-eye {
    transform: scaleY(0.1);
}

/* --- Leaving: the old word lifts away as the next one stamps in -------- */
.vs-crew .vs-crew-word.is-leaving .vs-crew-letter,
.vs-crew .vs-crew-word.is-leaving .vs-crew-mate .vs-crew-arrive {
    animation: vs-crew-leave 0.5s cubic-bezier(0.5, 0, 0.75, 0) both;
}

.vs-crew-word.is-leaving .vs-crew-dust { display: none; }

@keyframes vs-crew-leave {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-18%) scale(0.9); }
}

/* --- Speech bubble ------------------------------------------------------ */
.vs-crew-bubble {
    position: absolute;
    z-index: 7;
    transform: translate(-50%, calc(-100% - 12px));
    padding: 8px 14px;
    border: 1px solid rgba(10, 99, 246, 0.35);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--crew-ink);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 14px 30px -14px rgba(10, 22, 40, 0.4);
    pointer-events: none;
    animation: vs-crew-bubble-in 0.25s var(--vs-ease, ease) both;
    transition: opacity 0.3s ease;
}

.vs-crew-bubble.is-left { transform: translate(-85%, calc(-100% - 12px)); }
.vs-crew-bubble.is-right { transform: translate(-15%, calc(-100% - 12px)); }
.vs-crew-bubble.is-gone { opacity: 0; }

@keyframes vs-crew-bubble-in {
    from { opacity: 0; scale: 0.85; }
}

/* --- Doodles ------------------------------------------------------------ */
.vs-crew-doodles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.vs-crew.is-doodling .vs-crew-doodles {
    opacity: 1;
}

/* The track is as tall as the section, so translateY(100%) is one full
   fall — the whole drift is a compositor-only transform. */
.vs-crew-track {
    position: absolute;
    top: 0;
    width: 0;
    height: 100%;
    animation: vs-crew-fall linear infinite;
    will-change: transform;
}

.vs-crew-doodle {
    position: absolute;
    top: -40px;
    pointer-events: auto;
    cursor: pointer;
    animation: vs-crew-sway ease-in-out infinite alternate;
}

.vs-crew-doodle svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.vs-crew-doodle.is-pop svg {
    transform: scale(1.8);
    opacity: 0;
}

@keyframes vs-crew-fall {
    from { transform: translate3d(0, -8%, 0); }
    to { transform: translate3d(0, 108%, 0); }
}

@keyframes vs-crew-sway {
    from { transform: translateX(-14px) rotate(-14deg); }
    to { transform: translateX(14px) rotate(16deg); }
}

/* Off screen, everything holds still. */
.vs-crew.is-paused,
.vs-crew.is-paused * {
    animation-play-state: paused !important;
}

@media (max-width: 767px) {
    .vs-crew { padding: 52px 12px 0; }
    .vs-crew-track:nth-child(n + 8) { display: none; }
    .vs-crew-doodle { scale: 0.6; }
    .vs-crew-bubble { font-size: 0.72rem; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .vs-crew *,
    .vs-crew.is-playing * {
        animation: none !important;
        transition: none !important;
    }
    .vs-crew-letter,
    .vs-crew-arrive { opacity: 1; }
    .vs-crew-doodles { display: none; }
}