/*
 * Shuppz B24UX5 — hero sequence + Market Day network motion convergence.
 * Additive presentation only. Accepted B24UX4 R1 remains the typography/motion owner.
 */

/* Hero story: animate the existing accepted panel as a sequence, not as one static block. */
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > *{
  opacity:0;
  transform:translate3d(0,12px,0);
  animation:b24ux5-hero-piece-in .58s cubic-bezier(.22,1,.36,1) forwards;
}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > :nth-child(1){animation-delay:.08s}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > :nth-child(2){animation-delay:.17s}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > :nth-child(3){animation-delay:.27s}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > :nth-child(4){animation-delay:.39s}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > :nth-child(5){animation-delay:.52s}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > :nth-child(6){animation-delay:.65s}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > :nth-child(7){animation-delay:.78s}

body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] .b24-signal-line span{
  transform:scaleX(0);
  transform-origin:center;
  animation:b24ux5-signal-draw .72s .46s cubic-bezier(.22,1,.36,1) forwards;
}
body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] .b24-signal-line em{
  animation:b24ux5-signal-breathe 3.4s 1.15s ease-in-out infinite;
}
.b24-intent-panel[data-b24ux5-hero-sequence="true"] .b24-actionchips span{
  transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.b24-intent-panel[data-b24ux5-hero-sequence="true"] .b24-actionchips span:hover{transform:translateY(-2px)}
.b24-intent-panel[data-b24ux5-hero-sequence="true"] .b24-actionchips .is-active{box-shadow:0 8px 22px rgba(95,70,215,.20)}

/* Market Day: larger, balanced and visually connected. */
.b24-market-network[data-b24ux5-network="true"]{
  position:relative;
  width:min(860px,92%);
  max-width:none;
  margin:54px auto 0;
  padding:10px 24px 2px;
  isolation:isolate;
}
.b24-market-network[data-b24ux5-network="true"]::before{
  content:"";
  position:absolute;
  inset:5% 13% -2%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 48%,rgba(95,70,215,.16),rgba(95,70,215,.05) 38%,transparent 70%);
  filter:blur(10px);
}
.b24-market-network[data-b24ux5-network="true"] svg{
  width:100%;
  overflow:visible;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.16));
}
.b24-market-network[data-b24ux5-network="true"] svg g:first-child path{
  stroke:rgba(255,255,255,.34);
  stroke-width:1.8;
}
.b24-market-network[data-b24ux5-network="true"] svg g:nth-child(2) circle:first-child{
  fill:#17151d;
  stroke:#8068ff;
  stroke-width:2.4;
  filter:drop-shadow(0 0 15px rgba(111,82,239,.30));
}
.b24-market-network[data-b24ux5-network="true"] svg g:nth-child(2) circle:not(:first-child){
  fill:#765cf0;
  stroke:#171717;
  stroke-width:2;
}
.b24-market-network[data-b24ux5-network="true"] svg g:nth-child(3) text{
  fill:#d7d4dd;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-weight:650;
  letter-spacing:.08em;
}
.b24-market-network[data-b24ux5-network="true"] svg g:nth-child(3) text:nth-last-child(-n+2){fill:#fff;letter-spacing:.03em}

body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:first-child path{
  stroke-dasharray:190;
  stroke-dashoffset:190;
  animation:b24ux5-network-draw .9s cubic-bezier(.22,1,.36,1) forwards;
}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:first-child path:nth-child(2){animation-delay:.10s}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:first-child path:nth-child(3){animation-delay:.20s}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:first-child path:nth-child(4){animation-delay:.30s}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(2) circle{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:b24ux5-network-node-in .54s cubic-bezier(.22,1,.36,1) forwards;
}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(2) circle:first-child{
  animation:b24ux5-network-node-in .54s .34s cubic-bezier(.22,1,.36,1) forwards,b24ux5-network-core-pulse 4.6s 1.3s ease-in-out infinite;
}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(2) circle:nth-child(2){animation-delay:.44s}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(2) circle:nth-child(3){animation-delay:.51s}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(2) circle:nth-child(4){animation-delay:.58s}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(2) circle:nth-child(5){animation-delay:.65s}
body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(3){
  opacity:0;
  animation:b24ux5-network-labels-in .55s .62s ease forwards;
}

@keyframes b24ux5-hero-piece-in{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes b24ux5-signal-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes b24ux5-signal-breathe{0%,100%{opacity:.72}50%{opacity:1;text-shadow:0 0 14px rgba(95,70,215,.22)}}
@keyframes b24ux5-network-draw{to{stroke-dashoffset:0}}
@keyframes b24ux5-network-node-in{from{opacity:0;transform:scale(.58)}to{opacity:1;transform:scale(1)}}
@keyframes b24ux5-network-labels-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes b24ux5-network-core-pulse{0%,100%{filter:drop-shadow(0 0 10px rgba(111,82,239,.20))}50%{filter:drop-shadow(0 0 24px rgba(111,82,239,.42))}}

@media (max-width:820px){
  .b24-market-network[data-b24ux5-network="true"]{width:min(720px,100%);margin-top:42px;padding-inline:0}
}
@media (max-width:560px){
  .b24-market-network[data-b24ux5-network="true"]{width:100%;margin-top:28px;padding:0}
  .b24-market-network[data-b24ux5-network="true"] svg{min-width:500px;transform:translateX(calc((100vw - 530px)/2));transform-origin:center}
  .b24-market-day{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] > *,
  body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] .b24-signal-line span,
  body[data-b24-motion="ready"] .b24-intent-panel[data-b24ux5-hero-sequence="true"][data-visible="true"] .b24-signal-line em,
  body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:first-child path,
  body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(2) circle,
  body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:nth-child(3){
    opacity:1;transform:none;filter:none;animation:none;transition:none
  }
  body[data-b24-motion="ready"] .b24-market-network[data-b24ux5-network="true"][data-visible="true"] svg g:first-child path{stroke-dasharray:none;stroke-dashoffset:0}
}