/* The works wheel (platform, #platform). Pairs with js/wheel.v1.js.
   A ring of tilted tiles around a title that folds into a 3D drum: the front
   feature's name and line sit large on the left, the index on the right.
   Built from the feature grid in the page, which stays as the fallback for
   reduced motion and no JavaScript. */

.wheel{ position: relative; margin: 8px calc(var(--section-x) * -1) 0; }   /* edge to edge: the ring needs the width */
.wheel-stage{
  position: sticky; top: 0; height: 100vh; height: 100svh;
  perspective: 1500px; perspective-origin: 55% 50%;
  overflow: hidden; cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
}
.wheel-stage.is-dragging{ cursor: grabbing; }

/* the title the ring circles; it steps back as the drum forms */
.wheel-center{
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: max-content; max-width: 90vw;
  display: grid; justify-items: center; gap: 12px; text-align: center;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.wheel-title{ font-size: clamp(30px, 4vw, 54px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.04; color: #fff; }
.wheel-title em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif; font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.02em; color: var(--t3);
}
.wheel-hint{ font-size: 13px; color: var(--t4); }

/* the tiles, which are also the drum's faces: copy on the left, a picture of
   the feature on the right, each with its own soft tint */
.wheel-drum{ position: absolute; inset: 0; transform-style: preserve-3d; }
.wheel-card{
  --w: min(500px, 37vw); --h: calc(var(--w) * .6);
  --tint: 186 208 255;
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(var(--tint) / .30), transparent 58%),
    radial-gradient(70% 80% at 0% 100%, rgb(var(--tint) / .10), transparent 70%),
    linear-gradient(160deg, #161d27, #090c11 75%);
  border: 1px solid rgb(var(--tint) / .22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 40px 80px -40px rgba(0,0,0,.9);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  will-change: transform, opacity; cursor: pointer;
}
.wc--ice{ --tint: 186 208 255; }
.wc--mint{ --tint: 150 226 196; }
.wc--lilac{ --tint: 196 178 255; }
.wc--sky{ --tint: 140 200 255; }
.wc--amber{ --tint: 243 205 128; }
.wc--rose{ --tint: 245 176 196; }
.wheel-stage.is-drum .wheel-card{ cursor: inherit; }

.wc-copy{ position: relative; z-index: 1; display: flex; flex-direction: column; padding: 24px 0 22px 26px; }
.wc-ico{
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: rgb(var(--tint) / .14); border: 1px solid rgb(var(--tint) / .28);
}
.wc-ico svg{ width: 22px; height: 22px; }
.wc-ico svg *{ stroke: rgb(var(--tint)); }
.wc-name{ margin-top: auto; font-size: 21px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.12; color: #fff; }
.wc-line{ margin-top: 6px; font-size: 13px; line-height: 1.4; color: var(--t3); }
.wc-tag{
  align-self: flex-start; margin-top: 14px; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: .01em; color: rgb(var(--tint));
  background: rgb(var(--tint) / .1); border: 1px solid rgb(var(--tint) / .22);
}
.wc-art{ position: relative; }

/* a phone holding the app's real screen, tilted and running off the edge */
.wc-phone{
  position: absolute; right: 12%; top: 13%; width: 46%; aspect-ratio: 704 / 1504;
  padding: 4px; border-radius: 18px; background: #05070a;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 40px -14px rgba(0,0,0,.85), 0 0 0 6px rgb(var(--tint) / .05);
  transform: rotate(-9deg);
}
.wc-phone img{ display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px; }
.wc-chip{
  position: absolute; left: 4%; bottom: 16%; z-index: 2;
  padding: 7px 11px; border-radius: 12px; white-space: nowrap;
  font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: #0b0f14;
  background: rgb(var(--tint)); box-shadow: 0 10px 22px -8px rgba(0,0,0,.7);
  transform: rotate(-4deg);
}

/* the coach, mid-conversation */
.wc-chat{ position: absolute; inset: 18% 8% auto 4%; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.35; }
.wc-chat p{ margin: 0; padding: 9px 12px; border-radius: 15px; max-width: 92%; }
.wc-chat .me{ justify-self: end; background: rgb(var(--tint)); color: #0b0f14; border-bottom-right-radius: 5px; }
.wc-chat .them{
  display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: end; padding: 0; background: none;
}
.wc-chat .them span{ padding: 9px 12px; border-radius: 15px; border-bottom-left-radius: 5px; background: rgba(255,255,255,.09); color: var(--t2); }
.wc-face{
  width: 26px; height: 26px; border-radius: 50%; background-color: #c9d7f7;
  background-image: url(/mascots/coach-directions.v2.webp); background-size: 117px 117px; background-position: -45.5px -43.2px;
}

/* the creator's numbers */
.wc-dash{
  position: absolute; inset: 16% 8% 16% 4%; padding: 14px 16px; border-radius: 14px;
  background: rgba(8,11,15,.7); border: 1px solid rgba(255,255,255,.1);
  display: grid; grid-template-rows: auto auto 1fr;
}
.wc-dash span{ font-size: 11px; color: var(--t4); }
.wc-dash b{ margin-top: 2px; font-size: 26px; font-weight: 600; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.wc-bars{ display: flex; align-items: flex-end; gap: 5px; margin-top: 10px; }
.wc-bars i{ flex: 1; height: var(--h); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, rgb(var(--tint)), rgb(var(--tint) / .25)); }

/* the receipt nobody has to file */
.wc-receipt{
  position: absolute; inset: 15% 8% auto 4%; padding: 14px 16px 10px; border-radius: 14px;
  background: #f4f6fa; color: #1a2230; box-shadow: 0 20px 36px -16px rgba(0,0,0,.8);
  transform: rotate(3deg);
}
.wc-r-top{ display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 9px; margin-bottom: 7px; border-bottom: 1px dashed #c9d0dc; }
.wc-r-top span{ font-size: 12px; font-weight: 600; }
.wc-r-top b{ font-size: 18px; font-weight: 700; letter-spacing: -.03em; }
.wc-r-top small{ font-size: 11px; font-weight: 500; color: #5a6475; }
.wc-receipt p{ display: flex; align-items: center; gap: 6px; margin: 5px 0; font-size: 11.5px; color: #3c4655; }
.wc-receipt svg{ flex: none; width: 13px; height: 13px; color: #2f8f5b; }

/* the front feature, large, on the left */
.wheel-now{
  position: absolute; z-index: 2; left: max(40px, 6vw); top: 50%; transform: translateY(-50%);
  width: min(330px, 25vw); opacity: 0; visibility: hidden; pointer-events: none;
}
.wheel-now h3{ font-size: clamp(30px, 3.1vw, 46px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; color: #fff; }
.wheel-now p{ margin-top: 16px; font-size: 15px; line-height: 1.62; color: var(--t3); }

/* the index, on the right */
.wheel-index{
  position: absolute; z-index: 2; right: max(28px, 4vw); top: 50%; transform: translateY(-50%);
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; justify-items: end;
}
.wheel-index button{
  appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 32px; padding: 0 2px 0 14px; position: relative;
  font: inherit; font-size: 13px; letter-spacing: -0.005em; color: var(--t5); text-align: right;
  transition: color .25s ease;
}
.wheel-index button::before{
  content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(.5);
  transition: opacity .25s ease, transform .3s cubic-bezier(.23,1,.32,1);
}
.wheel-index button.is-on{ color: #fff; }
.wheel-index button.is-on::before{ opacity: 1; transform: none; }
@media (hover: hover){ .wheel-index button:hover{ color: var(--t2); } }
.wheel-index button:focus-visible{ outline: 2px solid rgba(186,208,255,.75); outline-offset: 2px; border-radius: 6px; }

.wheel-ticks{ display: none; }

/* when the wheel is running, the plain grid it was built from steps aside */
.has-wheel > .grid-features{ display: none; }

@media (max-width: 760px){
  .wheel-stage{ perspective-origin: 50% 60%; }
  .wheel-card{ --w: 86vw; --h: calc(var(--w) * .62); grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); }
  .wc-copy{ padding: 18px 0 16px 18px; }
  .wc-ico{ width: 36px; height: 36px; border-radius: 11px; }
  .wc-name{ font-size: 18px; }
  .wc-line{ display: none; }
  .wc-tag{ margin-top: 10px; }
  .wc-chat{ font-size: 11px; inset: 12% 6% auto 2%; }
  .wc-dash b{ font-size: 21px; }
  .wc-receipt{ inset: 12% 6% auto 2%; padding: 11px 12px 8px; }
  .wc-r-top span{ font-size: 11px; }
  .wc-r-top b{ font-size: 15px; }
  .wc-receipt p{ font-size: 10.5px; margin: 4px 0; }
  .wc-receipt p:last-child{ display: none; }   /* two lines fit a phone's tile; the third is in the text above */
  .wheel-now{ left: 20px; right: 20px; top: 92px; transform: none; width: auto; }
  .wheel-now h3{ font-size: 28px; }
  .wheel-now p{ margin-top: 10px; font-size: 14px; line-height: 1.55; }
  .wheel-index{ display: none; }
  .wheel-ticks{
    display: flex; gap: 6px; position: absolute; left: 50%; bottom: max(24px, 4vh); transform: translateX(-50%);
  }
  .wheel-ticks i{ width: 16px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.16); transition: background .25s ease, width .3s cubic-bezier(.23,1,.32,1); }
  .wheel-ticks i.is-on{ width: 30px; background: var(--accent); }
}