/* =====================================================================
   Slide Story (home) + Story (perfil)
   ===================================================================== */

/* ---------------- Slide Story ---------------- */
.slide-story { max-width: 820px; margin: 36px auto; padding: 0 16px; text-align: center; }
.slide-story__title { font-family: Georgia, serif; font-size: 30px; margin: 0 0 16px; color: var(--text); }
.slide-story__stage { overflow: hidden; padding: 14px 18px 26px; margin: 0 -12px; }

.slide-story__card {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  overflow: hidden;
  background: #1c1e21;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  transition: transform 0.34s ease, opacity 0.34s ease;
  outline: none;
  touch-action: pan-y;
}
.slide-story__card::before { /* sombra para destacar nome e botões */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  z-index: 2; pointer-events: none;
}
.slide-story__photo { position: absolute; inset: 0; display: block; z-index: 1; cursor: pointer; }
.slide-story__photo:not([href]) { cursor: default; }
.slide-story__img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; transition: opacity 0.25s; }
.slide-story__card.is-loading .slide-story__img { opacity: 0.2; }

.slide-story__info { position: absolute; left: 20px; bottom: 98px; z-index: 3; text-align: left; color: #fff; }
.slide-story__info[hidden] { display: none; }
.slide-story__name { font-size: 24px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.6); }
.slide-story__name::after {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 9px;
  border-radius: 50%; background: #31a24c; vertical-align: middle;
}

.slide-story__actions { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 3; display: flex; justify-content: center; gap: 30px; }
.slide-story__btn {
  width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: transform 0.15s ease;
}
.slide-story__btn:hover { transform: scale(1.1); }
.slide-story__btn:active { transform: scale(0.93); }
.slide-story__btn--nope { color: #ec5e6f; }
.slide-story__btn--like { color: #31c48d; }

/* tremida (♥) e saída/entrada do cartão */
@keyframes ss-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-10px) rotate(-1.6deg); }
  30% { transform: translateX(9px) rotate(1.4deg); }
  45% { transform: translateX(-7px) rotate(-1deg); }
  60% { transform: translateX(6px) rotate(0.8deg); }
  75% { transform: translateX(-3px) rotate(-0.4deg); }
}
@keyframes ss-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.slide-story__card.is-shaking { animation: ss-shake 0.5s ease; }
.slide-story__card.swipe-right { transform: translateX(115%) rotate(10deg); opacity: 0; }
.slide-story__card.swipe-left { transform: translateX(-115%) rotate(-10deg); opacity: 0; }
.slide-story__card.is-entering { animation: ss-in 0.36s ease; }

/* anúncio: mesmo tamanho da imagem, como parte do slide */
.slide-story__ad {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 14px 12px; background: #fff; color: #050505;
}
.slide-story__ad[hidden] { display: none; }
.slide-story__ad-label { align-self: flex-start; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #65676b; }
.slide-story__ad-msg { margin: 0; font-size: 15px; font-weight: 600; }
.slide-story__slot { flex: 1; min-height: 0; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.slide-story__slot > div { width: 100%; }
.slide-story__ad-foot { width: 100%; display: flex; align-items: center; gap: 10px; }
.slide-story__bar { flex: 1; height: 5px; border-radius: 3px; background: #e4e6eb; overflow: hidden; }
.slide-story__bar i { display: block; width: 0; height: 100%; background: #1877f2; }
.slide-story__count { font-size: 12px; color: #65676b; min-width: 28px; text-align: right; }

@media (max-width: 600px) {
  .slide-story { margin: 28px auto; padding: 0 10px; }
  .slide-story__title { font-size: 24px; }
  .slide-story__card { aspect-ratio: 4 / 3; border-radius: 16px; }
  .slide-story__name { font-size: 19px; }
  .slide-story__info { left: 14px; bottom: 86px; }
  .slide-story__btn { width: 56px; height: 56px; }
  .slide-story__actions { gap: 24px; bottom: 14px; }
  .slide-story__ad-msg { font-size: 13.5px; }
}

/* ---------------- Story do perfil ---------------- */
.profile-stories {
  display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px 12px; margin: 0 0 22px;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.profile-stories::-webkit-scrollbar { display: none; }
.ps-item {
  flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer;
  text-decoration: none; scroll-snap-align: start;
}
@keyframes ps-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
}
.ps-ring {
  width: 80px; height: 80px; border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, #22c55e 0%, #00e0a4 100%);
  animation: ps-glow 2.4s ease-in-out infinite;
  transition: transform 0.15s ease;
}
.ps-item:hover .ps-ring { transform: scale(1.06); }
.ps-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; object-fit: cover; background: #ddd; }
.ps-avatar--initial { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 26px; }
.ps-name { max-width: 88px; font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* visualizador em tela cheia */
.psv { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.92); }
.psv[hidden] { display: none; }
html.psv-open { overflow: hidden; }
.psv__box { position: relative; width: min(100vw, 430px); height: min(100dvh, 780px); background: #000; border-radius: 14px; overflow: hidden; }
.psv__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.psv__bars { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; gap: 4px; }
.psv__bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); overflow: hidden; }
.psv__bars i { display: block; width: 0; height: 100%; background: #fff; }
.psv__head { position: absolute; top: 22px; left: 12px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
.psv__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #22c55e; }
.psv__avatar[hidden] { display: none; }
.psv__who { font-weight: 700; font-size: 15px; flex: 1; }
.psv__close { background: none; border: 0; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; padding: 0 4px; }
.psv__nav { position: absolute; top: 70px; bottom: 80px; width: 40%; z-index: 3; background: none; border: 0; padding: 0; cursor: pointer; }
.psv__nav--prev { left: 0; }
.psv__nav--next { right: 0; }
.psv__link {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 5;
  background: #fff; color: #050505; font-weight: 700; font-size: 15px;
  padding: 11px 26px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,0.4); white-space: nowrap;
}
.psv__link[hidden] { display: none; }
@media (max-width: 480px) { .psv__box { width: 100vw; height: 100dvh; border-radius: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ps-ring, .slide-story__card.is-shaking, .slide-story__card.is-entering { animation: none; }
}