/* The visualiser demo on the home page. Demo owns this file.
   States on .vdemo:
     (none)     no scripts: before and final after side by side, both messages written out.
     .is-js     scripts on: the "Try it on my kitchen" button and its line show.
     .is-live   the animated loop (not under reduced motion). Layers stack in one frame.
     .is-paused off screen or tab hidden: decorative loops stop. */

.vdemo {
  --vd-teal: var(--c-teal, #0f8f7a);
  --vd-deep: var(--c-teal-deep, #0a5c50);
  --vd-glow: var(--glow, 0 0 0 1px rgba(15, 143, 122, .45), 0 0 14px -2px rgba(15, 143, 122, .45));
  --vd-glow-strong: var(--glow-strong, 0 0 0 1px var(--vd-teal), 0 0 18px -2px var(--vd-teal));
  display: grid; gap: var(--space-6, 2rem); align-items: center;
  margin-block: var(--space-5, 1.5rem) var(--space-6, 2rem);
}

/* The photo frame */
.vdemo__photo {
  margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4, 1rem);
}
.vdemo__layer { position: relative; border-radius: var(--radius-lg, 20px); overflow: hidden; background: var(--c-grey-100, #eef2f0); box-shadow: var(--shadow-lg); }
.vdemo__layer picture, .vdemo__img { display: block; width: 100%; height: 100%; }
.vdemo__img { aspect-ratio: 3 / 2; object-fit: cover; }
.vdemo__layer--doors { display: none; }
.vdemo__badges, .vdemo__live-badges {
  position: absolute; top: .85rem; left: .85rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .4rem; pointer-events: none;
}
.vdemo__word {
  display: inline-block; font-size: .8125rem; font-weight: 700; line-height: 1;
  color: var(--c-ink, #0f1513); background: rgba(255, 255, 255, .92); border-radius: 999px; padding: .4rem .7rem;
  box-shadow: 0 1px 4px rgba(15, 21, 19, .12);
}
.vdemo__shimmer, .vdemo__edge, .vdemo__progress, .vdemo__live-badges { display: none; }

@media (min-width: 600px) {
  .vdemo:not(.is-live) .vdemo__photo { grid-template-columns: 1fr 1fr; }
}

/* The chat panel */
.vdemo__chat {
  position: relative; z-index: 4;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(15, 143, 122, .22); border-radius: 22px;
  box-shadow: 0 2px 6px rgba(15, 21, 19, .06), 0 22px 50px -12px rgba(10, 92, 80, .28);
  padding: .9rem .9rem 1rem;
}
.vdemo__chat-head {
  display: flex; align-items: center; gap: .5rem; padding: 0 .25rem .7rem; margin-bottom: .8rem;
  border-bottom: 1px solid var(--c-grey-100, #eef2f0);
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted, #56615d);
}
.vdemo__chat-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--vd-teal); box-shadow: 0 0 0 4px rgba(15, 143, 122, .16); }
.vdemo__thread { display: grid; gap: .6rem; }

.vdemo__slot { position: relative; display: flex; justify-content: flex-end; }
.vdemo__bubble {
  display: block; max-width: 92%;
  font-size: 1rem; font-weight: 600; line-height: 1.4; color: #fff;
  background: linear-gradient(135deg, var(--vd-deep), var(--vd-teal));
  border-radius: 18px 18px 5px 18px; padding: .65rem .95rem;
  box-shadow: 0 6px 16px -6px rgba(10, 92, 80, .5);
}
.vdemo__bubble--live { display: none; }

.vdemo__status {
  justify-self: start; display: grid; align-items: center;
  font-size: .9375rem; font-weight: 600; line-height: 1.3; color: var(--c-ink-2, #36403d);
  background: var(--c-grey-50, #f6f8f7); border: 1px solid var(--c-grey-100, #eef2f0);
  border-radius: 18px 18px 18px 5px; padding: .5rem .85rem;
}
.vdemo__status > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .45rem; }
.vdemo__status-busy { visibility: hidden; }
.vdemo__status-done { color: var(--vd-deep); }
.vdemo__tick { flex: none; }
.vdemo__dots { display: inline-flex; gap: 3px; }
.vdemo__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--vd-teal); opacity: .35; }

/* The button and its line */
.vdemo__aside { display: none; }
.vdemo.is-js .vdemo__aside { display: grid; gap: var(--space-4, 1rem); justify-items: start; }
.vdemo__line { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--c-ink-2, #36403d); max-width: 34ch; }
.vdemo__btn {
  min-height: 60px; padding: 1rem 1.8rem; font-size: 1.125rem;
  box-shadow: var(--vd-glow);
}
.vdemo__btn::after {
  content: ''; width: .55rem; height: .55rem; margin-left: .2rem;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .18s ease;
}
.vdemo__btn:hover { box-shadow: var(--vd-glow-strong); }
.vdemo__btn:hover::after { transform: translateX(3px) rotate(45deg); }
.vdemo__btn:focus-visible { box-shadow: var(--focus), var(--vd-glow-strong); }
.vdemo__btn[hidden] { display: none; }

/* The live loop: one frame, layers stacked */
.vdemo.is-live .vdemo__photo {
  display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius-lg, 20px); background: var(--c-grey-100, #eef2f0);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(15, 143, 122, .12);
}
.vdemo.is-live .vdemo__layer { position: absolute; inset: 0; border-radius: 0; box-shadow: none; display: block; background: transparent; }
.vdemo.is-live .vdemo__layer--doors,
.vdemo.is-live .vdemo__layer--final { clip-path: inset(0 100% 0 0); }
.vdemo.is-live .vdemo__img { height: 100%; transition: filter .5s ease, transform 1.2s ease; }
.vdemo.is-live .vdemo__badges { display: none; }
.vdemo.is-live .vdemo__live-badges { display: inline-flex; }
.vdemo.is-live .vdemo__word { transition: opacity .25s ease; }
.vdemo.is-live .vdemo__word.is-swap { opacity: 0; }

.vdemo.is-live .vdemo__shimmer {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background:
    linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 45%, rgba(214, 245, 236, .65) 50%, rgba(255, 255, 255, .5) 55%, transparent 70%) 0 0 / 250% 100% no-repeat,
    linear-gradient(rgba(15, 143, 122, .1), rgba(15, 143, 122, .1));
  transition: opacity .4s ease;
}
.vdemo.is-live .vdemo__photo.is-generating .vdemo__shimmer { opacity: 1; animation: vdemo-shimmer 1.3s linear infinite; }
.vdemo.is-live .vdemo__photo.is-generating .vdemo__img { filter: saturate(.75) brightness(1.05) blur(1px); }

.vdemo.is-live .vdemo__edge {
  display: block; position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: 3px; margin-left: -1.5px;
  background: linear-gradient(#fff, #c9f2e6 50%, #fff);
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, .8), 0 0 34px 10px rgba(15, 143, 122, .55);
  opacity: 0; pointer-events: none;
}

.vdemo.is-live .vdemo__progress {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4px;
  background: rgba(255, 255, 255, .45); opacity: 0; transition: opacity .3s ease;
}
.vdemo.is-live .vdemo__photo.is-generating .vdemo__progress { opacity: 1; }
.vdemo__progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--vd-teal), #3fd0b1);
  box-shadow: 0 0 12px rgba(15, 143, 122, .8);
}

/* Live chat: items stay in place (so nothing jumps) and pop in */
.vdemo.is-live .vdemo__ghost { visibility: hidden; }
.vdemo.is-live .vdemo__bubble--live {
  display: block; position: absolute; top: 0; right: 0;
  opacity: 0; transform: translateY(10px) scale(.94); transform-origin: 100% 100%;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.25);
}
.vdemo.is-live .vdemo__bubble--live:empty::before { content: '\200b'; }
.vdemo.is-live .is-shown { opacity: 1; transform: none; }
.vdemo.is-live .vdemo__bubble--live.is-typing::after {
  content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em;
  background: rgba(255, 255, 255, .96); animation: vdemo-caret .8s steps(1) infinite;
}
.vdemo.is-live .vdemo__status {
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 0 100%;
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.25);
}
.vdemo.is-live .vdemo__status.is-shown { opacity: 1; transform: none; }
.vdemo.is-live .vdemo__status-busy { visibility: visible; transition: opacity .25s ease; }
.vdemo.is-live .vdemo__status-done { opacity: 0; transition: opacity .25s ease; }
.vdemo.is-live .vdemo__status.is-done .vdemo__status-busy { opacity: 0; }
.vdemo.is-live .vdemo__status.is-done .vdemo__status-done { opacity: 1; }
.vdemo.is-live .vdemo__dots i { animation: vdemo-dot 1.1s ease-in-out infinite; }
.vdemo.is-live .vdemo__dots i:nth-child(2) { animation-delay: .15s; }
.vdemo.is-live .vdemo__dots i:nth-child(3) { animation-delay: .3s; }
.vdemo.is-live .vdemo__chat-dot { animation: vdemo-pulse 2.4s ease-in-out infinite; }
.vdemo.is-live.is-fading .is-shown { opacity: 0; transition-duration: .5s; }

.vdemo.is-paused *, .vdemo.is-paused *::before, .vdemo.is-paused *::after { animation-play-state: paused; }

@keyframes vdemo-shimmer { from { background-position: 130% 0, 0 0; } to { background-position: -30% 0, 0 0; } }
@keyframes vdemo-caret { 50% { opacity: 0; } }
@keyframes vdemo-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes vdemo-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(15, 143, 122, .16); } 50% { box-shadow: 0 0 0 7px rgba(15, 143, 122, .06); } }

/* Phone: photo, then the chat lifting over its lower edge, then the button */
@media (max-width: 899px) {
  .vdemo.is-live .vdemo__chat { margin: -1.25rem .6rem 0; }
  .vdemo:not(.is-live) .vdemo__chat { margin-top: var(--space-4, 1rem); }
  .vdemo__aside { justify-items: stretch; }
  .vdemo.is-js .vdemo__aside { justify-items: stretch; }
  .vdemo__btn { width: 100%; }
  .vdemo__line { max-width: none; }
}

/* Laptop: the chat sits beside the photo, over its left edge; the button on the right */
@media (min-width: 900px) {
  .vdemo.is-js { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--space-7, 3rem); }
  .vdemo.is-live .vdemo__stage { position: relative; padding-left: clamp(150px, 17vw, 210px); }
  .vdemo.is-live .vdemo__chat {
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: clamp(270px, 25vw, 310px);
  }
  .vdemo:not(.is-live) .vdemo__chat { margin-top: var(--space-5, 1.5rem); max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .vdemo *, .vdemo *::before, .vdemo *::after { animation: none; transition: none; }
}