/* #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}

#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 and fades in once playing. */
#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 .25s linear;pointer-events:none}
#interaction .demo-carousel-clip.is-on{opacity:1}

/* Names under the side cards; the centre card names itself on its button. */
#interaction .demo-carousel-name{margin-top:16px;padding-left:4px;color:#faf8f3;font:600 17px/1.3 Archivo,sans-serif;transition:opacity .3s ease}
#interaction .demo-carousel-name span{display:block;margin-top:2px;color:#b9b5ab;font-weight:400;font-size:15px}
#interaction .demo-carousel-card.is-current .demo-carousel-name{opacity:0}

/* "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 and end panel need solid ground over her portrait. */
#interaction .demo-carousel .toda-demo-consent:is(.is-email,.is-ended){padding:24px 22px!important;background:linear-gradient(180deg,rgba(250,248,243,0) 8%,rgba(250,248,243,.92) 34%,var(--paper) 52%)!important}
#interaction .demo-carousel .toda-demo-consent.is-ended .toda-demo-upsell strong{font-size:20px!important}
/* Room under the end panel for the "Talk with …" pill (24px offset + 52px pill + gap). */
#interaction .demo-carousel .toda-demo-consent.is-ended{padding-bottom:96px!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) + 36px)}
}