/* Home hero: three small live tiles set into the headline.
   Markup in index.html (.hero-title), motion in assets/js/hero-tiles.js.
   Every word inside a tile comes from a data-t attribute through ::after, so the
   heading's text stays "The AI demo agent for teams that ship fast" for search
   engines, and the tiles are aria-hidden for screen readers.
   Sizes inside the cursor tile are in cqh (100cqh = the tile's height), so each
   scene scales with the headline. */

.hero-title { max-width: 1040px; }

.ht { position: relative; display: inline-block; vertical-align: -.12em; height: .86em; border-radius: .2em; overflow: hidden;
    background: #fff; box-shadow: inset 0 0 0 1px rgba(18, 18, 18, .08), 0 1px 2px rgba(18, 18, 18, .05);
    letter-spacing: normal; text-align: left; line-height: 1; }
.ht [data-t]::after { content: attr(data-t); }
.ht-nw { white-space: nowrap; }   /* keeps a tile on the line of the word before it */
.ht b { font-weight: inherit; }
.ht i { font-style: normal; }

/* ---------- Agent: Demosmith's cursor plays a video, steps a tour, ticks a doc ---------- */
.ht-agent { width: 1.15em; container-type: size; }
.ht-pg { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; transform: translateX(101%);
    transition: transform .45s cubic-bezier(.65, 0, .25, 1); font-family: "Inter", sans-serif; white-space: nowrap; }
.ht-pg.on { transform: none; }
.ht-pg.out { transform: translateX(-101%); }

/* Where the cursor's tip clicks on each screen (--tx/--ty), and where it rests after (--rx/--ry) */
.ht-agent[data-b="video"] > * { --tx: 50cqw; --ty: 47cqh; --rx: calc(50cqw + 30cqh); --ry: 70cqh; }
.ht-agent[data-b="tour"] > *  { --tx: 74cqh; --ty: 33cqh; --rx: calc(100cqw - 24cqh); --ry: 12cqh; }
.ht-agent[data-b="doc"] > *   { --tx: calc(50cqw - 13.5cqh); --ty: 52.5cqh; --rx: calc(50cqw + 30cqh); --ry: 70cqh; }

/* Video: press play, it plays */
.ht-vid { position: relative; width: 90cqh; height: 62cqh; border-radius: 10cqh; background: #F4F3FA; box-shadow: inset 0 0 0 max(1px, 1.5cqh) #E6E3F4; }
.ht-play { position: absolute; left: 50%; top: 44%; display: grid; place-items: center; width: 30cqh; height: 30cqh; margin: -15cqh; border-radius: 50%; background: #4F39F6; }
.ht-play svg { grid-area: 1 / 1; width: 46%; height: 46%; fill: #fff; }
.ht-pi { margin-left: 8%; }
.ht-pii, .done .ht-pi { display: none; }
.done .ht-pii { display: block; }
.ht-bar { position: absolute; left: 12cqh; right: 12cqh; bottom: 9cqh; height: max(2px, 4cqh); overflow: hidden; border-radius: 2cqh; background: #E1DEF2; }
.ht-bar i { display: block; height: 100%; background: #4F39F6; transform: scaleX(.05); transform-origin: 0 50%; }
.done .ht-bar i { transform: scaleX(.55); transition: transform 2s linear .1s; }

/* Interactive demo: a hotspot and its Next; Next moves the tour on to the next spot */
.ht-tour { position: absolute; left: 10cqh; top: 18cqh; display: flex; align-items: center; gap: 8cqh; transition: transform .45s cubic-bezier(.45, 0, .25, 1); }
.done .ht-tour { transform: translate(20cqh, 32cqh); transition-delay: .1s; }
.ht-hot { position: relative; flex: none; width: 30cqh; height: 30cqh; box-sizing: border-box; border: max(2px, 3cqh) solid #4F39F6; border-radius: 50%;
    box-shadow: 0 0 0 5cqh rgba(79, 57, 246, .12); }
.ht-hot::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10cqh; height: 10cqh; margin: -5cqh; border-radius: 50%; background: #4F39F6; }
.ht-tip { position: relative; padding: 7cqh 10cqh; border-radius: 7cqh; background: #4F39F6; color: #fff; font: 600 15cqh/1 "Inter", sans-serif; }
.ht-tip::before { content: ""; position: absolute; left: -2.5cqh; top: 50%; width: 6cqh; height: 6cqh; margin-top: -3cqh; border-radius: 1cqh; background: #4F39F6; transform: rotate(45deg); }

/* Doc: numbered steps, the next one gets ticked */
.ht-doc { position: relative; width: 62cqh; height: 80cqh; border-radius: 6cqh; background: #fff; box-shadow: inset 0 0 0 max(1px, 1.5cqh) #E6E3F4, 0 1cqh 4cqh rgba(40, 30, 110, .06); }
.ht-row { position: absolute; left: 10cqh; display: flex; align-items: center; gap: 7cqh; }
.ht-r1 { top: 15cqh; }
.ht-r2 { top: 35cqh; }
.ht-r3 { top: 55cqh; }
.ht-row i { display: grid; place-items: center; flex: none; width: 15cqh; height: 15cqh; box-sizing: border-box; border: max(1px, 2cqh) solid #CFC9EE; border-radius: 50%;
    transition: background .25s ease, border-color .25s ease; }
.ht-row i svg { width: 80%; height: 80%; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s ease; }
.ht-row b { width: 26cqh; height: 4.5cqh; border-radius: 2cqh; background: #E8E5F6; }
.ht-r3 b { width: 19cqh; }
.ht-r1 i, .done .ht-r2 i { background: #4F39F6; border-color: #4F39F6; }
.ht-r1 i svg, .done .ht-r2 i svg { opacity: 1; }

.ht-cur { position: absolute; left: 0; top: 0; z-index: 3; width: max(9px, 21cqh); pointer-events: none;
    transform: translate(var(--tx), var(--ty)); transition: transform .6s cubic-bezier(.45, 0, .25, 1) .15s; }
.ht-agent.rest .ht-cur { transform: translate(var(--rx), var(--ry)); transition: transform .5s cubic-bezier(.3, 0, .25, 1); }
.ht-cur svg { display: block; width: 100%; height: auto; overflow: visible; fill: #4F39F6; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round;
    filter: drop-shadow(0 1px 1.5px rgba(18, 18, 18, .35)); transform-origin: 0 0; }
.ht-agent.press .ht-cur svg { animation: ht-press .3s ease; }
.ht-rip { position: absolute; left: 0; top: 0; z-index: 2; width: 44cqh; height: 44cqh; margin: -22cqh 0 0 -22cqh; border-radius: 50%;
    border: max(1.5px, 3cqh) solid #4F39F6; box-sizing: border-box; opacity: 0; pointer-events: none; transform: translate(var(--tx), var(--ty)); }
.ht-agent.press .ht-rip { animation: ht-rip .55s ease-out; }

/* ---------- Language: the visitor's own flag first, then it flips to the next ---------- */
.ht-flag { width: .86em; }
.ht-lg { display: flex; align-items: center; justify-content: center; height: 100%; }
.ht-fl { position: relative; flex: none; height: calc(100% - .2em); aspect-ratio: 1; }
.ht-fl > * { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px rgba(18, 18, 18, .06);
    transform: rotateY(90deg); transition: transform .26s ease-in; }
.ht-fl > .on { transform: none; transition: transform .3s cubic-bezier(.2, .7, .3, 1) .26s; }
.ht-fl > .out { transform: rotateY(-90deg); }
.ht-fl svg { display: block; width: 100%; height: 100%; }

/* ---------- Status: red dot (recording), a ring that fills (editing), a green tick (ready) ---------- */
.ht-cs { width: .86em; }
.ht-sts { display: grid; align-items: center; height: 100%; }
.ht-s { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .14s ease; font-size: .25em; }
.ht-s.on { opacity: 1; transition: opacity .18s ease .14s; }
.ht-cs-rec, .ht-cs-ring, .ht-cs-ok { flex: none; width: 2.1em; height: 2.1em; }
.ht-cs-rec { position: relative; }
.ht-cs-rec::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -.5em; border-radius: 50%; background: #EF4444;
    box-shadow: 0 0 0 .3em rgba(239, 68, 68, .16); }
.ht-cs-ring circle { fill: none; stroke: #DDD8F6; stroke-width: 2.6; }
.ht-cs-ring .f { stroke: #4F39F6; stroke-linecap: round; stroke-dasharray: 47.2; stroke-dashoffset: 47.2; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ht-cs[data-s="render"] .ht-cs-ring .f { stroke-dashoffset: 0; transition: stroke-dashoffset .9s linear .15s; }
.ht-cs[data-s="ready"] .ht-cs-ring .f { stroke-dashoffset: 0; }
.ht-cs-ok { border-radius: 50%; background: #16A34A; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* The headline drops from 68px to 38px at 900px wide */
@media (max-width: 900px) {
    .ht { height: .98em; vertical-align: -.16em; }
    .ht-agent { width: 1.3em; }
    .ht-flag, .ht-cs { width: .98em; }
    .ht-s { font-size: .29em; }
}

@keyframes ht-press { 40% { transform: scale(.8); } }
@keyframes ht-rip { 0% { opacity: .7; transform: translate(var(--tx), var(--ty)) scale(.2); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); } }