/* The product tour's motion. A card is static until the page posts "pz-tour-play" (tour.js adds body.play), then
   it builds itself up: the copy, the diagram, the wires drawing in, the app screen filling with messages. Without
   .play everything sits in its final place, so a card never shows half-built. */

@keyframes pz-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pz-left { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes pz-pop { 0% { opacity: 0; transform: scale(.86); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes pz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pz-draw { to { stroke-dashoffset: 0; } }
@keyframes pz-grow { from { width: 0; } }
@keyframes pz-flash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 4px rgba(250, 204, 21, .55); } }
@keyframes pz-ping { 0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .7); } 100% { box-shadow: 0 0 0 16px rgba(249, 115, 22, 0); } }
@keyframes pz-wave { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@keyframes pz-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pz-glow { 0%, 100% { box-shadow: 0 0 0 10px rgba(96, 165, 250, .12), 0 0 60px rgba(96, 165, 250, .55); } 50% { box-shadow: 0 0 0 16px rgba(96, 165, 250, .18), 0 0 90px rgba(96, 165, 250, .8); } }

body.play .copy > * { animation: pz-rise .6s ease-out both; }
body.play .copy > *:nth-child(2) { animation-delay: .08s; }
body.play .copy > *:nth-child(3) { animation-delay: .16s; }
body.play .copy > *:nth-child(4) { animation-delay: .24s; }

/* Wires (tour.js gives every path its length as --len) */
body.play svg.wires path { stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000); animation: pz-draw 1.1s ease-in-out .9s forwards; }
body.play svg.wires circle { animation: pz-fade .4s ease-out 1.6s both; }

/* Chat screens: the messages arrive one after another */
body.play .msgs > * { animation: pz-rise .5s ease-out both; }
body.play .msgs > *:nth-child(1) { animation-delay: 1.0s; }
body.play .msgs > *:nth-child(2) { animation-delay: 1.6s; }
body.play .msgs > *:nth-child(3) { animation-delay: 2.3s; }
body.play .msgs > *:nth-child(4) { animation-delay: 3.0s; }
body.play .msgs > *:nth-child(5) { animation-delay: 3.7s; }
body.play .msgs > *:nth-child(6) { animation-delay: 4.4s; }
body.play .msgs > *:nth-child(7) { animation-delay: 5.1s; }
body.play .msgs > *:nth-child(8) { animation-delay: 5.8s; }
body.play .msgs > *:nth-child(9) { animation-delay: 6.5s; }
.wave i { transform-origin: center; }
body.play .wave i { animation: pz-wave .9s ease-in-out infinite; }
body.play .wave i:nth-child(3n) { animation-delay: .15s; }
body.play .wave i:nth-child(3n+1) { animation-delay: .3s; }

/* 01 — channels flow into Ava, conversations land in the inbox */
body.play .channels .chip { animation: pz-left .5s ease-out both; }
body.play .channels .chip:nth-child(1) { animation-delay: .3s; }
body.play .channels .chip:nth-child(2) { animation-delay: .4s; }
body.play .channels .chip:nth-child(3) { animation-delay: .5s; }
body.play .channels .chip:nth-child(4) { animation-delay: .6s; }
body.play .channels .chip:nth-child(5) { animation-delay: .7s; }
body.play .channels .chip:nth-child(6) { animation-delay: .8s; }
body.play .persona { animation: pz-pop .6s ease-out .7s both; }
body.play .persona .ring { animation: pz-glow 2.4s ease-in-out 1.4s infinite; }
body.play .inbox .row { animation: pz-rise .5s ease-out both; }
body.play .inbox .row:nth-child(3) { animation-delay: 1.6s; }
body.play .inbox .row:nth-child(4) { animation-delay: 1.9s; }
body.play .inbox .row:nth-child(5) { animation-delay: 2.2s; }
body.play .inbox .row:nth-child(6) { animation-delay: 2.5s; }
body.play .inbox .row:nth-child(7) { animation-delay: 2.8s; }
body.play .inbox .row:nth-child(8) { animation-delay: 3.1s; }

/* 02 — how they ask, the product card blown up, what each part of it is */
body.play .modes span { animation: pz-pop .45s ease-out both; }
body.play .modes span:nth-child(1) { animation-delay: .35s; }
body.play .modes span:nth-child(2) { animation-delay: .45s; }
body.play .modes span:nth-child(3) { animation-delay: .55s; }
body.play .big { animation: pz-pop .6s ease-out 4.2s both; }
body.play .note { animation: pz-left .5s ease-out both; }
body.play #n-img { animation-delay: 4.5s; }
body.play #n-attr { animation-delay: 4.7s; }
body.play #n-price { animation-delay: 4.9s; }
body.play #n-cart { animation-delay: 5.1s; }
body.play .row .pc { animation: pz-pop .45s ease-out both; }
body.play .row .pc:nth-child(1) { animation-delay: 3.15s; }
body.play .row .pc:nth-child(2) { animation-delay: 3.3s; }
body.play .row .pc:nth-child(3) { animation-delay: 3.45s; }

/* 03 — Ava answers, a chat is flagged, the team joins */
body.play #ava { animation: pz-pop .55s ease-out .4s both; }
body.play .switch { animation: pz-pop .5s ease-out .8s both; }
body.play .stat { animation: pz-rise .5s ease-out 1s both; }
body.play #human { animation-delay: 1.2s; }
body.play .toast { animation: pz-left .5s ease-out 2.4s both; }
body.play #team { animation: pz-pop .55s ease-out 2.8s both; }
body.play .ping { animation: pz-ping 1.2s ease-out 3s infinite; }

/* 04 — the store syncs, files are added */
body.play .label { animation: pz-fade .5s ease-out .4s both; }
body.play #store { animation: pz-pop .5s ease-out .5s both; }
body.play .syncbadge { animation: pz-pop .4s ease-out .8s both; }
body.play #catalog { animation: pz-pop .5s ease-out .9s both; }
body.play #feed { animation: pz-rise .5s ease-out 1.1s both; }
body.play #feed .ev { animation: pz-rise .45s ease-out both; }
body.play #feed .ev:nth-of-type(1) { animation-delay: 1.5s; }
body.play #feed .ev:nth-of-type(2) { animation-delay: 1.9s; }
body.play #feed .ev:nth-of-type(3) { animation-delay: 2.3s; }
body.play #feed .ev:nth-of-type(4) { animation-delay: 2.7s; }
body.play #feed .chg { animation: pz-flash 1s ease-out 3.2s; }
body.play #drop { animation: pz-rise .5s ease-out 1.3s both; }
body.play #mine { animation: pz-rise .5s ease-out 2.1s both; }
body.play #drop .file { animation: pz-rise .4s ease-out both; }
body.play #drop .file:nth-child(1) { animation-delay: 1.7s; }
body.play #drop .file:nth-child(2) { animation-delay: 1.85s; }
body.play #drop .file:nth-child(3) { animation-delay: 2s; }
body.play #drop .file:nth-child(4) { animation-delay: 2.15s; }
body.play .doc { animation: pz-rise .45s ease-out both; }
body.play .doc:nth-of-type(1) { animation-delay: 2.4s; }
body.play .doc:nth-of-type(2) { animation-delay: 2.7s; }
body.play .doc:nth-of-type(3) { animation-delay: 3s; }
body.play .doc:nth-of-type(4) { animation-delay: 3.3s; }
body.play .node { animation: pz-pop .5s ease-out 3.6s both; }

/* 05 — the dashboard fills in */
body.play .window .top { animation: pz-fade .5s ease-out .3s both; }
body.play .kpi { animation: pz-rise .5s ease-out both; }
body.play .kpi:nth-child(1) { animation-delay: .5s; }
body.play .kpi:nth-child(2) { animation-delay: .65s; }
body.play .kpi:nth-child(3) { animation-delay: .8s; }
body.play .kpi:nth-child(4) { animation-delay: .95s; }
body.play .cover { animation: pz-rise .5s ease-out 1.2s both; }
body.play .meter i, body.play .bars i { animation: pz-grow 1.2s ease-out 1.5s both; }
body.play .pair > * { animation: pz-rise .5s ease-out 1.6s both; }
body.play .ask { animation: pz-left .4s ease-out both; }
body.play .ask:nth-of-type(2) { animation-delay: 2.2s; }
body.play .ask:nth-of-type(3) { animation-delay: 2.4s; }
body.play .ask:nth-of-type(4) { animation-delay: 2.6s; }
body.play .ask:nth-of-type(5) { animation-delay: 2.8s; }
body.play .ask:nth-of-type(6) { animation-delay: 3s; }
body.play .react { animation: pz-rise .5s ease-out 3.2s both; }
body.play .copy ul li { animation: pz-left .5s ease-out both; }
body.play .copy ul li:nth-child(1) { animation-delay: .5s; }
body.play .copy ul li:nth-child(2) { animation-delay: .65s; }

/* 06 — before, the product, the result */
body.play #pre { animation: pz-rise .55s ease-out .4s both; }
body.play #plus { animation: pz-pop .5s ease-out .9s both; }
body.play #after { animation: pz-wipe 1s ease-in-out 1.5s both; }

@media (prefers-reduced-motion: reduce) {
  body.play *, body.play *::before, body.play *::after { animation: none !important; }
}