/* #interaction: dark band with a 3D coverflow of avatars. The live demo
   lives inside the Nina-spooky card. Transforms come from demo-carousel.js. */
html body #main-content #interaction{overflow-x:clip;background:#25231c!important;color:#faf8f3}
html body #main-content #interaction h2{color:#faf8f3!important}
html body #main-content #interaction .toda-proof-grid>div:first-child>span{color:#9db4f2!important}

/* Halloween copy only while Nina-spooky is the centre card. */
#interaction:not(.is-spooky) .hw-on{display:none!important}
#interaction:not(.is-spooky) .hw-off{display:inline!important}
/* Both copies share one grid cell, so the heading keeps the taller one's
   height and the page below does not move when the centre card changes. */
html.has-js[data-halloween] #interaction .demo-swap{display:grid}
html.has-js[data-halloween] #interaction .demo-swap>span{grid-area:1/1;display:block!important}
html.has-js[data-halloween] #interaction:not(.is-spooky) .demo-swap>.hw-on,
html.has-js[data-halloween] #interaction.is-spooky .demo-swap>.hw-off{visibility:hidden}

#interaction .demo-carousel{--w:360px;--h:450px;position:relative;margin-top:16px}
/* The lens: static perspective, never tweened. */
#interaction .demo-carousel-track{position:relative;height:calc(var(--h) + 64px);perspective:1600px;perspective-origin:50% 40%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
#interaction .demo-carousel.is-dragging .demo-carousel-track{cursor:grabbing}
#interaction .demo-carousel-card{
  position:absolute;top:0;left:50%;width:var(--w);margin:0 0 0 calc(var(--w) / -2);
  transform-origin:50% 50%;backface-visibility:hidden;
}
#interaction .demo-carousel-card:focus-visible{outline:none}
#interaction .demo-carousel-card:focus-visible .demo-carousel-media{outline:3px solid #9db4f2;outline-offset:4px}

#interaction .demo-carousel-media{position:relative;width:100%;height:var(--h);overflow:hidden;border-radius:28px;background:#5f6063}
#interaction .demo-carousel-media>img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;pointer-events:none;-webkit-user-drag:none}
/* Depth cue = a dark layer whose opacity JS sets (compositor-only; no blur filter). */
#interaction .demo-carousel-shade{position:absolute;inset:0;z-index:7;background:#14130f;opacity:0;pointer-events:none;will-change:opacity}
/* The centre card's idle clip sits over its poster. It starts while its card
   is still arriving and fades in slowly, so the card lands already playing;
   it fades out quickly when its card leaves. */
#interaction .demo-carousel-clip{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:cover;object-position:50% 20%;opacity:0;transition:opacity .16s linear;pointer-events:none}
#interaction .demo-carousel-clip.is-on{opacity:1;transition:opacity .5s ease-out}

/* Name and role under every card, the centre one included, also during a
   conversation. Fixed height (one line each), so a longer title never moves
   what follows. */
#interaction .demo-carousel-name{height:44px;margin-top:14px;padding-left:4px;overflow:hidden;color:#faf8f3;font:600 17px/1.3 Archivo,sans-serif}
#interaction .demo-carousel-name :is(strong,span){display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#interaction .demo-carousel-name span{margin-top:1px;color:#b9b5ab;font-weight:400;font-size:15px}
/* Without JS the cards stack and the last one shows: only its name. */
html:not(.has-js) #interaction .demo-carousel-card:not(:last-child) .demo-carousel-name{visibility:hidden}

/* "Talk with [name]": one pill, bottom centre. After a conversation the
   restart button takes the same place and look (the start button is hidden). */
#interaction .demo-carousel-talk,
html body #main-content #interaction .demo-carousel #startDemo,
html body #main-content #interaction .demo-carousel .toda-demo-restart{
  position:absolute;z-index:8;left:50%;bottom:24px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;min-height:52px!important;margin:0;padding:12px 24px 12px 20px;
  border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;background:rgba(20,19,16,.66)!important;
  color:#fff!important;white-space:nowrap;text-decoration:none!important;
  font:600 16px/1.3 Archivo,sans-serif!important;cursor:pointer;transition:background .2s ease,opacity .3s ease;
}
#interaction .demo-carousel-talk::before,
#interaction .demo-carousel #startDemo::before,
#interaction .demo-carousel .toda-demo-restart::before{content:"";flex:none;width:18px;height:18px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
#interaction .demo-carousel-talk:hover,
html body #main-content #interaction .demo-carousel #startDemo:hover,
html body #main-content #interaction .demo-carousel .toda-demo-restart:hover{background:rgba(20,19,16,.82)!important}
#interaction .demo-carousel-card:not(.is-current) :is(.demo-carousel-talk,#startDemo,.toda-demo-restart){opacity:0;pointer-events:none}
/* The pill rules above set display; [hidden] must still win (it did not:
   the start button stayed visible, inert, over the end panel and email form). */
html body #main-content #interaction .demo-carousel :is(#startDemo,.toda-demo-restart)[hidden]{display:none!important}
#interaction .demo-carousel-card.has-live .demo-carousel-talk{display:none}

/* The live demo fills the Nina card. Its cover shows her portrait until the
   live avatar is ready; then the cover fades and the avatar shows. */
html body #main-content #interaction .demo-carousel .toda-live-demo{
  position:absolute;inset:0;width:100%;max-width:none;height:100%;min-height:0!important;margin:0;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:hidden;
}
html body #main-content #interaction .demo-carousel .toda-demo-cover{background:var(--demo-poster) 50% 20%/cover no-repeat!important}
/* The live render frames like the square poster: a square as tall as the card,
   centred and cropped at the sides, so poster, clip and live avatar line up.
   (Overrides the inline size the demo page computes for its old layout.) */
#interaction .demo-carousel #avatar,
#interaction .demo-carousel .toda-live-demo[data-demo-state] #avatar{left:50%!important;top:0!important;bottom:auto;width:var(--h)!important;height:var(--h)!important;max-width:none!important;transform:translateX(-50%)}
#interaction .demo-carousel .toda-demo-consent{left:0!important;inset:0;padding:24px 20px!important;justify-content:flex-end;background:none!important}
#interaction .demo-carousel .demo-carousel-intro{display:none}
#interaction .demo-carousel .toda-demo-consent .toda-demo-status:empty{display:none}
/* Email gate needs solid ground over her portrait. */
#interaction .demo-carousel .toda-demo-consent.is-email{padding:24px 22px!important;background:linear-gradient(180deg,rgba(250,248,243,0) 8%,rgba(250,248,243,.92) 34%,var(--paper) 52%)!important}
/* End panel: one short line and one button, low on the card so her face stays
   visible; the ground is solid only behind the text. Room underneath for the
   "Talk with …" pill (24px offset + 52px pill + 12px gap). */
#interaction .demo-carousel .toda-demo-consent.is-ended{padding:24px 16px 88px!important;background:linear-gradient(0deg,var(--paper) 0,var(--paper) 150px,rgba(250,248,243,.9) 190px,rgba(250,248,243,0) 250px)!important}
#interaction .demo-carousel .toda-demo-consent.is-ended:has(.toda-demo-restart[hidden]){padding-bottom:20px!important}
html body #main-content #interaction .demo-carousel .toda-demo-consent.is-ended .toda-demo-upsell strong{max-width:100%;font:600 18px/1.25 Archivo,sans-serif!important;letter-spacing:-.01em;text-wrap:balance}
html body #main-content #interaction .demo-carousel .toda-demo-consent.is-ended .toda-demo-signup{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:10px;padding:10px 20px;white-space:nowrap;font:600 15px/1.3 Archivo,sans-serif!important}
html body #main-content #interaction .demo-carousel .toda-demo-consent.is-ended .toda-demo-status{margin-top:8px;font-size:14px!important;line-height:1.4!important}
#interaction .demo-carousel-language[hidden]{display:none!important}

/* Locked while a conversation runs. */
#interaction .demo-carousel.is-locked .demo-carousel-track{cursor:default}
#interaction .demo-carousel.is-locked .demo-carousel-card:not(.is-current){opacity:.25!important;pointer-events:none}

#interaction .demo-carousel-note{position:absolute;left:50%;bottom:90px;transform:translateX(-50%);z-index:6;width:max-content;max-width:calc(100% - 32px);padding:8px 14px;border-radius:12px;background:var(--paper);color:var(--stone-900);font-size:14px;line-height:1.4;text-align:center}
#interaction .demo-carousel-note[hidden]{display:none}

@media (max-width:700px){
  #interaction .demo-carousel{--w:min(280px,calc(100vw - 96px));--h:calc(var(--w) * 1.25)}
  #interaction .demo-carousel-track{perspective:1100px;height:calc(var(--h) + 60px)}
  #interaction .demo-carousel-name{margin-top:12px}
  /* "Parler avec Spooky Nina" must keep a margin inside a 264px card. */
  #interaction .demo-carousel-talk,
  html body #main-content #interaction .demo-carousel #startDemo,
  html body #main-content #interaction .demo-carousel .toda-demo-restart{gap:8px;padding:12px 18px 12px 16px}
}