/* ── ATLAS product box (pbox) ─────────────────────────────────────
   CSS-3D software box render shown on plan cards, in the cart drawer
   and in the fly-to-cart animation. Shared by the SPA (index.html)
   and the static /plans page, so keep it self-contained.
   Variants: .pbox-pro / .pbox-yearly / .pbox-lifetime
   Sizes:    default 150x212 (plan cards) · .pbox-thumb (cart row)
             · .pbox-fly (animation clone, sized via transform)

   NOTE: the faces are authored at 2x (300x424, fonts >= 12px) and
   drawn through scale3d(.5,.5,.5). Chrome/Edge enforce a nonzero
   minimum font size for some locales (zh/ja/ko default 12px) and as
   a user setting; real 6-8px fonts get clamped and burst out of the
   box, while downscaled 12px+ fonts are immune.                     */

.pbox-wrap{display:flex;justify-content:center;padding:8px 0 26px;pointer-events:none;user-select:none;-webkit-user-select:none}
.pbox{position:relative;width:150px;height:212px;perspective:820px;animation:pboxFloat 6s ease-in-out infinite}
.price-card:nth-child(2) .pbox{animation-delay:-2s}
.price-card:nth-child(3) .pbox{animation-delay:-4s}
@keyframes pboxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ambient glow behind + soft floor shadow below */
.pbox::before{content:"";position:absolute;inset:-22% -30%;background:radial-gradient(50% 46% at 50% 54%,rgba(255,102,0,.14),transparent 70%);z-index:-1;pointer-events:none}
.pbox-lifetime::before{background:radial-gradient(50% 46% at 50% 54%,rgba(255,153,40,.22),transparent 70%)}
.pbox::after{content:"";position:absolute;left:6%;right:0;bottom:-15px;height:20px;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.38),transparent 72%);filter:blur(5px);pointer-events:none}
[data-theme=dark] .pbox::after{background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.65),transparent 72%)}

.pbox-3d{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(22deg);transition:transform .55s cubic-bezier(.2,.7,.25,1)}
.price-card:hover .pbox-3d{transform:rotateY(30deg)}

/* front face (authored 300x424, drawn at .5) */
.pbox-front{position:absolute;left:0;top:0;width:300px;height:424px;transform-origin:0 0;transform:scale3d(.5,.5,.5) translateZ(16px);border-radius:10px 18px 18px 10px;overflow:hidden;background:linear-gradient(162deg,#1b1b26 0%,#12121c 46%,#0b0b13 100%);border:2px solid rgba(255,255,255,.09);box-shadow:inset 0 2px 0 rgba(255,255,255,.06),inset -28px 0 52px -28px rgba(0,0,0,.55)}
/* subtle diagonal texture */
.pbox-front::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(125deg,rgba(255,255,255,.026) 0 4px,transparent 4px 14px);pointer-events:none}
/* faint world-dots map band, like the chessboard floor on the chess boxes */
.pbox-front::after{content:"";position:absolute;left:-24%;right:-24%;top:42%;height:36%;background:url(/img/world-dots.svg) center/cover no-repeat;opacity:.09;pointer-events:none}

/* left spine (depth 16px at drawn size, folded back from the front plane) */
.pbox-spine{position:absolute;left:0;top:0;width:32px;height:424px;transform-origin:0 0;transform:scale3d(.5,.5,.5) translateZ(-16px) rotateY(-90deg);background:linear-gradient(90deg,#0c0c13,#232330);border:2px solid rgba(255,255,255,.05);border-right:2px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pbox-spine span{writing-mode:vertical-rl;transform:rotate(180deg);font:700 12px/1 Inter,system-ui,sans-serif;letter-spacing:5.2px;color:rgba(255,255,255,.55);white-space:nowrap}

/* front face content */
.pbox-url{position:relative;margin-top:24px;text-align:center;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:3.8px;color:rgba(255,255,255,.52)}
.pbox-logo{position:relative;width:96px;height:96px;margin:44px auto 0}
.pbox-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 24px rgba(255,102,0,.55))}
.pbox-lifetime .pbox-logo img{filter:drop-shadow(0 0 30px rgba(255,153,40,.75))}
.pbox-badge{position:relative;display:table;margin:40px auto 0;font:800 16px/1 Inter,system-ui,sans-serif;letter-spacing:4.4px;padding:8px 22px 8px 26px;border-radius:99px;color:#e8e8f2;border:2px solid rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.pbox-yearly .pbox-badge{color:#fff;border-color:transparent;background:linear-gradient(90deg,#FF6600,#FF8533);box-shadow:0 0 24px rgba(255,102,0,.45)}
.pbox-lifetime .pbox-badge{color:#fff;border-color:transparent;background:linear-gradient(90deg,#FF8A00,#FF3D00);box-shadow:0 0 28px rgba(255,102,0,.55)}
.pbox-name{position:relative;margin-top:18px;text-align:center;font-family:"Space Grotesk",Inter,sans-serif;font-weight:700;font-size:54px;line-height:1;letter-spacing:12px;padding-left:12px;color:#fff;background:linear-gradient(180deg,#ffffff 20%,#c9cede 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 44px rgba(255,255,255,.16)}
/* NOTE: variants must use background-image (the background shorthand would
   reset background-clip:text and paint a solid block over the wordmark) */
.pbox-yearly .pbox-name{background-image:linear-gradient(180deg,#ffffff 15%,#ffd9bd 80%)}
.pbox-lifetime .pbox-name{background-image:linear-gradient(180deg,#ffeeb0 10%,#f6bd4d 55%,#c9821f 95%);text-shadow:0 0 48px rgba(246,189,77,.35)}
.pbox-tag{position:relative;margin-top:14px;text-align:center;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:4px;color:#96a0b8}
.pbox-yearly .pbox-tag{color:#ffb27d}
.pbox-lifetime .pbox-tag{color:#eac773}

/* footer strip */
.pbox-foot{position:absolute;left:22px;right:22px;bottom:0;height:54px;border-top:2px solid rgba(255,255,255,.09);display:flex;align-items:center;justify-content:space-between}
.pbox-brand{display:inline-flex;align-items:center;gap:8px;font:800 15px/1 Inter,system-ui,sans-serif;letter-spacing:1.2px;color:rgba(255,255,255,.88)}
.pbox-brand img{width:20px;height:20px;object-fit:contain}
.pbox-os{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 Inter,system-ui,sans-serif;letter-spacing:1.6px;color:rgba(255,255,255,.72)}
.pbox-os svg{width:16px;height:16px;flex:0 0 auto}

/* lifetime: gradient rim along the top edge, like the chess lifetime box */
.pbox-rim{display:none}
.pbox-lifetime .pbox-rim{display:block;position:absolute;left:0;right:0;top:0;height:6px;background:linear-gradient(90deg,#FF6600,#FF3D6E 45%,#B44CFF 80%,#FFB300);box-shadow:0 2px 16px rgba(255,80,120,.55);z-index:2}

/* ── cart drawer thumbnail ──────────────────────────────────────── */
.pbox-thumb{position:relative;width:47px;height:64px;flex:0 0 auto;pointer-events:none}
.pbox-thumb .pbox{transform:scale(.295);transform-origin:0 0;animation:none}
.pbox-thumb .pbox::before,.pbox-thumb .pbox::after{display:none}
/* narrow phones: the fixed-width thumb would squeeze the plan name under
   the qty stepper (drawer is 100vw there), so drop it below 420px */
@media (max-width:420px){.pbox-thumb{display:none}}

/* ── fly-to-cart clone ──────────────────────────────────────────── */
.pbox-fly{position:fixed;left:0;top:0;width:150px;height:212px;z-index:100001;pointer-events:none;will-change:transform,opacity}
.pbox-fly .pbox{animation:none}
.pbox-fly .pbox::after{display:none}
.pbox-fly .pbox-3d{transform:rotateY(22deg)}

@media (prefers-reduced-motion:reduce){
  .pbox{animation:none}
  .pbox-3d,.price-card:hover .pbox-3d{transition:none;transform:rotateY(22deg)}
}