/* ===== REFINED INTERACTION SYSTEM ===== */
:root{
  --ease-ui:cubic-bezier(.22,.8,.24,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --dur-fast:140ms;
  --dur-med:240ms;
  --dur-slow:360ms;
  --muted-bg:rgba(18,18,18,.05);
  --muted-border:rgba(18,18,18,.10);
  --muted-text:#8C8C86;
}

@media (prefers-reduced-motion:no-preference){
  .nav-item,.nav-home,.nav-location,
  .location-btn,.location-option,
  .drawer-neigh,.drawer-place,.drawer-search,
  .chip,.it-row,.btn3,.s3-maps-btn,
  .back-btn,.s3-back,.s3-nav-btn,
  .creator-tiktok-btn,.area-card{
    transition:
      transform var(--dur-fast) var(--ease-ui),
      opacity var(--dur-fast) var(--ease-ui),
      background-color var(--dur-med) var(--ease-ui),
      border-color var(--dur-med) var(--ease-ui),
      color var(--dur-med) var(--ease-ui),
      box-shadow var(--dur-med) var(--ease-ui);
  }

  .location-option,.drawer-neigh,.drawer-place,.it-row,.chip{
    animation:softItemIn var(--dur-med) var(--ease-soft) both;
  }

  @keyframes softItemIn{
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:translateY(0)}
  }
}

.location-btn,
.location-option,
.drawer-neigh,
.drawer-place,
.chip,
.it-row{
  border-color:var(--muted-border)!important;
}

.location-btn.is-disabled{
  background:var(--muted-bg)!important;
  color:var(--muted-text)!important;
  opacity:.62!important;
}

.location-option:not(.selected),
.chip:not(.active){
  color:#666661;
  background:#FFFDF7;
}

.location-option.selected,
.chip.active{
  box-shadow:0 6px 18px rgba(58,58,60,.12);
}

.nav-item:active,
.location-btn:active,
.location-option:active,
.drawer-neigh:active,
.drawer-place:active,
.chip:active,
.it-row:active,
.btn3:active,
.s3-maps-btn:active,
.back-btn:active,
.s3-back:active,
.s3-nav-btn:active,
.creator-tiktok-btn:active,
.area-card:active{
  transform:scale(.975);
}

.drawer-search{
  transition:
    border-color var(--dur-med) var(--ease-ui),
    box-shadow var(--dur-med) var(--ease-ui),
    transform var(--dur-fast) var(--ease-ui);
}
.drawer-search:focus{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.drawer-overlay{
  transition:
    opacity var(--dur-med) var(--ease-ui),
    visibility 0s linear var(--dur-med);
}
.drawer-overlay.open{
  transition-delay:0s;
}

.drawer{
  transition:
    transform var(--dur-slow) var(--ease-soft),
    opacity var(--dur-med) var(--ease-ui);
}

.screen.active{
  animation:screenSoftIn var(--dur-slow) var(--ease-soft) both;
}
@keyframes screenSoftIn{
  from{opacity:.55;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

.s3-body > *{
  animation:contentSoftIn var(--dur-med) var(--ease-soft) both;
}
.s3-body > *:nth-child(2){animation-delay:18ms}
.s3-body > *:nth-child(3){animation-delay:36ms}
.s3-body > *:nth-child(4){animation-delay:54ms}
.s3-body > *:nth-child(5){animation-delay:72ms}

@keyframes contentSoftIn{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

@media (hover:hover) and (pointer:fine){
  .location-option:hover,
  .drawer-neigh:hover,
  .drawer-place:hover,
  .it-row:hover{
    transform:translateY(-1px);
    border-color:rgba(58,58,60,.28)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}


/* ===== CANONICAL INTERACTION SYSTEM ===== */
:root{
  --ui-ease:cubic-bezier(.22,.8,.24,1);
  --ui-ease-soft:cubic-bezier(.16,1,.3,1);
  --ui-fast:140ms;
  --ui-med:220ms;
  --ui-slow:340ms;
  --ui-active:#1C1C1E;
  --ui-muted:#8C8C86;
  --ui-bg:#FFFDF7;
  --ui-soft:rgba(18,18,18,.055);
  --ui-border:rgba(18,18,18,.10);
}

/* one consistent transition vocabulary */
.nav-item,.nav-home,.nav-location,
.location-btn,.location-option,.drawer-neigh,.drawer-place,
.drawer-search,.chip,.it-row,.btn3,.s3-maps-btn,
.back-btn,.s3-back,.s3-nav-btn,.creator-tiktok-btn,.area-card{
  transition:
    transform var(--ui-fast) var(--ui-ease),
    opacity var(--ui-fast) var(--ui-ease),
    color var(--ui-med) var(--ui-ease),
    background-color var(--ui-med) var(--ui-ease),
    border-color var(--ui-med) var(--ui-ease),
    box-shadow var(--ui-med) var(--ui-ease) !important;
}

/* state hierarchy */
.location-option:not(.selected),
.chip:not(.active),
.drawer-neigh,
.drawer-place,
.it-row{
  color:#5f5f5a;
}

.location-option.selected,
.chip.active{
  color:#FFFDF7 !important;
  background:var(--gray-200) !important;
  border-color:var(--gray-300) !important;
  box-shadow:0 6px 18px rgba(58,58,60,.12) !important;
}

.location-btn.is-disabled{
  color:var(--ui-muted) !important;
  background:var(--ui-soft) !important;
  border-color:var(--ui-border) !important;
  opacity:.56 !important;
  box-shadow:none !important;
}

.location-btn:not(.is-disabled){
  background:#FFFDF7 !important;
}

.nav-home:not(.active){
  opacity:.68;
}
.nav-home.active{
  opacity:1;
}

.it-row.hidden{
  opacity:0;
  transform:translateY(4px);
}

/* touch response */
.nav-item:active,.location-btn:active,.location-option:active,
.drawer-neigh:active,.drawer-place:active,.chip:active,.it-row:active,
.btn3:active,.s3-maps-btn:active,.back-btn:active,.s3-back:active,
.s3-nav-btn:active,.creator-tiktok-btn:active,.area-card:active{
  transform:scale(.978) !important;
}

/* panel motion */
.drawer-overlay{
  transition:opacity var(--ui-med) var(--ui-ease),visibility 0s linear var(--ui-med) !important;
}
.drawer{
  transition:transform var(--ui-slow) var(--ui-ease-soft),opacity var(--ui-med) var(--ui-ease) !important;
}

/* screen/content motion */
.screen.active{
  animation:uiScreenIn var(--ui-slow) var(--ui-ease-soft) both !important;
}
@keyframes uiScreenIn{
  from{opacity:.62;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}

.s3-body > *{
  animation:uiContentIn var(--ui-med) var(--ui-ease-soft) both !important;
}
.s3-body > *:nth-child(2){animation-delay:16ms!important}
.s3-body > *:nth-child(3){animation-delay:32ms!important}
.s3-body > *:nth-child(4){animation-delay:48ms!important}
.s3-body > *:nth-child(5){animation-delay:64ms!important}
@keyframes uiContentIn{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}

/* search focus */
.drawer-search:focus{
  transform:translateY(-1px)!important;
  border-color:rgba(58,58,60,.55)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.08)!important;
}

/* hover only where hover exists */
@media (hover:hover) and (pointer:fine){
  .location-option:hover,.drawer-neigh:hover,.drawer-place:hover,.it-row:hover{
    transform:translateY(-1px);
    border-color:rgba(58,58,60,.28)!important;
  }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}