/* A107 live thumbnail for the DrivenOS demo (about layouts B, C and D). One hero object, Sarah's enquiry card, is carried
   along a thin light strand through the film's story: enquiry, auto-reply, estimate booked (her phone confirms it), won
   with a new review. Graphite stage, the page's green and amber glows, soft light and shadow, nothing else on stage.
   Fictional business and data, as in the film. The scene is a 2:1 stage that covers the frame; sizes are in cqw of the
   stage. Base styles are the finished frame (reduced motion); the story only animates when motion is allowed, and
   drivenos-v3.js pauses it while it's off screen (.is-paused). */
.v3-live { container-type: size; cursor: pointer; }
.lv { position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 90% at 6% 104%, rgb(var(--glow-green) / .34), rgb(var(--glow-green) / .1) 45%, transparent 75%),
    radial-gradient(50% 80% at 96% -6%, rgb(var(--glow-amber) / .36), rgb(var(--glow-amber) / .1) 45%, transparent 72%),
    radial-gradient(70% 90% at 55% 45%, #17181a, #0b0b0d 75%); }
.lv::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lv__stage { position: absolute; left: 53%; top: 50%; width: max(100cqw, 200cqh); aspect-ratio: 2; translate: -50% -50%; container-type: inline-size;   /* a touch right of centre: in the 16:9 frame (A113) the card keeps a margin on the left */
  font: 400 1cqw/1.4 var(--font-body); color: #16181a; }
.lv__stage > * { position: absolute; }

/* Light: one strand across the stage, and a short link from the card to the phone when the visit is booked */
.lv__light { inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv__light path { fill: none; stroke-linecap: round; }
.lv__strand { stroke: url(#lv-strand); stroke-width: 2.4; }
.lv__link { stroke: url(#lv-link); stroke-width: 2; }
.lv__halo { stroke-width: 10; opacity: .55; filter: url(#lv-blur); }

/* The hero object: Sarah's enquiry */
.lv__card { left: 7cqw; top: 8cqw; z-index: 2; width: 29.5cqw; padding: 1.5cqw 1.6cqw 1.6cqw; border-radius: 1.4cqw; background: linear-gradient(#fbfcfa, #eff1ed);
  box-shadow: 0 .1cqw 0 rgb(255 255 255 / .9) inset, 0 3.2cqw 6cqw -1.2cqw rgb(0 0 0 / .75), 0 0 0 .08cqw rgb(255 255 255 / .2); }
.lv__card header { display: grid; grid-template-columns: 3cqw 1fr auto; align-items: center; gap: .9cqw; }
.lv__card header > i { display: grid; place-items: center; width: 3cqw; height: 3cqw; border-radius: 50%; background: #dcebe2; color: #2f6f4e; font: 600 1cqw/1 var(--font-body); font-style: normal; }
.lv__card header b { display: block; font: 400 1.45cqw/1.1 var(--font-display); letter-spacing: -.02em; }
.lv__card header small { display: block; margin-top: .25cqw; color: #6b7175; font-size: .85cqw; }
.lv__pill { position: relative; display: grid; justify-items: end; }
.lv__pill em { grid-area: 1 / 1; padding: .45cqw .8cqw; border-radius: 99px; font: 600 .78cqw/1 var(--font-body); font-style: normal; white-space: nowrap; }
.lv__pill em:nth-child(1) { background: #e8eef9; color: #3b5b9a; opacity: 0; }
.lv__pill em:nth-child(2) { background: #fdf1e1; color: #a76212; opacity: 0; }
.lv__pill em:nth-child(3) { background: #dcebe2; color: #2f6f4e; }
.lv__card p { margin-top: 1.1cqw; font-size: 1.05cqw; line-height: 1.45; }
.lv__booked { display: flex; align-items: center; gap: .7cqw; margin-top: 1.2cqw; padding: .8cqw 1cqw; border-radius: .8cqw; background: #3e8a63; color: #fff;
  font-size: .95cqw; font-weight: 600; transform-origin: left center; }
.lv__booked::before { content: ''; width: .9cqw; height: .5cqw; margin: -.2cqw .1cqw 0; border: solid currentColor; border-width: 0 0 .18cqw .18cqw; rotate: -45deg; }

/* The auto-reply, hanging off the card */
.lv__reply { left: 12cqw; top: 26.5cqw; z-index: 2; width: 23cqw; padding: 1cqw 1.2cqw; border-radius: 1.2cqw 1.2cqw 1.2cqw .3cqw; background: #2f6f4e; color: #f1f7f3;
  font-size: .98cqw; line-height: 1.45; box-shadow: 0 2cqw 4cqw -1cqw rgb(0 0 0 / .7); }
.lv__reply small { display: block; margin-top: .5cqw; color: #b9d8c6; font-size: .78cqw; }

/* The warm accent: a new review landing on the card */
.lv__review { left: 25cqw; top: 5.2cqw; z-index: 3; display: flex; align-items: center; gap: .7cqw; padding: .6cqw 1cqw .6cqw .8cqw; border-radius: 99px;
  background: #121315; color: #f4f4f0; font-size: .85cqw; font-weight: 500; white-space: nowrap;
  box-shadow: 0 0 0 .08cqw rgb(var(--glow-amber) / .45), 0 1.6cqw 3cqw -.8cqw rgb(0 0 0 / .8); }
.lv__review b { color: rgb(var(--glow-amber)); font-size: .95cqw; letter-spacing: .08em; }

/* The customer's side: her phone confirms the booking */
.lv__phone { left: 65cqw; top: 6cqw; z-index: 2; width: 16.5cqw; height: 34.5cqw; padding: .7cqw; border-radius: 3.2cqw; background: #0e0f10; rotate: 3deg;
  box-shadow: 0 0 0 .12cqw #2c2e31 inset, 0 3.5cqw 7cqw -1cqw rgb(0 0 0 / .8); }
.lv__screen { position: relative; height: 100%; overflow: hidden; padding: 3.2cqw 1.1cqw 1cqw; border-radius: 2.6cqw; background: #f4f5f2; }
.lv__screen::before { content: ''; position: absolute; top: .8cqw; left: 50%; width: 5.6cqw; height: 1.5cqw; translate: -50% 0; border-radius: 99px; background: #0e0f10; }
.lv__screen header { text-align: center; }
.lv__screen header i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; margin: 0 auto .4cqw; border-radius: 50%; background: #dcebe2; color: #2f6f4e; font: 600 .8cqw/1 var(--font-body); font-style: normal; }
.lv__screen header b { font-size: .9cqw; font-weight: 600; }
.lv__msg { margin-top: 1cqw; padding: .8cqw .9cqw; border-radius: 1cqw 1cqw 1cqw .25cqw; background: #e4e7e3; font-size: .82cqw; line-height: 1.4; }
.lv__slot { margin-top: .8cqw; padding: .9cqw; border-radius: 1cqw; background: #fff; box-shadow: 0 .3cqw 1cqw rgb(0 0 0 / .08); font-size: .8cqw; }
.lv__slot b { display: block; font: 400 1.15cqw/1.15 var(--font-display); }
.lv__slot small { display: block; margin-top: .2cqw; color: #6b7175; font-size: .72cqw; }
.lv__slot u { display: block; margin-top: .7cqw; padding: .55cqw; border-radius: .6cqw; background: #3e8a63; color: #fff; font-weight: 600; text-align: center; text-decoration: none; }

/* Open the film: the whole frame is the link; the visible cue sits bottom-left */
.lv__open { position: absolute; inset: 0; z-index: 6; }
.lv__watch { position: absolute; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); display: inline-flex; align-items: center; gap: 12px;
  padding: 6px 20px 6px 6px; border-radius: 99px; background: rgb(12 12 14 / .72); color: #fff; font: 600 14px/1 var(--font-body);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgb(255 255 255 / .1); transition: background-color .3s; }
.lv__dot { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--pop); color: var(--pop-ink); transition: transform .4s var(--ease); }
.lv__dot svg { width: 36%; margin-left: 8%; fill: currentColor; }
.lv__open:hover .lv__watch, .lv__open:focus-visible .lv__watch { background: rgb(12 12 14 / .9); }
.lv__open:hover .lv__dot, .lv__open:focus-visible .lv__dot { transform: scale(1.1); }
.lv__open:focus-visible { outline: 2px solid var(--pop); outline-offset: -4px; border-radius: 28px; }
@media (max-width: 600px) {   /* the small frame keeps just the play dot; the link's label still names it */
  .lv__watch { gap: 0; padding: 4px; font-size: 0; }
  .lv__dot { width: 34px; height: 34px; }
}

/* Until the demo film is approved (FILM_APPROVED in content/drivenos_page.py): the same cue, not a link, and the words stay on phones */
.lv__open--soon { pointer-events: none; }
@media (max-width: 600px) { .lv__open--soon .lv__watch { gap: 8px; padding: 4px 14px 4px 4px; font-size: 13px; } }

/* The story, 14 s: card arrives on the strand, the auto-reply, booked (link draws to the phone), won with a review */
@media (prefers-reduced-motion: no-preference) {
  .lv { --lv-t: 14s; }
  .lv__strand, .lv__halo--strand { stroke-dasharray: 1 1; animation: lv-strand var(--lv-t) cubic-bezier(.645, .045, .355, 1) infinite both; }
  .lv__link, .lv__halo--link { stroke-dasharray: 1 1; animation: lv-link var(--lv-t) cubic-bezier(.645, .045, .355, 1) infinite both; }
  .lv__card { animation: lv-card var(--lv-t) cubic-bezier(.215, .61, .355, 1) infinite both; }
  .lv__reply { animation: lv-reply var(--lv-t) cubic-bezier(.215, .61, .355, 1) infinite both; }
  .lv__booked { animation: lv-booked var(--lv-t) cubic-bezier(.215, .61, .355, 1) infinite both; }
  .lv__phone { animation: lv-phone var(--lv-t) cubic-bezier(.215, .61, .355, 1) infinite both; }
  .lv__ask { animation: lv-ask var(--lv-t) cubic-bezier(.215, .61, .355, 1) infinite both; }
  .lv__review { animation: lv-review var(--lv-t) cubic-bezier(.34, 1.4, .64, 1) infinite both; }
  .lv__pill em:nth-child(1) { animation: lv-s1 var(--lv-t) linear infinite both; }
  .lv__pill em:nth-child(2) { animation: lv-s2 var(--lv-t) linear infinite both; }
  .lv__pill em:nth-child(3) { animation: lv-s3 var(--lv-t) linear infinite both; }
  .v3-live.is-paused .lv * { animation-play-state: paused; }
}
@keyframes lv-strand { 0% { stroke-dashoffset: 1; } 14% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes lv-link { 0%, 37% { stroke-dashoffset: 1; } 45% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: -1; } }
@keyframes lv-card { 0%, 5% { opacity: 0; transform: translate(-5cqw, 1.5cqw); } 14% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-1cqw); } }
@keyframes lv-reply { 0%, 18% { opacity: 0; transform: translateY(-1.4cqw) scale(.96); } 25% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lv-booked { 0%, 33% { opacity: 0; transform: scaleX(.4); } 39% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lv-phone { 0%, 39% { opacity: 0; transform: translateY(6cqw); } 48% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(1.5cqw); } }
@keyframes lv-ask { 0%, 57% { opacity: 0; transform: translateY(1cqw); } 63% { opacity: 1; transform: none; } 100% { opacity: 1; transform: none; } }
@keyframes lv-review { 0%, 60% { opacity: 0; transform: translateY(1.2cqw) scale(.85); } 66% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes lv-s1 { 0%, 34% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes lv-s2 { 0%, 34% { opacity: 0; } 36%, 58% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes lv-s3 { 0%, 58% { opacity: 0; } 60%, 100% { opacity: 1; } }