/* ============================================================================
   Hero scene — the animated Capsule editor on the homepage.

   Lifted from the custom embed on the Webflow homepage: this is Capsule's own
   component, written by hand rather than built in Webflow, so it moves across
   intact instead of being reinterpreted. Every class is vs-* prefixed and
   nothing here leaks into the rest of the page.

   Self-contained: no GSAP, no jQuery, no Webflow interactions runtime. Paired
   with /blog/home-scene.js and the markup in blog/assets/home-scene.html.

   The changes from the original are marked "CHANGED" below:

   1. The scene paints no background at all. On the dark site it carried its
      own: a near-black fill, a three-radial glow stack behind the timeline,
      and a fade dissolving its top and bottom into the page. All of that is
      gone, because the page now puts the Video Skills hero gradient behind the
      whole hero and the scene is composited straight onto it. That gradient is
      also what the scene's near-white outlines and frosted panels read
      against, which is why every element colour is left exactly as it was.
   2. No outline on the prompt box.
   3. A height ladder, so the scene can run edge to edge at any width without
      going letterbox-thin on a wide display or tower on a narrow one. The
      original only had one step, at 640px.

   --vs-bg and --vs-bg-rgb are kept, still pointing at the page background:
   nothing paints with them now, but they're what any future fade would need,
   and the channels form matters because `transparent` is not a transparent
   version of a colour — it computes to transparent BLACK, which greys the
   middle of a ramp on a light background.
   ============================================================================ */

:root {
--vs-bg-rgb:  244 244 242;              /* CHANGED — was 8 8 8 */
--vs-bg:      rgb(var(--vs-bg-rgb));    /* the page background, var(--bg) */
--vs-accent:  #c3ff51;
--vs-blue:    #2d67f8;
--vs-ink:     #0f0f0f;
--vs-frost:   rgba(245,245,245,0.62);
--vs-white:   #f5f5f5;
}
.vs-scene * { box-sizing: border-box; }
.vs-scene {
position: relative;
width: 100%;
height: 744px;
min-height: 744px;
overflow: hidden;
/* CHANGED — transparent. The scene is drawn ON the hero gradient the page puts
   behind it, so it must not paint a field of its own. */
background: transparent;
/* CHANGED — the scene sets its own alignment. On the dark site it sat in a
   left-aligned page and never had to; the homepage hero centres its copy, and
   the prompt text was quietly inheriting that. */
text-align: left;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
isolation: isolate;
}
/* CHANGED — the original faded the scene's top and bottom out to the dark
   page. There's no edge to soften now: the scene is transparent and the hero
   gradient behind it runs the full height and does its own falloff. */
.vs-bg {
position: absolute;
inset: -10%;
z-index: 0;
/* CHANGED — no wash of its own. The original painted a three-radial stack here
   (a blue and a green over a vignette darkening to black); the atmosphere now
   comes from the hero gradient the page sits behind the whole section, so this
   element paints nothing and only carries the slow drift the scene animates
   its other layers against. */
background: none;
animation: vs-glow-drift 18s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes vs-glow-drift {
0%   { transform: translate3d(-2%, 0, 0) scale(1.02); }
100% { transform: translate3d( 3%, -1.5%, 0) scale(1.08); }
}
.vs-timeline {
position: absolute;
left: 50%;
top: 50%;
width: calc(100% / var(--vs-s, 1));
height: 420px;
transform: translate(-50%, -50%) scale(var(--vs-s, 1));
z-index: 1;
opacity: 0.9;
filter: blur(3px);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.vs-scroller {
position: absolute;
top: 0;
height: 100%;
display: flex;
animation: vs-scroll 56.5s linear infinite;
will-change: transform;
}
@keyframes vs-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.vs-track {
position: relative;
height: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 0 4px;
flex: 0 0 auto;
}
.vs-clip {
position: relative;
height: 136px;
border: 2px solid rgba(245,245,245,0.55);
border-radius: 48px;
overflow: hidden;
flex: 0 0 auto;
background: rgba(245,245,245,0.02);
}
.vs-clip .vs-blob {
position: absolute;
inset: -2px 42% -2px -2px;
filter: blur(51px);
border-radius: 52.7px;
opacity: 0.8;
background: radial-gradient(50% 50% at 50% 50%,
#c3ff51 0%, #9ed97b 25%, #78b3a5 50%, #538dce 75%, #2d67f8 100%);
}
.vs-clip.vs-empty { border-color: rgba(245,245,245,0.28); }
.vs-waveform {
position: absolute;
display: flex;
align-items: center;
gap: 12.333px;
height: 74px;
filter: blur(2px);
z-index: 2;
}
.vs-bar {
width: 6.167px;
border-radius: 3px;
background: var(--vs-accent);
animation: vs-bar-pulse 1.6s ease-in-out infinite;
}
@keyframes vs-bar-pulse {
0%, 100% { transform: scaleY(1);    opacity: 0.9; }
50%      { transform: scaleY(0.55); opacity: 0.7; }
}
.vs-chip {
position: absolute;
width: 40px; height: 40px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
background: rgba(245,245,245,0.6);
z-index: 3;
}
.vs-chip svg { width: 20px; height: 20px; display: block; }
.vs-i { width: 20px; height: 20px; }
.vs-chip.vs-brand { width: 56px; height: 56px; border-radius: 18px; background: none; backdrop-filter: none; }
.vs-chip.vs-brand.vs-ae   { background: #00005b; }
.vs-chip.vs-brand.vs-figma{ background: var(--vs-white); border-radius: 29.35px; width: 88px; height: 88px; }
.vs-chip.vs-brand svg { width: 28px; height: 40px; }
.vs-chip.vs-brand.vs-figma svg { width: 39.16px; height: 58.74px; }
.vs-ds {
position: absolute;
width: 72px; height: 72px;
border-radius: 20px;
background: #0f0f0f;
overflow: hidden;
z-index: 3;
}
.vs-ds > svg {
position: absolute;
left: 13.5px; top: 12.5px;
width: 44.09px; height: 48px;
display: block;
}
.vs-aiscript {
position: absolute;
display: flex; align-items: center;
height: 40px;
padding: 10px 15px;
border-radius: 15px;
background: rgba(245,245,245,0.6);
backdrop-filter: blur(8.5px);
-webkit-backdrop-filter: blur(8.5px);
overflow: hidden;
z-index: 3;
}
.vs-aiscript span {
font-size: 12.5px;
line-height: 17.5px;
letter-spacing: -0.125px;
color: var(--vs-ink);
opacity: 0.6;
white-space: nowrap;
}
@keyframes vs-chip-bob {
0%,100% { transform: translateY(0); }
50%     { transform: translateY(-8px); }
}
.vs-ruler {
position: absolute;
left: 0; right: 0;
top: 70px;
height: 24px;
overflow: hidden;
z-index: -1;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.vs-ruler-scroller {
position: absolute;
top: 0; height: 100%;
display: flex;
animation: vs-scroll 56.5s linear infinite;
will-change: transform;
}
.vs-ruler-track {
display: flex;
align-items: flex-start;
gap: 264.125px;
padding: 0 132.0625px;
flex: 0 0 auto;
}
.vs-tick {
width: 37px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
opacity: 0.5;
font-family: "Matter Mono", "Matter", ui-monospace, "SF Mono", Menlo, monospace;
font-size: 12px;
line-height: 1;
color: var(--vs-white);
text-transform: uppercase;
flex: 0 0 auto;
}
.vs-tick .vs-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vs-white); }
.vs-scrubber {
position: absolute;
top: 50%;
left: 16%;
height: 210px;
width: 2px;
transform: translate(-50%, -50%);
background: var(--vs-accent);
z-index: 3;
}
.vs-scrubber::before {
content: "";
position: absolute;
top: -9px; left: 50%;
width: 0; height: 0;
transform: translateX(-50%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 11px solid var(--vs-accent);
filter: drop-shadow(0 0 6px rgba(195,255,81,0.7));
}
.vs-stage {
position: absolute;
inset: 0;
z-index: 3;
transform: scale(var(--vs-s, 1));
transform-origin: center center;
pointer-events: none;
}
.vs-burst {
position: absolute;
top: 50%; left: 50%;
width: 760px; height: 360px;
transform: translate(-50%, -50%) scale(0.5);
border-radius: 9999px;
filter: blur(52px);
opacity: 0;
z-index: 3;
pointer-events: none;
}
.vs-burst.vrbo {
background: radial-gradient(closest-side,
rgba(182,248,104,1) 0%, rgba(104,204,156,0.85) 40%, rgba(66,126,252,0.82) 72%, rgba(66,126,252,0) 100%);
}
.vs-burst.carta {
background: radial-gradient(closest-side,
rgba(126,244,168,1) 0%, rgba(244,120,182,0.82) 44%, rgba(84,132,252,0.82) 78%, rgba(84,132,252,0) 100%);
}
.vs-burst.servicenow {
background: radial-gradient(closest-side,
rgba(98,244,184,1) 0%, rgba(44,150,160,0.8) 46%, rgba(72,122,252,0.86) 76%, rgba(72,122,252,0) 100%);
}
.vs-burst.vs-fire { animation: vs-burst-anim 0.6s cubic-bezier(.25,.6,.3,1); }
@keyframes vs-burst-anim {
0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
.vs-prompt {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
width: 652px;
/* CHANGED — no outline on the prompt box. The frosted fill and the glow behind
   it are what give it its edge; the white hairline was there to lift it off
   near-black and just draws a hard line on the wash. */
border: 1.8px solid transparent;
border-radius: 44px;
background: var(--vs-frost);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 0 114px 0 rgba(45,103,248,0.22);
overflow: visible;
transition: border-color .3s ease, box-shadow .3s ease,
transform .26s cubic-bezier(.34,1.5,.5,1), filter .24s ease, opacity .24s ease;
}
.vs-prompt.vs-dragover {
/* CHANGED — 40%. Full-strength blue was too loud a frame for the moment the
   thumbnails drop in. */
border-color: rgba(45,103,248,0.4);
box-shadow: 0 0 0 3px rgba(45,103,248,0.28), 0 0 80px 0 rgba(45,103,248,0.4);
}
.vs-prompt.vs-dragover .vs-typeline,
.vs-prompt.vs-dragover .vs-controls { opacity: 0.5; }
.vs-prompt.vs-shrink {
transform: translate(-50%, -50%) scale(0.06);
filter: blur(14px);
opacity: 0;
transition: transform .3s cubic-bezier(.5,0,.75,0), filter .3s ease, opacity .3s ease;
}
.vs-prompt.vs-clearing .vs-prompt-body,
.vs-prompt.vs-clearing .vs-controls,
.vs-prompt.vs-clearing .vs-sn {
opacity: 0;
transition: opacity .18s ease;
}
.vs-prompt.vs-pop { animation: vs-prompt-pop .55s cubic-bezier(.3,.7,.3,1); }
@keyframes vs-prompt-pop {
0%   { transform: translate(-50%,-50%) scale(1);     }
35%  { transform: translate(-50%,-50%) scale(0.955); }
70%  { transform: translate(-50%,-50%) scale(1.02);  }
100% { transform: translate(-50%,-50%) scale(1);     }
}
.vs-prompt-body {
display: flex;
flex-direction: column;
padding: 24px;
}
.vs-thumbs-wrap {
max-height: 0;
margin-bottom: 0;
overflow: hidden;
transition: max-height .38s cubic-bezier(.2,.85,.3,1),
margin-bottom .38s cubic-bezier(.2,.85,.3,1);
}
.vs-thumbs-wrap.vs-open { max-height: 76px; margin-bottom: 16px; }
.vs-thumbs { display: flex; gap: 11px; }
.vs-thumb {
width: 130px; height: 72px;
border-radius: 16px;
background-size: cover;
background-position: center;
flex: 0 0 auto;
background-image: var(--img-l1);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
opacity: 0;
transition: opacity .18s ease;
}
.vs-thumb.vs-in { opacity: 1; }
.vs-thumb:nth-child(2) { background-image: var(--img-l2); }
.vs-thumb:nth-child(3) { background-image: var(--img-l3); }
.vs-drag {
position: absolute;
left: 24px; top: 24px;
z-index: 6;
pointer-events: none;
opacity: 0;
transform: translateX(430px);
transition: transform .82s cubic-bezier(.25,1,.5,1), opacity .3s ease;
}
.vs-drag-y {
position: relative;
transform: translateY(240px) scale(0.92);
transition: transform .82s cubic-bezier(.55,0,.78,.35);
}
.vs-drag.vs-drag-in            { opacity: 1; transform: translateX(0); }
.vs-drag.vs-drag-in .vs-drag-y { transform: translateY(0) scale(1); }
.vs-drag.vs-drag-drop          { opacity: 0; transition: opacity .2s ease; }
.vs-drag-stack { position: relative; width: 130px; height: 72px; }
.vs-drag-thumb {
position: absolute; inset: 0;
border-radius: 16px;
background-size: cover;
background-position: center;
box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.35);
transition: transform .42s cubic-bezier(.2,.85,.3,1), box-shadow .3s ease;
}
.vs-drag.vs-drag-spread .vs-drag-thumb { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.vs-drag-thumb:nth-child(1) {
transform: rotate(-8deg) translate(-6px, 4px);
background-image: var(--img-l1);
}
.vs-drag-thumb:nth-child(2) {
transform: rotate(-2deg);
background-image: var(--img-l2);
}
.vs-drag-thumb:nth-child(3) {
transform: rotate(6deg) translate(7px, -3px);
background-image: var(--img-l3);
}
.vs-drag.vs-drag-spread .vs-drag-thumb:nth-child(1) { transform: translateX(0)     rotate(0deg); }
.vs-drag.vs-drag-spread .vs-drag-thumb:nth-child(2) { transform: translateX(141px) rotate(0deg); }
.vs-drag.vs-drag-spread .vs-drag-thumb:nth-child(3) { transform: translateX(282px) rotate(0deg); }
.vs-cursor {
position: absolute;
right: -16px; bottom: -18px;
width: 22px; height: 22px;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
transition: opacity .18s ease;
}
.vs-drag.vs-drag-spread .vs-cursor { opacity: 0; }
.vs-typeline {
position: relative;
height: 32px;
overflow: hidden;
font-size: 24px;
line-height: 32px;
color: var(--vs-ink);
transition: opacity .3s ease, height .32s cubic-bezier(.3,.8,.3,1);
}
.vs-typed { white-space: pre-wrap; }
.vs-caret {
display: inline-block;
width: 2px; height: 26px;
margin-left: 1px;
vertical-align: -5px;
background: var(--vs-ink);
opacity: 0;
}
.vs-typeline.vs-typing .vs-caret { opacity: 0.4; animation: vs-blink 1s step-end infinite; }
@keyframes vs-blink { 0%,100% { opacity: 0.4; } 50% { opacity: 0; } }
.vs-placeholder {
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
white-space: nowrap;
color: var(--vs-ink);
opacity: 0;
transition: opacity .4s ease;
pointer-events: none;
}
.vs-typeline.vs-ready  .vs-placeholder { opacity: 0.5; }
.vs-typeline.vs-typing .vs-placeholder { opacity: 0; }
.vs-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px;
transition: opacity .3s ease;
}
.vs-appear {
opacity: 0;
transform: translateY(8px) scale(0.92);
transition: opacity .3s ease, transform .34s cubic-bezier(.2,.8,.3,1);
}
.vs-appear.vs-in { opacity: 1; transform: translateY(0) scale(1); }
.vs-controls-left { display: flex; align-items: center; gap: 10px; }
.vs-btn {
display: flex; align-items: center; justify-content: center;
height: 57px;
border-radius: 1296px;
border: 1.8px solid var(--vs-white);
background: rgba(245,245,245,0.8);
flex: 0 0 auto;
}
.vs-btn.vs-circle { width: 57px; }
.vs-btn.vs-pill  { gap: 14px; padding: 0 21px; }
.vs-btn.vs-brand-btn { padding: 0 20px; }
.vs-brand-logo { height: 30px; width: auto; display: block; }
.vs-skill-icon, .vs-skill-chev { display: none; align-items: center; }
.vs-btn.vs-pill.vs-has-icon .vs-skill-icon { display: inline-flex; }
.vs-btn.vs-pill.vs-has-chev .vs-skill-chev { display: inline-flex; }
.vs-skill-icon img { height: 18px; width: auto; display: block; }
.vs-skill-chev svg { width: 12px; height: 7px; display: block; }
.vs-skill-label { color: var(--vs-blue); font-size: 18px; white-space: nowrap; }
.vs-btn svg { display: block; }
.vs-plus svg { width: 16px; height: 16px; }
.vs-chevron svg { width: 7px; height: 13px; }
.vs-send {
width: 57px; height: 57px;
border-radius: 1296px;
background: var(--vs-blue);
display: flex; align-items: center; justify-content: center;
flex: 0 0 auto;
}
.vs-send svg { width: 16px; height: 16px; }
.vs-send.vs-pulse { animation: vs-send-pulse 0.6s cubic-bezier(.3,.7,.3,1); }
@keyframes vs-send-pulse {
0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(45,103,248,0.55); }
25%  { transform: scale(0.84); box-shadow: 0 0 0 0 rgba(45,103,248,0.55); }
55%  { transform: scale(1.22); box-shadow: 0 0 0 12px rgba(45,103,248,0.28); }
100% { transform: scale(1);    box-shadow: 0 0 0 28px rgba(45,103,248,0); }
}
.vs-sn { display: none; flex-direction: row; align-items: center; gap: 16px; padding: 24px; }
.vs-prompt.vs-sn-mode .vs-prompt-body,
.vs-prompt.vs-sn-mode .vs-controls,
.vs-prompt.vs-sn-mode .vs-drag { display: none; }
.vs-prompt.vs-sn-mode .vs-sn { display: flex; }
.vs-prompt.vs-sn-mode { width: 706px; }
.vs-sn-thumb {
width: 166px; height: 166px;
border-radius: 16px;
background: var(--img-sn) center/cover no-repeat;
flex: 0 0 auto;
opacity: 0;
transform: scale(0.94);
transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.vs-sn-thumb.vs-in { opacity: 1; transform: scale(1); }
.vs-sn-feed {
flex: 1 1 auto;
min-width: 0;
height: 166px;
overflow: hidden;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 46px, #000 120px, transparent 166px);
mask-image: linear-gradient(to bottom, transparent 0, #000 46px, #000 120px, transparent 166px);
}
.vs-sn-list { display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.3,.8,.3,1); }
.vs-sn-row { height: 42px; display: flex; align-items: center; gap: 8px; }
.vs-sn-icon { width: 32px; height: 32px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.vs-sn-icon img { height: 22px; width: auto; display: block; }
.vs-sn-text {
font-size: 24px; line-height: 32px; white-space: nowrap;
color: #2d67f8;
}
.vs-sn-row.vs-current .vs-sn-text {
color: transparent;
background-image: linear-gradient(100deg,
#2d67f8 0%, #2d67f8 43%, #93b2fd 50%, #2d67f8 57%, #2d67f8 100%);
background-size: 220% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
animation: vs-shimmer 2s linear infinite;
}
@keyframes vs-shimmer {
0%   { background-position: 120% 0; }
100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
.vs-bg, .vs-scroller, .vs-bar, .vs-chip, .vs-sn-text { animation: none !important; }
}
/* CHANGED — a height ladder rather than the original's single 640px step.
   The scene runs edge to edge now, so its height has to come down as the
   viewport narrows or it turns into a tall dark column on a phone; and the
   full-bleed width means the 744px default only reads as intended on a wide
   display. The scene's own script handles the CONTENT scale (--vs-s, keyed off
   window width in home-scene.js) — this is only the box it plays inside. */
@media (max-width: 1399px) {
.vs-scene { height: 680px; min-height: 680px; }
}
@media (max-width: 1199px) {
.vs-scene { height: 620px; min-height: 620px; }
}
@media (max-width: 991px) {
.vs-scene { height: 560px; min-height: 560px; }
}
/* Below 768 the box tracks the CONTENT rather than stepping down on its own.
   The artwork is a fixed 420px design — the timeline strip — scaled by --vs-s,
   which home-scene.js keys off window width. A fixed box height meant the box
   stayed put while the artwork shrank with the viewport, so at 375 a 204px
   strip sat in a 440px box with 113px of dead space above and below it.
   56px is the clearance left around the strip; everything in the scene is
   centre-anchored, so the artwork itself is untouched by the box height.
   The `, 1` fallback holds roughly the old height if the script hasn't set the
   scale yet. */
@media (max-width: 767px) {
.vs-scene {
height: calc(420px * var(--vs-s, 1) + 56px);
min-height: 0;
}
}