/* ══════════════════════════════════════════════════════════════════════
   The 3D PrintMan kiosks, shared by the home page and the franchise page.

   .k is one kiosk: a stack of cuboids (.cub), each with five faces
   (.fr front, .bk back, .rt right, .lt left, .tp top). Turn it by setting
   transform on .k. Kinds:
     .k.doc / .k.photo  "Big P", the tall kiosk (orange documents, blue photos)
     .k.cute            "Cute", the small robot with one leg
   ══════════════════════════════════════════════════════════════════════ */
.kiosk-col { position: relative; perspective: 1300px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.k { position: relative; width: 172px; height: 406px; transform-style: preserve-3d; transform: rotateX(-12deg) rotateY(-24deg); }
.k .cub { position: absolute; left: 50%; transform-style: preserve-3d; width: var(--w); height: var(--h); margin-left: calc(var(--w) / -2); }
.k .cub > .f { position: absolute; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.k .fr { width: var(--w); height: var(--h); transform: translateZ(calc(var(--d) / 2)); }
.k .bk { width: var(--w); height: var(--h); transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.k .rt { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.k .lt { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.k .tp { width: var(--w); height: var(--d); top: calc((var(--h) - var(--d)) / 2); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
/* paper: slides out of an opening on the front */
.k .paper { position: absolute; left: 50%; width: 76px; height: 0; margin-left: -38px; background: #fff; border-radius: 0 0 2px 2px; box-shadow: 0 4px 10px rgba(0,0,0,.18); animation: out 6s ease-in-out infinite; overflow: hidden; z-index: 1; }
.k .paper::before { content: ''; position: absolute; left: 10px; right: 10px; top: 9px; height: 5px; border-radius: 3px; background: var(--kc); box-shadow: 0 10px 0 #e2e8f0, 0 18px 0 #e2e8f0, 0 26px 0 #e2e8f0; }
.k.photo .paper { animation-delay: -3s; }
.k.photo .paper::before, .k.cute .paper::before { height: 24px; background: linear-gradient(150deg, #ffd29a, #ff8f6b 55%, #5b4a8f); box-shadow: none; }
@keyframes out { 0%,15% { height: 0; } 55%,80% { height: 46px; } 95%,100% { height: 0; } }
.k .opening { position: absolute; left: 34px; right: 34px; height: 8px; border-radius: 5px; background: #0b1a33; box-shadow: inset 0 2px 3px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.5); }
.k .body .opening { top: 100px; }
.k .body .paper { top: 104px; }
/* cabinet: the artwork's proportions, so the panels are not stretched */
.k .body { --w: 146px; --h: 330px; --d: 134px; top: 66px; }
.k .body .art { background-size: 100% 100%; background-repeat: no-repeat; }
.k .body .tp { background: #e9eef6; }
.k .body .bk { background: var(--kc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; }
.k .body .bk img { width: 56px; height: 56px; }
.k .body .bk b { font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.02em; }
.k .body .bk b span { color: var(--navy); }
.k .body .bk small { font-size: .4rem; letter-spacing: .16em; font-weight: 700; }
.k.doc { --kc: #f7781c; }
.k.doc .fr.art { background-image: url('/assets/site/kiosk/doc-front.jpg'); }
.k.doc .rt.art { background-image: url('/assets/site/kiosk/doc-side.jpg'); }
.k.doc .lt.art { background-image: url('/assets/site/kiosk/doc-secure.jpg'); }
.k.photo { --kc: #3468da; }
.k.photo .fr.art { background-image: url('/assets/site/kiosk/photo-front.jpg'); }
.k.photo .rt.art { background-image: url('/assets/site/kiosk/photo-side.jpg'); }
.k.photo .lt.art { background-image: url('/assets/site/kiosk/photo-secure.jpg'); }
/* base and the shadow it casts */
.k .base { --w: 172px; --h: 12px; --d: 158px; top: 394px; }
.k .base .f { background: #c9d2e0; }
.k .base .tp { background: #dfe5ee; }
.kiosk-col::after { content: ''; position: absolute; bottom: 30px; left: 50%; width: 260px; height: 50px; margin-left: -130px; background: radial-gradient(closest-side, rgba(17,12,46,.22), transparent); filter: blur(6px); z-index: -1; }

/* ── Cute: a square-headed robot on one leg that prints from its mouth ── */
.k.cute { --kc: #ffc21a; }
.k.cute .bulb { --w: 16px; --h: 16px; --d: 16px; top: 98px; }
.k.cute .bulb .f { background: #22c55e; box-shadow: 0 0 14px #22c55e; }
.k.cute .ant { --w: 6px; --h: 24px; --d: 6px; top: 114px; }
.k.cute .ant .f { background: #9aa6b8; }
.k.cute .head { --w: 170px; --h: 150px; --d: 150px; top: 138px; }
.k.cute .head .f { background: linear-gradient(#ffd84d, #ffbf1a); }
.k.cute .head .rt, .k.cute .head .lt, .k.cute .head .bk { background: linear-gradient(#ffcc33, #f2a900); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.k.cute .head .rt img, .k.cute .head .lt img, .k.cute .head .bk img { width: 54px; height: 54px; }
.k.cute .head .rt b, .k.cute .head .lt b, .k.cute .head .bk b { font-family: var(--display); font-size: .95rem; letter-spacing: -0.02em; color: #1d1d1f; }
.k.cute .head .rt b span, .k.cute .head .lt b span, .k.cute .head .bk b span { color: var(--navy, #001f49); }
.k.cute .head .tp { background: #ffe07a; }
/* front: the same layout as Big P's artwork, in yellow */
.k.cute .head .fr { display: flex; flex-direction: column; align-items: center; padding-top: 8px; color: #1d1d1f;
  background: radial-gradient(circle at 88% 22%, rgba(255,255,255,.28) 0 11px, transparent 12px), radial-gradient(circle at 10% 70%, rgba(255,255,255,.22) 0 9px, transparent 10px), linear-gradient(#ffd84d, #ffbf1a); }
.k.cute .brandrow { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: -0.02em; line-height: 1; }
.k.cute .brandrow img { width: 22px; height: 22px; }
.k.cute .brandrow span { color: var(--navy, #001f49); }
.k.cute .tagline { font-size: .34rem; font-weight: 600; margin-top: 2px; color: #3b3b3f; }
.k.cute .head .opening { top: 43px; left: 46px; right: 46px; height: 6px; }
.k.cute .head .paper { top: 46px; width: 62px; margin-left: -31px; }
.k.cute .scan { position: absolute; top: 52px; left: 50%; width: 52px; height: 56px; margin-left: -26px; border: 2px solid #fff; border-radius: 6px; background: rgba(255,255,255,.15); }
.k.cute .scan::before { content: 'SCAN HERE'; position: absolute; top: -1px; left: -2px; right: -2px; height: 10px; border-radius: 5px 5px 0 0; background: #fff; color: #f2a900; font-size: .3rem; font-weight: 800; text-align: center; line-height: 10px; letter-spacing: .03em; }
.k.cute .qr { position: absolute; left: 7px; right: 7px; top: 14px; bottom: 5px; background:
  linear-gradient(#1d1d1f, #1d1d1f) 0 0 / 10px 10px no-repeat, linear-gradient(#1d1d1f, #1d1d1f) 100% 0 / 10px 10px no-repeat, linear-gradient(#1d1d1f, #1d1d1f) 0 100% / 10px 10px no-repeat,
  repeating-conic-gradient(#1d1d1f 0 25%, #fff 0 50%) 0 0 / 4px 4px; border: 2px solid #fff; border-radius: 2px; }
.k.cute .arrow { position: absolute; top: 72px; left: 28px; width: 0; height: 0; border: 8px solid transparent; border-left: 11px solid #fff; }
.k.cute .arrow::before { content: ''; position: absolute; right: 9px; top: -4px; width: 12px; height: 8px; background: #fff; }
.k.cute .pills { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.k.cute .pills span { display: flex; align-items: center; gap: 3px; padding: 4px 5px; border-radius: 5px; font-size: .36rem; font-weight: 700; line-height: 1.1; }
.k.cute .pills .p-web { background: #fff; color: #1d1d1f; }
.k.cute .pills .p-wa { background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.8); color: #1d1d1f; }
.k.cute .pills i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.k.cute .pills .p-web i { border: 1.5px solid #1d1d1f; }
.k.cute .pills .p-wa i { background: #25d366; }
/* sides: logo and the tagline, like Big P's side panels */
.k.cute .head .rt small, .k.cute .head .lt small { font-size: .3rem; font-weight: 700; letter-spacing: .14em; color: #3b3b3f; }
.k.cute .head .rt em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: .72rem; letter-spacing: -0.02em; color: var(--navy, #001f49); margin-top: 6px; }
/* the one leg and its foot */
.k.cute .leg { --w: 32px; --h: 104px; --d: 32px; top: 288px; }
.k.cute .leg .f { background: linear-gradient(90deg, #2f5fcc, #3e74e6); }
.k.cute .foot { --w: 112px; --h: 14px; --d: 92px; top: 392px; }
.k.cute .foot .f { background: #1f3f8f; }
.k.cute .foot .tp { background: #2d54b3; }