/* Pentamarket UX V4: shared checkout stepper, fluid category-to-purchase, invoice reveal.
 * No change to orders, prices, gateway requests, or stock.
 */
@view-transition { navigation: auto; }

/* Stable stepper shared between React checkout and the PHP invoice page. */
.penta-v4-checkout-stepper,
html.penta-v4-invoice .step-wrap {
  view-transition-name: penta-checkout-steps;
}
.penta-v4-checkout-stepper { position:relative; isolation:isolate; }
html.penta-v4-invoice .step-wrap { isolation:isolate; }
::view-transition-group(penta-checkout-steps) {
  animation-duration:.64s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}
::view-transition-old(penta-checkout-steps),
::view-transition-new(penta-checkout-steps) {
  animation-duration:.48s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
}

/* Category -> purchase: target route is rendered first, then composited as a whole.
   No grey curtain, no forced scroll, no click-blocking fixed overlay. */
html.penta-v4-category-to-purchase::view-transition-old(root) {
  animation:pentaV4CategoryOut .26s ease-in both;
}
html.penta-v4-category-to-purchase::view-transition-new(root) {
  animation:pentaV4PurchaseIn .64s cubic-bezier(.22,1,.36,1) both;
}
@keyframes pentaV4CategoryOut {
  to { opacity:.18;transform:scale(.992); }
}
@keyframes pentaV4PurchaseIn {
  from { opacity:0;transform:translate3d(0,10px,0) scale(.993); }
  to { opacity:1;transform:translate3d(0,0,0) scale(1); }
}
/* Non-view-transition direct loads and browser Back/Forward. */
html.penta-v4-direct-purchase .penta-v4-checkout-shell > div:first-child > div:nth-child(2) {
  animation:pentaV4PurchaseIn .68s cubic-bezier(.22,1,.36,1) both;
}

/* On invoice, keep the stepper and the card in place; reveal only the content. */
html.penta-v4-invoice .checkout-shell { animation:none!important; }
html.penta-v4-invoice .page-title {
  animation:pentaV4InvoiceContent .70s cubic-bezier(.22,1,.36,1) .09s both;
}
html.penta-v4-invoice .content-grid > .panel:first-child {
  animation:pentaV4InvoiceContent .82s cubic-bezier(.22,1,.36,1) .17s both;
}
html.penta-v4-invoice .content-grid > .panel:nth-child(2) {
  animation:pentaV4InvoiceContent .82s cubic-bezier(.22,1,.36,1) .29s both;
}
@keyframes pentaV4InvoiceContent {
  from {opacity:0;transform:translate3d(0,16px,0)}
  to {opacity:1;transform:translate3d(0,0,0)}
}

/* Stage 1 is preserved in checkout. Once an invoice exists stage 2 animates to 50%,
   stopping exactly at the center of the second dot. */
html.penta-v4-invoice .step-line:after {
  box-shadow:none;
}
html.penta-v4-invoice .step-item.done .step-dot,
html.penta-v4-invoice .step-item.active .step-dot {
  box-shadow:none;
}
html.penta-v4-invoice-arriving .step-line:after {
  animation:pentaV4StepGrow .89s cubic-bezier(.18,1,.36,1) .34s both;
}
html.penta-v4-invoice-arriving .step-item:nth-child(2) .step-dot {
  animation:pentaV4StepDot .43s cubic-bezier(.22,1,.36,1) .87s both;
}
html.penta-v4-invoice-arriving .step-item:nth-child(2) .step-label {
  animation:pentaV4StepLabel .4s ease .87s both;
}
@keyframes pentaV4StepGrow {
  from {width:16.6667%}
  to {width:50%}
}
@keyframes pentaV4StepDot {
  from {background:#3f3f46;color:#d4d4d8;transform:scale(.96)}
  60% {transform:scale(1.07)}
  to {background:var(--penta);color:#fff;transform:scale(1)}
}
@keyframes pentaV4StepLabel {
  from {color:#71717a}
  to {color:#e879f9}
}
@media (prefers-reduced-motion:reduce) {
  html.penta-v4-category-to-purchase::view-transition-old(root),
  html.penta-v4-category-to-purchase::view-transition-new(root),
  ::view-transition-group(penta-checkout-steps),
  ::view-transition-old(penta-checkout-steps),
  ::view-transition-new(penta-checkout-steps) {
    animation-duration:.01ms!important;
  }
  html.penta-v4-direct-purchase .penta-v4-checkout-shell > div:first-child > div:nth-child(2),
  html.penta-v4-invoice .page-title,
  html.penta-v4-invoice .content-grid > .panel,
  html.penta-v4-invoice-arriving .step-line:after,
  html.penta-v4-invoice-arriving .step-item:nth-child(2) .step-dot,
  html.penta-v4-invoice-arriving .step-item:nth-child(2) .step-label {
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
}