/* AppMe — small layer on top of Tailwind CDN */

/* skeleton loaders */
.skeleton {
  background: linear-gradient(90deg, #efe9e4 25%, #f7f2ee 50%, #efe9e4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* success pop for the first reveal of "Chat on WhatsApp" */
@keyframes pop-in {
  0% { transform: scale(.6); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.pop-in { animation: pop-in .45s cubic-bezier(.2,.9,.3,1.4) both; }

/* chat bubble with bottom-left tail */
.bubble {
  position: relative;
  background: #dcf5ec;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}
.bubble::after {
  content: "";
  position: absolute;
  left: -7px; bottom: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 12px 10px;
  border-color: transparent transparent #dcf5ec transparent;
}

/* blurred gallery / who-viewed */
.blur-img { filter: blur(14px); transform: scale(1.1); }

/* hide scrollbar on the groups rail */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Alpine cloak */
[x-cloak] { display: none !important; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(20px);
  z-index: 90; opacity: 0; pointer-events: none;
  transition: all .25s ease;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (min-width: 1024px) { #toast { bottom: 32px; } }

/* smooth everything mildly */
button, a { transition: background-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; }
button:active { transform: scale(.97); }

/* ============================================================
   Tactile wizard controls — chips, tiles, CTA
   ============================================================ */

/* selectable pill chip */
.chip {
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 2px solid #E9E2DA;
  background: #fff;
  color: #57534E;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .13s cubic-bezier(.34, 1.56, .64, 1),
    border-color .18s ease, background .18s ease,
    color .18s ease, box-shadow .18s ease;
}
.chip:hover { border-color: #D8CFC5; transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(60, 35, 20, .22); }
.chip:active { transform: scale(.93); box-shadow: none; }
.chip.on {
  border-color: #E85D26;
  background: linear-gradient(180deg, #FFF4ED 0%, #FFE9DC 100%);
  color: #C2410C;
  box-shadow: 0 5px 16px -7px rgba(232, 93, 38, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* selectable card tile (gender, groups) */
.tile {
  border: 2px solid #E9E2DA;
  background: #fff;
  border-radius: 18px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .13s cubic-bezier(.34, 1.56, .64, 1),
    border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tile:hover { border-color: #D8CFC5; box-shadow: 0 6px 16px -8px rgba(60, 35, 20, .2); }
.tile:active { transform: scale(.97); }
.tile.on {
  border-color: #E85D26;
  background: linear-gradient(180deg, #FFF6F0 0%, #FFEDE2 100%);
  box-shadow: 0 6px 18px -8px rgba(232, 93, 38, .45), inset 0 1px 0 rgba(255, 255, 255, .7);
}

/* check mark that pops in on selection */
.chip .tick, .tile .tick { display: none; }
.chip.on .tick, .tile.on .tick {
  display: inline-flex;
  animation: tick-pop .28s cubic-bezier(.2, 1.9, .45, 1) both;
}
@keyframes tick-pop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to   { transform: scale(1) rotate(0);      opacity: 1; }
}

/* big gradient CTA — lifts on hover, physically depresses on press */
.btn-cta {
  position: relative;
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(180deg, #F5793F 0%, #E85D26 55%, #D84E1A 100%);
  box-shadow:
    0 12px 26px -10px rgba(232, 93, 38, .55),
    inset 0 1.5px 0 rgba(255, 255, 255, .35),
    inset 0 -3px 0 rgba(120, 35, 5, .18);
  transition:
    transform .13s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .18s ease, filter .18s ease;
}
.btn-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-cta:active {
  transform: translateY(2px) scale(.985);
  filter: brightness(.97);
  box-shadow:
    0 5px 12px -7px rgba(232, 93, 38, .5),
    inset 0 1.5px 0 rgba(255, 255, 255, .2),
    inset 0 -1px 0 rgba(120, 35, 5, .12);
}
.btn-cta:disabled { opacity: .55; transform: none; filter: none; cursor: default; }

/* dashed photo-upload tile */
.upload-tile {
  border: 2px dashed #D8CFC5;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .13s cubic-bezier(.34, 1.56, .64, 1);
}
.upload-tile:hover { border-color: #E85D26; background: #FFF6F0; }
.upload-tile:active { transform: scale(.96); }

/* wizard progress bar */
.progress-fill {
  background: linear-gradient(90deg, #F5793F, #E85D26);
  box-shadow: 0 0 10px rgba(232, 93, 38, .45);
}

/* ============================================================
   Ambient motion — subtle, fast, reduced-motion safe
   ============================================================ */

/* page content eases in once per load */
main { animation: page-in .35s ease both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* feed cards reveal as they scroll into view (JS adds .rv-in) */
[data-reveal] { opacity: 0; transform: translateY(16px) scale(.985); }
[data-reveal].rv-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}

/* gentle lift on hover-capable devices */
@media (hover: hover) {
  #feed article { transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease; }
  #feed article:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -14px rgba(60, 35, 20, .28); }
}

/* notification badge breathes when there's something new */
[data-badge]:not(.hidden) { animation: badge-pulse 2.4s ease-in-out infinite; }
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* avatar images fade in as they load (JS sets .img-in) */
img[loading="lazy"] { opacity: 0; transition: opacity .4s ease; }
img[loading="lazy"].img-in { opacity: 1; }

/* ============================================================
   Feed snap-scroll (mobile only) — slide feel, scroll mechanics.
   Scoped to body.feed-snap (Discover + group feeds); one flick = one card.
   ============================================================ */
@media (max-width: 639px) {
  body.feed-snap main {
    height: calc(100vh - 56px);        /* fallback: sticky mobile header is 56px */
    height: calc(100dvh - 56px);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    padding-bottom: 90px;              /* clear the fixed bottom tabs */
  }
  body.feed-snap .feed-top,
  body.feed-snap #feed > article,
  body.feed-snap #feed-end {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 8px;
  }
  /* near-full-screen hero so photo + traits + button ≈ one flick */
  body.feed-snap #feed > article .card-hero {
    aspect-ratio: auto;
    height: clamp(420px, 58dvh, 640px);
  }
  /* group suggestions read as a full slide too */
  body.feed-snap #feed > .suggest-card { min-height: 50dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .tile, .btn-cta, .upload-tile { transition: none; }
  .chip.on .tick, .tile.on .tick { animation: none; }
  main { animation: none; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-badge]:not(.hidden) { animation: none; }
  img[loading="lazy"] { opacity: 1; transition: none; }
  body.feed-snap main { scroll-behavior: auto; }
}