/* Pricing bread cards and the original jelly interaction.
   Enhancement classes preserve the ordinary cards when JavaScript is unavailable.
   The SVG crown and crust scale with width; straight sides accommodate the copy.
   The detailed plans use wider slices, and specialty slices keep a width cap. */

/* ── Pre-paint reservation ──────────────────────────────────────────────
   The inline script at the top of .plans-section adds .pbj-jelly-pending
   synchronously during parse, so the space the character needs is already
   reserved at first layout and the module does not shove the grid down when
   it arrives. The module swaps pending -> root, and clears pending even when
   it declines to enhance.

   Deliberately limited to spacing: margin, row gap and the single-column
   width. The card's own border, background, radius, shadow and padding are
   left exactly as styles.css sets them, so a module that arrives late (or
   never) shows the site's real cards rather than bare text. That leaves a
   small residual shift when the enhancement does land after first paint —
   the padding swap only, measured at ~0.004 — which is the better trade. */
.pbj-jelly-pending .price-card { margin-block-start: 112px; }
.pbj-jelly-pending .pricing-grid { row-gap: 40px; }
.pbj-jelly-pending .pricing-specialty { row-gap: 40px; margin-top: 0; }

/* ── Row / section rhythm ────────────────────────────────────────────────
   Each card reserves 112px above itself for the seated character; 40px more
   is left for the top of the hop arc. The grids' own row-gap is replaced
   (not added to) so rows are not double-spaced. Column gap is untouched. */
.pbj-jelly-root .pricing-grid { row-gap: 40px; }
.pbj-jelly-root .pricing-specialty { row-gap: 40px; margin-top: 0; }

/* Give the detailed plans a wider slice and keep specialty slices balanced. */
@media (min-width: 1140px) {
  .pbj-jelly-pending .pricing-grid,
  .pbj-jelly-root .pricing-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pbj-jelly-pending .pricing-grid > .price-card,
  .pbj-jelly-root .pricing-grid > .price-card { grid-column: span 2; }
  .pbj-jelly-pending .pricing-grid > .price-card:nth-child(n+4),
  .pbj-jelly-root .pricing-grid > .price-card:nth-child(n+4) { grid-column: span 3; width: min(100%, 520px); justify-self: center; }
  .pbj-jelly-root .pricing-grid > .price-card:nth-child(n+4) .pbj-card-surface > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
}
@media (min-width: 769px) and (max-width: 1139px) {
  .pbj-jelly-pending .pricing-grid,
  .pbj-jelly-root .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 600px) and (max-width: 768px) {
  .pbj-jelly-root .pricing-grid > .price-card:nth-child(n+4) .pbj-card-surface > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; }
}
.pbj-jelly-pending .pricing-specialty > .price-card,
.pbj-jelly-root .pricing-specialty > .price-card { width: min(100%, 480px); justify-self: center; }

/* Single-column band: keep the slice from flattening into a tray. */
@media (max-width: 768px) {
  .pbj-jelly-pending .price-card,
  .pbj-jelly-root .price-card.pbj-bread-card {
    /* A definite width, not max-width: an auto inline margin switches off a
       grid item's stretch, which would leave each card at its own content
       width and the column visibly ragged. */
    width: min(100%, 480px);
    margin-inline: auto;
  }
}

/* ── Card shell ─────────────────────────────────────────────────────────
   The outer <article> keeps its size and stays perfectly still: it is the
   hover/focus hit target. All the site's card chrome is neutralised here
   because the bread SVG becomes the card's visible surface. */
.price-card.pbj-bread-card {
  --pbj-tilt: 2.2deg;
  --pbj-duration: 1000ms;
  --pbj-effective-tilt: min(var(--pbj-tilt), var(--pbj-safe-tilt, 2.2deg));
  position: relative;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  margin-block-start: 112px;
  min-width: 0;
  transform: none;
}
/* Beats .price-card:hover and .price-card--featured:hover (higher specificity). */
.price-card.pbj-bread-card:hover,
.price-card.pbj-bread-card:focus-within {
  transform: none;
  box-shadow: none;
  background: transparent;
}
.price-card.pbj-bread-card::before,
.price-card.pbj-bread-card::after {
  content: none;
}

/* ── Rotating inner surface ─────────────────────────────────────────────
   Only this rotates. isolation:isolate gives the bread (z-index:-1) a
   stacking context to sit behind the text without escaping the card. */
.pbj-card-surface {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  padding: max(var(--pbj-card-padding-top, 76px), calc(var(--pbj-crown-y, 24px) + 3.5rem))
           var(--pbj-card-padding-x, max(30px, 12%))
           var(--pbj-card-padding-bottom, 44px);
  transform-origin: 50% 96%;
  transition: none; /* enabled one frame after init so nothing animates on load */
}
.pbj-jelly-root.pbj-jelly-ready .pbj-card-surface {
  transition: transform 380ms ease-out;
}

/* Centre the card "header" (badge, title, tagline, price) on the bread;
   feature lists, group labels and notes keep normal left alignment. */
.pbj-card-surface { text-align: center; }
.pbj-card-surface > .price-badge { position: absolute; top: calc(var(--pbj-crown-y, 24px) + 8px); left: 42%; transform: translateX(-50%); white-space: nowrap; margin: 0; }
.pbj-card-surface > h3 { font-size: 1.3rem; line-height: 1.2; margin: 0 0 .6rem; }
.pbj-card-surface > .price-tagline { min-height: 3.2em; line-height: 1.6; margin: 0; }
.pbj-card-surface > .price-amount { font-size: 2rem; line-height: 1.15; margin: .85rem 0 1.4rem; }
.pbj-card-surface .price-prefix { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .35rem; }
.pbj-card-surface > ul { gap: .55rem; }
.price-card .pbj-card-surface > ul > li { display: block; position: relative; padding-left: 22px; margin-top: 0; align-self: start; }
.price-card .pbj-card-surface > ul > li::before { position: absolute; left: 0; top: 0; }
.pbj-card-surface > ul > li > ul { padding-top: .4rem; }
.pbj-card-surface > .price-note { border-top: 1px solid #d9bf93; padding-top: .85rem; margin-bottom: 1rem; }
.price-card .pbj-card-surface > .btn, .price-card .pbj-card-surface > .btn-secondary { width: calc(100% - 12px); align-self: center; padding-inline: .8rem; }
.price-card .pbj-card-surface ul li.feature-label { font-weight: 600; }
.price-card .pbj-card-surface ul li.feature-sub { padding-left: .2rem; }
.pbj-card-surface > ul,
.pbj-card-surface > .feature-group-label,
.pbj-card-surface > .price-note { text-align: left; }

.pbj-jelly-active { z-index: 3; }
.pbj-jelly-active > .pbj-card-surface { transform: rotate(var(--pbj-effective-tilt)); }
.pbj-jelly-active.pbj-jelly-arriving > .pbj-card-surface {
  animation: pbjBreadTip var(--pbj-duration) both;
}

/* ── Bread art ──────────────────────────────────────────────────────────
   Stretches to the card's real content height (preserveAspectRatio="none"
   lives on the SVG element itself). Decorative and inert. */
.pbj-card-surface > .pbj-bread-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 6px 0 #ae702526);
}
.pbj-jelly-active .pbj-bread-art { filter: drop-shadow(0 7px 0 #b03a832e); }

/* ── Character ──────────────────────────────────────────────────────────
   ~132px wide, aspect ratio preserved, seated on the upper-right crust.
   The top percentage tracks the crust crown as long copy makes cards taller. */
.pbj-jelly-perch {
  position: absolute;
  top: calc(var(--pbj-crown-y, 24px) - 108px);
  left: clamp(70%, calc(100% - 86px), calc(100% - 60px));
  width: 132px;
  height: 137.5px;
  margin-left: -66px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(25px) scale(.8);
  transform-origin: 50% 78.4%;
}
.pbj-jelly-perch svg { width: 100%; height: 100%; overflow: visible; }
.pbj-jelly-active .pbj-jelly-perch { opacity: 1; transform: rotate(-5deg); }
.pbj-jelly-active.pbj-jelly-arriving .pbj-jelly-perch {
  animation: pbjJellyHop var(--pbj-duration) both;
}
.pbj-jelly-leaving .pbj-jelly-perch { animation: pbjJellyLeave 170ms both; }

.pbj-jelly-perch [data-jelly-part="arm-right"] { transform-origin: 177px 119px; }
.pbj-jelly-perch [data-jelly-part="leg-left"]  { transform-origin: 91px 188px; }
.pbj-jelly-perch [data-jelly-part="leg-right"] { transform-origin: 149px 188px; }
.pbj-jelly-active [data-jelly-part="arm-right"] { transform: rotate(55deg); }
.pbj-jelly-active [data-jelly-part="leg-left"]  { transform: rotate(-18deg); }
.pbj-jelly-active [data-jelly-part="leg-right"] { transform: rotate(-26deg); }
.pbj-jelly-active.pbj-jelly-arriving [data-jelly-part="arm-right"] { animation: pbjSitArm var(--pbj-duration) both; }
.pbj-jelly-active.pbj-jelly-arriving [data-jelly-part="leg-left"]  { animation: pbjSitLeft var(--pbj-duration) both; }
.pbj-jelly-active.pbj-jelly-arriving [data-jelly-part="leg-right"] { animation: pbjSitRight var(--pbj-duration) both; }
/* Greeting: seated already, only the hand moves, with a long pause each cycle. */
.pbj-jelly-active.pbj-jelly-welcome [data-jelly-part="arm-right"] {
  transform: rotate(0);
  animation: pbjWelcomeWave 4500ms ease-in-out infinite;
}

.pbj-jelly-shadow {
  position: absolute;
  top: var(--pbj-crown-y, 24px);
  left: clamp(70%, calc(100% - 86px), calc(100% - 60px));
  width: 55px;
  height: 9px;
  margin-left: -27.5px;
  border-radius: 50%;
  background: #8b542c30;
  opacity: 0;
  pointer-events: none;
}
.pbj-jelly-active .pbj-jelly-shadow { opacity: 1; }

/* ── Keyframes ──────────────────────────────────────────────────────────
   Arrival ~1s: contact at 56%, squash, settle. Bread tips after contact at
   1.6x the resting angle, recoils to 0.65x, settles. */
@keyframes pbjJellyHop {
  0%   { opacity: 0; transform: translate(-62px, 24px) rotate(-20deg) scale(.8); }
  15%  { opacity: 1; }
  36%  { transform: translate(-19px, -43px) rotate(9deg) scale(.94, 1.06); }
  56%  { transform: translateY(2px) rotate(-8deg) scale(1.12, .86); }
  72%  { transform: translateY(-4px) rotate(-2deg) scale(.98, 1.02); }
  88%, 100% { opacity: 1; transform: rotate(-5deg); }
}
@keyframes pbjBreadTip {
  0%, 50% { transform: rotate(0); }
  65%     { transform: rotate(calc(var(--pbj-effective-tilt) * 1.6)); }
  82%     { transform: rotate(calc(var(--pbj-effective-tilt) * .65)); }
  100%    { transform: rotate(var(--pbj-effective-tilt)); }
}
@keyframes pbjJellyLeave {
  from { opacity: 1; transform: rotate(-5deg); }
  to   { opacity: 0; transform: translate(-15px, -22px) rotate(-15deg) scale(.8); }
}
@keyframes pbjSitArm   { 0%,52% { transform: rotate(-12deg); } 78% { transform: rotate(64deg); } 100% { transform: rotate(55deg); } }
@keyframes pbjSitLeft  { 0%,45% { transform: rotate(24deg); }  70% { transform: rotate(-30deg); } 88% { transform: rotate(-12deg); } 100% { transform: rotate(-18deg); } }
@keyframes pbjSitRight { 0%,45% { transform: rotate(-40deg); } 70% { transform: rotate(-10deg); } 88% { transform: rotate(-32deg); } 100% { transform: rotate(-26deg); } }
@keyframes pbjWelcomeWave { 0%,7%,32%,100% { transform: rotate(0); } 13%,25% { transform: rotate(14deg); } 19% { transform: rotate(-10deg); } }

/* ── Reduced motion ─────────────────────────────────────────────────────
   No hop, wave, tip or exit fade: the jar simply appears seated on the
   selected card and the bread stays upright. Cancelling the animations is
   not enough on its own — .pbj-jelly-welcome pins the greeting arm at
   rotate(0), which outranks the seated rule — so the seated pose is
   restated here at matching specificity, later in the cascade. */
@media (prefers-reduced-motion: reduce) {
  .pbj-bread-card,
  .pbj-bread-card * {
    animation: none !important;
    transition: none !important;
  }
  .pbj-jelly-active > .pbj-card-surface { transform: none; }
  .pbj-jelly-active .pbj-jelly-perch { opacity: 1; transform: rotate(-5deg); }
  .pbj-jelly-leaving .pbj-jelly-perch { opacity: 0; }
  .pbj-jelly-active.pbj-jelly-welcome [data-jelly-part="arm-right"] { transform: rotate(55deg); }
  .pbj-jelly-active.pbj-jelly-welcome [data-jelly-part="leg-left"]  { transform: rotate(-18deg); }
  .pbj-jelly-active.pbj-jelly-welcome [data-jelly-part="leg-right"] { transform: rotate(-26deg); }
}