/* ========================================================================== baskt-packs.css - the Baskt booster packs (one design, real 3D) -------------------------------------------------------------------------- Markup is built by inject/baskt-packs.js inside a host element:
hover tilt (transform only) the render's own 588:906 box, a touch larger than the host so the pouch body fills it like a product shot static radial halo in the trim colour baked contact shadow (/packs/v4/shadow*.webp) community only: tinted pack silhouette shown until the 3D render is ready the pack (/packs/v4/*.webp or a runtime render) hover-only sheen, masked to the pack 1em inside a pack = 10% of its width. PERF CONTRACT (Apple Silicon crash history): at rest a pack is two s over one static gradient. No filters, no blend modes, no animation, no 3D context. Hover (pointer, one pack at a time) tilts .bkb-tilt and shows the sheen (plain alpha, masked by the pack image). ========================================================================== */ .bkp{ --w:220px; --glow:58,190,221; --zoom-in:-5.5%; position:relative; display:block; flex:0 0 auto; box-sizing:border-box; width:var(--w); height:calc(var(--w) * 1.5408); margin:0; padding:0; border:0; font-size:calc(var(--w) / 10); line-height:1; color:#fff; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; background:none !important; clip-path:none !important; filter:none; } .bkp[data-bkp-pose="front"]{ --zoom-in:-2%; } .bkp *, .bkp *::before, .bkp *::after{ box-sizing:border-box; } .bkp[data-baskt-open-sig], .bkp[data-baskt-open-tier], .bkp[data-baskt-pack-view]{ cursor:pointer; } .bkp:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:6px; border-radius:6px; } .bkb-tilt{ position:absolute; inset:0; display:block; transform-origin:50% 55%; transition:transform .6s cubic-bezier(.16,1,.3,1); } .bkp.is-hot .bkb-tilt{ transform:translateY(-4px) scale(1.02); transition:transform .14s ease-out; will-change:transform; } .bkb-art{ position:absolute; inset:var(--zoom-in); display:block; pointer-events:none; } /* the halo: a soft radial in the trim colour that only shows around the pack */ .bkb-glow{ position:absolute; left:-7%; right:-7%; top:-3%; bottom:-3%; display:block; background:radial-gradient(closest-side, rgba(var(--glow), .34) 0%, rgba(var(--glow), .24) 68%, rgba(var(--glow), .08) 86%, rgba(var(--glow), 0) 100%); opacity:.8; transition:opacity .35s ease; } .bkp.is-hot .bkb-glow{ opacity:1; } .bkb-shadow, .bkb-img{ position:absolute !important; inset:0; display:block; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; object-fit:contain; pointer-events:none; -webkit-user-drag:none; } .bkb-shadow{ opacity:.85; } /* hover sheen: a soft specular that follows the pointer + a raking band, clipped to the pack silhouette by the pack image itself (--bkb-mask, set in JS) */ .bkb-shine{ position:absolute; inset:0; display:none; pointer-events:none; -webkit-mask:var(--bkb-mask, linear-gradient(#000, #000)) center / 100% 100% no-repeat; mask:var(--bkb-mask, linear-gradient(#000, #000)) center / 100% 100% no-repeat; background: radial-gradient(40% 26% at var(--sx, 50%) var(--sy, 30%), rgba(255,255,255,.17), rgba(255,255,255,0) 70%), linear-gradient(112deg, rgba(255,255,255,0) calc(var(--sx, 50%) - 26%), rgba(220,240,255,.06) calc(var(--sx, 50%) - 10%), rgba(255,255,255,.13) var(--sx, 50%), rgba(255,226,246,.05) calc(var(--sx, 50%) + 8%), rgba(255,255,255,0) calc(var(--sx, 50%) + 22%)); } .bkp.is-hot .bkb-shine{ display:block; } /* ---- community packs: tinted silhouette until the render lands ---- */ .bkb-ghost{ position:absolute; inset:0; display:block; -webkit-mask:url("/packs/v4/signature-front-sm.webp") center / 100% 100% no-repeat; mask:url("/packs/v4/signature-front-sm.webp") center / 100% 100% no-repeat; background: linear-gradient(180deg, rgba(var(--glow), .5) 0%, rgba(var(--glow), .36) 9%, rgba(var(--glow), 0) 13%, rgba(var(--glow), 0) 87%, rgba(var(--glow), .3) 92%, rgba(var(--glow), .46) 100%), linear-gradient(112deg, #1c2028 0%, #12141a 38%, #191c23 62%, #0d0e12 100%); transition:opacity .45s ease; } .bkp[data-bkp-pose="front"] .bkb-ghost{ -webkit-mask-image:url("/packs/v4/signature-front-sm.webp"); mask-image:url("/packs/v4/signature-front-sm.webp"); } .bkp--community .bkb-img{ transition:opacity .45s ease; } .bkp--community.is-pending .bkb-img{ opacity:0; } .bkp--community.is-ready .bkb-ghost{ opacity:0; } .bkp--community.is-rendering .bkb-img{ opacity:.86; transition-duration:.2s; } /* ---- sizes (keep in step with SIZES in baskt-packs.js) ---- */ .bkp--hero { --w:clamp(196px, 17.2vw, 246px); } .bkp--side { --w:clamp(176px, 15.6vw, 230px); } .bkp--pouch { --w:clamp(160px, 14vw, 200px); } .bkp--card { --w:clamp(176px, 16vw, 210px); } .bkp--preview{ --w:210px; } .bkp--dlg { --w:150px; } .bkp--xl { --w:clamp(220px, 19vw, 262px); } .bkp--mini { --w:clamp(104px, 10.4vw, 138px); } .bkp--theatre{ --w:min(400px, 70vw, calc((100vh - 230px) / 1.56)); } .baskt-theatre.is-opening .bkp--theatre{ --w:min(460px, 74vw, calc((100vh - 290px) / 1.56)); } /* ========================================================================== HOST SURFACES ========================================================================== */ @media (prefers-reduced-motion:reduce){ .bkb-tilt, .bkb-glow, .bkb-ghost, .bkp--community .bkb-img{ transition:none; } } /* ---- buy dialog thumbnail: keep .bp-booster (shake/burst animations) but drop its box ---- */ .bp-stage .bp-booster.bkp-host{ width:auto; height:auto; padding:0 0 14px; border:0; border-radius:0; background:none; box-shadow:none; filter:none; display:block; overflow:visible; } .bp-stage .bp-booster.bkp-host::after{ display:none; } .bp-stage.charging .bp-booster.bkp-host{ box-shadow:none; } @media (max-width:600px){ .baskt-modal-ov{ padding:16px; } .baskt-modal{ width:100%; max-width:none; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); } .bp-card{ padding-top:18px; } .bp-stage{ min-height:0; margin:10px 0 12px; } .bp-stage .bkp--dlg{ --w:112px; } .bp-stage .bp-booster.bkp-host{ padding-bottom:10px; } .bp-pay-tab{ white-space:nowrap; padding-left:6px; padding-right:6px; gap:6px; letter-spacing:-.02em; } .bp-tab-badge{ padding:3px 5px; letter-spacing:.08em; font-size:8px; } } /* ---- community pack view: the pack itself on top of the dialog ---- */ .bp-pack-view{ display:flex; justify-content:center; padding:8px 0 6px; } .bp-pack-view .bkp--dlg{ --w:138px; } @media (max-width:600px){ .bp-pack-view .bkp--dlg{ --w:116px; } } /* ---- opening theatre: the host keeps .theatre-pack (float / tap pulse / rip) ---- */ .baskt-theatre .stage-pack .theatre-pack.bkp-host{ width:auto !important; height:auto; background:none; box-shadow:none; clip-path:none; padding:0 0 4%; outline:none; } .baskt-theatre .theatre-stage.stage-pack{ align-content:center; } /* the legacy drop-shadow filters would re-rasterise the pack every frame of the float; the pack carries its own glow + shadow. Kept only for the 0.8s rip flash. */ .baskt-theatre .stage-pack .theatre-pack.bkp-host:not(.theatre-rip){ filter:none !important; } .baskt-theatre .bkp--theatre .bkb-glow{ opacity:1; } .baskt-theatre .stage-pack.gone .theatre-pack.bkp-host{ display:none; } /* ---- shop catalog (/packs, /app): the Signature hero, the three tier packs, then the community packs ---- */ .sig-stage > .bkp{ position:relative; z-index:1; } /* when the hero wraps above its copy (phones, narrow tablets) the pack centres; side by side the copy grows to fill, so this changes nothing on desktop */ .sig-hero{ justify-content:center; } .bd-tier-head{ margin:8px 0 0; } /* the legacy panel: no drifting blurred aurora, no blend modes at rest */ .op-sec{ margin-top:14px; } .op-sec::after{ filter:none; animation:none; opacity:.22; } .op-sec .op-pack-glow{ filter:none; } .op-sec .op-pack-gold::before{ mix-blend-mode:normal; opacity:.28; } .op-sec .op-pack{ gap:18px; padding-top:30px; } .op-sec .op-pack:hover{ transform:translateY(-4px); } @media (max-width:820px){ /* one tier per row: pack beside its price, not three tall boxes stacked */ .op-sec .op-pack{ flex-direction:row; justify-content:flex-start; gap:clamp(16px, 6vw, 40px); padding:18px 14px 18px clamp(18px, 7vw, 56px); text-align:left; } .op-sec .op-pack .bkp--pouch{ --w:106px; } .op-sec .op-pack-meta{ align-items:flex-start; min-width:0; } .op-sec .op-pack-price{ font-size:28px; } .op-sec .op-pack-jack{ white-space:nowrap; font-size:9px; letter-spacing:.06em; padding:6px 10px; } } /* /how-it-works sells the three tiers in #bx-tiers right below - show them once */ body:has(#bx-tiers) .op-sec, body:has(#bx-tiers) .bd-tier-head{ display:none; } /* community pack cards: the pack itself, then its caption */ .bd-cards-foil .bd-card-foil{ overflow:visible; } .bd-cards-foil .bkp--card{ margin:4px auto 0; } .bd-cards-foil .bkp--card:focus-visible{ outline-offset:2px; } /* ---- how-it-works: hero product shot + chapter 01 mini line-up ---- */ .hiw-hero-stage .bkp--xl{ z-index:1; } .hiw-vis-pick .bkp{ transition:transform .5s cubic-bezier(.16,1,.3,1); } .hiw-vis-pick .bkp-hp1{ transform:translateY(16px); margin-right:-14px; } .hiw-vis-pick .bkp-hp2{ --w:clamp(118px, 11.8vw, 158px); transform:translateY(-18px); z-index:2; } .hiw-vis-pick .bkp-hp3{ transform:translateY(16px); margin-left:-14px; } .hiw-chapter.is-in .hiw-vis-pick .bkp-hp1{ transform:translateY(6px); } .hiw-chapter.is-in .hiw-vis-pick .bkp-hp3{ transform:translateY(6px); } @media (prefers-reduced-motion:reduce){ .hiw-vis-pick .bkp{ transition:none; } } /* ========================================================================== PACK BUILDER ("Create a pack"): form left, the LIVE 3D pack + trim right ========================================================================== */ .baskt-modal.wide:has(.bb-pack){ width:min(920px, 96vw); } @media (max-width:600px){ .baskt-modal.wide:has(.bb-pack){ width:calc(100vw - 32px); margin-left:auto; margin-right:auto; } } .bb-pack .bb-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 330px); gap:24px; align-items:start; } .bb-pack .bb-left, .bb-pack .bb-right{ min-width:0; } .bb-pack .bb-label{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .bb-pack .bb-label .bb-pick-hint{ text-align:right; } .bb-lim{ font-weight:700; letter-spacing:0; color:rgba(255,255,255,.38); font-variant-numeric:tabular-nums; } .bb-pack .bb-msg{ margin-top:6px; font-size:12px; line-height:1.4; font-weight:600; color:var(--bk-mut, #9a9a9a); } .bb-pack .bb-msg:empty{ display:none; } .bb-pack .bb-msg.is-err{ color:#ff8f8f; } .bb-pack .bb-msg.is-warn{ color:#f1c66d; } .bb-pack .bb-msg.is-ok{ color:#7fdca6; } /* the live preview card */ .bb-pack .bb-pv{ display:flex; flex-direction:column; align-items:center; padding:16px 14px 14px; border-radius:18px; background:radial-gradient(80% 55% at 50% 38%, rgba(255,255,255,.05), rgba(255,255,255,0) 70%), linear-gradient(180deg, #101116, #0a0a0d); border:1px solid rgba(255,255,255,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .bb-pack .bb-pv-stage{ display:flex; justify-content:center; padding:2px 0 10px; } .bb-trim-head{ align-self:stretch; display:flex; align-items:baseline; justify-content:space-between; margin:4px 2px 9px; } .bb-trim-head .bb-label{ margin:0; } .bb-trim-name{ font-size:12px; font-weight:800; color:#ececec; letter-spacing:.02em; } .bb-trims{ align-self:stretch; display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:7px; min-height:22px; } .bb-trim{ display:block; width:100%; max-width:28px; aspect-ratio:1; justify-self:center; margin:0; padding:0; border:0; border-radius:50%; cursor:pointer; background:radial-gradient(circle at 34% 28%, var(--t-ink) 0%, var(--t-foil) 34%, var(--t-glow) 74%, #0b0b0d 128%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.55); transition:transform .15s ease, box-shadow .15s ease; } .bb-trim:hover{ transform:translateY(-1px); } .bb-trim[aria-checked="true"]{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 0 0 2px #0c0c10, 0 0 0 3.5px var(--t-foil), 0 0 12px var(--t-glow); } .bb-trim:focus-visible{ outline:2px solid #fff; outline-offset:3px; } /* logo picker: the logo is shown whole (contain), like it prints */ .bb-pack .bb-img-drop{ height:116px; } .bb-pack .bb-img-drop:focus-visible{ outline:2px solid rgba(255,255,255,.9); outline-offset:2px; } .bb-pack .bb-img-drop.is-drag{ border-color:#fff; background:rgba(255,255,255,.07); } .bb-pack .bb-img-prev{ inset:12px; background-size:contain; background-repeat:no-repeat; background-position:center; } .bb-pack .bb-img-ph{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:0 18px; text-align:center; } .bb-pack .bb-img-ph b{ color:#e6e6e6; font-size:13px; } .bb-pack .bb-img-ph span{ font-size:11.5px; font-weight:600; color:rgba(255,255,255,.42); line-height:1.35; } .bb-img-clear{ display:none; position:absolute; top:8px; right:8px; z-index:2; width:26px; height:26px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(10,10,12,.82); color:#fff; font-size:11px; line-height:1; cursor:pointer; } .bb-img-drop.has .bb-img-clear{ display:grid; place-items:center; } .bb-pack .bb-fg-sel{ margin-top:16px; } .bb-pack .bb-sel-head{ justify-content:flex-start; align-items:baseline; gap:4px; } .bb-pack .bb-sel-head .bb-count{ margin-left:auto; font-variant-numeric:tabular-nums; } @media (max-width:680px){ /* one column; the preview right under the name so typing shows on the pack */ .bb-pack .bb-grid{ display:flex; flex-direction:column; align-items:stretch; gap:0; } .bb-pack .bb-left, .bb-pack .bb-right{ display:contents; } .bb-pack .bb-fg-text{ order:1; } .bb-pack .bb-pv{ order:2; margin-top:14px; } .bb-pack .bb-fg-logo{ order:3; } .bb-pack .bb-fg-desc{ order:4; } .bb-pack .bb-fg-coins{ order:5; } .bb-pack .bb-fg-sel{ order:6; } .bkp--preview{ --w:176px; } .bb-trims{ gap:5px; } } /* ========================================================================== HOMEPAGE LINE-UP - the Gacha fan, value for value (gacha/index.html ".gacha-home-packs"): the Signature in front at 1.1x, the two locked editions tucked 74px behind it at .88x with a 6deg outward tilt, a soft dim and an X-wrapped chain that fades out at the edges. ========================================================================== */ .baskt-home-packs{ gap:0 !important; align-items:flex-start !important; flex-wrap:nowrap !important; } .baskt-home-packs .home-pack-art{ position:relative; } /* Gacha prints all three bags at one 260px box and lets the transforms do the sizing (.88 behind, 1.1 in front), so the locked ones stay big enough to read */ .baskt-home-packs .home-pack .bkp{ --w:260px; } .baskt-home-packs .home-pack.is-live::before{ display:none; } .baskt-home-packs .home-pack{ position:relative; transition:transform .28s cubic-bezier(.2,.8,.2,1) !important; } .baskt-home-packs .home-pack:nth-child(1){ z-index:1 !important; margin-right:-74px !important; transform:scale(.88) rotate(-6deg) translateY(24px) !important; } .baskt-home-packs .home-pack:nth-child(2){ z-index:3 !important; transform:scale(1.1) translateY(-6px) !important; } .baskt-home-packs .home-pack:nth-child(3){ z-index:1 !important; margin-left:-74px !important; transform:scale(.88) rotate(6deg) translateY(24px) !important; } .baskt-home-packs .home-pack:nth-child(1):hover{ transform:scale(.92) rotate(-5deg) translateY(22px) !important; } .baskt-home-packs .home-pack:nth-child(2):hover{ transform:scale(1.16) translateY(-10px) !important; } .baskt-home-packs .home-pack:nth-child(3):hover{ transform:scale(.92) rotate(5deg) translateY(22px) !important; } .baskt-home-packs .is-soon .bkb-img{ filter:brightness(.72); } /* chain: hugs the pack, a second strand through ::before makes the X */ .baskt-home-packs .home-chain{ left:6% !important; right:6% !important; top:50% !important; height:36px !important; z-index:2 !important; opacity:1 !important; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%); filter:drop-shadow(0 5px 8px rgba(0,0,0,.9)) drop-shadow(0 0 10px rgba(0,0,0,.7)) drop-shadow(0 0 2px rgba(255,255,255,.3)) !important; } .baskt-home-packs .home-soon::before{ content:""; position:absolute; left:6%; right:6%; top:50%; height:36px; -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%); transform:translateY(-50%) rotate(15deg); background:url("data:image/svg+xml,") repeat-x center; background-size:auto 100%; z-index:2; opacity:.82; filter:drop-shadow(0 4px 8px rgba(0,0,0,.75)); pointer-events:none; } .baskt-home-packs .home-soon{ z-index:3 !important; background:rgba(4,4,4,.18) !important; } .baskt-home-packs .home-lock, .baskt-home-packs .home-soon span{ z-index:5 !important; } /* phones: like Gacha, the fan flattens; sized so all three stay on one row */ @media (max-width:720px){ .baskt-home-packs{ gap:8px !important; align-items:flex-end !important; } .baskt-home-packs .home-pack:nth-child(1), .baskt-home-packs .home-pack:nth-child(3){ margin:0 !important; transform:none !important; } .baskt-home-packs .home-pack:nth-child(2){ transform:none !important; } .baskt-home-packs .is-soon .bkp--side{ --w:min(26vw, 104px); } .baskt-home-packs .is-live .bkp--hero{ --w:min(38vw, 150px); } .baskt-home-packs .home-lock{ width:40px; height:40px; } .baskt-home-packs .home-lock svg{ width:19px; height:19px; } .baskt-home-packs .home-soon{ gap:8px; } .baskt-home-packs .home-soon span{ font-size:9px; padding:5px 9px; } .baskt-home-packs .home-chain, .baskt-home-packs .home-soon::before{ height:20px !important; } .baskt-home-packs .is-soon .home-pack-name{ font-size:11.5px; } .baskt-home-packs .is-soon .home-pack-status{ font-size:10px; } }