/* ============================================================
   Pupville · Link in bio
   Stack: vanilla HTML + CSS, mobile-first.
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face { font-family: "Bree"; src: url("fonts/Bree-Light.otf")        format("opentype"); font-weight: 300; font-style: normal;  font-display: swap; }
@font-face { font-family: "Bree"; src: url("fonts/Bree-LightOblique.otf") format("opentype"); font-weight: 300; font-style: italic;  font-display: swap; }
@font-face { font-family: "Bree"; src: url("fonts/Bree-Regular.otf")      format("opentype"); font-weight: 400; font-style: normal;  font-display: swap; }
@font-face { font-family: "Bree"; src: url("fonts/Bree-Oblique.otf")      format("opentype"); font-weight: 400; font-style: italic;  font-display: swap; }
@font-face { font-family: "Bree"; src: url("fonts/Bree-Bold.otf")         format("opentype"); font-weight: 700; font-style: normal;  font-display: swap; }
@font-face { font-family: "Bree"; src: url("fonts/Bree-BoldOblique.otf")  format("opentype"); font-weight: 700; font-style: italic;  font-display: swap; }
@font-face { font-family: "Bree"; src: url("fonts/Bree-ExtraBold.otf")    format("opentype"); font-weight: 800; font-style: normal;  font-display: swap; }
@font-face { font-family: "Bree"; src: url("fonts/Bree-ExtraBoldOblique.otf") format("opentype"); font-weight: 800; font-style: italic; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --pup-purple-900: #2e0019;
  --pup-purple-800: #3d0123;
  --pup-purple-700: #4d012d;
  --pup-purple-600: #6c1f4a;
  --pup-purple-500: #8a3c6a;
  --pup-purple-400: #a96791;
  --pup-purple-300: #c49cd3;

  --pup-lavender-50:  #fbf4fc;
  --pup-lavender-100: #f5eaf9;
  --pup-lavender-200: #ebd7f0;

  --pup-heart-500: #fe6663;
  --pup-heart-600: #e84a47;

  --pup-ink-900: #1a0e15;
  --pup-ink-500: #6b5560;
  --pup-paper:   #ffffff;

  --font-display: "Bree", "Bree Serif", "Fraunces", Georgia, serif;
  --font-body:    "Bree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--pup-paper);
  color: var(--pup-ink-900);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100vh; }
img { max-width: 100%; display: block; }

/* ---------- Page shell ---------- */
.page {
  width: 100%;
  max-width: 440px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--pup-paper);
  position: relative;
  overflow-x: hidden;
}

/* ---------- HERO (wash variant) ---------- */
.hero {
  position: relative;
  padding: 60px 24px 32px;
  text-align: center;
  overflow: hidden;
  background: #fff;
}
.hero-bubbles { position: absolute; inset: 0; pointer-events: none; }
.hero-bubbles::before,
.hero-bubbles::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(40px);
}
.hero-bubbles::before {
  top: -40px; left: -60px; width: 260px; height: 260px;
  background: radial-gradient(circle, #c49cd3 0%, transparent 70%);
  opacity: .55;
}
.hero-bubbles::after {
  top: 40px; right: -80px; width: 220px; height: 220px;
  background: radial-gradient(circle, #ff8d8b 0%, transparent 70%);
  opacity: .35;
}

/* Floating decorative hearts */
.deco-heart {
  position: absolute;
  color: var(--pup-heart-500);
  opacity: .55;
  animation: floatY 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.deco-heart.d-late  { animation-delay: .6s; }
.deco-heart.d-later { animation-delay: 1.1s; }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ---------- Avatar ---------- */
.avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  margin: 0 auto 18px;
  position: relative;
  z-index: 2;
  box-shadow: 0 18px 40px rgba(77,1,45,0.32), 0 0 0 6px #fff;
}
.avatar-img-frame {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.avatar-img {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--pup-heart-500);
}
.verified {
  position: absolute;
  bottom: 2px; right: 2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #25d366;
  border: 3px solid #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(37,211,102,0.5);
}

/* ---------- Logo ---------- */
.logo-wrap {
  position: relative; z-index: 2;
  margin: 0 0 12px;
  display: flex; align-items: center; justify-content: center;
}
.logo-img {
  height: 38px;
  width: auto;
  max-width: 65%;
  object-fit: contain;
}

/* ---------- Tagline ---------- */
.tag {
  font: 400 17px/1.4 var(--font-display);
  font-style: italic;
  color: var(--pup-purple-700);
  max-width: 320px;
  margin: 0 auto;
  white-space: nowrap;
  position: relative; z-index: 2;
}
.tag i { font-weight: 700; }

/* ---------- BODY ---------- */
.body {
  padding: 0 20px 110px;
  background: #fff;
  position: relative;
}

/* ---------- Stat row ---------- */
.stat-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 14px;
  margin: 22px 0;
  background: var(--pup-lavender-100);
  border: 1px solid rgba(196,156,211,0.3);
  border-radius: 18px;
  font-size: 13px;
  color: var(--pup-purple-800);
  text-decoration: none;
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.stat-row:active { transform: scale(0.98); }
.stat-row b { font-weight: 700; font-size: 14px; }
.stars {
  color: #ffb547;
  display: inline-flex;
  gap: 1px;
}
.dot-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--pup-purple-400);
}

/* ---------- PRIMARY CTA ---------- */
.btn-cta {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 18px 22px;
  border-radius: 22px;
  background: linear-gradient(135deg, #fe6663 0%, #e84a47 100%);
  color: #fff;
  text-decoration: none;
  margin-bottom: 12px;
  position: relative;
  box-shadow: 0 14px 30px rgba(254,102,99,0.42), 0 4px 8px rgba(254,102,99,0.2);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .25s;
  overflow: hidden;
  text-align: left;
}
.btn-cta:active {
  transform: scale(0.98);
  box-shadow: 0 8px 20px rgba(254,102,99,0.35);
}
.btn-cta-glow {
  position: absolute; inset: -50% -20%;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 60%);
  animation: glow 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow {
  0%, 100% { transform: translateX(-30%) translateY(0); opacity: 0.6; }
  50%      { transform: translateX(30%) translateY(-10%); opacity: 1; }
}
.btn-cta-ico {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  position: relative; z-index: 1;
}
.btn-cta-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.btn-cta-title { display: block; font: 700 17px/1.15 var(--font-body); }
.btn-cta-sub   { display: block; font: 400 12px/1.3 var(--font-body); opacity: 0.92; margin-top: 3px; }
.btn-cta-pulse {
  position: absolute; top: 14px; right: 56px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: pulse 1.5s ease-in-out infinite;
  z-index: 1;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.8); opacity: 0.3; }
}
.btn-cta-arr { flex: none; position: relative; z-index: 1; opacity: 0.95; }

/* ---------- SECONDARY BUTTONS ---------- */
.btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 20px;
  background: #fff;
  color: var(--pup-purple-800);
  text-decoration: none;
  border: 1.5px solid var(--pup-lavender-200);
  margin-bottom: 10px;
  transition: all .22s cubic-bezier(.22,1,.36,1);
  text-align: left;
}
.btn:hover {
  border-color: var(--pup-purple-300);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(77,1,45,0.10);
}
.btn:active { transform: scale(0.98); }
.btn-ico {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--pup-lavender-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--pup-purple-700);
  flex: none;
  transition: background .22s, color .22s;
}
.btn:hover .btn-ico {
  background: var(--pup-purple-700);
  color: #fff;
}
.btn-text { flex: 1; min-width: 0; }
.btn-title {
  display: block;
  font: 700 15px/1.15 var(--font-body);
  color: var(--pup-purple-800);
}
.btn-sub {
  display: block;
  font: 400 12px/1.3 var(--font-body);
  color: var(--pup-ink-500);
  margin-top: 3px;
}
.btn-arr { color: var(--pup-purple-400); flex: none; }

/* Live dot */
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pup-heart-500);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---------- FAB (sticky WhatsApp) ---------- */
.fab {
  position: fixed;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  right: 18px;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(37,211,102,0.45), 0 0 0 6px rgba(37,211,102,0.12);
  text-decoration: none;
  z-index: 50;
  animation: floatY 3s ease-in-out infinite;
}
.fab > svg {
  display: block;
  position: relative;
  z-index: 1;
}
.fab-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid #25d366;
  animation: fabRing 2s ease-out infinite;
  pointer-events: none;
}
@keyframes fabRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---------- Reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise .65s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
.d1 { animation-delay: .05s; }
.d2 { animation-delay: .14s; }
.d3 { animation-delay: .22s; }
.d4 { animation-delay: .32s; }
.d5 { animation-delay: .42s; }
.d6 { animation-delay: .50s; }
.d7 { animation-delay: .58s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal     { opacity: 1; transform: none; animation: none; }
  .deco-heart,
  .fab,
  .fab-ring,
  .btn-cta-glow,
  .btn-cta-pulse,
  .live-dot   { animation: none; }
}

/* ---------- Desktop frame ----------
   Mobile (≤480px) stays exactly as designed: full-bleed card, fixed FAB.
   Desktop wraps the same 440px column in a soft, branded canvas. */
@media (min-width: 481px) {
  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    background:
      radial-gradient(circle at 18% 22%, var(--pup-lavender-100) 0%, transparent 55%),
      radial-gradient(circle at 82% 78%, #ffe0df 0%, transparent 55%),
      radial-gradient(circle at 50% 50%, #fff 0%, var(--pup-lavender-50) 100%);
  }
  .page {
    min-height: 0;
    border-radius: 32px;
    overflow: hidden;
    box-shadow:
      0 30px 80px rgba(77, 1, 45, 0.20),
      0 10px 30px rgba(77, 1, 45, 0.10);
  }
  .body { padding-bottom: 90px; }
  /* FAB pinned to the card on desktop, not the viewport */
  .fab {
    position: absolute;
    bottom: 18px;
    right: 18px;
  }
}