/* The bowls as a wheel you turn. A try, 2026-09-25: the Works Wheel component from 21st.dev, rebuilt for this
   plain page by wheel.js. The section is tall; the stage sticks to the screen while you scroll through it.
   Cards, heading and title are sized by wheel.js from the stage, so the wheel keeps its proportions on any screen. */
.ab-wheel{position:relative;background:var(--paper)}
.ab-wheel-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.ab-wheel-drum{position:absolute;top:50%;left:50%;transform-style:preserve-3d}
/* Each bowl is cut out of its counter (make-cutouts.mjs), so there is no card: the bowl sits on the white page with a
   soft plum shadow under it, and the Order pill sits at the bottom of the rim on hover. */
.ab-wheel-card{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:50%;text-decoration:none;color:var(--ink)}
.ab-wheel-face{position:relative;display:block;width:100%;height:100%}
.ab-wheel-face img{display:block;width:100%;height:100%;filter:drop-shadow(0 16px 22px rgba(72,14,74,.2))}
.ab-wheel-pill{position:absolute;left:50%;bottom:4%;padding:6px 16px;border-radius:999px;background:var(--sun);color:var(--ink);font-weight:700;font-size:15px;line-height:1.4;opacity:0;transform:translate(-50%,4px);transition:opacity .2s,transform .2s;pointer-events:none}
.ab-wheel-card:hover .ab-wheel-pill,.ab-wheel-card:focus-visible .ab-wheel-pill{opacity:1;transform:translate(-50%,0)}
.ab-wheel-card:focus-visible{outline:3px solid var(--sun);outline-offset:4px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.ab-wheel-pill{transition:none;transform:translate(-50%,0)}}

/* The front bowl's words change with motion (wheel.js adds is-leave, then is-enter): out to the left, in from the
   right, the name first and the button last. */
.ab-wheel-title > *{transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.ab-wheel-title > :nth-child(2){transition-delay:.05s}.ab-wheel-title > :nth-child(3){transition-delay:.1s}.ab-wheel-title > :nth-child(4){transition-delay:.15s}
.ab-wheel-title.is-leave > *{opacity:0;transform:translateX(-36px);transition-duration:.2s;transition-delay:0s}
.ab-wheel-title.is-enter > *{opacity:0;transform:translateX(36px);transition:none}
@media (prefers-reduced-motion:reduce){.ab-wheel-title > *{transition:none}}

/* The heading inside the ring. It fades out as the ring opens. */
.ab-wheel-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;text-align:center;text-wrap:balance;pointer-events:none;width:max-content}

/* The bowl at the front: name, what is in it, the price and its own button. It fades in as the drum forms.
   The name keeps two lines and the words three, so the block holds one height for every bowl. */
.ab-wheel-title{position:absolute;top:50%;left:8%;transform:translateY(-50%);z-index:200;opacity:0}
.ab-wheel-name{font-family:'Chillax',Georgia,serif;font-weight:700;line-height:1.02;margin:0 0 .3em;font-size:42px;min-height:2.04em;display:flex;align-items:flex-end}
.ab-wheel-desc{margin:0 0 12px;color:var(--ink-soft);font-size:18px;line-height:1.5;min-height:4.5em;max-width:30ch}
.ab-wheel-price{margin:0 0 18px;font-family:'Chillax',Georgia,serif;font-weight:700;font-size:26px;line-height:1.2;font-variant-numeric:tabular-nums}

/* Every bowl by name down the right. Click one and the wheel turns to it. */
.ab-wheel-index{position:absolute;top:7.5%;right:max(16px,2.5%);text-align:right;z-index:200}
.ab-wheel-index ol{margin:0;padding:0;list-style:none}
.ab-wheel-index button{font:inherit;font-size:17px;line-height:1.2;min-height:44px;display:inline-flex;align-items:center;color:var(--ink-soft);background:none;border:0;padding:0;cursor:pointer}
.ab-wheel-index button[aria-current="true"]{color:var(--ink);font-weight:700}

/* Phones: the drum sits higher and the front bowl's name, words and button sit in a white strip at the bottom. */
@media (max-width:767px){
  .ab-wheel-drum{top:40%}
  .ab-wheel-title{top:auto;bottom:0;left:0;right:0;transform:none;background:var(--paper);padding:16px 16px 20px;text-align:center}
  .ab-wheel-name{font-size:28px;min-height:0;display:block;white-space:nowrap}
  .ab-wheel-desc{margin:0 auto 8px;font-size:16px;max-width:36ch}
  .ab-wheel-price{font-size:22px;margin-bottom:12px}
  .ab-wheel-index{display:none}
}