/* Play area — live mobile interaction prototypes */
.pa-page { background: linear-gradient(180deg, #ffe8e7 0%, #fff4f3 40%, #eef4ff 100%); }
.pa-hero { padding: 200px 0 60px; }
.pa-wrap { width: min(1200px, 100% - 48px); margin: 0 auto; }
.pa-eyebrow { font-family: Outfit, sans-serif; font-size: 1.25rem; font-weight: 500; color: var(--heading, #181b2e); margin: 0 0 12px; }
.pa-title {
  font-family: Outfit, sans-serif; font-weight: 500; letter-spacing: -.12rem;
  font-size: clamp(3.5rem, 11vw, 9.375rem); line-height: 1; margin: 0; color: var(--heading, #181b2e);
}
.pa-title span { color: var(--orange, #fe5621); }
.pa-lede { max-width: 46ch; font-size: 1.25rem; line-height: 1.6; color: var(--body, #3a3d53); margin: 28px 0 0; }

.pa-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.pa-chip {
  border: 0; cursor: pointer; border-radius: 99px; padding: 10px 18px; background: #fff; color: var(--heading, #181b2e);
  font: 500 .95rem Outfit, sans-serif; box-shadow: inset 0 0 0 1px rgba(24,27,46,.12); transition: background-color .25s, color .25s, transform .25s;
}
.pa-chip b { font-weight: 600; opacity: .55; margin-left: 4px; }
.pa-chip:hover { transform: translateY(-2px); }
.pa-chip.pa-on { background: #181b2e; color: #fff; box-shadow: none; }
.pa-chip:focus-visible { outline: 2px solid #fe5621; outline-offset: 3px; }
.pa-card { transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.3, .5, 1); }
.pa-card.pa-out { opacity: 0; transform: scale(.94); }
.pa-card[hidden] { display: none; }
.pa-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 72px 40px; padding: 40px 0 160px;
}
.pa-card { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.pa-meta { width: 300px; max-width: 100%; }
.pa-num { font-family: Outfit, sans-serif; font-size: .875rem; font-weight: 600; color: var(--orange, #fe5621); letter-spacing: .08em; }
.pa-meta h2 { font-family: Outfit, sans-serif; font-size: 1.75rem; line-height: 1.2; font-weight: 500; margin: 6px 0 8px; color: var(--heading, #181b2e); }
.pa-meta p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--body, #3a3d53); }
.pa-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pa-tags span { font-size: .8125rem; padding: 4px 12px; border-radius: 99px; background: #fff; color: var(--heading, #181b2e); box-shadow: inset 0 0 0 1px rgba(24,27,46,.1); }
.pa-hint { margin-top: 10px; font-size: .8125rem; color: rgba(58,61,83,.7); }

/* ---------- phone ---------- */
.pa-phone {
  position: relative; width: min(300px, 100%); height: 600px;
  border-radius: 48px; padding: 11px; background: #181b2e;
  box-shadow: 0 40px 80px -30px rgba(24,27,46,.45), 0 0 0 2px #2b2f48 inset;
}
.pa-screen {
  position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden;
  background: #fff; color: #181b2e; font-family: Generalsans Variable, sans-serif;
  user-select: none; -webkit-user-select: none; isolation: isolate;
}
.pa-status {
  position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 30; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px;
  font-size: 13px; font-weight: 600; color: inherit;
}
.pa-status::after { content: ''; position: absolute; left: 50%; top: 10px; width: 86px; height: 24px; margin-left: -43px; border-radius: 20px; background: #181b2e; }
.pa-status i { display: inline-flex; gap: 4px; align-items: center; font-style: normal; }
.pa-status i::before { content: ''; width: 16px; height: 9px; border-radius: 2px; border: 1.5px solid currentColor; }
.pa-app-title { position: absolute; top: 52px; left: 22px; right: 22px; font-family: Outfit, sans-serif; font-size: 26px; font-weight: 600; z-index: 2; }
.pa-sub { font-size: 12px; color: #8a8ca0; font-weight: 500; }
.pa-btn-reset {
  border: 0; background: #181b2e; color: #fff; border-radius: 99px; padding: 10px 20px;
  font: 500 14px Outfit, sans-serif; cursor: pointer;
}
.pa-btn-reset:hover { background: #fe5621; }
.pa-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; color: #8a8ca0; font-size: 14px; }
.pa-empty[hidden] { display: none; }
:where(.pa-screen) button:focus-visible, :where(.pa-screen) [tabindex]:focus-visible { outline: 2px solid #fe5621; outline-offset: 2px; }

/* ---------- 01 swipe actions ---------- */
.sw-list { position: absolute; top: 100px; left: 0; right: 0; bottom: 0; overflow: hidden; }
.sw-item { position: relative; height: 76px; overflow: hidden; transition: height .3s ease, opacity .3s ease; }
.sw-item.sw-gone { height: 0; opacity: 0; }
.sw-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; font-size: 13px; font-weight: 600; color: #fff; }
.sw-bg.sw-left { background: #181b2e; }
.sw-bg.sw-right { background: #fe5621; }
.sw-bg b { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .18s cubic-bezier(.3,1.8,.5,1); }
.sw-bg b.sw-armed { transform: scale(1.25); }
.sw-row {
  position: absolute; inset: 0; background: #fff; display: flex; align-items: center; gap: 12px; padding: 0 18px;
  border-bottom: 1px solid #f0f0f4; touch-action: pan-y; cursor: grab;
}
.sw-row.sw-anim { transition: transform .4s cubic-bezier(.2,.9,.3,1.15); }
.sw-av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font: 600 15px Outfit, sans-serif; }
.sw-txt { min-width: 0; flex: 1; }
.sw-txt strong { display: flex; justify-content: space-between; font-size: 14px; }
.sw-txt strong em { font-style: normal; font-weight: 500; font-size: 11px; color: #8a8ca0; }
.sw-txt span { display: block; font-size: 12.5px; color: #6b6e85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-pin { color: #fe5621; font-size: 11px; margin-left: 4px; }

/* ---------- 02 pull to refresh ---------- */
.pr-screen { background: #f6f7fb; touch-action: none; cursor: grab; }
.pr-spinner { position: absolute; top: 96px; left: 50%; width: 34px; height: 34px; margin-left: -17px; color: #fe5621; opacity: 0; z-index: 1; }
.pr-label { position: absolute; top: 136px; left: 0; right: 0; text-align: center; font-size: 12px; color: #8a8ca0; opacity: 0; z-index: 1; }
.pr-feed { position: absolute; top: 100px; left: 0; right: 0; bottom: 0; padding: 0 16px; background: #f6f7fb; z-index: 2; }
.pr-feed.pr-anim { transition: transform .45s cubic-bezier(.2,.9,.3,1.1); }
.pr-card { background: #fff; border-radius: 18px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(24,27,46,.05); }
.pr-card.pr-new { animation: pr-in .5s cubic-bezier(.2,.9,.3,1.2); box-shadow: 0 0 0 2px #fe5621; }
.pr-card b { font-size: 14px; display: block; margin-bottom: 4px; }
.pr-card span { font-size: 12.5px; color: #6b6e85; }
.pr-bar { height: 6px; border-radius: 3px; background: #eceef5; margin-top: 10px; }
.pr-bar + .pr-bar { width: 60%; }
@keyframes pr-in { from { transform: translateY(-14px) scale(.96); opacity: 0; } }
.pr-spin { animation: pr-rot .8s linear infinite; }
@keyframes pr-rot { to { transform: rotate(360deg); } }

/* ---------- 03 bottom sheet ---------- */
.bs-map { position: absolute; inset: 0; background: #e9eef6; overflow: hidden; }
.bs-map::before { content: ''; position: absolute; inset: -20px; background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%) 0 0/110px 100%,
  linear-gradient(0deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%) 0 0/100% 130px; opacity: .9; transform: rotate(-12deg); }
.bs-park { position: absolute; width: 120px; height: 90px; left: 140px; top: 120px; border-radius: 30px; background: #cfe8d2; }
.bs-pin { position: absolute; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: #fe5621; transform: rotate(-45deg); box-shadow: 0 6px 12px rgba(254,86,33,.35); }
.bs-pin::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.bs-dim { position: absolute; inset: 0; background: #181b2e; opacity: 0; pointer-events: none; z-index: 3; }
.bs-sheet {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 4;
  background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -8px 30px rgba(24,27,46,.12);
  will-change: transform;
}
.bs-sheet.bs-anim { transition: transform .45s cubic-bezier(.2,.9,.3,1.05); }
.bs-grab { padding: 10px 20px 8px; touch-action: none; cursor: grab; }
.bs-handle { display: block; width: 40px; height: 5px; border-radius: 3px; background: #d6d8e3; margin: 0 auto 12px; border: 0; padding: 0; cursor: pointer; }
.bs-grab h3 { margin: 0; font: 600 20px Outfit, sans-serif; }
.bs-list { padding: 0 20px; }
.bs-place { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid #f0f0f4; }
.bs-thumb { width: 52px; height: 52px; border-radius: 14px; flex: none; }
.bs-place b { font-size: 14px; display: block; }
.bs-place span { font-size: 12px; color: #6b6e85; }

/* ---------- 04 card deck ---------- */
.cd-screen { background: #fff7f5; }
.cd-stack { position: absolute; left: 22px; right: 22px; top: 104px; height: 360px; }
.cd-card {
  position: absolute; inset: 0; border-radius: 26px; overflow: hidden; touch-action: none; cursor: grab;
  box-shadow: 0 16px 30px -12px rgba(24,27,46,.3); color: #fff;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 22px;
  transition: transform .35s cubic-bezier(.2,.9,.3,1.1);
}
.cd-card.cd-drag { transition: none; }
.cd-card h4 { margin: 0; font: 600 26px Outfit, sans-serif; }
.cd-card p { margin: 4px 0 0; font-size: 13px; opacity: .85; }
.cd-art { position: absolute; top: 34px; left: 50%; width: 140px; height: 140px; margin-left: -70px; border-radius: 50%; background: rgba(255,255,255,.18); }
.cd-art::after { content: ''; position: absolute; inset: 36px; border-radius: 30%; background: rgba(255,255,255,.35); transform: rotate(20deg); }
.cd-badge { position: absolute; top: 24px; padding: 4px 12px; border: 3px solid; border-radius: 10px; font: 700 20px Outfit, sans-serif; letter-spacing: .06em; opacity: 0; }
.cd-yes { left: 22px; color: #fff; transform: rotate(-14deg); }
.cd-no { right: 22px; color: #fff; transform: rotate(14deg); }
.cd-actions { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; gap: 22px; }
.cd-actions button {
  width: 58px; height: 58px; border-radius: 50%; border: 0; background: #fff; cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(24,27,46,.3); font-size: 22px; transition: transform .2s;
}
.cd-actions button:active { transform: scale(.9); }
.cd-actions .cd-b-no { color: #181b2e; }
.cd-actions .cd-b-yes { color: #fe5621; }

/* ---------- 05 tab bar ---------- */
.tb-screen { transition: background-color .45s ease; }
.tb-view { position: absolute; top: 100px; left: 22px; right: 22px; }
.tb-view h3 { margin: 0; font: 600 30px Outfit, sans-serif; }
.tb-view p { margin: 6px 0 18px; font-size: 13px; color: #6b6e85; }
.tb-tile { height: 64px; border-radius: 18px; background: rgba(255,255,255,.75); margin-bottom: 12px; }
.tb-tile:nth-child(odd) { width: 80%; }
.tb-view.tb-enter { animation: tb-in .4s cubic-bezier(.2,.9,.3,1); }
@keyframes tb-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 24px)); } }
.tb-bar {
  position: absolute; left: 14px; right: 14px; bottom: 22px; height: 66px; border-radius: 24px;
  background: #181b2e; display: flex; align-items: center; justify-content: space-around; padding: 0 8px;
}
.tb-ind { position: absolute; top: 9px; height: 48px; border-radius: 16px; background: #fe5621; transition: left .2s cubic-bezier(.4,0,.2,1), width .2s cubic-bezier(.4,0,.2,1); }
.tb-tab {
  position: relative; z-index: 1; flex: 1; height: 48px; border: 0; background: transparent; color: rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font: 600 12px Outfit, sans-serif;
  transition: color .25s;
}
.tb-tab svg { width: 22px; height: 22px; transition: transform .35s cubic-bezier(.3,1.8,.5,1); }
.tb-tab.tb-on { color: #fff; }
.tb-tab.tb-on svg { transform: translateY(-1px) scale(1.08); }
.tb-tab span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s ease; }
.tb-tab.tb-on span { max-width: 60px; }

/* ---------- 06 double-tap like ---------- */
.lk-post { position: absolute; top: 96px; left: 0; right: 0; }
.lk-head { display: flex; align-items: center; gap: 10px; padding: 0 16px 10px; font-size: 13px; font-weight: 600; }
.lk-head i { width: 32px; height: 32px; border-radius: 50%; background: #fe5621 url('../images/Group-1171274776-p-500.png') center/cover; }
.lk-img { position: relative; height: 290px; background: #ddd center/cover; touch-action: manipulation; cursor: pointer; overflow: hidden; }
.lk-big { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; color: #fff; opacity: 0; pointer-events: none; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); }
.lk-big.lk-pop { animation: lk-pop .9s cubic-bezier(.2,.9,.3,1.3) forwards; }
@keyframes lk-pop {
  0% { opacity: 0; transform: scale(.2) rotate(-14deg); }
  25% { opacity: 1; transform: scale(1.15) rotate(6deg); }
  45% { transform: scale(.95) rotate(0); }
  75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1) translateY(-40px); }
}
.lk-bar { display: flex; align-items: center; gap: 16px; padding: 12px 16px 4px; }
.lk-btn { position: relative; width: 30px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer; color: #181b2e; }
.lk-btn svg { width: 28px; height: 28px; transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.lk-btn.lk-on { color: #fe5621; }
.lk-btn.lk-on svg { animation: lk-beat .45s cubic-bezier(.3,1.8,.5,1); }
.lk-btn.lk-on svg path { fill: currentColor; }
@keyframes lk-beat { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.lk-ring { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 3px solid #fe5621; opacity: 0; pointer-events: none; }
.lk-ring.lk-go { animation: lk-ring .5s ease-out; }
@keyframes lk-ring { 0% { opacity: 1; transform: scale(.5); } 100% { opacity: 0; transform: scale(5); } }
.lk-dot { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fe5621; pointer-events: none; animation: lk-dot .6s ease-out forwards; }
@keyframes lk-dot { to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.lk-count { padding: 4px 16px; font-size: 13px; font-weight: 600; }
.lk-count b { display: inline-block; }
.lk-count b.lk-tick { animation: lk-tick .3s ease; }
@keyframes lk-tick { 0% { transform: translateY(8px); opacity: 0; } }
.lk-cap { padding: 2px 16px; font-size: 12.5px; color: #3a3d53; line-height: 1.5; }

/* ---------- 07 slide to unlock ---------- */
.su-screen { background: #181b2e; color: #fff; }
.su-lock { position: absolute; top: 130px; left: 50%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%; background: rgba(255,255,255,.06); display: grid; place-items: center; transition: background-color .4s; }
.su-lock svg { width: 54px; height: 54px; }
.su-shackle { transition: transform .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 32px 24px; }
.su-open .su-shackle { transform: translate(9px, -6px) rotate(18deg); }
.su-open .su-lock { background: rgba(254,86,33,.18); }
.su-state { position: absolute; top: 272px; left: 0; right: 0; text-align: center; }
.su-state b { display: block; font: 600 26px Outfit, sans-serif; }
.su-state span { font-size: 13px; color: rgba(255,255,255,.55); }
.su-track {
  position: absolute; left: 22px; right: 22px; bottom: 60px; height: 68px; border-radius: 34px;
  background: rgba(255,255,255,.08); overflow: hidden;
}
.su-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 68px; border-radius: 34px; background: #fe5621; }
.su-text {
  position: absolute; inset: 0; display: grid; place-items: center; padding-left: 40px; font-size: 15px; font-weight: 500;
  background: linear-gradient(90deg, rgba(255,255,255,.35) 0%, #fff 50%, rgba(255,255,255,.35) 100%) 0 0/200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: su-shine 2.4s linear infinite;
}
@keyframes su-shine { to { background-position: -200% 0; } }
.su-knob {
  position: absolute; left: 4px; top: 4px; width: 60px; height: 60px; border-radius: 50%; background: #fff; color: #181b2e;
  display: grid; place-items: center; touch-action: none; cursor: grab; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}
.su-knob svg { width: 24px; height: 24px; }
.su-anim .su-knob, .su-anim .su-fill { transition: transform .45s cubic-bezier(.2,.9,.3,1.2), width .45s cubic-bezier(.2,.9,.3,1.2); }

/* ---------- 08 speed dial ---------- */
.fb-screen { background: #fbfbfd; }
.fb-note { margin: 0 20px 12px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(24,27,46,.06); }
.fb-note b { font-size: 14px; display: block; }
.fb-note span { font-size: 12px; color: #6b6e85; }
.fb-notes { position: absolute; top: 100px; left: 0; right: 0; }
.fb-scrim { position: absolute; inset: 0; z-index: 5; background: rgba(251,251,253,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.fb-open .fb-scrim { opacity: 1; pointer-events: auto; }
.fb-main {
  position: absolute; right: 22px; bottom: 34px; z-index: 7; width: 62px; height: 62px; border-radius: 22px; border: 0;
  background: #fe5621; color: #fff; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 12px 24px -8px rgba(254,86,33,.6); transition: transform .35s cubic-bezier(.3,1.6,.5,1), border-radius .35s;
}
.fb-main svg { width: 26px; height: 26px; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.fb-open .fb-main { border-radius: 50%; background: #181b2e; box-shadow: 0 12px 24px -8px rgba(24,27,46,.5); }
.fb-open .fb-main svg { transform: rotate(135deg); }
.fb-act {
  position: absolute; right: 30px; bottom: 42px; z-index: 6; display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 0;
  cursor: pointer; opacity: 0; pointer-events: none; transform: translate(0, 0) scale(.4);
  transition: transform .4s cubic-bezier(.3,1.5,.5,1), opacity .25s; transition-delay: calc(var(--i) * 30ms);
}
.fb-act i { width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -4px rgba(24,27,46,.25); display: grid; place-items: center; color: #181b2e; font-style: normal; }
.fb-act i svg { width: 20px; height: 20px; }
.fb-act span { order: -1; font: 500 13px Outfit, sans-serif; color: #181b2e; background: #fff; padding: 5px 10px; border-radius: 10px; box-shadow: 0 4px 12px -4px rgba(24,27,46,.2); }
.fb-open .fb-act { opacity: 1; pointer-events: auto; transform: translate(var(--x), var(--y)) scale(1); transition-delay: calc(var(--i) * 60ms); }
.fb-toast {
  position: absolute; left: 50%; bottom: 112px; z-index: 8; transform: translate(-50%, 20px); opacity: 0;
  background: #181b2e; color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 12px; white-space: nowrap;
  transition: transform .35s cubic-bezier(.3,1.5,.5,1), opacity .25s;
}
.fb-toast.fb-show { transform: translate(-50%, 0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .pa-screen *, .pa-screen *::before, .pa-screen *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media screen and (max-width: 479px) {
  .pa-hero { padding-top: 150px; }
  .pa-grid { grid-template-columns: 1fr; gap: 64px; }
}