/* ============================================================
   NAME BADGES — "Dead Tag, Working Badge" rebuild
   Loads alongside shmocard.css + shmello.css
   Scene artifacts appended below the base block:
   tb- talking badge hero · ab- appraisal bench (loupe) · tp- one badge two pages
   sh- shirt on hook · bd- badge board (clock) · op- order sheet
   ============================================================ */

/* two-column scene + copy rhythm */
.nb-duo{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:2.6rem;align-items:center;margin-top:2.4rem;
}
.nb-duo>*{min-width:0;}
.nb-duo .duo-copy p{font-size:.98rem;color:#9db8d6;line-height:1.6;margin:0 0 1rem;}
.nb-duo .duo-copy p strong{color:#eef4fb;}
@media(max-width:900px){
  .nb-duo{grid-template-columns:1fr;gap:1.8rem;}
}

/* caption line under a standalone scene */
.nb-after{
  max-width:640px;margin:2rem auto 0;text-align:center;
  font-size:.95rem;color:#9db8d6;line-height:1.6;
}
.nb-after b{color:#ffd98c;}
.nb-after a{color:#7fc1ff;font-weight:700;text-decoration:none;}
.nb-after a:hover{text-decoration:underline;}

/* proof wall: real screenshots pinned like clippings */
.proof-wall{
  display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:center;
  margin-top:2.4rem;align-items:flex-start;
}
.proof-wall figure{
  margin:0;position:relative;flex:0 1 380px;min-width:260px;
}
.proof-wall figure:nth-child(1){transform:rotate(-1.6deg);}
.proof-wall figure:nth-child(2){transform:rotate(1.2deg);margin-top:1.4rem;}
.proof-wall figure:nth-child(3){transform:rotate(-.8deg);}
.proof-wall img{
  display:block;width:100%;height:auto;border-radius:10px;
  border:1px solid rgba(127,166,204,.25);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.proof-wall figure::before{
  content:"";position:absolute;width:70px;height:20px;top:-9px;left:50%;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(207,227,247,.16);border:1px solid rgba(207,227,247,.12);border-radius:2px;
  z-index:2;
}
.proof-wall figcaption{
  text-align:center;font-size:.78rem;color:#7fa6cc;margin-top:.7rem;letter-spacing:.03em;
}

/* bulk story: three plain facts, no cards */
.bulk-line{
  max-width:680px;margin:2.2rem auto 0;text-align:center;
  font-size:1.05rem;color:#cfe0f3;line-height:1.8;
}
.bulk-line b{color:#ffd98c;font-weight:900;}

/* ============================================================
   SCENE: hero (tb-)
   ============================================================ */
/* ============ TB STAGE: The Talking Badge ============ */
.tb-stage{position:relative;width:100%;--tb-gold:#ffe7a8;--tb-blue:#1b8df6;--tb-blue-l:#7fc1ff;}
.tb-stage *{box-sizing:border-box;}

.tb-scene{position:relative;min-height:520px;overflow:hidden;}
/* warm key light pool, upper left */
.tb-scene::before{content:"";position:absolute;inset:-8% -4%;pointer-events:none;
  background:
    radial-gradient(58% 52% at 30% 22%, rgba(255,225,160,.22), rgba(255,200,120,.07) 46%, transparent 72%),
    radial-gradient(40% 26% at 38% 78%, rgba(255,215,140,.06), transparent 70%);}
/* faint velvet falloff lower right */
.tb-scene::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 70% at 82% 88%, rgba(2,6,14,.42), transparent 70%);}

/* ---------- badge assembly ---------- */
.tb-badgeWrap{position:absolute;left:13%;top:56px;width:189px;z-index:3;
  transform:rotate(-4deg);transform-origin:50% 0;
  animation:tbFloat 6s ease-in-out infinite;animation-play-state:paused;}
.tb-stage.tb-live .tb-badgeWrap{animation-play-state:running;}
@keyframes tbFloat{
  0%,100%{transform:rotate(-4deg) translateY(0);}
  50%{transform:rotate(-3.2deg) translateY(-9px);}
}

/* spring clip */
.tb-clip{position:absolute;left:50%;top:-44px;transform:translateX(-50%);width:38px;height:58px;z-index:4;pointer-events:none;}
.tb-clipBody{position:relative;width:38px;height:27px;border-radius:7px 7px 5px 5px;
  background:linear-gradient(108deg,#d9dfe7 4%,#98a3b1 34%,#eef2f6 50%,#7c8795 72%,#aab3bf 96%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65), inset 0 -2px 3px rgba(15,22,34,.45), 0 3px 6px rgba(0,0,0,.5);}
.tb-clipBody::before{content:"";position:absolute;left:6px;right:6px;top:8px;height:3px;border-radius:2px;
  background:linear-gradient(180deg,#5c6672,#2e3742);box-shadow:0 1px 0 rgba(255,255,255,.35);}
.tb-clipBody::after{content:"";position:absolute;left:6px;right:6px;top:16px;height:3px;border-radius:2px;
  background:linear-gradient(180deg,#5c6672,#2e3742);box-shadow:0 1px 0 rgba(255,255,255,.35);}
.tb-clipLoop{width:18px;height:32px;margin:-4px auto 0;border-radius:9px;
  border:4px solid #9aa5b2;border-top-color:#c6cdd6;border-bottom-color:#6e7987;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.45);}

/* ping ring from the badge */
.tb-pingRing{position:absolute;inset:0;border-radius:16px;border:2px solid rgba(127,193,255,.55);
  opacity:0;pointer-events:none;z-index:1;
  animation:tbPing 4s ease-out infinite;animation-play-state:paused;}
.tb-stage.tb-live .tb-pingRing{animation-play-state:running;}
@keyframes tbPing{
  0%{transform:scale(.94);opacity:0;}
  8%{opacity:.5;}
  46%{transform:scale(1.28);opacity:0;}
  100%{transform:scale(1.28);opacity:0;}
}

/* the badge button + 3d spring flip */
.tb-badge{position:relative;display:block;width:100%;aspect-ratio:460/730;padding:0;margin:0;
  border:0;background:transparent;cursor:pointer;perspective:1000px;z-index:2;
  -webkit-tap-highlight-color:transparent;}
.tb-badge:focus-visible{outline:3px solid var(--tb-gold);outline-offset:6px;border-radius:16px;}
.tb-flipInner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.22,1.42,.36,1);}
.tb-stage.tb-flipped .tb-flipInner{transform:rotateY(180deg);}
.tb-face{display:block;position:absolute;inset:0;border-radius:14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  /* physical thickness: card edge + drop */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    3px 4px 0 -1px #202c40,
    5px 7px 0 -2px #131d2e,
    14px 26px 44px rgba(0,0,0,.6);}
.tb-face img{display:block;width:100%;height:100%;object-fit:cover;}
.tb-faceBack{transform:rotateY(180deg);}
/* glare sweep on front */
.tb-glare{display:block;position:absolute;inset:0;border-radius:14px;overflow:hidden;pointer-events:none;}
.tb-glare::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-65%;width:48%;
  background:linear-gradient(105deg,transparent, rgba(255,250,235,.24) 46%, rgba(255,250,235,.06) 62%, transparent);
  transform:skewX(-16deg);
  animation:tbGlare 7s linear infinite;animation-play-state:paused;}
.tb-stage.tb-live .tb-glare::after{animation-play-state:running;}
@keyframes tbGlare{0%{left:-65%;}13%{left:135%;}100%{left:135%;}}

/* reflection */
.tb-reflect{position:absolute;left:0;top:calc(100% + 10px);width:100%;aspect-ratio:460/730;
  transform:scaleY(-1);pointer-events:none;z-index:0;
  filter:blur(7px);opacity:.16;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 42%);
  mask-image:linear-gradient(to top, rgba(0,0,0,.85), transparent 42%);}
.tb-reflect img{display:block;width:100%;height:100%;object-fit:cover;border-radius:14px;}
/* floor pool under badge */
.tb-floor{position:absolute;left:50%;top:calc(100% + 2px);width:240px;height:44px;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);z-index:0;pointer-events:none;}

/* ---------- phone ---------- */
.tb-phone{position:absolute;right:13%;bottom:26px;width:148px;aspect-ratio:136/276;z-index:4;
  transform-origin:56% 92%;transform:rotate(-7deg);
  animation:tbLean 9s ease-in-out infinite;animation-play-state:paused;}
.tb-stage.tb-live .tb-phone{animation-play-state:running;}
@keyframes tbLean{
  0%{transform:rotate(-7deg) translate(0,0);}
  7%,44%{transform:rotate(-13deg) translate(-14px,-12px);}
  53%,100%{transform:rotate(-7deg) translate(0,0);}
}
.tb-phoneBody{position:absolute;inset:0;border-radius:22px;background:#070c15;
  border:1px solid #2b3850;
  box-shadow:inset 0 0 0 3px #10192a, -10px 18px 34px rgba(0,0,0,.6), inset -1px -1px 2px rgba(0,0,0,.8), inset 1px 1px 1px rgba(140,170,210,.18);}
.tb-screen{position:absolute;inset:7px;border-radius:16px;overflow:hidden;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(27,60,110,.35), transparent 60%),
    linear-gradient(180deg,#0c1526 0%, #080f1c 60%, #060b14 100%);}
.tb-island{width:34px;height:9px;border-radius:5px;background:#01040a;margin:7px auto 0;}
.tb-lockIco{display:block;text-align:center;margin-top:12px;font-size:11px;color:#54708f;}
.tb-clock{text-align:center;font-size:30px;font-weight:600;letter-spacing:.01em;color:#c9d8ec;margin-top:2px;
  font-variant-numeric:tabular-nums;}
.tb-date{text-align:center;font-size:8.5px;font-weight:500;color:#6d89a9;margin-top:1px;letter-spacing:.04em;}
.tb-quick{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:space-between;padding:0 12px;}
.tb-quick span{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:center;font-size:9px;color:#5d7896;}
.tb-homebar{position:absolute;left:50%;bottom:3px;width:36px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.22);transform:translateX(-50%);}

/* system banner */
.tb-banner{position:absolute;left:5px;right:5px;top:5px;display:flex;align-items:center;gap:5px;
  padding:5px 6px;border-radius:9px;background:rgba(40,54,78,.94);
  border:1px solid rgba(130,165,210,.22);
  box-shadow:0 4px 10px rgba(0,0,0,.45);
  transform:translateY(-130%);
  animation:tbBanner 9s ease-in-out infinite;animation-play-state:paused;}
.tb-stage.tb-live .tb-banner{animation-play-state:running;}
@keyframes tbBanner{
  0%,15%{transform:translateY(-130%);}
  18.5%{transform:translateY(4%);}
  20%,42%{transform:translateY(0);}
  46%,100%{transform:translateY(-130%);}
}
.tb-banner img{width:17px;height:17px;border-radius:4px;flex:none;object-fit:contain;background:#0d1a2e;padding:1px;}
.tb-bannerTxt{min-width:0;}
.tb-bannerTitle{font-size:7.5px;font-weight:700;letter-spacing:-.01em;color:#eef4fb;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-bannerSub{font-size:7.5px;font-weight:500;color:#9db8d6;line-height:1.25;white-space:nowrap;}

/* NFC ripples at the contact point: anchored to the phone's top left corner */
.tb-nfc{position:absolute;left:6px;top:14px;z-index:5;width:0;height:0;pointer-events:none;}
.tb-nfc span{position:absolute;left:-24px;top:-24px;width:48px;height:48px;border-radius:50%;
  border:2px solid var(--tb-blue-l);opacity:0;
  box-shadow:0 0 12px rgba(27,141,246,.35), inset 0 0 8px rgba(127,193,255,.25);
  animation:tbRipple 9s linear infinite;animation-play-state:paused;}
.tb-stage.tb-live .tb-nfc span{animation-play-state:running;}
.tb-nfc span:nth-child(2){animation-delay:.45s;}
.tb-nfc span:nth-child(3){animation-delay:.9s;}
@keyframes tbRipple{
  0%,7%{transform:scale(.18);opacity:0;}
  9%{opacity:.85;transform:scale(.34);}
  17%{transform:scale(1.5);opacity:0;}
  100%{transform:scale(1.5);opacity:0;}
}

/* ---------- caption ---------- */
.tb-caption{margin:10px auto 0;max-width:520px;text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.09em;color:#7fa6cc;
  text-shadow:0 1px 0 rgba(0,0,0,.65);}
.tb-caption::before,.tb-caption::after{content:"";display:inline-block;width:26px;height:1px;
  background:linear-gradient(90deg,transparent,#3a5578);vertical-align:middle;margin:0 10px 2px;}
.tb-caption::after{background:linear-gradient(90deg,#3a5578,transparent);}

/* ---------- mobile ---------- */
@media (max-width:560px){
  .tb-scene{min-height:442px;}
  .tb-scene::before{background:
    radial-gradient(70% 56% at 42% 26%, rgba(255,225,160,.2), rgba(255,200,120,.06) 48%, transparent 74%);}
  .tb-badgeWrap{width:145px;left:6%;top:44px;}
  .tb-clip{top:-40px;width:32px;height:50px;}
  .tb-clipBody{width:32px;height:23px;}
  .tb-clipLoop{height:27px;}
  .tb-floor{width:180px;height:34px;}
  .tb-phone{width:108px;right:5%;bottom:-58px;}
  .tb-clock{font-size:24px;margin-top:0;}
  .tb-lockIco{margin-top:9px;font-size:10px;}
  .tb-banner{top:4px;left:4px;right:4px;padding:4px 5px;}
  .tb-bannerTitle{font-size:7px;white-space:normal;}
  .tb-bannerSub{font-size:6.5px;}
  .tb-banner img{width:14px;height:14px;}
  .tb-nfc{left:4px;top:10px;}
  .tb-nfc span{left:-20px;top:-20px;width:40px;height:40px;}
  .tb-caption{font-size:10px;letter-spacing:.06em;}
  .tb-caption::before,.tb-caption::after{width:12px;margin:0 6px 2px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .tb-badgeWrap,.tb-pingRing,.tb-glare::after,.tb-phone,.tb-banner,.tb-nfc span{animation:none !important;}
  .tb-pingRing{opacity:0;}
  .tb-glare{display:none;}
  .tb-phone{transform:rotate(-10deg) translate(-10px,-8px);}
  .tb-banner{transform:translateY(0);}
  .tb-nfc span{opacity:.35;transform:scale(.7);}
  .tb-nfc span:nth-child(2){transform:scale(1);opacity:.2;}
  .tb-nfc span:nth-child(3){transform:scale(1.3);opacity:.1;}
  .tb-flipInner{transition:none;}
}

/* ============================================================
   SCENE: bench (ab-)
   ============================================================ */
/* ===== Scene: The Appraisal Bench ===== */
.ab-stage{
  position:relative;
  width:100%;
  --ab-tilt:-6deg;
  --ab-gold:#ffe7a8;
  --ab-copper:#e8a45c;
}
.ab-stage, .ab-stage *, .ab-stage *::before, .ab-stage *::after{box-sizing:border-box;}

/* ---- frame ---- */
.ab-stage .ab-frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:300px;
  border-radius:16px 16px 4px 4px;
  overflow:hidden;
  background:
    radial-gradient(130% 100% at 80% -10%, #1c2740 0%, #0d1728 46%, #070d19 100%);
}
.ab-stage .ab-frame::after{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 90px rgba(3,7,14,.7);
  pointer-events:none;
  z-index:5;
}

/* ---- back wall: balance scale silhouette ---- */
.ab-stage .ab-scale{
  position:absolute;
  left:5%; top:7%;
  width:24%; max-width:230px;
  opacity:.5;
  z-index:1;
}
.ab-stage .ab-scale path,
.ab-stage .ab-scale line,
.ab-stage .ab-scale circle,
.ab-stage .ab-scale rect{
  stroke:#223650; fill:none; stroke-width:3; stroke-linecap:round;
}
.ab-stage .ab-scale .ab-scalefill{fill:#1a2a42; stroke:none;}

/* ---- bench surface ---- */
.ab-stage .ab-bench{
  position:absolute;
  left:0; right:0; bottom:0;
  height:33%;
  z-index:1;
  background:linear-gradient(180deg,#3f2c15 0%,#241708 42%,#0f0a05 100%);
}
.ab-stage .ab-bench::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, rgba(255,220,160,.04), rgba(255,220,160,.32) 70%, rgba(255,220,160,.1));
}
.ab-stage .ab-pool{
  position:absolute;
  left:4%; bottom:2%;
  width:58%; height:44%;
  z-index:2;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,210,140,.17), rgba(255,210,140,0) 70%);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* ---- lamp cone + glow ---- */
.ab-stage .ab-lamp{
  position:absolute; inset:0;
  z-index:4;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(211deg, rgba(255,219,150,.38) 0%, rgba(255,219,150,.14) 38%, rgba(255,219,150,0) 66%);
  clip-path:polygon(56% -14%, 114% -14%, 130% 116%, 22% 116%);
  mix-blend-mode:screen;
}
.ab-stage .ab-lampglow{
  position:absolute;
  top:-8%; right:2%;
  width:34%; height:34%;
  z-index:4;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(closest-side, rgba(255,228,170,.6), rgba(255,228,170,0));
  mix-blend-mode:screen;
}
.ab-stage.ab-in .ab-lamp,
.ab-stage.ab-in .ab-lampglow{
  animation:abBloom 1.7s ease forwards;
}
@keyframes abBloom{
  0%{opacity:0}
  55%{opacity:1}
  100%{opacity:.88}
}

/* ---- dust motes ---- */
.ab-stage .ab-motes{position:absolute; inset:0; z-index:4; pointer-events:none;}
.ab-stage .ab-motes i{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--ab-gold);
  opacity:0;
}
.ab-stage .ab-motes i:nth-child(1){left:64%; top:24%;}
.ab-stage .ab-motes i:nth-child(2){left:74%; top:40%; width:2px; height:2px;}
.ab-stage .ab-motes i:nth-child(3){left:58%; top:52%;}
.ab-stage .ab-motes i:nth-child(4){left:82%; top:18%; width:2px; height:2px;}
.ab-stage .ab-motes i:nth-child(5){left:69%; top:62%;}
.ab-stage .ab-motes i:nth-child(6){left:52%; top:34%; width:2px; height:2px;}
.ab-stage.ab-in .ab-motes i{animation:abMote 8s linear infinite;}
.ab-stage.ab-in .ab-motes i:nth-child(2){animation-delay:1.4s; animation-duration:10s;}
.ab-stage.ab-in .ab-motes i:nth-child(3){animation-delay:2.8s; animation-duration:9s;}
.ab-stage.ab-in .ab-motes i:nth-child(4){animation-delay:4.4s; animation-duration:11s;}
.ab-stage.ab-in .ab-motes i:nth-child(5){animation-delay:5.6s; animation-duration:8.5s;}
.ab-stage.ab-in .ab-motes i:nth-child(6){animation-delay:6.8s; animation-duration:9.5s;}
@keyframes abMote{
  0%{transform:translate(0,12px); opacity:0}
  18%{opacity:.65}
  70%{opacity:.3}
  100%{transform:translate(-16px,-30px); opacity:0}
}

/* ---- badge (print + x-ray) ---- */
.ab-stage .ab-badge{
  position:absolute;
  left:27%; top:60%;
  height:min(215px, 62%);
  aspect-ratio:460/730;
  transform:translate(-50%,-50%) rotate(var(--ab-tilt));
  z-index:3;
}
.ab-stage .ab-print{
  display:block;
  width:100%; height:100%;
  border-radius:10px;
  box-shadow:-14px 20px 30px rgba(0,0,0,.55);
  pointer-events:none;
}
.ab-stage .ab-xray{
  position:absolute; inset:0;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(160deg,#111a29 0%,#0a111d 100%);
  box-shadow:inset 0 0 0 1px rgba(127,193,255,.22);
  clip-path:circle(0px at 50% 50%);
}
.ab-stage .ab-ghost{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.13;
  filter:grayscale(1) invert(.88) contrast(1.15) brightness(.85);
  mix-blend-mode:screen;
  pointer-events:none;
}
.ab-stage .ab-circuit{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.ab-stage .ab-coil{
  fill:none;
  stroke:url(#abCuGrad);
  stroke-width:9;
}
.ab-stage .ab-trace{
  fill:none;
  stroke:url(#abCuGrad);
  stroke-width:5;
}
.ab-stage .ab-chipbody{
  fill:#131c2b;
  stroke:var(--ab-copper);
  stroke-width:3;
}
.ab-stage .ab-pin{fill:#e8c07a;}
.ab-stage .ab-chiptext{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:38px;
  letter-spacing:7px;
  fill:#ffd98c;
  text-anchor:middle;
  opacity:.92;
}
.ab-stage .ab-rip{
  fill:none;
  stroke:var(--ab-copper);
  stroke-width:5;
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
}
.ab-stage .ab-fire .ab-rip{animation:abRip 1.1s ease-out forwards;}
.ab-stage .ab-fire .ab-rip:nth-of-type(2){animation-delay:.22s;}
@keyframes abRip{
  0%{transform:scale(.35); opacity:.9}
  100%{transform:scale(2.4); opacity:0}
}
.ab-stage .ab-fire .ab-chipbody{animation:abChipHot 1s ease;}
@keyframes abChipHot{
  0%{filter:none}
  30%{filter:drop-shadow(0 0 14px rgba(232,164,92,.95)) brightness(1.9)}
  100%{filter:none}
}

/* backlight lit state */
.ab-stage.ab-lit .ab-circuit{filter:drop-shadow(0 0 7px rgba(232,164,92,.45));}
.ab-stage.ab-lit .ab-xray{box-shadow:inset 0 0 0 1px rgba(127,193,255,.35), 0 0 44px rgba(127,193,255,.14);}

/* ---- loupe ---- */
.ab-stage .ab-loupe{
  position:absolute;
  left:0; top:0;
  width:96px; height:96px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:grab;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  z-index:6;
  -webkit-tap-highlight-color:transparent;
}
.ab-stage .ab-loupe.ab-grab{cursor:grabbing;}
.ab-stage .ab-loupe:focus{outline:none;}
.ab-stage .ab-loupe:focus-visible{box-shadow:0 0 0 3px rgba(127,193,255,.85);}
.ab-stage .ab-handle{
  position:absolute;
  right:-11px; bottom:-33px;
  width:16px; height:56px;
  border-radius:9px;
  transform:rotate(-38deg);
  background:linear-gradient(90deg,#6e4f18,#caa04a 45%,#4c360f);
  box-shadow:0 5px 12px rgba(0,0,0,.55);
  z-index:0;
}
.ab-stage .ab-ring{
  position:absolute; inset:0;
  border-radius:50%;
  background:conic-gradient(from 210deg, #f0c96a, #8a5c16 22%, #d8ae4e 46%, #6e4712 68%, #eec868 88%, #f0c96a);
  -webkit-mask:radial-gradient(closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  mask:radial-gradient(closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.55));
  z-index:2;
}
.ab-stage .ab-glass{
  position:absolute; inset:9px;
  border-radius:50%;
  background:radial-gradient(120% 120% at 30% 24%, rgba(195,228,255,.30), rgba(160,200,240,.06) 42%, rgba(8,16,32,.04) 72%);
  box-shadow:inset 0 0 16px rgba(0,0,0,.35);
  z-index:1;
}

/* ---- manila pawn ticket tag ---- */
.ab-stage .ab-tag{
  position:absolute;
  top:30px; right:3%;
  width:242px;
  padding:26px 15px 15px;
  border-radius:6px;
  background:linear-gradient(155deg,#e8cf9c 0%,#c6a96e 100%);
  box-shadow:0 12px 26px rgba(0,0,0,.5);
  transform:rotate(4deg);
  transform-origin:50% -28px;
  z-index:5;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px;
  line-height:1.75;
  color:#3a2d16;
}
.ab-stage .ab-tag::before{
  content:'';
  position:absolute;
  top:-28px; left:50%;
  width:2px; height:28px;
  background:linear-gradient(180deg, rgba(230,205,160,0), rgba(230,205,160,.65));
}
.ab-stage .ab-tag::after{
  content:'';
  position:absolute; inset:0;
  border-radius:6px;
  background:linear-gradient(104deg, rgba(9,15,27,0) 42%, rgba(9,15,27,.46) 100%);
  pointer-events:none;
}
.ab-stage .ab-taghole{
  position:absolute;
  top:7px; left:50%;
  transform:translateX(-50%);
  width:11px; height:11px;
  border-radius:50%;
  background:#0d1424;
  box-shadow:0 0 0 3px #b3945a;
}
.ab-stage .ab-tagline{white-space:nowrap;}
.ab-stage .ab-tagline b{
  font-weight:700;
  color:#241b0c;
  letter-spacing:.05em;
}
.ab-stage.ab-in .ab-tag{animation:abSway 6.2s ease-in-out infinite;}
@keyframes abSway{
  0%,100%{transform:rotate(2.5deg)}
  50%{transform:rotate(5.5deg)}
}

/* ---- bench-edge bar: backlight switch + caption ---- */
.ab-stage .ab-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 18px 10px;
  border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#2c1d0d 0%,#140d06 100%);
  border-top:1px solid rgba(255,220,160,.14);
}
.ab-stage .ab-switch{
  position:relative;
  flex:0 0 auto;
  width:78px; height:44px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ab-stage .ab-switch:focus{outline:none;}
.ab-stage .ab-switch:focus-visible .ab-track{box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 3px rgba(127,193,255,.85);}
.ab-stage .ab-track{
  position:absolute;
  left:6px; right:6px; top:9px; bottom:9px;
  border-radius:14px;
  background:linear-gradient(180deg,#0c1522,#1b2942);
  border:1px solid #35496b;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 1px 0 rgba(255,230,170,.14);
}
.ab-stage .ab-knob{
  position:absolute;
  left:3px; top:2px;
  width:28px; height:20px;
  border-radius:9px;
  background:linear-gradient(180deg,#dfe8f4,#8fa5c0);
  box-shadow:0 2px 5px rgba(0,0,0,.6);
  transition:left .25s ease, background .25s ease;
}
.ab-stage.ab-lit .ab-knob{
  left:calc(100% - 31px);
  background:linear-gradient(180deg,#ffe7a8,#e8b53f);
}
.ab-stage.ab-lit .ab-track{
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6), 0 0 14px rgba(232,181,63,.4);
  border-color:#7a6127;
}
.ab-stage .ab-swlabel{
  font-size:10px;
  font-weight:600;
  letter-spacing:.24em;
  color:#7fa6cc;
}
.ab-stage .ab-caption{
  margin:0 0 0 auto;
  font-size:.95rem;
  color:#9db8d6;
  text-align:right;
  transition:color .3s ease;
}
.ab-stage.ab-lit .ab-caption{color:#ffd98c;}

/* ---- mobile ---- */
@media (max-width:560px){
  .ab-stage{--ab-tilt:-4deg;}
  .ab-stage .ab-frame{
    aspect-ratio:4/5;
    border-radius:16px;
  }
  .ab-stage .ab-badge{
    left:50%; top:46%;
    height:min(250px, 56%);
  }
  .ab-stage .ab-scale{width:34%; top:5%;}
  .ab-stage .ab-bench{height:30%;}
  .ab-stage .ab-pool{left:14%; width:72%;}
  .ab-stage .ab-loupe{width:88px; height:88px;}
  .ab-stage .ab-tag{
    position:static;
    width:100%;
    margin:10px 0 0;
    padding:14px 16px;
    transform:none;
    animation:none;
    border-radius:10px;
    font-size:12px;
  }
  .ab-stage.ab-in .ab-tag{animation:none; transform:none;}
  .ab-stage .ab-tag::before{display:none;}
  .ab-stage .ab-taghole{display:none;}
  .ab-stage .ab-tagline{white-space:normal;}
  .ab-stage .ab-bar{
    margin-top:10px;
    border-radius:12px;
    border-top:1px solid rgba(255,220,160,.14);
    padding:8px 14px 10px;
  }
  .ab-stage .ab-caption{font-size:.85rem;}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .ab-stage *, .ab-stage *::before, .ab-stage *::after{
    animation:none !important;
    transition:none !important;
  }
  .ab-stage .ab-lamp, .ab-stage .ab-lampglow{opacity:.88 !important;}
  .ab-stage .ab-motes{display:none;}
}

/* ============================================================
   SCENE: shirt (sh-)
   ============================================================ */
/* ============ THE SHIRT ON THE HOOK — sh-stage ============ */
.sh-stage{
  --shW: clamp(215px, 36cqw, 300px);
  position:relative;
  width:100%;
  max-width:880px;
  margin:0 auto;
  height:560px;
  container-type:inline-size;
}
.sh-stage *,.sh-stage *::before,.sh-stage *::after{box-sizing:border-box;}

/* --- spotlight cone from above --- */
.sh-cone{
  position:absolute;
  left:0; top:0;
  width:100%; height:88%;
  clip-path:polygon(40% 0%, 48% 0%, 74% 100%, 14% 100%);
  background:linear-gradient(180deg, rgba(255,231,168,.16), rgba(255,231,168,.05) 55%, rgba(255,231,168,0) 92%);
  pointer-events:none;
  z-index:0;
}
.sh-cone::before{
  content:"";
  position:absolute;
  left:44%; top:-6px;
  width:56px; height:22px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,231,168,.5), rgba(255,231,168,0));
  filter:blur(2px);
}
/* warm pool on the floor under the shirt */
.sh-pool{
  position:absolute;
  left:44%; bottom:4%;
  width:64%; height:12%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,231,168,.10), rgba(255,231,168,.03) 55%, transparent 75%);
  pointer-events:none;
  z-index:0;
}
/* floor plane shading */
.sh-floor{
  position:absolute;
  left:0; right:0; bottom:0;
  height:20%;
  background:linear-gradient(180deg, transparent, rgba(2,5,11,.5));
  pointer-events:none;
  z-index:0;
}

/* --- hook + hanging group --- */
.sh-hang{
  position:absolute;
  left:44%; top:16px;
  width:var(--shW);
  transform:translateX(-50%);
  z-index:2;
}
.sh-hook{
  position:absolute;
  left:50%; top:0;
  transform:translateX(-50%);
  z-index:5;
  display:flex; flex-direction:column; align-items:center;
}
.sh-hookplate{
  position:relative;
  width:18px; height:20px;
  border-radius:4px;
  background:linear-gradient(90deg,#5a6a7c,#9fb0c2 45%,#6c7d90 60%,#46566a);
  box-shadow:0 1px 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.28);
}
.sh-hookplate::before{
  content:"";
  position:absolute;
  left:50%; top:4px;
  width:4px; height:4px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#2c3a4b;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.2);
}
/* stem down from the plate */
.sh-hookplate::after{
  content:"";
  position:absolute;
  left:50%; top:100%;
  width:5px; height:12px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#5f7085,#a7b8c9 45%,#54657a);
}
.sh-hookcurve{
  width:24px; height:24px;
  margin-top:10px;
  border:5px solid #93a5b8;
  border-color:transparent transparent #93a5b8 #93a5b8;
  border-radius:50%;
  transform:rotate(-38deg);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
/* upturned tip of the J */
.sh-hookcurve::after{
  content:"";
  position:absolute;
  right:-3px; top:0;
  width:5px; height:5px;
  border-radius:50%;
  background:#a7b8c9;
}

/* swing group: pivots at hook */
.sh-swing{
  position:relative;
  margin-top:66px;
  transform-origin:50% -24px;
  transform:rotate(3.4deg);
}
.sh-in .sh-swing{
  animation:shSettle 3s cubic-bezier(.33,.55,.4,1) forwards;
}
@keyframes shSettle{
  0%{transform:rotate(3.4deg);}
  28%{transform:rotate(-2.3deg);}
  52%{transform:rotate(1.3deg);}
  72%{transform:rotate(-.6deg);}
  88%{transform:rotate(.25deg);}
  100%{transform:rotate(0deg);}
}
/* fabric loop over the hook */
.sh-loop{
  position:absolute;
  left:50%; top:-22px;
  width:10px; height:26px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#1c2a40,#40597c 45%,#1c2a40);
  border-radius:5px 5px 2px 2px;
  box-shadow:0 2px 3px rgba(0,0,0,.4);
  z-index:1;
}

/* --- the shirt --- */
.sh-shirt{
  position:relative;
  width:var(--shW);
  height:calc(var(--shW) * 1.1);
  filter:drop-shadow(12px 20px 18px rgba(0,0,0,.5));
}
.sh-bodyclip{
  position:absolute;
  inset:0;
  clip-path:polygon(37% 0%, 63% 0%, 86% 6%, 99% 34%, 78% 42%, 79% 97%, 74% 100%, 26% 100%, 21% 97%, 22% 42%, 1% 34%, 14% 6%);
  background:
    radial-gradient(120% 60% at 50% -4%, rgba(255,222,160,.14), rgba(255,222,160,0) 55%),
    linear-gradient(175deg, #2e4463 0%, #24374f 42%, #1a2a42 78%, #15233a 100%);
}
/* fabric weave */
.sh-weave{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 1px, transparent 1px 4px);
}
/* hanging fold shadows */
.sh-folds{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.35) 0%, transparent 9%,
      transparent 20%, rgba(0,0,0,.12) 28%, transparent 35%,
      transparent 44%, rgba(0,0,0,.08) 50%, transparent 56%,
      transparent 63%, rgba(0,0,0,.14) 71%, transparent 79%,
      transparent 90%, rgba(0,0,0,.38) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 78%, rgba(0,0,0,.22) 100%);
}
/* underarm shade where sleeves meet torso */
.sh-folds::before,.sh-folds::after{
  content:"";
  position:absolute;
  top:31%; width:12%; height:16%;
  border-radius:50%;
  filter:blur(4px);
  background:rgba(0,0,0,.3);
}
.sh-folds::before{left:14%;}
.sh-folds::after{right:14%;}
/* slow glare drift */
.sh-glare{
  position:absolute; inset:-10% -30%;
  background:linear-gradient(112deg, transparent 40%, rgba(255,240,208,.085) 50%, transparent 60%);
  transform:translateX(-7%);
}
.sh-in .sh-glare{animation:shGlare 15s ease-in-out infinite alternate;}
@keyframes shGlare{
  from{transform:translateX(-7%);}
  to{transform:translateX(7%);}
}
/* shoulder seams */
.sh-seam{
  position:absolute;
  top:2.5%;
  width:24%; height:2px;
  background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.2));
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}
.sh-seam-l{left:14%; transform:rotate(11deg); transform-origin:right center;}
.sh-seam-r{right:14%; transform:rotate(-11deg); transform-origin:left center;
  background:linear-gradient(270deg, rgba(0,0,0,.35), rgba(0,0,0,.2));}
/* sleeve seams */
.sh-slv{
  position:absolute;
  top:8%;
  width:2px; height:33%;
  background:rgba(0,0,0,.28);
  box-shadow:1px 0 0 rgba(255,255,255,.04);
}
.sh-slv-l{left:21.5%; transform:rotate(7deg);}
.sh-slv-r{right:21.5%; transform:rotate(-7deg);}
/* placket + buttons */
.sh-placket{
  position:absolute;
  left:47.4%; top:3%;
  width:5.2%; height:96%;
  background:linear-gradient(90deg, rgba(0,0,0,.25), rgba(255,255,255,.04) 30%, rgba(255,255,255,.04) 70%, rgba(0,0,0,.3));
}
.sh-buttons{
  position:absolute;
  left:50%; top:9%;
  width:7px; height:86%;
  transform:translateX(-50%);
  background-image:radial-gradient(circle 3px at 50% 4px, #b9c6d4 0 2.2px, #5a6c80 2.6px, transparent 3.4px);
  background-size:7px 21%;
  background-repeat:repeat-y;
}
/* hem stitch */
.sh-hem{
  position:absolute;
  left:22%; right:22%; bottom:2.5%;
  height:0;
  border-top:1px dashed rgba(255,255,255,.09);
}
/* collar */
.sh-collar{
  position:absolute;
  top:-.6%;
  width:16%; height:12%;
  z-index:3;
  background:linear-gradient(160deg,#3a5478,#22344e 80%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));
}
.sh-collar-l{
  left:35.5%;
  clip-path:polygon(0% 0%, 100% 12%, 96% 34%, 42% 100%, 12% 30%);
}
.sh-collar-r{
  right:35.5%;
  clip-path:polygon(100% 0%, 0% 12%, 4% 34%, 58% 100%, 88% 30%);
}
/* chest pocket, viewer left */
.sh-pocket{
  position:absolute;
  left:25%; top:31%;
  width:16%; height:17%;
  border-radius:0 0 4px 4px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28), 0 2px 3px rgba(0,0,0,.25);
}
.sh-pocket::before{
  content:"";
  position:absolute;
  left:-2%; top:-14%;
  width:104%; height:26%;
  border-radius:3px;
  background:linear-gradient(180deg,#31486a,#213248);
  box-shadow:0 2px 3px rgba(0,0,0,.4);
}

/* --- badge --- */
.sh-badgewrap{
  position:absolute;
  left:57%; top:28%;
  width:calc(var(--shW) * .252);
  z-index:4;
  transform:rotate(0deg);
  transform-origin:50% 6%;
}
.sh-in .sh-badgewrap{
  animation:shCounter 3s cubic-bezier(.33,.55,.4,1) forwards;
}
@keyframes shCounter{
  0%{transform:rotate(-1.6deg);}
  28%{transform:rotate(1.2deg);}
  52%{transform:rotate(-.7deg);}
  72%{transform:rotate(.3deg);}
  100%{transform:rotate(0deg);}
}
/* NFC ring: faint baseline + 5s pulse */
.sh-ring{
  position:absolute;
  left:50%; top:44%;
  width:150%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.95);
  border-radius:50%;
  border:2px solid rgba(127,193,255,.5);
  opacity:.14;
  pointer-events:none;
}
.sh-in .sh-ring{animation:shPing 5s ease-out infinite;}
@keyframes shPing{
  0%{transform:translate(-50%,-50%) scale(.62); opacity:0;}
  6%{opacity:.65;}
  30%{transform:translate(-50%,-50%) scale(1.45); opacity:0;}
  100%{transform:translate(-50%,-50%) scale(1.45); opacity:0;}
}
/* interaction ripple */
.sh-ripple{
  position:absolute;
  left:50%; top:44%;
  width:150%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.6);
  border-radius:50%;
  border:2px solid rgba(255,217,140,.85);
  opacity:0;
  pointer-events:none;
}
.sh-ripple.sh-fire{animation:shRipple .9s ease-out forwards;}
@keyframes shRipple{
  0%{transform:translate(-50%,-50%) scale(.6); opacity:.9;}
  100%{transform:translate(-50%,-50%) scale(1.7); opacity:0;}
}
.sh-badge{
  display:block;
  position:relative;
  width:100%;
  padding:0; margin:0;
  border:0; background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform:rotate(-3deg);
  transform-origin:50% 5%;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.sh-active .sh-badge{
  transform:rotate(-3deg) translateY(-7px) scale(1.045);
}
.sh-badge:focus-visible{
  outline:2px solid #7fc1ff;
  outline-offset:4px;
  border-radius:8px;
}
.sh-badgeimg{
  display:block;
  width:100%;
  height:auto;
  border-radius:6px;
  filter:drop-shadow(4px 8px 8px rgba(0,0,0,.55));
}
/* brushed metal clip */
.sh-clip{
  position:absolute;
  left:50%; top:-5px;
  width:52%; height:11px;
  transform:translateX(-50%);
  border-radius:3px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#c8d3de,#8b98a8 55%,#66788c);
  box-shadow:0 2px 3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.sh-clip::before{
  content:"";
  position:absolute;
  left:50%; top:3px;
  width:26%; height:4px;
  transform:translateX(-50%);
  border-radius:2px;
  background:#4d5c6e;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.6);
}

/* stitched caption */
.sh-cap{
  position:absolute;
  left:50%; top:calc(100% + 46px);
  transform:translateX(-50%) translateY(8px);
  width:max-content;
  max-width:82cqw;
  margin:0;
  padding:9px 15px;
  border:1.5px dashed rgba(232,181,63,.65);
  border-radius:8px;
  background:rgba(15,23,38,.85);
  color:#ffd98c;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  text-align:center;
  opacity:0;
  transition:opacity .4s ease, transform .4s ease;
  pointer-events:none;
}
.sh-active .sh-cap{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* --- box of business cards, lower right, in shadow --- */
.sh-boxwrap{
  position:absolute;
  right:4.5%; bottom:14px;
  width:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  z-index:1;
}
/* coffee ring on the floor beside the box */
.sh-boxwrap::before{
  content:"";
  position:absolute;
  left:-54px; bottom:22px;
  width:44px; height:16px;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, transparent 48%, rgba(150,100,52,.32) 57%, rgba(150,100,52,.1) 72%, transparent 82%);
}
.sh-box{
  position:relative;
  width:150px; height:86px;
  filter:brightness(.92);
}
/* soft shadow under the box */
.sh-box::after{
  content:"";
  position:absolute;
  left:-8%; bottom:-7px;
  width:116%; height:18px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent);
  z-index:0;
}
.sh-boxback{
  position:absolute;
  left:7%; top:0;
  width:86%; height:26px;
  transform:skewX(-4deg);
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#33271a,#453523);
  z-index:1;
}
.sh-boxcards{
  position:absolute;
  left:14%; top:9px;
  width:72%; height:30px;
  z-index:2;
  background:
    linear-gradient(180deg,#e8edf3 0 3px, #c3cdd9 3px 4px, #dde4ec 4px 7px, #bcc7d4 7px 8px, #e2e8ef 8px 11px, #b9c4d2 11px 12px, #dbe2ea 12px);
  border-radius:2px;
  transform:rotate(-1.2deg);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* dog-eared corner on the top card */
.sh-boxcards::before{
  content:"";
  position:absolute;
  right:-1px; top:-1px;
  width:14px; height:14px;
  background:linear-gradient(225deg, #0f1826 50%, #cfd8e2 50%, #97a4b3 78%, #85929f);
  border-radius:0 0 0 3px;
}
.sh-boxfront{
  position:absolute;
  left:0; bottom:0;
  width:100%; height:56px;
  z-index:3;
  border-radius:2px 2px 3px 3px;
  background:
    radial-gradient(circle at 72% 64%, transparent 11px, rgba(140,96,50,.35) 12px 14px, rgba(140,96,50,.1) 15px 17px, transparent 18px),
    linear-gradient(180deg,#59452d,#4a3826 45%,#3b2d1e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -6px 10px rgba(0,0,0,.3);
}
/* side flaps standing open at the top corners */
.sh-boxside{
  position:absolute;
  top:-2px;
  width:26px; height:20px;
  z-index:2;
  background:linear-gradient(180deg,#6a5436,#4c3b27);
  border-radius:3px 3px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.sh-boxside-l{left:-3px; transform:rotate(-16deg);}
.sh-boxside-r{right:-3px; transform:rotate(16deg);}
/* front flap folded down over the face, hanging open */
.sh-boxflap{
  position:absolute;
  left:6%; bottom:14px;
  width:88%; height:26px;
  z-index:4;
  transform:rotate(-1deg);
  border-radius:1px 1px 4px 4px;
  background:linear-gradient(180deg,#46351f, #54412b 35%, #655034);
  box-shadow:0 3px 4px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.1);
}
/* crease line where the flap folds */
.sh-boxflap::before{
  content:"";
  position:absolute;
  left:0; top:-1px;
  width:100%; height:2px;
  background:rgba(0,0,0,.5);
}
.sh-boxcap{
  margin:0;
  max-width:180px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11.5px;
  line-height:1.5;
  color:#7fa6cc;
  text-align:center;
}

/* --- reduced motion: static final informative state --- */
@media (prefers-reduced-motion: reduce){
  .sh-swing,.sh-in .sh-swing{animation:none; transform:rotate(0deg);}
  .sh-badgewrap,.sh-in .sh-badgewrap{animation:none; transform:rotate(0deg);}
  .sh-glare,.sh-in .sh-glare{animation:none; transform:none;}
  .sh-ring,.sh-in .sh-ring{animation:none; opacity:.3; transform:translate(-50%,-50%) scale(1.1);}
  .sh-ripple{display:none;}
  .sh-badge{transition:none;}
  .sh-cap{transition:none;}
}

/* --- mobile restage --- */
@media (max-width:600px){
  .sh-stage{height:540px;}
  .sh-hang{left:46%; top:8px;}
  .sh-cone{clip-path:polygon(40% 0%, 52% 0%, 84% 100%, 10% 100%);}
  .sh-cone::before{left:46%;}
  .sh-cap{font-size:13px; top:calc(100% + 30px);}
  .sh-boxwrap{right:3%; bottom:10px; width:150px;}
  .sh-boxwrap::before{left:-36px; bottom:20px; width:38px; height:14px;}
  .sh-box{width:128px; height:76px;}
  .sh-boxfront{height:48px;}
  .sh-boxflap{bottom:11px; height:23px;}
  .sh-boxcards{top:7px; height:26px;}
  .sh-boxcap{font-size:10.5px; max-width:150px;}
}

/* ============================================================
   SCENE: tap (tp-)
   ============================================================ */
/* ============ TP: One Badge, Two Pages ============ */
.tp-stage{position:relative;max-width:780px;margin:0 auto;}

/* --- scene --- */
.tp-scene{position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;border-radius:22px;
  background:
    radial-gradient(80% 68% at 34% 26%, rgba(27,141,246,.13), transparent 62%),
    radial-gradient(56% 48% at 28% 40%, rgba(255,231,168,.09), transparent 58%),
    radial-gradient(50% 44% at 82% 74%, rgba(255,231,168,.05), transparent 62%),
    radial-gradient(70% 60% at 76% 96%, rgba(27,141,246,.07), transparent 60%),
    linear-gradient(158deg,#0b1729 0%,#060c18 72%);
}
.tp-scene::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 80px rgba(3,7,14,.55);}

/* gold display-glass glints along the bottom edge */
.tp-glints{position:absolute;left:0;right:0;bottom:0;height:64px;pointer-events:none;
  border-top:1px solid rgba(255,231,168,.16);
  background:
    linear-gradient(180deg, rgba(232,181,63,.07), rgba(232,181,63,.015) 70%),
    repeating-linear-gradient(102deg, transparent 0 42px, rgba(255,231,168,.12) 42px 45px, transparent 45px 118px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.tp-glints::before{content:"";position:absolute;left:18%;top:-1px;width:120px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,231,168,.65), transparent);}
.tp-glints::after{content:"";position:absolute;right:14%;top:-1px;width:80px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,231,168,.4), transparent);}

/* --- employee silhouette, cropped into the left edge --- */
.tp-emp{position:absolute;inset:0;pointer-events:none;}
.tp-torso{position:absolute;left:-12%;top:14%;width:42%;height:112%;
  background:linear-gradient(103deg,#0b1626 48%,#152941 96%);
  border-radius:46% 54% 0 0 / 38% 26% 0 0;
  box-shadow:inset -18px 10px 30px -16px rgba(127,193,255,.28);
  -webkit-mask-image:linear-gradient(180deg,#000 42%,transparent 76%);
  mask-image:linear-gradient(180deg,#000 42%,transparent 76%);}
.tp-torso::before{content:"";position:absolute;right:-2px;top:6%;width:3px;height:46%;border-radius:3px;
  background:linear-gradient(180deg, transparent, rgba(127,193,255,.30) 30%, rgba(127,193,255,.08) 80%, transparent);}
.tp-strap{position:absolute;width:7px;border-radius:3px;
  background:linear-gradient(90deg,#1b3050,#2a4a74 45%,#1b3050);}
.tp-strap-l{left:11.4%;top:13.5%;height:19%;transform:rotate(13deg);}
.tp-strap-r{left:15.8%;top:14.5%;height:17%;transform:rotate(-16deg);}

.tp-badge{position:absolute;left:10%;top:30%;width:82px;transform:rotate(2.5deg);
  filter:drop-shadow(0 12px 20px rgba(0,0,0,.55));}
.tp-badge img{display:block;width:100%;height:auto;border-radius:6px;}
.tp-clipbar{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:26px;height:15px;z-index:2;
  background:linear-gradient(180deg,#33507a,#1a2c47);border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.5);}
.tp-clipbar::after{content:"";position:absolute;left:50%;top:4px;transform:translateX(-50%);
  width:12px;height:3px;border-radius:2px;background:#0a1322;}

/* --- customer arm rig (phone + hand + cuff move together) --- */
.tp-arm{position:absolute;left:22.5%;top:24%;width:150px;height:520px;
  transform:translate(200px,260px) rotate(5deg);opacity:0;will-change:transform;
  transition:transform 1s cubic-bezier(.18,.82,.24,1), opacity .55s ease;}
.tp-stage.tp-s-in .tp-arm{transform:translate(0,0) rotate(0deg);opacity:1;}
.tp-stage.tp-s-dip .tp-arm{animation:tpDip .55s cubic-bezier(.3,.7,.3,1) forwards;}
@keyframes tpDip{
  0%{transform:translate(0,0) rotate(0deg);}
  45%{transform:translate(-14px,-10px) rotate(-.6deg);}
  100%{transform:translate(-9px,-6px) rotate(0deg);}
}

.tp-cuff{position:absolute;top:178px;left:-24px;width:150px;height:720px;z-index:0;
  transform:rotate(-62deg);transform-origin:top center;
  background:linear-gradient(96deg,#0a1424 30%,#142743 78%,#0d1a2e);
  border-radius:76px 76px 0 0;
  box-shadow:inset 0 16px 20px -10px rgba(127,193,255,.2);}
.tp-hand{position:absolute;top:150px;left:10px;width:116px;height:94px;z-index:1;
  background:linear-gradient(138deg,#162943 20%,#0d1a2c 85%);
  border-radius:46% 54% 52% 48% / 60% 52% 46% 40%;
  box-shadow:inset 0 6px 10px -6px rgba(127,193,255,.18);}
.tp-thumb{position:absolute;top:140px;left:0;width:27px;height:62px;z-index:3;
  background:linear-gradient(118deg,#1a3050,#101f36 80%);
  border-radius:14px;transform:rotate(13deg);
  box-shadow:inset 2px 3px 5px -2px rgba(127,193,255,.2), 0 4px 8px rgba(0,0,0,.4);}

/* --- phone --- */
.tp-phone{position:absolute;top:0;left:10px;width:100px;height:202px;z-index:2;
  transform:rotate(-7deg);transform-origin:50% 80%;
  background:#04070d;border-radius:17px;
  border:1px solid #223349;
  box-shadow:0 18px 38px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.5), inset 0 0 0 2px #0b1220;}
.tp-screen{position:absolute;inset:5px;border-radius:12px;overflow:hidden;
  background:linear-gradient(198deg,#0e1828,#070d18 70%);}
.tp-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:7px;height:7px;
  border-radius:50%;background:#020409;z-index:3;box-shadow:0 0 0 1.5px #101c2e;}

/* idle lock screen */
.tp-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding-top:34px;transition:opacity .4s ease;z-index:1;}
.tp-clock{font-size:21px;font-weight:600;color:#cadef5;letter-spacing:.01em;line-height:1;}
.tp-idle-date{margin-top:4px;font-size:6.5px;color:#5f80a6;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
.tp-stage.tp-s-browser .tp-idle{opacity:0;}

/* NFC toast */
.tp-toast{position:absolute;left:2px;right:2px;top:6px;z-index:5;
  display:flex;align-items:center;justify-content:center;gap:2.5px;
  background:#eef2f8;color:#20304a;border-radius:9px;padding:5.5px 3px;
  box-shadow:0 4px 10px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;
  transform:translateY(-140%);opacity:0;
  transition:transform .5s cubic-bezier(.2,.9,.3,1.18), opacity .32s ease;}
.tp-stage.tp-s-toast .tp-toast{transform:translateY(0);opacity:1;}
.tp-stage.tp-s-browser .tp-toast{transform:translateY(-140%);opacity:0;}
.tp-toast-url{font-size:5.6px;font-weight:700;letter-spacing:0;}
.tp-toast-open{font-size:5.6px;font-weight:800;color:#1b8df6;letter-spacing:.02em;}

/* browser */
.tp-browser{position:absolute;inset:0;z-index:2;background:#0b1424;
  opacity:0;transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;}
.tp-stage.tp-s-browser .tp-browser{opacity:1;transform:none;}
.tp-urlbar{margin:17px 5px 0;display:flex;align-items:center;justify-content:center;
  background:#17233a;border-radius:8px;padding:4px 3px;}
.tp-url{min-width:0;overflow:hidden;white-space:nowrap;
  font-size:5.2px;font-weight:600;color:#9db8d6;letter-spacing:-.01em;}
.tp-page{position:absolute;left:5px;right:5px;top:37px;bottom:5px;display:none;}
.tp-stage.tp-mode-a .tp-vip{display:block;}
.tp-stage.tp-mode-b .tp-rev{display:block;}

/* page A: VIP signup */
.tp-vip{text-align:center;padding-top:12px;}
.tp-vip-store{font-size:8.6px;font-weight:900;letter-spacing:.16em;color:#ffd98c;}
.tp-vip-rule{width:26px;height:1.5px;margin:5px auto 0;border-radius:1px;
  background:linear-gradient(90deg,transparent,#e8b53f,transparent);}
.tp-vip-sub{margin-top:5px;font-size:6.6px;color:#9db8d6;line-height:1.5;}
.tp-vip-zone{position:relative;margin-top:13px;height:58px;}
.tp-vip-cta{position:absolute;left:3%;right:3%;top:0;padding:8px 0;border-radius:8px;
  background:linear-gradient(180deg,#ffe7a8,#e8b53f 85%);color:#3a2906;
  white-space:nowrap;
  font-size:6.6px;font-weight:900;letter-spacing:.07em;
  box-shadow:0 3.5px 0 #b8821c, 0 6px 12px rgba(0,0,0,.4);
  transition:transform .13s ease, box-shadow .13s ease, opacity .3s ease;}
.tp-stage.tp-s-press .tp-vip-cta{transform:translateY(3.5px);box-shadow:0 0 0 #b8821c, 0 2px 5px rgba(0,0,0,.35);}
.tp-stage.tp-s-ok .tp-vip-cta{opacity:0;}
.tp-vip-done{position:absolute;left:0;right:0;top:5px;opacity:0;transform:translateY(6px);
  transition:opacity .38s ease, transform .38s ease;
  font-size:7px;font-weight:600;color:#eef4fb;line-height:1.6;}
.tp-stage.tp-s-ok .tp-vip-done{opacity:1;transform:none;}
.tp-vip-check{display:block;width:13px;height:13px;margin:0 auto 4px;border-radius:50%;
  background:#35d07f;position:relative;}
.tp-vip-check::after{content:"";position:absolute;left:3.5px;top:3px;width:5px;height:3px;
  border-left:1.6px solid #06281a;border-bottom:1.6px solid #06281a;transform:rotate(-48deg);}

/* page B: Google review */
.tp-rev{background:#f7f8fa;border-radius:8px;color:#243040;padding:9px 6px 6px;text-align:center;}
.tp-rev-head{display:flex;align-items:center;justify-content:center;gap:3.5px;
  font-size:6.2px;font-weight:700;color:#5b6673;letter-spacing:.02em;white-space:nowrap;}
.tp-g{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:10px;height:10px;border-radius:50%;background:#fff;
  border:1px solid #e0e4ea;font-size:6.5px;font-weight:900;color:#1b8df6;font-family:Georgia,serif;}
.tp-rev-store{margin-top:5px;font-size:8.4px;font-weight:800;color:#1d2735;}
.tp-stars{margin-top:6px;line-height:1;white-space:nowrap;}
.tp-stars i{font-style:normal;display:inline-block;font-size:12px;color:#d3d9e1;margin:0 .5px;
  transform-origin:50% 60%;}
.tp-stage.tp-s-stars .tp-stars i{animation:tpStar .55s cubic-bezier(.34,1.56,.5,1) forwards;}
.tp-stage.tp-s-stars .tp-stars i:nth-child(2){animation-delay:.12s;}
.tp-stage.tp-s-stars .tp-stars i:nth-child(3){animation-delay:.24s;}
.tp-stage.tp-s-stars .tp-stars i:nth-child(4){animation-delay:.36s;}
.tp-stage.tp-s-stars .tp-stars i:nth-child(5){animation-delay:.48s;}
@keyframes tpStar{
  0%{transform:scale(1);color:#d3d9e1;}
  45%{transform:scale(1.45);color:#e8b53f;}
  100%{transform:scale(1);color:#e8b53f;}
}
.tp-rev-box{margin-top:8px;background:#fff;border:1px solid #dde3ea;border-radius:6px;
  min-height:30px;padding:4.5px 5.5px;text-align:left;
  font-size:7px;font-weight:500;color:#2a3442;line-height:1.5;}
.tp-rev-post{margin-top:6px;text-align:right;}
.tp-rev-post span{display:inline-block;background:#1b8df6;color:#fff;border-radius:8px;
  padding:3px 8px;font-size:6.2px;font-weight:800;letter-spacing:.03em;}
.tp-caret{display:inline-block;width:1px;height:8px;margin-left:.5px;background:#1b8df6;
  vertical-align:-1.5px;opacity:0;}
.tp-stage.tp-s-type .tp-caret{opacity:1;animation:tpBlink 1s steps(1,end) infinite;}
@keyframes tpBlink{0%,60%{opacity:1;}61%,100%{opacity:0;}}

/* stamped readout under the hand */
.tp-count{position:absolute;top:268px;left:-124px;z-index:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  color:#8fb2d8;padding:4px 8px;border:1.5px solid rgba(127,166,204,.45);border-radius:4px;
  transform:rotate(-2deg) scale(1.5);opacity:0;white-space:nowrap;}
.tp-stage.tp-s-count .tp-count{animation:tpStamp .5s cubic-bezier(.2,1.35,.4,1) forwards;}
@keyframes tpStamp{
  0%{opacity:0;transform:rotate(-4deg) scale(1.6);}
  55%{opacity:1;transform:rotate(-2deg) scale(.94);}
  100%{opacity:.92;transform:rotate(-2deg) scale(1);}
}

/* NFC rings, glued to the contact point on the arm rig */
.tp-rings{position:absolute;left:2px;top:34px;width:0;height:0;z-index:4;pointer-events:none;}
.tp-rings i{position:absolute;left:-26px;top:-26px;width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(127,193,255,.95);opacity:0;transform:scale(.25);
  box-shadow:0 0 12px rgba(27,141,246,.4), inset 0 0 8px rgba(27,141,246,.3);}
.tp-stage.tp-s-ring .tp-rings i{animation:tpRing 1.05s ease-out forwards;}
.tp-stage.tp-s-ring .tp-rings i:nth-child(2){animation-delay:.17s;}
.tp-stage.tp-s-ring .tp-rings i:nth-child(3){animation-delay:.34s;}
@keyframes tpRing{
  0%{opacity:0;transform:scale(.25);}
  18%{opacity:.95;}
  100%{opacity:0;transform:scale(1.6);}
}

/* --- switch plate --- */
.tp-plate{position:relative;margin:18px auto 0;max-width:540px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  padding:14px 22px 10px;border-radius:14px;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    linear-gradient(180deg,#1c2b47 0%,#111e35 100%);
  border:1px solid rgba(127,166,204,.2);
  box-shadow:0 10px 26px rgba(3,7,14,.5), inset 0 1px 0 rgba(255,255,255,.07);}
.tp-plate::before,.tp-plate::after{content:"";position:absolute;top:50%;width:7px;height:7px;
  border-radius:50%;transform:translateY(-50%);
  background:radial-gradient(circle at 35% 30%, #43608a, #16233a 75%);
  box-shadow:inset 0 -1px 1px rgba(0,0,0,.6);}
.tp-plate::before{left:9px;}
.tp-plate::after{right:9px;}
.tp-eng{font-size:11px;font-weight:800;letter-spacing:.15em;color:#54759c;
  text-shadow:0 1px 0 rgba(0,0,0,.75);transition:color .3s ease, text-shadow .3s ease;
  white-space:nowrap;}
.tp-eng-a{text-align:right;}
.tp-eng-b{text-align:left;}
.tp-stage.tp-mode-a .tp-eng-a{color:#ffd98c;text-shadow:0 1px 0 rgba(0,0,0,.75), 0 0 14px rgba(232,181,63,.35);}
.tp-stage.tp-mode-b .tp-eng-b{color:#ffd98c;text-shadow:0 1px 0 rgba(0,0,0,.75), 0 0 14px rgba(232,181,63,.35);}
.tp-lever{position:relative;width:104px;height:44px;flex:none;border:0;margin:0;padding:0;
  border-radius:22px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#08101f,#0f1d33);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75), inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 0 rgba(255,255,255,.05);}
.tp-knob{position:absolute;top:4px;left:4px;width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ffe7a8, #e8b53f 58%, #b8821c 100%);
  box-shadow:0 3px 9px rgba(0,0,0,.55), inset 0 -3px 5px rgba(120,80,10,.4), inset 0 2px 3px rgba(255,255,255,.5);
  transition:transform .32s cubic-bezier(.32,1.3,.42,1);}
.tp-knob::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:14px;border-radius:2px;
  transform:translate(-50%,-50%);background:rgba(120,80,10,.45);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);}
.tp-stage.tp-mode-b .tp-knob{transform:translateX(60px);}
.tp-lever:focus-visible{outline:2px solid #7fc1ff;outline-offset:3px;}
.tp-plate-sub{grid-column:1 / -1;margin-top:7px;text-align:center;
  font-size:9.5px;font-weight:700;letter-spacing:.22em;color:#48688e;
  text-shadow:0 1px 0 rgba(0,0,0,.7);}

/* --- reduced motion: rest at the contact frame, page loaded --- */
.tp-stage.tp-rm *{animation:none !important;transition:none !important;}
.tp-stage.tp-rm .tp-arm{transform:translate(-9px,-6px) rotate(0deg);opacity:1;}
.tp-stage.tp-rm .tp-count{opacity:.92;transform:rotate(-2deg) scale(1);}
.tp-stage.tp-rm .tp-stars i{color:#e8b53f;}
.tp-stage.tp-rm .tp-caret{opacity:1;}
.tp-stage.tp-rm .tp-toast{opacity:0;}

/* --- mobile --- */
@media (max-width:560px){
  .tp-scene{aspect-ratio:4/5;border-radius:18px;}
  .tp-glints{display:none;}
  .tp-torso{left:-22%;top:11%;width:58%;}
  .tp-strap-l{left:14%;top:10.5%;height:16%;}
  .tp-strap-r{left:21%;top:11.5%;height:14.5%;}
  .tp-badge{left:7%;top:23%;width:69px;}
  .tp-clipbar{width:22px;height:13px;top:-7px;}
  .tp-arm{left:29%;top:24%;}
  .tp-phone{width:96px;height:192px;left:6px;}
  .tp-urlbar{margin:15px 4px 0;padding:4px 3px;}
  .tp-url{font-size:5.1px;}
  .tp-hand{top:142px;left:4px;width:110px;height:88px;}
  .tp-thumb{top:132px;left:-2px;}
  .tp-cuff{top:170px;left:-16px;width:136px;transform:rotate(-40deg);}
  .tp-rings{left:0;top:32px;}
  .tp-count{top:256px;left:-88px;font-size:9.5px;letter-spacing:.1em;}
  .tp-stage.tp-rm .tp-arm{transform:translate(-9px,-6px) rotate(0deg);}
  .tp-plate{max-width:none;gap:10px;padding:13px 16px 9px;}
  .tp-eng{font-size:9.5px;letter-spacing:.1em;}
  .tp-lever{width:92px;height:44px;}
  .tp-knob{width:36px;height:36px;}
  .tp-stage.tp-mode-b .tp-knob{transform:translateX(48px);}
  .tp-plate-sub{font-size:8px;letter-spacing:.18em;}
}

/* ============================================================
   SCENE: board (bd-)
   ============================================================ */
.bd-stage{position:relative;max-width:980px;margin:0 auto;padding:0 0 34px;overflow:hidden}
.bd-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.bd-lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);width:92px;height:26px;background:linear-gradient(180deg,#39465a,#131b29 70%);border-radius:10px 10px 46px 46px;z-index:7;box-shadow:inset 0 -7px 9px -5px rgba(255,214,130,.85),0 4px 14px rgba(0,0,0,.4)}
.bd-cone{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:640px;height:430px;filter:blur(18px);opacity:0;pointer-events:none;z-index:6}
.bd-cone::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,219,145,.36),rgba(255,219,145,.11) 55%,rgba(255,219,145,0));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.bd-live .bd-cone{animation:bdBloom 1.6s ease-out .1s both}
@keyframes bdBloom{0%{opacity:0}45%{opacity:1}62%{opacity:.8}74%{opacity:.98}100%{opacity:.95}}

.bd-boardwrap{width:100%;display:flex;justify-content:center;padding-top:96px}
.bd-board{position:relative;flex:0 0 auto;width:880px;border-radius:10px;z-index:1;background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 174px,rgba(0,0,0,.4) 174px 176px),repeating-linear-gradient(90deg,rgba(255,236,200,.03) 0 2px,rgba(0,0,0,0) 2px 9px,rgba(20,10,2,.17) 9px 11px,rgba(0,0,0,0) 11px 26px,rgba(255,236,200,.02) 26px 28px,rgba(0,0,0,0) 28px 43px),linear-gradient(180deg,#3b2812,#2c1c0c 55%,#231507);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(0,0,0,.55),inset 0 -3px 0 rgba(0,0,0,.4)}
.bd-board::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(130% 95% at 50% -8%,rgba(255,208,122,.26),rgba(255,208,122,.06) 46%,rgba(0,0,0,.3) 80%,rgba(0,0,0,.5) 100%);opacity:0;transition:opacity 1.4s ease .15s;pointer-events:none}
.bd-live .bd-board::before{opacity:1}
.bd-board::after{content:'';position:absolute;inset:0;border-radius:inherit;background:rgba(3,7,14,.52);opacity:1;transition:opacity 1.3s ease;pointer-events:none;z-index:8}
.bd-live .bd-board::after{opacity:0}

.bd-plate{position:relative;width:max-content;max-width:calc(100% - 40px);margin:30px auto 4px;padding:9px 26px;font-size:15px;font-weight:800;letter-spacing:5px;color:#53390e;background:linear-gradient(180deg,#f2d287,#cfa045 45%,#a97b25);border-radius:5px;box-shadow:0 3px 8px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,248,220,.65),inset 0 -2px 4px rgba(80,50,5,.55);text-shadow:0 1px 0 rgba(255,240,200,.55)}
.bd-plate::before,.bd-plate::after{content:'';position:absolute;top:50%;width:6px;height:6px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 30%,#8a6a2c,#5d4413);box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 1px 0 rgba(255,235,180,.4)}
.bd-plate::before{left:8px}
.bd-plate::after{right:8px}

.bd-row{display:grid;grid-template-columns:repeat(5,1fr);padding:8px 22px 26px}
.bd-col{display:flex;flex-direction:column;align-items:center;min-width:0}

.bd-hook{position:relative;z-index:3;width:16px;height:30px;flex:0 0 auto}
.bd-hook::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a8,#c9992f 55%,#8a5f14);box-shadow:0 2px 4px rgba(0,0,0,.6),inset 0 -2px 3px rgba(90,60,8,.7)}
.bd-hook::after{content:'';position:absolute;top:13px;left:50%;transform:translateX(-50%);width:5px;height:16px;border-radius:2px 2px 5px 5px;background:linear-gradient(90deg,#f6da92,#b8871f 60%,#96691a);box-shadow:0 2px 3px rgba(0,0,0,.5)}

.bd-hang{position:relative;z-index:2;height:172px;display:flex;justify-content:center;align-items:flex-start;margin-top:-9px;width:100%}
.bd-badgebtn{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;transform:rotate(var(--bd-tilt,0deg));transform-origin:50% 0;-webkit-tap-highlight-color:transparent}
.bd-badgebtn:focus-visible{outline:2px solid #7fc1ff;outline-offset:4px;border-radius:8px}
.bd-badgebtn.bd-once{animation:bdSwingOnce 1.1s ease-in-out}
@keyframes bdSwingOnce{0%{transform:rotate(var(--bd-tilt,0deg))}28%{transform:rotate(calc(var(--bd-tilt,0deg) + 7deg))}58%{transform:rotate(calc(var(--bd-tilt,0deg) - 5deg))}82%{transform:rotate(calc(var(--bd-tilt,0deg) + 2deg))}100%{transform:rotate(var(--bd-tilt,0deg))}}
.bd-pend{display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.bd-stage:not(.bd-live) .bd-pend{opacity:0}
.bd-live .bd-pend{animation:bdSettle 1.9s cubic-bezier(.33,.75,.4,1) both;animation-delay:var(--bd-delay,0s)}
@keyframes bdSettle{0%{transform:rotate(13deg);opacity:0}14%{opacity:1}32%{transform:rotate(-8deg)}56%{transform:rotate(4.5deg)}78%{transform:rotate(-2deg)}92%{transform:rotate(.8deg)}100%{transform:rotate(0deg);opacity:1}}
.bd-strap{width:2px;height:calc(14px + var(--bd-drop,0px));background:linear-gradient(180deg,#8a8f98,#3a3f47);border-radius:1px}
.bd-badgeimg{display:block;height:110px;width:auto;border-radius:7px;box-shadow:0 10px 18px rgba(0,0,0,.55),0 2px 4px rgba(0,0,0,.4)}

.bd-glow{position:absolute;top:-48px;left:50%;transform:translate(-50%,0);width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(255,216,120,.6),rgba(255,216,120,0) 68%);opacity:0;pointer-events:none}
.bd-glow.bd-pulse{animation:bdGlowPulse 1.25s ease-out}
@keyframes bdGlowPulse{0%{opacity:0}22%{opacity:1}100%{opacity:0}}

.bd-tag{margin:4px 0 9px;transform:rotate(var(--bd-skew,0deg));background:linear-gradient(180deg,#1c1c1e,#0c0c0d);color:#ececec;font-size:10px;font-weight:800;letter-spacing:2.5px;padding:4px 9px 3px;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);text-shadow:0 1px 1px rgba(0,0,0,.9)}

.bd-counter{display:flex;gap:2px;padding:5px 7px;background:linear-gradient(180deg,#454c58,#232830 55%,#181c23);border-radius:6px;border:0;box-shadow:0 3px 7px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.6)}
button.bd-counter{cursor:pointer;position:relative;font:inherit;-webkit-tap-highlight-color:transparent}
button.bd-counter::before{content:'';position:absolute;inset:-8px -14px}
button.bd-counter:hover{box-shadow:0 3px 7px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.6),0 0 0 2px rgba(255,215,140,.4)}
button.bd-counter:focus-visible{outline:2px solid #7fc1ff;outline-offset:4px}
.bd-wheel{width:16px;height:20px;overflow:hidden;border-radius:2px;background:linear-gradient(180deg,#b7a888,#f4ecd6 30%,#f4ecd6 62%,#a99a79);box-shadow:inset 0 0 3px rgba(0,0,0,.45)}
.bd-strip{display:block;transition:transform .55s cubic-bezier(.3,1.15,.4,1);will-change:transform}
.bd-cell{display:block;height:20px;line-height:20px;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:700;color:#2c2315;font-variant-numeric:tabular-nums}
.bd-counter.bd-static .bd-strip{transition:none}

.bd-note{position:absolute;z-index:8;top:60px;right:max(16px,calc(50% - 452px));width:178px;padding:14px 16px 11px;transform:rotate(-4.5deg);background:linear-gradient(180deg,rgba(233,216,168,.97),rgba(217,197,144,.97));color:#41372a;font-family:'Marker Felt','Bradley Hand','Segoe Print','Comic Sans MS',cursive;font-size:14.5px;line-height:1.35;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));clip-path:polygon(0 8%,3% 0,50% 3%,97% 0,100% 12%,98.5% 38%,100% 60%,98% 86%,95% 100%,45% 97%,4% 100%,0 86%,2% 60%,0 34%)}
.bd-note b{display:block;text-align:right;margin-top:3px;font-weight:700}

@media (max-width:700px){
  .bd-boardwrap{padding-top:88px}
  .bd-board{width:660px;background:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 130px,rgba(0,0,0,.4) 130px 132px),repeating-linear-gradient(90deg,rgba(255,236,200,.03) 0 2px,rgba(0,0,0,0) 2px 9px,rgba(20,10,2,.17) 9px 11px,rgba(0,0,0,0) 11px 26px,rgba(255,236,200,.02) 26px 28px,rgba(0,0,0,0) 28px 43px),linear-gradient(180deg,#3b2812,#2c1c0c 55%,#231507)}
  .bd-plate{font-size:13px;letter-spacing:4px;margin-top:24px;padding:8px 18px}
  .bd-row{padding:6px 12px 22px}
  .bd-hang{height:150px}
  .bd-badgeimg{height:96px}
  .bd-cone{width:440px;height:370px}
  .bd-note{top:30px;right:8px;width:148px;font-size:12.5px;padding:11px 12px 9px}
}

@media (prefers-reduced-motion: reduce){
  .bd-stage .bd-pend,.bd-stage .bd-badgebtn,.bd-stage .bd-cone,.bd-stage .bd-glow{animation:none !important}
  .bd-stage .bd-pend{opacity:1 !important}
  .bd-stage .bd-cone{opacity:.95}
  .bd-stage .bd-board::before{opacity:1;transition:none}
  .bd-stage .bd-board::after{opacity:0;transition:none}
  .bd-stage .bd-strip{transition:none !important}
}

/* ============================================================
   SCENE: order (op-)
   ============================================================ */
/* ============ The Order Sheet: pricing as a packing slip ============ */
.op-stage,
.op-stage *,
.op-stage *::before,
.op-stage *::after { box-sizing: border-box; }
.op-stage {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
  padding: 24px 0 22px;
}
.op-scene {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  padding: 24px 0 90px;
}
/* warm theatrical light pool */
.op-pool {
  position: absolute;
  inset: -40px -120px -20px -120px;
  background:
    radial-gradient(ellipse 62% 48% at 52% 46%, rgba(255, 214, 140, 0.14), rgba(255, 214, 140, 0.05) 55%, transparent 75%),
    radial-gradient(ellipse 44% 32% at 62% 80%, rgba(232, 181, 63, 0.10), transparent 70%);
  pointer-events: none;
}

/* ---------- cardboard box ---------- */
.op-box {
  position: absolute;
  left: 100px;
  bottom: 0;
  width: 460px;
  transform: rotate(-4deg);
  transform-origin: bottom center;
  z-index: 1;
}
.op-box-backflap {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 144px;
  height: 64px;
  background: linear-gradient(180deg, #6e5231 0%, #82613a 60%, #6b4f2e 100%);
  border-radius: 4px 4px 0 0;
  transform: perspective(500px) rotateX(14deg);
  transform-origin: bottom center;
  box-shadow: inset 0 -10px 16px rgba(0,0,0,0.35);
  z-index: 1;
}
.op-box-backflap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  bottom: 0;
  width: 56px;
  margin-left: -28px;
  background: linear-gradient(180deg, rgba(214,196,160,0.5), rgba(198,178,140,0.35));
  border-left: 1px solid rgba(255,255,255,0.18);
  border-right: 1px solid rgba(255,255,255,0.18);
}
.op-box-mouth {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 138px;
  height: 24px;
  background: linear-gradient(180deg, #17100a, #2b1e10);
  border-radius: 3px;
  z-index: 2;
}
/* front + sides live above the slip */
.op-box-front {
  position: relative;
  height: 150px;
  background:
    linear-gradient(180deg, #a97e46 0%, #9a7040 34%, #8a6236 72%, #7c5730 100%);
  border-radius: 4px 4px 7px 7px;
  box-shadow:
    inset 0 2px 0 rgba(255, 230, 190, 0.28),
    inset 0 -14px 22px rgba(0,0,0,0.28),
    0 26px 34px -16px rgba(0,0,0,0.65);
  z-index: 6;
}
.op-box-front::before {
  /* corrugated seam line */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 2px;
  background: rgba(64, 44, 22, 0.55);
}
.op-box-tape {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 58px;
  height: 52px;
  margin-left: -29px;
  background: linear-gradient(180deg, rgba(222,204,168,0.75), rgba(206,186,146,0.6) 80%, rgba(206,186,146,0));
  border-left: 1px solid rgba(255,255,255,0.25);
  border-right: 1px solid rgba(255,255,255,0.25);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 82% 100%, 55% 90%, 30% 100%, 0 90%);
  z-index: 7;
}
.op-box-stencil {
  position: absolute;
  left: 26px;
  bottom: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: rgba(46, 30, 14, 0.62);
  text-transform: uppercase;
  z-index: 7;
}
.op-box-stencil span { display: block; margin-top: 4px; letter-spacing: 1.5px; font-size: 9px; color: rgba(46,30,14,0.45); }
.op-box-arrows {
  position: absolute;
  right: 28px;
  bottom: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  font-weight: 700;
  color: rgba(46, 30, 14, 0.5);
  letter-spacing: 6px;
  z-index: 7;
}
.op-box-sideflap {
  position: absolute;
  bottom: 140px;
  width: 64px;
  height: 52px;
  background: linear-gradient(180deg, #8c683c, #7a5832);
  box-shadow: inset 0 -8px 12px rgba(0,0,0,0.3);
  z-index: 6;
}
.op-box-sideflap.op-left {
  left: -6px;
  border-radius: 6px 2px 0 0;
  transform: rotate(-9deg);
}
.op-box-sideflap.op-right {
  right: -6px;
  border-radius: 2px 6px 0 0;
  transform: rotate(9deg);
}

/* ---------- badge peeking from under the slip ---------- */
.op-badge-peek {
  position: absolute;
  left: -4px;
  bottom: 165px;
  width: 92px;
  transform: rotate(-16deg);
  z-index: 2;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.5));
}
.op-badge-peek img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}

/* ---------- packing slip ---------- */
.op-slip {
  position: relative;
  z-index: 3;
  width: min(382px, calc(100% - 44px));
  margin-left: 40px;
  background:
    repeating-linear-gradient(0deg, rgba(148, 128, 96, 0.045) 0px, rgba(148,128,96,0.045) 1px, transparent 1px, transparent 3px),
    linear-gradient(168deg, #f7f1e1 0%, #f2ead6 48%, #eadfc5 100%);
  border-radius: 2px;
  padding: 20px 22px 152px;
  color: #2a2418;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 0 46px rgba(120, 96, 58, 0.09),
    0 2px 4px rgba(0,0,0,0.3),
    0 18px 30px -12px rgba(0,0,0,0.55);
  transform: translateY(150px) rotate(-1.6deg);
  transition: transform 1.05s cubic-bezier(0.16, 0.84, 0.27, 0.99), box-shadow 0.4s ease;
  overflow: hidden;
  will-change: transform;
}
.op-in .op-slip { transform: translateY(0) rotate(-1.6deg); }
.op-in .op-slip:hover {
  transform: translateY(-8px) rotate(-1.3deg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 0 46px rgba(120, 96, 58, 0.09),
    0 4px 8px rgba(0,0,0,0.3),
    0 30px 44px -14px rgba(0,0,0,0.6);
  transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.35s ease;
}
/* glare pass */
.op-slip::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 70px;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-140px) rotate(8deg);
  pointer-events: none;
  opacity: 0;
}
.op-in .op-slip::after { animation: opGlare 8s linear 2.2s infinite; }
@keyframes opGlare {
  0%   { transform: translateX(-140px) rotate(8deg); opacity: 0; }
  2%   { opacity: 1; }
  16%  { transform: translateX(430px) rotate(8deg); opacity: 1; }
  18%  { opacity: 0; }
  100% { transform: translateX(430px) rotate(8deg); opacity: 0; }
}

/* slip typography */
.op-slip-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.op-slip-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.35;
}
.op-slip-shipto {
  margin-top: 3px;
  font-size: 10.5px;
  color: #5c5240;
  letter-spacing: 0.5px;
}
.op-barcode {
  flex: none;
  width: 62px;
  height: 30px;
  margin-top: 2px;
  background: repeating-linear-gradient(90deg,
    #2a2418 0 2px, transparent 2px 4px,
    #2a2418 4px 5px, transparent 5px 9px,
    #2a2418 9px 12px, transparent 12px 14px,
    #2a2418 14px 15px, transparent 15px 18px);
  opacity: 0.85;
}
.op-rule {
  border: 0;
  border-top: 1.5px dashed rgba(42, 36, 24, 0.4);
  margin: 13px 0;
}
.op-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 9px;
}
.op-row:first-of-type { margin-top: 0; }
.op-lbl { font-weight: 700; letter-spacing: 0.3px; }
.op-dots {
  flex: 1;
  min-width: 14px;
  border-bottom: 2px dotted rgba(42, 36, 24, 0.5);
  transform: translateY(-3px);
}
.op-val { font-weight: 700; white-space: nowrap; letter-spacing: 0.3px; }
.op-note {
  margin: 3px 0 0 14px;
  font-size: 10px;
  line-height: 1.5;
  color: #6d6350;
}
.op-meta { margin-top: 8px; font-size: 10.5px; line-height: 1.55; }
.op-meta:first-of-type { margin-top: 0; }
.op-meta b { font-weight: 700; letter-spacing: 0.4px; }

/* ---------- rubber stamp ---------- */
.op-stamp {
  position: absolute;
  left: 34px;
  right: 34px;
  bottom: 72px;
  padding: 9px 10px 10px;
  border: 3px solid #c24545;
  border-radius: 3px;
  color: #c24545;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: rotate(-10deg) scale(1.5);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="opn"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" seed="7"/><feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 0.18"/></filter><rect width="140" height="140" filter="url(%23opn)"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="opn"><feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" seed="7"/><feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.4 0.18"/></filter><rect width="140" height="140" filter="url(%23opn)"/></svg>');
  -webkit-mask-size: 140px 140px;
  mask-size: 140px 140px;
}
.op-stamp::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px solid #c24545;
  border-radius: 2px;
}
.op-stamp small {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  font-weight: 700;
}
.op-stamped .op-stamp {
  opacity: 0.92;
  transform: rotate(-10deg) scale(1);
  animation: opStampSlam 0.16s cubic-bezier(0.3, 0.6, 0.35, 1) both;
}
@keyframes opStampSlam {
  0%   { opacity: 0; transform: rotate(-10deg) scale(1.5); }
  62%  { opacity: 0.95; transform: rotate(-10deg) scale(0.965); }
  100% { opacity: 0.92; transform: rotate(-10deg) scale(1); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .op-stage .op-slip,
  .op-stage .op-slip:hover { transition: none; transform: translateY(0) rotate(-1.6deg); }
  .op-stage .op-slip::after { animation: none; opacity: 0; }
  .op-stage .op-stamp { animation: none; opacity: 0.92; transform: rotate(-10deg) scale(1); }
}

/* ---------- mobile ---------- */
@media (max-width: 480px) {
  .op-scene { padding: 12px 0 74px; }
  .op-slip { width: calc(100% - 26px); margin-left: 13px; padding: 18px 16px 140px; font-size: 11px; }
  .op-box { width: 132%; left: 50%; margin-left: 0; transform: translateX(-50%) rotate(-3deg); bottom: 0; }
  .op-box-front { height: 128px; }
  .op-box-backflap { bottom: 122px; height: 54px; }
  .op-box-mouth { bottom: 118px; }
  .op-box-sideflap { bottom: 118px; }
  .op-badge-peek { left: -34px; bottom: 150px; width: 92px; transform: rotate(-22deg); }
  .op-box-stencil { left: 96px; }
  .op-box-arrows { right: 96px; }
  .op-stamp { left: 20px; right: 20px; bottom: 64px; font-size: 13.5px; letter-spacing: 1.5px; }
  .op-stamp small { font-size: 10px; letter-spacing: 2.2px; }
  .op-barcode { display: none; }
}