/* /card/: one physical card, one buy box, the whole page given over to it.

   The card is two faces in 3D that card.js turns: it follows the pointer, it
   can be grabbed and spun, and a tap flips it. Everything that moves here
   stops moving for prefers-reduced-motion, and the page still sells the card
   with no script at all — the faces are plain images and the button a link. */

body:has(.cardpage){background:#3a1f06;overflow-x:hidden}
.cardpage{position:relative;min-height:100svh;padding:18px 16px 40px;color:var(--cream);
  display:flex;flex-direction:column;isolation:isolate}
.cardpage::before{content:"";position:fixed;inset:0;z-index:-2;
  background:radial-gradient(120% 90% at var(--gx,50%) var(--gy,40%),
      #ffb347 0%,var(--orange) 26%,#b85c0c 58%,#3a1f06 100%)}
.cardpage .home{color:var(--ink);border-bottom-color:var(--ink);align-self:flex-start;
  margin-bottom:0;font-weight:600}
#spores{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* --- the drone switch, just over the card --------------------------------
   It shows itself when the pointer comes to the card. Once it is playing it
   stays faintly in view, so it can be found again to turn off; on a screen
   with no pointer to hover it is always there. */
.drone{position:absolute;left:50%;top:calc(50% - var(--w) * .7 - 58px);z-index:3;
  transform:translate(-50%,8px);opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s;
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:.82rem;
  font-weight:700;color:var(--cream);background:rgba(10,10,10,.55);
  border:2px solid rgba(244,231,206,.35);padding:7px 13px 7px 11px;cursor:pointer;
  border-radius:14px 9px 15px 8px;backdrop-filter:blur(6px)}
.drone:hover,.drone:focus-visible{border-color:var(--sun);color:var(--sun)}
.drone .eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.drone .eq i{display:block;width:3px;height:4px;background:currentColor;border-radius:2px;
  transition:height .3s}
.drone[aria-pressed="true"]{background:var(--ink);border-color:var(--sun);color:var(--sun)}
.drone[aria-pressed="true"] .eq i{animation:eq 1.6s ease-in-out infinite}
.drone[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.5s}
.drone[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-1.1s}
.drone[aria-pressed="true"] .eq i:nth-child(4){animation-delay:-.8s}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.table:hover .drone,.drone:focus-visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.drone[aria-pressed="true"]{opacity:.55;pointer-events:auto}
.table:hover .drone[aria-pressed="true"]{opacity:1}
@media (hover:none){.drone{opacity:1;transform:translate(-50%,0);pointer-events:auto}}

/* --- the stage: card on the left, the one buy box on the right ----------- */
.showroom{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
  gap:clamp(20px,5vw,72px);align-items:center;max-width:1180px;width:100%;margin:0 auto;
  padding-top:12px}
.table{--w:min(360px,72vw);position:relative;display:grid;place-items:center;min-height:min(78svh,720px);
  perspective:1400px;touch-action:none}

.card{position:relative;width:var(--w);aspect-ratio:5/7;
  transform-style:preserve-3d;cursor:grab;outline:none;
  transform:translate3d(var(--jx,0px),calc(var(--bob,0px) + var(--jy,0px)),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
            rotateZ(calc(var(--rz,0deg) + var(--jr,0deg))) scale(var(--sc,1));will-change:transform}
.card.grab{cursor:grabbing}
.card:focus-visible .face{outline:4px solid var(--sun);outline-offset:6px}
.face{position:absolute;inset:0;border-radius:18px;overflow:hidden;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;background:var(--ink);
  box-shadow:0 0 0 1px rgba(10,10,10,.5),inset 0 0 0 1px rgba(255,255,255,.12)}
.face img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;
  -webkit-user-drag:none;pointer-events:none}
.face.front{transform:translateZ(1.5px)}
.face.back{transform:rotateY(180deg) translateZ(1.5px)}
/* The card's edge: a cream core between the faces that shows only side-on. */
.edge{position:absolute;inset:1px;border-radius:17px;background:var(--cream);
  transform:translateZ(0)}
.edge.e1{transform:translateZ(.75px)}.edge.e2{transform:translateZ(-.75px)}

/* Foil: a band of colour that slides with the angle, and a glare that sits
   where the light would catch. card.js sets --mx/--my (0..100) and --foil. */
.sheen,.glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit}
.sheen{mix-blend-mode:color-dodge;opacity:var(--foil,.35);
  background:linear-gradient(115deg,transparent 20%,rgba(232,195,58,.55) 36%,
      rgba(64,224,160,.45) 46%,rgba(255,120,200,.4) 56%,transparent 72%);
  background-size:260% 260%;background-position:var(--mx,50%) var(--my,50%)}
.glare{mix-blend-mode:overlay;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.75) 0%,rgba(255,255,255,.12) 28%,transparent 55%)}

.shadow{position:absolute;left:50%;top:calc(50% + var(--w) * .7 + 6px);
  width:calc(var(--w) * .9);height:40px;transform:translateX(-50%) scaleX(var(--shw,1));
  background:radial-gradient(closest-side,rgba(40,18,0,.55),transparent);
  filter:blur(6px);pointer-events:none;opacity:var(--sho,.9)}

.hint{position:absolute;bottom:0;left:50%;transform:translateX(-50%);margin:0;
  font-size:.8rem;font-style:italic;color:var(--ink);opacity:.75;text-align:center;
  width:min(440px,92%);line-height:1.4;
  transition:opacity .6s}
.hint.gone{opacity:0}

/* --- the buy box ---------------------------------------------------------- */
.buybox{position:relative;background:rgba(10,10,10,.86);color:var(--cream);
  padding:28px 28px 24px;border:3px solid var(--sun);box-shadow:9px 11px 0 var(--cast);
  border-radius:34px 26px 38px 24px/26px 38px 24px 34px;backdrop-filter:blur(8px)}
.buybox .kicker{margin:0 0 4px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sun);font-weight:700}
.buybox h1{color:var(--cream);font-size:clamp(2rem,4.4vw,3rem);line-height:1.05;margin:0 0 10px;
  letter-spacing:.02em}
.buybox .tag{color:var(--sun);font-style:italic;margin:0 0 14px}
.buybox .about{font-size:.95rem;margin:0 0 16px}
.price{display:flex;align-items:baseline;gap:10px;margin:0 0 16px}
.price b{font-size:3.2rem;line-height:1;color:var(--sun);letter-spacing:-.02em}
.price small{font-size:.85rem;color:var(--bark);font-style:italic}
.buybox .facts{margin:0 0 22px}
.buybox .facts b{min-width:6.5em}

/* The button turns over on its own every few seconds, top to bottom, showing
   the price on one face and the promise on the other. Pointed at, it turns
   to the promise and holds; pressed, it spins a full turn on its way out. */
.flip{display:block;width:100%;height:64px;perspective:700px;text-decoration:none;
  color:var(--ink);font-weight:800;font-size:1.12rem;outline:none;
  -webkit-tap-highlight-color:transparent}
.flip .turn{position:relative;display:block;height:100%;transform-style:preserve-3d;
  animation:tumble 5.2s cubic-bezier(.68,-.35,.27,1.35) infinite}
.flip .side{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:3px solid var(--ink);border-radius:18px 12px 19px 11px;
  box-shadow:5px 6px 0 var(--cast)}
.flip .side.a{background:var(--sun);transform:translateZ(1px)}
.flip .side.b{background:var(--orange);transform:rotateX(180deg) translateZ(1px)}
.flip .side .arrow{display:inline-block;transition:transform .3s}
@keyframes tumble{
  0%,38%{transform:rotateX(0)}
  50%,88%{transform:rotateX(180deg)}
  100%{transform:rotateX(360deg)}}
.flip:hover .turn,.flip:focus-visible .turn{animation:none;transform:rotateX(180deg) rotateZ(-1.5deg);
  transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.flip:hover .arrow,.flip:focus-visible .arrow{transform:translateX(5px)}
.flip:focus-visible .side{outline:3px solid var(--cream);outline-offset:3px}
.flip.go .turn{animation:spinout .9s cubic-bezier(.5,-.4,.3,1.4) forwards}
@keyframes spinout{
  0%{transform:rotateX(180deg) rotateY(0) scale(1)}
  40%{transform:rotateX(180deg) rotateY(200deg) scale(1.06)}
  100%{transform:rotateX(180deg) rotateY(720deg) scale(1)}}
.flip.soon{pointer-events:none}
/* Outside the US: the same card by a second door, quieter than the first. */
.abroad{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  margin-top:14px;padding:12px 16px;text-align:center;color:var(--cream);font-weight:700;
  text-decoration:none;border:2px dashed var(--sun);border-radius:14px 18px 12px 17px;
  transition:background .2s,transform .2s}
.abroad .arrow{display:inline-block;transition:transform .3s}
.abroad:hover,.abroad:focus-visible{background:var(--sun);color:var(--ink);transform:rotate(-.6deg)}
.abroad:hover .arrow,.abroad:focus-visible .arrow{transform:translateX(5px)}
.flip.soon .turn{animation:none}
.flip.soon .side.a{background:rgba(156,134,121,.5);color:var(--cream)}

.buybox .note{margin-top:14px;color:var(--bark)}
.buybox .note a{color:var(--sun)}
.spark{position:fixed;width:9px;height:9px;border-radius:50%;pointer-events:none;z-index:9;
  background:var(--c,var(--sun))}

/* --- design mode (?design): try art on the card without building --------- */
.designer{position:fixed;left:16px;bottom:16px;z-index:8;background:var(--ink);
  color:var(--cream);border:2px dashed var(--sun);border-radius:14px;padding:12px 14px;
  font-size:.8rem;max-width:min(320px,calc(100vw - 32px));display:grid;gap:8px}
.designer b{color:var(--sun)}
.designer label{display:flex;gap:8px;align-items:center;justify-content:space-between}
.designer input[type=file]{font:inherit;font-size:.72rem;color:var(--cream);max-width:170px}
.designer button{font:inherit;font-size:.75rem;cursor:pointer;justify-self:start;
  background:var(--sun);color:var(--ink);border:0;border-radius:9px;padding:4px 10px}
.dropzone{position:fixed;inset:12px;z-index:7;border:4px dashed var(--sun);border-radius:28px;
  display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:var(--cream);
  background:rgba(10,10,10,.55);pointer-events:none;opacity:0;transition:opacity .2s}
.dropzone.on{opacity:1}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,30px);z-index:9;
  background:var(--ink);color:var(--sun);padding:9px 16px;border-radius:12px;font-size:.85rem;
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.on{opacity:1;transform:translate(-50%,0)}

.cardpage footer{max-width:1180px;width:100%;margin:28px auto 0;font-size:.82rem;color:var(--ink)}
.cardpage footer a{color:var(--ink)}
.cardpage footer p{margin:0}

@media (max-width:860px){
  .showroom{grid-template-columns:1fr;gap:8px}
  .table{min-height:auto;padding:72px 0 40px}
  .table{--w:min(300px,70vw)}
  .buybox{padding:22px 20px 20px}
  .price b{font-size:2.7rem}
}

@media (prefers-reduced-motion:reduce){
  .flip .turn,.drone[aria-pressed="true"] .eq i{animation:none}
  .flip.go .turn{animation:none}
  .flip:hover .turn,.flip:focus-visible .turn{transition:none}
}