/* Play · Figma 1286:2521 (Desktop Stacks), 1283:1643 (Desktop Playground),
   1369:36809 (Mobile Stacks), 1369:37144 (Mobile Playground).
   Desktop: a 1280-wide stage in Figma coordinates, centred, scaled down below 1280 (tablet = desktop scaled).
   Mobile: Figma 390 coordinates expressed from the centre / 16px gutters.
   View state: html.is-playground (Playground is the landing view; Stacks with ?view=stacks — set before paint,
   toggled by play.js). Both views share one layout (stage height, profile, bar): Figma's two frames place them
   slightly differently, but switching must not move anything except the content — desktop uses the Playground
   frame's values, mobile the Stacks frame's (the stacks need the room). */

.play {
  --s: 1;   /* below 1280 play.js sets --s = width / 1280 (CSS fallback 0.6 = 768/1280) */
  --stage-h: 686px;   /* both views: ends at the switch bar (640 + 46); the footer margin is the gap */
  position: relative;
  height: calc(var(--stage-h) * var(--s));
  overflow: clip;
}

.play__stage {
  position: relative;
  width: 1280px; height: var(--stage-h);
  margin: 0 auto;
  transform: scale(var(--s)); transform-origin: 0 0;
}
.play__stage > * { position: absolute; }

/* ------------------------------------------------------------------
   Profile card
   ------------------------------------------------------------------ */
.profile {
  left: 44px; top: 119px;   /* both views (Figma Playground 119; Stacks was 137) */
  width: 250px; height: 261.74px;   /* Figma 242.74 + one more bullet row (19) */
  border-radius: 32px;
  background: var(--surface-3);
  overflow: hidden;
  transition: top 400ms var(--ease), width 400ms var(--ease), height 400ms var(--ease);
}
.profile > *, .profile__body > * { position: absolute; }
.profile__body { inset: 0; transition: opacity 240ms var(--ease), visibility 240ms; }
.profile__hide {
  left: 18px; top: 17px; z-index: 1;
  font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6);
  visibility: hidden; opacity: 0;
  transition: color 160ms, opacity 240ms var(--ease), visibility 240ms;
}
.profile__hide:hover { color: #000; }
.is-playground .profile__hide { visibility: visible; opacity: 1; }
.profile__avatar { left: 164px; top: 16px; width: 68px; height: 68px; border-radius: 19px; background: #c6ff5e; }
.profile__name { left: 18px; top: 96px; font-size: 20px; line-height: 20.8px; font-weight: 500; letter-spacing: -0.01em; color: #000; white-space: nowrap; }
.profile__body p, .profile__list li {
  font-size: 12px; line-height: 18.29px; letter-spacing: -0.13px; color: #000;
}
.profile__list { position: static; }
.profile__list li { position: absolute; left: 36px; white-space: nowrap; }
.profile__list li::before {
  content: ""; position: absolute; left: -9px; top: 8px;
  width: 2.5px; height: 2.5px; border-radius: 50%; background: currentColor;
}
.profile__l1 { left: 18px; top: 129px; white-space: nowrap; }
.profile__list .profile__l2 { top: 149.74px; }
.profile__list .profile__l3 { top: 168.74px; }
.profile__list .profile__l5 { top: 187.74px; }
.profile__l4 { left: 18px; top: 208.74px; width: 201px; }
/* closer links: underlined like the Taste hero links */
.profile__l4 a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.profile__l4 a:hover { color: #000; text-decoration-color: var(--lime); }

/* collapsed via "Hide" (playground only) */
.is-playground .profile.is-collapsed { width: 78px; height: 49px; }
.is-playground .profile.is-collapsed .profile__body { opacity: 0; visibility: hidden; }

/* ------------------------------------------------------------------
   Stacks
   ------------------------------------------------------------------ */
.stacks { inset: 0; transition: opacity 300ms var(--ease), visibility 300ms; }
.stack { position: absolute; width: 172px; height: 166.18px; display: block; }
.stack--1 { left: 522px; top: 155px; --lc: 86px; --sc: 85.5px; }
.stack--2 { left: 769px; top: 321px; --lc: 86px; --sc: 85.5px; }
/* Figma places the Motions caption off the stack's centre (label +4px, sub +10.5px); kept as drawn */
.stack--3 { left: 1016px; top: 200px; --lc: 90px; --sc: 96.5px; }
.stack__art { position: relative; display: block; width: 172px; height: 166.18px; transition: transform 300ms var(--ease); }
/* Three tilted cards (back -1°, mid 3.6°, front 6.59° in Figma); hover fans the front card out like the Home folders */
.stack__card { position: absolute; width: 146.42px; height: 146.42px; border-radius: 24px; overflow: hidden; transform-origin: 0 0; transition: transform 300ms var(--ease); }
.stack__card--back { left: 22.47px; top: 17.22px; background: #d4d4d4; transform: rotate(1deg); }
.stack__card--mid { left: 16.66px; top: 19.51px; background: #e6e6e6; transform: rotate(-3.6deg); }
.stack__card--front { left: 0; top: 16.81px; background: #fff; transform: rotate(-6.59deg); }
.stack__card picture, .stack__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* two of the stack's pieces peek out behind the cover (build.mjs), under white veils (mid 12%, back 24%) that lift
   when the stack fans out on hover / focus, like the Home folders */
.stack__card--mid::after, .stack__card--back::after { content: ''; position: absolute; inset: 0; background: #fff; pointer-events: none; transition: opacity 200ms var(--ease); }
.stack__card--mid::after { opacity: 0.12; }
.stack__card--back::after { opacity: 0.24; }
.stack:hover .stack__card--mid::after, .stack:hover .stack__card--back::after,
.stack:focus-visible .stack__card--mid::after, .stack:focus-visible .stack__card--back::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .stack:hover .stack__art, .stack:focus-visible .stack__art { transform: none; }
  .stack:hover .stack__card--mid, .stack:focus-visible .stack__card--mid { transform: rotate(-3.6deg); }
  .stack:hover .stack__card--front, .stack:focus-visible .stack__card--front { transform: rotate(-6.59deg); }
  .stack:hover .stack__card--mid::after, .stack:focus-visible .stack__card--mid::after { opacity: 0.12; }
  .stack:hover .stack__card--back::after, .stack:focus-visible .stack__card--back::after { opacity: 0.24; }
}
.stack__card--front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #e3e3e3; }
.stack:hover .stack__art, .stack:focus-visible .stack__art { transform: translateY(-8px); }
.stack:hover .stack__card--mid, .stack:focus-visible .stack__card--mid { transform: rotate(-4.6deg); }
.stack:hover .stack__card--front, .stack:focus-visible .stack__card--front { transform: rotate(-10.59deg); }
.stack__label, .stack__sub { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.stack__label { left: var(--lc, 50%); }
.stack__sub { left: var(--lc, 50%); }   /* "N pieces": centred under the label */
.stack__label { top: 184px; font-size: 15px; line-height: 18px; font-weight: 500; color: var(--text); }
.stack__sub { top: 206px; font-size: 13px; line-height: 16px; color: rgba(18, 18, 18, 0.55); }
.stack:focus-visible { outline: none; }
.stack:focus-visible .stack__label { text-decoration: underline; text-underline-offset: 3px; }
.is-playground .stacks { opacity: 0; visibility: hidden; }
/* sort transition (play.js): the stacks settle with a small thump as the globe's tiles land on them */
.stacks.is-landing .stack__art { animation: stack-land 520ms cubic-bezier(.34, 1.56, .64, 1) both; }
.stacks.is-landing .stack--2 .stack__art { animation-delay: 60ms; }
.stacks.is-landing .stack--3 .stack__art { animation-delay: 120ms; }
@keyframes stack-land { 0% { transform: scale(0.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }

/* ------------------------------------------------------------------
   Playground sphere
   ------------------------------------------------------------------ */
.sphere {
  left: 347px; top: 129px; width: 587px; height: 587px;
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease), visibility 400ms;
  touch-action: none;
  cursor: grab;
}
.sphere.is-dragging { cursor: grabbing; }
.is-playground .sphere { opacity: 1; visibility: visible; }
/* card hidden: the globe grows a little (from its centre); transform only, so drag / click / the sort transition,
   which all read the canvas rect, keep working */
.sphere { transform-origin: 50% 50%; transition: opacity 400ms var(--ease), visibility 400ms, transform 500ms var(--ease); }
.is-playground.is-profile-hidden .sphere { transform: scale(1.14); }
.sphere__canvas, .sphere__fallback { display: block; width: 100%; height: 100%; }
.sphere__canvas { touch-action: none; }
/* no outline ring around the globe (not in the design); keyboard focus gets a soft lime glow instead */
.sphere:focus { outline: none; }
.sphere:focus-visible .sphere__canvas { filter: drop-shadow(0 0 6px rgba(196, 254, 71, 0.9)); }

/* ------------------------------------------------------------------
   Bar: Playground switch + hint
   ------------------------------------------------------------------ */
.play__bar {
  left: 44px; top: 640px; width: 1193px; height: 46px;   /* both views (Figma Playground 640; Stacks was 648) */
}
.switch {
  position: absolute; left: 0; top: 0;
  width: 217px; height: 46px;
  border-radius: 999px;
  background: #f5ffdf;
  font-size: 15px; line-height: 18px; font-weight: 500; color: #000;
}
.switch__knob {
  position: absolute; left: 88px; top: 0;
  width: 129px; height: 46px; padding: 14px 0 14px 24px;
  border-radius: 999px; text-align: left;
  background: var(--text); color: #fff;
  transition: left 360ms var(--ease);
}
.switch__state { position: absolute; top: 14px; transition: opacity 240ms var(--ease); }
.switch__state--off { left: 37px; }
.switch__state--on { left: 147px; opacity: 0; }
.is-playground .switch__knob { left: 0; }
.is-playground .switch__state--off { opacity: 0; }
.is-playground .switch__state--on { opacity: 1; }
.switch:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.play__hint {
  position: absolute; right: 0; top: 15.5px;
  font-size: 14px; line-height: 17px; color: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
.hint--playground { display: none; }
.is-playground .hint--stacks { display: none !important; }
.is-playground .hint--playground { display: inline; }

/* ------------------------------------------------------------------
   Mobile 390
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .play { --s: 1; --stage-h: 938.74px; height: var(--stage-h); }   /* both views: ends at the switch bar (892.74 + 46) */
  .play__stage { width: auto; transform: none; }

  /* the desktop card's compact 250px width, left-aligned (full width left an empty middle and the photo far right) */
  .profile, .is-playground .profile { left: 16px; right: auto; top: 86px; width: 250px; }
  .profile__body p, .profile__list li { line-height: 16px; letter-spacing: 0; }
  .profile__list li::before { top: 7px; }
  .profile__hide { top: 17px; line-height: 21px; }
  .is-playground .profile.is-collapsed { width: 78px; }

  .stack--1 { left: calc(50% - 179px); top: 376.74px; --lc: 83px; --sc: 85.5px; }
  .stack--2 { left: calc(50% + 7px); top: 376.74px; --lc: 84.5px; --sc: 85.5px; }
  .stack--3 { left: calc(50% - 86px); top: 626.74px; --lc: 68px; --sc: 96.5px; }
  .stack__label { top: 179.26px; font-size: 14px; line-height: 17px; }
  .stack__sub { top: 200.26px; line-height: 19px; }

  .sphere { left: calc(50% - 171px); top: 356.74px; width: 342px; height: 342px; }
  .is-playground.is-profile-hidden .sphere { transform: translateY(-150px) scale(1.12); }   /* also rises into the card's space */

  .play__bar, .is-playground .play__bar { left: 16px; right: 16px; width: auto; top: 892.74px; }   /* both views (Playground was 726.74) */
  /* card hidden: the bar (and the page below it) rises with the globe, so the empty band under it closes up */
  .play, .play__bar { transition: height 500ms var(--ease), top 500ms var(--ease); }
  .is-playground.is-profile-hidden .play { --stage-h: 788.74px; }
  .is-playground.is-profile-hidden .play__bar { top: 742.74px; }
  .switch { font-size: 14px; line-height: 17px; }
  .switch__knob { left: 94px; width: 123px; height: 45px; padding: 15px 0 13px 24px; }
  .is-playground .switch__knob { left: 3px; }
  .switch__state { top: 15px; }
  .play__hint { right: 1px; top: 14px; font-size: 13px; line-height: 19px; color: rgba(18, 18, 18, 0.6); }
}

@media (prefers-reduced-motion: reduce) {

}
@media (prefers-reduced-motion: reduce) { .sphere { transition: opacity 400ms, visibility 400ms; } .play, .play__bar { transition: none; } }