/* scarlett ♡ — soft-luxe linktree
   Palette: ivory/champagne base, blush + rose-gold accents, deep plum ink.
   Refined, smooth, feminine — not loud pink. */

:root {
  --ivory:      #fbf7f2;
  --champagne:  #f3ead9;
  --blush:      #f3d9d4;
  --blush-deep: #e7b7b0;
  --rose-gold:  #c9a16b;
  --rose:       #b76e79;
  --plum:       #3b2733;
  --plum-soft:  #6c5560;
  --glass:      rgba(251, 247, 242, 0.62);
  --glass-line: rgba(255, 255, 255, 0.55);
  --shadow:     0 30px 80px -28px rgba(59, 39, 51, 0.55);

  --serif: "Hoefler Text", "Didot", "Bodoni MT", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  ui-rounded, "SF Pro Rounded", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vw, 40px);
  font-family: var(--sans);
  color: var(--plum);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---- Atmospheric background: her photo, softened, behind a warm wash ---- */
.bg {
  position: fixed;
  inset: -8%;
  z-index: -2;
  background-size: cover;
  background-position: center 30%;
  filter: blur(26px) brightness(0.82) saturate(1.12);
  transform: scale(1.12);
  animation: drift 26s ease-in-out infinite alternate;
}
.bg::after {
  /* champagne gradient wash for cohesion + readable contrast */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(243, 217, 212, 0.55), transparent 60%),
    radial-gradient(120% 120% at 50% 100%, rgba(59, 39, 51, 0.62), transparent 55%),
    linear-gradient(180deg, rgba(251, 247, 242, 0.10), rgba(59, 39, 51, 0.30));
}

@keyframes drift {
  from { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
  to   { transform: scale(1.18) translate3d(1.5%, 1.5%, 0); }
}

/* ---- The card ---- */
.card {
  position: relative;
  width: min(420px, 100%);
  padding: clamp(26px, 6vw, 40px) clamp(20px, 5vw, 34px) clamp(20px, 4vw, 28px);
  text-align: center;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--glass-line);
  border-radius: 30px;
  box-shadow: var(--shadow);
}
.card::before {
  /* faint top sheen on the glass */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,0.5), transparent 38%);
  pointer-events: none;
}

/* ---- Avatar ---- */
.avatar {
  width: clamp(104px, 30vw, 132px);
  height: clamp(104px, 30vw, 132px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 18px;
  border: 3px solid var(--ivory);
  box-shadow:
    0 0 0 2px var(--rose-gold),
    0 14px 34px -12px rgba(59, 39, 51, 0.6);
}

/* ---- Name + tagline ---- */
.name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 9vw, 40px);
  letter-spacing: 0.01em;
  line-height: 1.05;
  background: linear-gradient(92deg, var(--plum), var(--rose) 55%, var(--rose-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline {
  margin: 10px auto 26px;
  font-size: clamp(13px, 3.6vw, 15px);
  letter-spacing: 0.06em;
  color: var(--plum-soft);
  text-transform: lowercase;
}

/* Heart glyph: force a clean text heart (not an emoji) with a solid rose
   fill, so it renders consistently on iOS/Android and doesn't break the
   name's gradient clip or sit on a weird baseline. */
.hrt {
  -webkit-text-fill-color: var(--rose);
  color: var(--rose);
  font-variant-emoji: text;
  font-family: var(--sans);
  font-style: normal;
  display: inline-block;
  transform: translateY(0.02em);
  margin-left: 0.06em;
}
.name .hrt { font-size: 0.82em; }

/* ---- Links ---- */
.links { display: flex; flex-direction: column; gap: 13px; }

.link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--plum);
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.7,.2,1),
              box-shadow .22s ease,
              filter .22s ease;
  will-change: transform;
}
.link__emoji { font-size: 18px; line-height: 1; }
.link:hover { transform: translateY(-2px) scale(1.015); }
.link:active { transform: translateY(0) scale(.985); }

/* primary — filled blush→rose-gold, with a slow sheen sweep */
.link--primary {
  color: #fff;
  background: linear-gradient(100deg, var(--blush-deep), var(--rose) 48%, var(--rose-gold));
  background-size: 200% 100%;
  box-shadow: 0 16px 30px -14px rgba(183, 110, 121, 0.75);
  animation: sheen 7s ease-in-out infinite;
}
@keyframes sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.link--primary:hover { box-shadow: 0 20px 38px -14px rgba(183, 110, 121, 0.85); }

/* vip — deeper plum→rose-gold, gold hairline, subtle premium feel */
.link--vip {
  color: #fff;
  background: linear-gradient(105deg, var(--plum), #7a4a57 55%, var(--rose-gold));
  border: 1px solid rgba(201, 161, 107, 0.7);
  box-shadow: 0 16px 32px -16px rgba(59, 39, 51, 0.8);
}
.link--vip .link__emoji { filter: drop-shadow(0 0 6px rgba(201,161,107,.8)); }

/* social — soft glass */
.link--social {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--plum);
  box-shadow: 0 10px 24px -16px rgba(59, 39, 51, 0.6);
}
.link--social:hover { background: rgba(255, 255, 255, 0.72); }

/* ---- Footer ---- */
.foot {
  margin-top: 22px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-soft);
  opacity: 0.7;
}

/* ---- Floating sparkles (injected by client.js) ---- */
.sparkles { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sparkle {
  position: absolute;
  bottom: -16px;
  font-size: 14px;
  font-variant-emoji: text;
  color: rgba(243, 217, 212, 0.9);
  text-shadow: 0 0 8px rgba(201, 161, 107, 0.7);
  opacity: 0;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(.7) rotate(0deg); }
  12%  { opacity: 0.9; }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-104vh) scale(1.05) rotate(160deg); }
}

/* ---- Entrance reveal (CSS-only, works without JS) ---- */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.avatar, .name, .tagline, .link, .foot {
  animation: rise .72s cubic-bezier(.2,.7,.2,1) both;
}
.avatar  { animation-delay: .05s; }
.name    { animation-delay: .15s; }
.tagline { animation-delay: .25s; }
.link:nth-child(1) { animation-delay: .38s; }
.link:nth-child(2) { animation-delay: .48s; }
.link:nth-child(3) { animation-delay: .58s; }
.link:nth-child(4) { animation-delay: .68s; }
.foot    { animation-delay: .82s; }

/* primary keeps its sheen after the reveal finishes */
.link--primary { animation: rise .72s cubic-bezier(.2,.7,.2,1) both, sheen 7s ease-in-out 1s infinite; }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .avatar, .name, .tagline, .link, .foot { opacity: 1; transform: none; }
  .sparkles { display: none; }
}