/* ── ATLAS plan figure (pfigure) ───────────────────────────────────
   The character shown on the three pricing cards, in place of the CSS
   3D product box. One animated WebP per plan for the idle loop and a
   second for the animation that plays while the pointer is on the
   card; js/plan-figure.js swaps the src between them.

   It sits inside the box's own .pbox-wrap, so the reserved space, the
   centring and the click-through behaviour are unchanged. pbox.css is
   still loaded and still owns the cart thumbnail and the fly-to-cart
   clone, which keep the box.

   Height is fixed at 212, the same as the box, and width is left to
   the image. The two files of a plan are different widths on purpose:
   the hover animations lean outside the idle silhouette, and a frame
   cropped to the idle would clip the lean. They are cropped
   symmetrically around the same point, so centring lines them up and
   nothing jumps when the src changes.

   Variants: .pfig-pro / .pfig-yearly / .pfig-lifetime                */

.pfig{position:relative;height:212px;display:flex;justify-content:center;
  animation:pfigFloat 6s ease-in-out infinite}
/* Out of phase, card by card, exactly as the boxes were. */
.price-card:nth-child(2) .pfig{animation-delay:-2s}
.price-card:nth-child(3) .pfig{animation-delay:-4s}
@keyframes pfigFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Ambient glow behind and a soft floor shadow below, the box's own two
   pseudo elements. They are deliberately not baked into the picture:
   the floor shadow is darker in the dark theme, and a baked one would
   be wrong in whichever theme it was not baked for. */
.pfig::before{content:"";position:absolute;inset:-16% -30%;
  background:radial-gradient(50% 46% at 50% 56%,rgba(255,102,0,.14),transparent 70%);
  z-index:-1;pointer-events:none}
.pfig-lifetime::before{background:radial-gradient(50% 46% at 50% 56%,rgba(255,153,40,.22),transparent 70%)}
.pfig::after{content:"";position:absolute;left:50%;bottom:-8px;width:104px;height:18px;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.34),transparent 72%);
  filter:blur(5px);pointer-events:none}
[data-theme=dark] .pfig::after{background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 72%)}

/* The <picture> is only there to offer the AVIF; display:contents takes it out
   of the box tree so the <img> stays the flex item and the rules below keep
   applying to it. */
.pfig picture{display:contents}
/* A 2x file with the same aspect lands on the same on screen size through
   width:auto, so the sharper asset costs no layout. */
.pfig img{display:block;height:212px;width:auto;max-width:none}

/* Reduced motion: plan-figure.js swaps in the still frame and stops
   answering the pointer, and the float goes with it. */
@media (prefers-reduced-motion:reduce){
  .pfig{animation:none}
}

/* -- the same figure in the cart drawer and in the flight to the cart ------
   index.html clones a plan card's <picture> for these (atlasFigureHTML), so
   the drawer and the flight show whatever the card shows, in whichever format
   the browser picked. The box they replace was 47x64 in the drawer and
   150x212 in flight; the figure keeps those heights. */
.pfig-thumb{position:relative;height:64px;flex:0 0 auto;display:flex;
  align-items:flex-end;justify-content:center;pointer-events:none}
.pfig-thumb picture{display:contents}
.pfig-thumb img{display:block;height:64px;width:auto;max-width:none}
/* narrow phones: the drawer is 100vw and the fixed thumb would squeeze the
   plan name under the qty stepper, same rule the box had */
@media (max-width:420px){.pfig-thumb{display:none}}

.pfig-fly{position:fixed;left:0;top:0;height:212px;z-index:100001;pointer-events:none;
  will-change:transform,opacity;display:flex;justify-content:center}
.pfig-fly picture{display:contents}
.pfig-fly img{display:block;height:212px;width:auto;max-width:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.28))}

/* -- the payment celebration ------------------------------------------------
   The plan's own figure moonwalks across the bottom of the screen, in front of
   everything, the moment a payment is in. index.html positions and moves it;
   this only draws the layer. Reduced motion never shows it at all. */
#atlas-cheer{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
#atlas-cheer .pfig-cheer{position:absolute;left:0;bottom:4vh;height:min(300px,38vh);
  display:flex;justify-content:center;will-change:transform}
#atlas-cheer picture{display:contents}
#atlas-cheer img{display:block;height:100%;width:auto;max-width:none;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.32))}
#atlas-cheer .pfig-cheer::after{content:"";position:absolute;left:50%;bottom:-8px;
  width:44%;height:22px;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.42),transparent 72%);
  filter:blur(6px)}
#atlas-cheer canvas{position:absolute;inset:0;width:100%;height:100%}