/* ============================================
   SCENES — OutDish "Design System" carousel. Pairs with fan-outdish.js and
   fan-demo.css. Everything is on a 430x430 canvas (the Figma pieces); the stage
   classes (.p1 playing, plus .f-on / .s-open / .wv / .ic) drive the animating.
   ============================================ */
[class*="fs-od-"] { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: #181818; }
.od-t { position: absolute; margin: 0; white-space: nowrap; font-size: 12px; line-height: normal; font-weight: 400; }
.od-i { position: absolute; display: block; max-width: none; pointer-events: none; }
.od-card { position: absolute; inset: 0; border-radius: 20px; background: #f9f9fa; overflow: hidden; }
.od-gray { color: #7b7b7b; }
.od-s12 { font-size: 12px; font-weight: 600; color: #181818; }
.od-s10 { font-size: 10px; }
.od-med { font-weight: 500; color: #181818; }
.od-semi { font-weight: 600; color: #181818; }

/* ---------- 1 · grid ---------- */
.od-grid { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; }
.od-col { position: absolute; top: 0; width: 34px; height: 430px; background: #f9f5ff; transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) calc(0.1s + var(--i) * 0.07s); }
.fs-od-grid.p1 .od-col { transform: none; }
.fs-od-grid.wv .od-col { animation: od-wave 0.7s ease-in-out calc(var(--i) * 0.1s) 1; }
@keyframes od-wave { 0%, 100% { background: #f9f5ff; } 45% { background: #eadbff; } }

/* ---------- 2 · component states ---------- */
.od-grp { position: absolute; left: 95px; top: 64.5px; width: 240px; height: 301px; }
.od-f { position: absolute; left: 0; width: 240px; height: 38px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #eaeaea;
  transition: box-shadow 0.25s ease; }
.od-f .od-t { line-height: 38px; }
.od-in { opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease calc(0.2s + var(--i, 0) * 0.12s), transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) calc(0.2s + var(--i, 0) * 0.12s), box-shadow 0.25s ease; }
.fs-od-states.p1 .od-in { opacity: 1; transform: none; }
.fs-od-states.f-on .od-f2 { box-shadow: inset 0 0 0 1px #9847ff; }
.fs-od-states.s-open .od-f3 { box-shadow: inset 0 0 0 1px #9847ff; }
.od-typed { position: absolute; left: 12px; top: 0; height: 38px; line-height: 38px; color: #181818; display: flex; align-items: center; }
.od-txt { font-weight: 400; white-space: pre; }
.od-caret { display: none; width: 1px; height: 16px; margin-left: 0.5px; background: #141414; }
.fs-od-states.caret .od-caret { display: block; animation: od-blink 1.05s steps(1, end) infinite; }
@keyframes od-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.od-chev { transition: transform 0.4s cubic-bezier(0.3, 0.9, 0.3, 1); }
.fs-od-states.s-open .od-chev { transform: rotate(180deg); }
.od-dd { position: absolute; left: 0; top: 177px; width: 240px; height: 124px; border-radius: 8px; background: #fff; box-shadow: 0 12px 16px rgba(0, 0, 0, 0.05);
  opacity: 0; transform: translateY(-8px) scaleY(0.94); transform-origin: 50% 0; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1); }
.fs-od-states.s-open .od-dd { opacity: 1; transform: none; }
.od-row { position: absolute; left: 0; width: 240px; height: 38px; transition: background-color 0.2s ease; }
.od-row .od-t { left: 12px; top: 12px; color: #7b7b7b; transition: color 0.2s ease; }
.od-row.is-hv { background: #fafafa; }
.od-row.is-sel .od-t { color: #9847ff; }

/* ---------- 3 · color & type ---------- */
.od-aa { position: absolute; left: 48px; top: 48px; font-size: 64px; line-height: normal; font-weight: 600; color: #000; white-space: nowrap;
  opacity: 0; transform: scale(0.82); transform-origin: 0 50%;
  transition: opacity 0.4s ease 0.1s, transform 0.8s cubic-bezier(0.2, 1.3, 0.3, 1) 0.1s; }
.od-typo { left: 152px; top: 74px; font-size: 11px; color: #7b7b7b; opacity: 0; transition: opacity 0.5s ease 0.45s; }
.od-inter { left: 152px; top: 91px; font-size: 20px; font-weight: 600; color: #181818; opacity: 0; transition: opacity 0.5s ease 0.55s; }
.fs-od-type.p1 .od-aa { opacity: 1; transform: none; }
.fs-od-type.p1 .od-typo, .fs-od-type.p1 .od-inter { opacity: 1; }
.od-hr { position: absolute; left: 48px; width: 334px; height: 1px; background: #ececf0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.8s cubic-bezier(0.3, 0.9, 0.3, 1) 0.7s; }
.fs-od-type.p1 .od-hr { transform: none; }
.od-spec { position: absolute; left: 48px; width: 334px; height: 52px; opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease 0.9s, transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) 0.9s; }
.od-spec + .od-spec { transition-delay: 1.1s; }
.fs-od-type.p1 .od-spec { opacity: 1; transform: none; }
.od-spec .od-s12 { left: 0; top: 0; }
.od-v { font-weight: 500; color: #181818; }
.od-sw { position: absolute; left: 48px; top: 358px; width: 334px; height: 24px; }
.od-sw i { position: absolute; top: 0; width: 97.333px; height: 24px; border-radius: 4px; transform: translateX(var(--x)); opacity: 0;
  transition: transform 0.9s cubic-bezier(0.2, 1.25, 0.3, 1) calc(1.3s + var(--i) * 0.09s), opacity 0.3s ease calc(1.3s + var(--i) * 0.09s); }
.fs-od-type.p1 .od-sw i { transform: none; opacity: 1; }
.od-sw i:last-child { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }

/* ---------- 4 · component library ---------- */
.od-win { position: absolute; left: 48px; top: 48px; width: 334px; height: 334px; border-radius: 8px; background: #fcfcfd; overflow: hidden; }
.od-side { position: absolute; left: 0; top: 0; width: 139px; height: 334px; background: #fff; box-shadow: 4px 0 24px rgba(0, 0, 0, 0.05); z-index: 2; }
.od-side .od-s12 { opacity: 1; }
.od-nav { font-size: 10px; font-weight: 500; color: #7b7b7b; opacity: 0; transform: translateX(-6px);
  transition: opacity 0.4s ease calc(0.15s + var(--i) * 0.045s), transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) calc(0.15s + var(--i) * 0.045s), color 0.15s ease; }
.fs-od-library.p1 .od-nav { opacity: 1; transform: none; }
.od-nav.is-sel { color: #9847ff; font-weight: 600; }
.od-pane { position: absolute; left: 0; top: 0; width: 334px; height: 334px; }
.od-pane > .od-t { opacity: 0; transition: opacity 0.4s ease; }
.od-pdiv { position: absolute; left: 171px; top: 68px; width: 163px; height: 1px; background: #ececf0; transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.6s cubic-bezier(0.3, 0.9, 0.3, 1); }
.od-icons { position: absolute; left: 171px; top: 92px; width: 246px; height: 201px; }
.od-ico { opacity: 0; transform: scale(0.4);
  transition: opacity 0.3s ease calc(0.12s + var(--d) * 0.016s), transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.12s + var(--d) * 0.016s); }
.fs-od-library.ic .od-pane > .od-t { opacity: 1; }
.fs-od-library.ic .od-pdiv { transform: none; }
.fs-od-library.ic .od-ico { opacity: 1; transform: none; }