/* =====================================================
   VYBLER — landing do criador (igual à miawhitte / link.me)
   Usada na página publicada E no preview ao vivo do editor.
   ===================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0a0a0d;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* fundo: a própria foto, borrada e escurecida */
.lp-bg {
  position: fixed; inset: 0; z-index: -1;
  background-size: cover; background-position: 50% 50%;
  filter: blur(42px) brightness(.4) saturate(1.2);
  transform: scale(1.15);
}

.lp {
  position: relative;
  width: 100%; max-width: 480px; margin: 0 auto;
  min-height: 100vh; display: flex; flex-direction: column;
}

/* hero: foto com topo arredondado, fica "presa" enquanto o conteúdo sobe por cima */
.lp-hero {
  position: sticky; top: 0; z-index: 0;
  width: 100%; aspect-ratio: 566 / 546;
  object-fit: cover; display: block;
  border-radius: 30px 30px 0 0;
  background: #15151b;
}

/* painel sólido do conteúdo — sobe sobre a base da foto, com degradê de transição */
.lp-body {
  position: relative; z-index: 1; flex: 1;
  margin-top: -120px;
  padding: 120px 16px 30px;
  background: linear-gradient(
    to bottom,
    rgba(10,10,13,0) 0,
    rgba(10,10,13,.55) 64px,
    #0a0a0d 120px
  );
}

.lp-name {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0; font-size: 32px; line-height: 40px; font-weight: 750;
  letter-spacing: .25px; text-align: center;
}
.lp-badge { width: 21px; height: 21px; flex: none; }
.lp-handle { margin: 4px 0 0; text-align: center; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.5); }

/* crédito Vybler (marca + backlink em cada página de creator) */
.lp-credit { text-align: center; margin-top: 24px; }
.lp-credit a { color: rgba(255,255,255,.4); font-size: 12px; text-decoration: none; letter-spacing: .04em; }
.lp-credit a:hover { color: rgba(255,255,255,.78); }
.lp-credit b { font-weight: 700; color: rgba(255,255,255,.62); }

.lp-cards { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.lp-card {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  text-decoration: none; background: #000; transform: translateZ(0);
}
.lp-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-card-icon {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background-size: cover; background-position: 50% 50%;
  border: 2px solid rgba(255,255,255,.85); box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.lp-card-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 16px; text-align: center; font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
}
.lp-shine {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background-image: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  mix-blend-mode: screen; animation: lpShine 3.4s linear infinite;
}
@keyframes lpShine { 0% { transform: translateX(-80%); } 100% { transform: translateX(80%); } }
.lp-card--pulse { animation: lpPulse 1.7s ease-in-out infinite; transform-origin: center; }
@keyframes lpPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

@media (prefers-reduced-motion: reduce) { .lp-shine { display: none; } .lp-card--pulse { animation: none; } }