/* "How we build your pet" (ui/craft-show.mjs): one slide per step, side by
   side across the whole width, each showing the real thing straight on the
   blue with its caption underneath. Swipe or scroll sideways; the slide that
   leaves the centre slides, shrinks and fades out of the way. It works as a
   plain snapping row without scripts. */
/* With scripts and motion (.is-live) a slide is empty until it plays, so its
   animation draws it and the finished picture never shows first. The 3D view
   stands in for the brick pictures unless this device has none (.no-3d). */
.home-craft.is-live .craft-visual>:not(.craft-bubble){transition:opacity .25s}
.home-craft.is-live .craft-slide:not(.is-on) .craft-visual>:not(.craft-bubble){opacity:0}
.home-craft.is-live:not(.no-3d) :is(.craft-3d-slot>img,.craft-trio-bricks){opacity:0}
.home-craft{padding:clamp(60px,8vw,110px) 0 clamp(40px,6vw,80px);color:var(--site-ink,#fff);overflow:hidden}
.home-craft>h2,.home-craft>.craft-lead{text-align:center;max-width:1296px;margin-left:auto;margin-right:auto;padding:0 5%;box-sizing:content-box}
.home-craft h2{margin-top:0;margin-bottom:0;font-size:clamp(42px,4.6vw,66px);line-height:1;letter-spacing:-.055em;font-weight:800;color:var(--site-ink,#fff)}
.craft-lead{margin-top:14px;margin-bottom:0;max-width:34em;font-size:19px;line-height:1.5;color:var(--site-muted,#DCE4FF)}

.home-craft{--slide:min(900px,78vw)}
.craft-track{margin-top:clamp(10px,2vw,24px);padding-top:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.craft-track::-webkit-scrollbar{display:none}
.craft-track:focus-visible{box-shadow:inset 0 0 0 3px var(--site-accent,#FFCE55)}
.craft-track.is-dragging{scroll-snap-type:none;cursor:grabbing}
.craft-slides{display:flex;margin:0;padding:0 calc((100% - var(--slide))/2);list-style:none;width:max-content}
.craft-slide{flex:0 0 var(--slide);scroll-snap-align:center;scroll-snap-stop:always;text-align:center;user-select:none;-webkit-user-select:none}
.craft-slide img{-webkit-user-drag:none}
.craft-visual{position:relative;aspect-ratio:16/9;max-height:56svh;margin:0 3%;transform:translateX(calc(var(--d,0)*22%)) scale(calc(1 - var(--a,0)*.2)) rotate(calc(var(--d,0)*4deg));opacity:calc(1 - var(--a,0)*.55);will-change:transform}
.craft-slide h3{margin:clamp(14px,2vw,24px) auto 8px;max-width:20em;font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.04em;font-weight:800;color:var(--site-ink,#fff);opacity:calc(1 - var(--a,0)*1.4)}
.craft-slide p{margin:0 auto;max-width:32em;padding:0 4%;font-size:18px;line-height:1.5;color:var(--site-muted,#DCE4FF);opacity:calc(1 - var(--a,0)*1.4)}

/* What each slide shows. */
.craft-visual img{display:block}
.craft-one,.craft-pair,.craft-shots,.craft-trio,.craft-pages{position:absolute;inset:0}
.craft-one img,.craft-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 24px #0b1a5e66)}
.craft-shots{display:flex;align-items:center;justify-content:center;gap:4%}
.craft-shots figure{position:relative;flex:0 1 29%;margin:0}
.craft-shots figure:nth-child(1){transform:rotate(-5deg) translateY(4%)}
.craft-shots figure:nth-child(3){transform:rotate(4deg) translateY(3%)}
.craft-shots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;box-shadow:0 18px 34px #0b1a5e73}
.craft-pair{display:grid;grid-template-columns:34% 1fr;align-items:center;gap:3%}
.craft-side img{width:100%;border-radius:16px;box-shadow:0 18px 34px #0b1a5e73;transform:rotate(-3deg)}
.craft-main{position:relative;height:100%}
.craft-trio{display:grid;grid-template-columns:repeat(3,1fr);column-gap:4%;padding:0 2%}
.craft-trio figure{display:flex;flex-direction:column;align-items:center;gap:6%;margin:0;min-height:0}
.craft-trio-bricks{flex:1;min-height:0;width:100%;object-fit:contain;filter:drop-shadow(0 14px 18px #0b1a5e66)}
.craft-trio-shot{position:relative;flex:none;width:62%}
.craft-trio-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 10px 22px #0b1a5e73}
/* Three guidebook pages dealt out like cards, the cover on top (--at is each page's place; craft-show.mjs reads it). */
.craft-pages{display:flex;align-items:center;justify-content:center}
.craft-pages img{position:absolute;height:90%;aspect-ratio:620/878;border-radius:8px;background:#fff;box-shadow:0 18px 34px #0b1a5e73;transform:var(--at)}
.craft-pages img:nth-child(1){--at:translate(-70%,3%) rotate(-6deg);z-index:3}
.craft-pages img:nth-child(2){--at:translate(0,0) rotate(0deg);z-index:2}
.craft-pages img:nth-child(3){--at:translate(70%,3%) rotate(6deg);z-index:1}
.craft-pair .craft-side img[src*=guide]{aspect-ratio:620/878;object-fit:cover}
.craft-shots .craft-swap{position:absolute;inset:0;opacity:0}
.craft-side{position:relative}

/* Live: the shared 3D view sits in the centred slide over its picture. */
.craft-3d{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s}
.craft-3d-slot.is-live .craft-3d{opacity:1}
.craft-3d-slot.is-live>img{opacity:0;transition:opacity .35s}
.craft-trio-live{position:absolute;inset:0 0 30% 0;z-index:1}
.craft-trio:has(.is-live) .craft-trio-bricks{opacity:0;transition:opacity .35s}
/* Override the general caption paragraph; keep the tail behind the lettering. */
.craft-slide .craft-bubble{position:absolute;left:50%;top:2%;z-index:3;margin:0;padding:10px 18px;border-radius:18px;background:#FFCE55;color:#17171F;font-size:clamp(16px,2.1vw,24px);font-weight:800;line-height:1.25;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translateX(-50%) scale(0) rotate(-6deg);transition:transform .28s cubic-bezier(.3,1.6,.5,1),background .2s;pointer-events:none;box-shadow:0 3px 0 #BE8D19}
.craft-bubble::after{content:"";position:absolute;z-index:-1;left:calc(50% - 8px);bottom:-7px;width:16px;height:16px;border-radius:0 0 4px 0;background:inherit;transform:rotate(45deg);box-shadow:3px 3px 0 -1px #0002}
.craft-bubble.on{transform:translateX(-50%) scale(1) rotate(-3deg)}
.craft-bubble.bad{background:#E5484D;color:#fff;box-shadow:0 3px 0 #A3262B}
.craft-bubble.good{background:#2BB673;color:#fff;box-shadow:0 3px 0 #1B7D4D}
.craft-bubble.count{background:#fff;color:#17171F;box-shadow:0 3px 0 #B9C5EE}
.craft-tick{position:absolute;right:-6%;bottom:-6%;display:grid;place-items:center;width:clamp(26px,3.6vw,42px);aspect-ratio:1;border-radius:50%;background:#2BB673;color:#fff;font-size:clamp(14px,1.8vw,22px);font-style:normal;transform:scale(0);box-shadow:0 3px 0 #1B7D4D}
.craft-tick.bad{background:#E5484D;box-shadow:0 3px 0 #A3262B}
.craft-stamp{position:absolute;right:6%;bottom:8%;padding:6px 16px;border:4px solid #fff;border-radius:10px;color:#fff;font-size:clamp(18px,2.6vw,32px);font-weight:800;text-transform:uppercase;letter-spacing:.04em;transform:rotate(-8deg) scale(0)}
.craft-flash{position:absolute;inset:0;border-radius:16px;background:#fff;opacity:0;pointer-events:none}
/* Out of stock, as the studio shows it (ui/stock.css): a round badge standing on the bricks, yellow with a clock
   while you wait for them and blue with an eye once a close colour stands in, and the switch between the two. The
   same badge, red then green, marks the other AI's slip. craft-show.mjs moves each one over its brick (translate). */
.craft-badge{position:absolute;left:-15px;top:-40px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#FFC12E;color:#17171F;font-size:16px;font-style:normal;line-height:1;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(23,23,31,.22);transform:scale(0);transform-origin:50% 135%;pointer-events:none}
.craft-badge::after{content:"";position:absolute;left:14px;top:30px;width:2px;height:10px;background:#fff}
.craft-badge svg{grid-area:1/1;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.craft-badge:not(.sub) svg:last-child,.craft-badge.sub svg:first-child{display:none}
.craft-badge.sub{background:#2B59FF;color:#fff}
.craft-badge.bad{background:#E5484D;color:#fff}
.craft-badge.good{background:#2BB673;color:#fff}
.craft-switch{position:absolute;left:50%;bottom:1%;z-index:2;display:inline-flex;gap:4px;padding:4px;border-radius:16px;background:#F5F6FA;box-shadow:0 10px 24px #0b1a5e59;transform:translateX(-50%);opacity:0;white-space:nowrap}
.craft-switch span{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:800;line-height:1;color:#5B5E70}
.craft-switch span.is-on{background:#fff;color:#17171F;box-shadow:0 2px 0 #E6E8EF,0 4px 12px rgba(23,23,31,.08)}
.craft-switch i{flex:none;width:12px;height:12px;border-radius:4px}
.craft-switch i.wait{background:repeating-linear-gradient(135deg,#C98F00 0 3px,#fff 3px 5px);box-shadow:inset 0 0 0 1px #C98F00}
.craft-switch i.sub{background:#2B59FF}
/* The 3D simulator: a screen with the build in it and, under it, the step count, progress and Next. */
.craft-sim{position:absolute;inset:1% 13%;display:grid;grid-template-rows:minmax(0,1fr) auto;border:clamp(6px,.8vw,10px) solid #15161E;border-radius:clamp(18px,2.4vw,30px);background:#EEF2FF;box-shadow:0 22px 44px #0b1a5e73;overflow:hidden}
.craft-sim-screen{position:relative;min-height:0}
.craft-sim-screen>img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain}
.craft-sim-bar{display:grid;grid-template-columns:minmax(4.6em,auto) minmax(0,1fr) auto;align-items:center;gap:clamp(8px,1.4vw,16px);padding:clamp(7px,1vw,12px) clamp(10px,1.6vw,18px);background:#fff;color:#15161E;font-size:clamp(12px,1.3vw,16px);line-height:1;text-align:left;font-variant-numeric:tabular-nums}
.home-craft.no-3d .craft-sim-bar{display:none}
.craft-sim-bar span{height:6px;border-radius:3px;background:#DDE3F5;overflow:hidden}
.craft-sim-bar i{display:block;height:100%;border-radius:3px;background:var(--pb-blue,#2B59FF);transform-origin:0 50%;transform:scaleX(0)}
.craft-sim-bar em{display:grid;place-items:center;width:clamp(26px,3.2vw,38px);aspect-ratio:1;border-radius:50%;background:#FFCE55;box-shadow:0 3px 0 #BE8D19}
.craft-sim-bar svg{width:52%;fill:none;stroke:#15161E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* The other AI: a small robot beside the page it reads, its eyes on the page or on the build (--look). */
.craft-bot{position:absolute;left:2%;top:22%;z-index:2;display:flex;align-items:center;justify-content:center;gap:17%;width:clamp(40px,7vw,80px);aspect-ratio:1/.84;border-radius:28%;background:#fff;box-shadow:inset 0 -5px 0 #C9D3F2,0 8px 18px #0b1a5e59;transform:scale(0)}
.craft-bot::before{content:"";position:absolute;left:46%;bottom:100%;width:8%;height:24%;background:#fff}
.craft-bot::after{content:"";position:absolute;left:38%;bottom:118%;width:24%;aspect-ratio:1;border-radius:50%;background:#FFCE55}
.craft-bot b{width:17%;aspect-ratio:1;border-radius:50%;background:#15161E;translate:calc(var(--look,0)*60%) 0;transition:translate .25s}
/* The red pen ring on the guidebook page the other AI got wrong. */
.craft-ring{position:absolute;left:4%;top:12%;width:92%;transform:rotate(-3deg);pointer-events:none}
.craft-ring svg{display:block;width:100%;overflow:visible}
.craft-ring ellipse{fill:none;stroke:#E5484D;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.craft-scan{position:absolute;left:8%;right:8%;top:0;height:4px;border-radius:2px;background:#FFCE55;box-shadow:0 0 22px 8px #FFCE5580;opacity:0}

/* Under the slides: back, a dot per step, next, pause. */
.craft-controls{display:flex;justify-content:center;align-items:center;gap:4px;margin-top:clamp(18px,2.4vw,28px);padding:0 16px}
.craft-arrow,.craft-pause{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--site-line,#6A83D3);border-radius:50%;background:none;color:var(--site-ink,#fff);cursor:pointer}
.craft-arrow svg,.craft-pause svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.craft-arrow:hover,.craft-pause:hover{border-color:var(--site-ink,#fff)}
.craft-arrow:disabled{opacity:.35;cursor:default}
.craft-pause{margin-left:10px}
.craft-dot{flex:none;width:26px;height:44px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.craft-dot::after,.craft-dot i{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:4px;background:var(--site-line,#6A83D3);transition:width .3s,margin .3s,background .2s}
.craft-dot i{left:0;width:30px;margin:-4px 0 0 7px;background:var(--site-accent,#FFCE55);transform-origin:left;opacity:0}
.craft-dot[aria-current=step]{width:44px}
.craft-dot[aria-current=step]::after{width:30px;margin-left:-15px;background:#ffffff40}
.craft-dot[aria-current=step] i{opacity:1}
.craft-controls.is-auto .craft-dot i{transform:scaleX(0)}
.craft-dot:focus-visible,.craft-arrow:focus-visible,.craft-pause:focus-visible{outline:3px solid var(--site-accent,#FFCE55);outline-offset:2px;border-radius:999px}

@media(max-width:760px){
 .home-craft{--slide:88vw;padding:88px 0 72px}
 .home-craft>h2,.home-craft>.craft-lead{text-align:center;padding:0 20px}
 .craft-lead{margin-top:18px}
 .craft-lead,.craft-slide p{font-size:17px}
 .craft-track{margin-top:28px}
 .craft-visual{aspect-ratio:1/1;max-height:none;margin:0 2%}
 .craft-slide h3{margin:22px auto 12px}
 .craft-controls{margin-top:32px;gap:2px}
 .craft-shots{gap:0}.craft-shots figure{flex-basis:42%}
 .craft-shots figure:nth-child(1){margin-right:-12%}.craft-shots figure:nth-child(2){z-index:1}.craft-shots figure:nth-child(3){margin-left:-12%}
 .craft-shots figure:nth-child(1) .craft-tick{right:auto;left:-6%}
 .craft-side img{border-radius:10px}
 .craft-pair{grid-template-columns:36% 1fr}
 .craft-pages img{height:62%}
 .craft-pages img:nth-child(1){--at:translate(-60%,3%) rotate(-6deg)}
 .craft-pages img:nth-child(3){--at:translate(60%,3%) rotate(6deg)}
 .craft-sim{inset:7% 2%}
 .craft-switch span{padding:9px 10px;font-size:13px;gap:6px}
 .craft-bot{left:3%}
 .craft-trio-shot{width:80%}.craft-trio-photo{border-radius:8px}
 .craft-slide .craft-bubble{padding:7px 13px;border-radius:14px;top:1%}
 .craft-controls{padding-inline:10px}
 .craft-dot{width:14px}.craft-dot[aria-current=step]{width:34px}
 .craft-dot[aria-current=step]::after{width:26px;margin-left:-13px}
 .craft-dot i{width:26px;margin-left:4px}
 .craft-shots img,.craft-flash{border-radius:10px}
 .craft-arrow,.craft-pause{width:40px;height:40px}
}
/* Keep both arrows and playback reachable on the narrowest phones. */
@media(max-width:360px){
 .craft-controls{gap:0;padding-inline:6px}
 .craft-dot{width:12px}.craft-dot[aria-current=step]{width:26px}
 .craft-dot[aria-current=step]::after{width:20px;margin-left:-10px}
 .craft-dot i{width:20px;margin-left:3px}
 .craft-arrow,.craft-pause{width:36px;height:36px}
 .craft-pause{margin-left:4px}
}
@media(prefers-reduced-motion:reduce){.craft-visual{transform:none;opacity:1}.craft-slide h3,.craft-slide p{opacity:1}.craft-bubble,.craft-3d,.craft-3d-slot.is-live>img,.craft-bot b{transition:none}}