/* ====== BASE LIGHT ====== */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(180deg, #b8d4e8 0%, #d4e6f2 25%, #e8f0f6 50%, #f5f5f5 75%, #ffffff 100%);
  color: #111;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}

.wrapper {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  padding-top: 32px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.container { text-align: center; max-width: 480px; position: relative; z-index: 2; }

/* ====== NEVE CHE CADE ====== */
.snowfall {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background-image: 
    radial-gradient(4px 4px at 2% 15%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 5% 45%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 8% 75%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 11% 25%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 14% 55%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 17% 85%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 20% 35%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 23% 65%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 26% 10%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 29% 40%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 32% 70%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 35% 20%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 38% 50%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 41% 80%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 44% 30%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 47% 60%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 50% 5%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 53% 35%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 56% 65%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 59% 95%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 62% 25%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 65% 55%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 68% 85%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 71% 15%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 74% 45%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 77% 75%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 80% 20%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 83% 50%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 86% 80%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 89% 30%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 92% 60%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 95% 10%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 98% 40%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 3% 70%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 7% 5%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 13% 90%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 19% 8%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 25% 58%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 31% 88%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 37% 3%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 43% 43%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 49% 73%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 55% 13%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 61% 48%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 67% 78%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 73% 18%, white 50%, transparent 50%),
    radial-gradient(5px 5px at 79% 53%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 85% 83%, white 50%, transparent 50%),
    radial-gradient(3px 3px at 91% 23%, white 50%, transparent 50%),
    radial-gradient(4px 4px at 97% 63%, white 50%, transparent 50%);
  background-size: 100% 100%;
  animation: snowfall 8s linear infinite;
}

@keyframes snowfall {
  0% { background-position: 0 -100vh; }
  100% { background-position: 0 100vh; }
}

/* ====== ACCUMULO NEVE IN BASSO ====== */
.snow-ground {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 100" preserveAspectRatio="none"><path d="M0 100 L0 50 Q60 15 150 35 Q240 5 350 28 Q460 0 570 22 Q680 5 790 30 Q900 8 1010 25 Q1100 10 1200 40 L1200 100 Z" fill="white"/><path d="M0 100 L0 60 Q80 30 180 48 Q280 18 400 42 Q520 15 640 38 Q760 22 880 45 Q1000 25 1120 50 Q1180 35 1200 55 L1200 100 Z" fill="%23f0f0f0" opacity="0.9"/><path d="M0 100 L0 75 Q100 55 220 68 Q340 48 480 62 Q620 45 760 58 Q900 50 1050 65 Q1150 55 1200 70 L1200 100 Z" fill="%23e8e8e8" opacity="0.7"/></svg>');
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* ====== TITOLI & FOTO ====== */
.propic {
  width: 160px; height: 160px; border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ddd;
  margin-bottom: 12px;

  /* animazione pop-in */
  opacity: 0; transform: scale(.9);
  animation: pop-in .6s ease forwards;
}

.title-wrapper .title {
  font-size: 2rem; margin: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;

  /* animazione pop-in leggermente dopo */
  opacity: 0; transform: scale(.96);
  animation: pop-in .6s ease .15s forwards;
}

.badge-icon { width: 24px; height: 24px; }

.paragraph {
  margin-top: 6px; margin-bottom: 20px; font-size: 1rem; color: #333;

  /* animazione pop-in ancora dopo */
  opacity: 0; transform: scale(.98);
  animation: pop-in .6s ease .30s forwards;
}

/* ====== LINK CARDS ====== */
.link-list { display: flex; flex-direction: column; gap: 12px; }

/* Wrapper per pulsante OnlyFans con cappellino e neve */
.link-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
}

.santa-hat {
  position: absolute;
  top: -12px;
  left: -18px;
  width: 55px;
  height: auto;
  transform: rotate(-15deg);
  z-index: 15;
  opacity: 0;
  animation: pop-in .6s ease .5s forwards;
  pointer-events: none;
}

.button-snow {
  position: absolute;
  top: -6px;
  left: 10px;
  right: 10px;
  height: 12px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 12" preserveAspectRatio="none"><path d="M0 12 Q15 3 40 6 Q70 1 110 5 Q150 0 190 4 Q220 1 245 5 Q255 3 260 8 L260 12 Z" fill="white"/></svg>');
  background-size: cover;
  z-index: 14;
  pointer-events: none;
  opacity: 0;
  animation: pop-in .6s ease .55s forwards;
}

/* Label wrapper per OnlyFans con badge */
.label-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding-left: 10px;
}

.label-wrapper .label {
  color: #111;
  text-align: left;
}

.christmas-badge {
  background: #c41e3a;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}

.link-wrapper .link {
  position: relative;
  z-index: 10;
}

.link { width: 260px; margin-inline: auto; }

.link {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 12px 18px;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);

  /* rise-in (fade + slide up) con sfasamento */
  opacity: 0; transform: translateY(12px);
  animation: rise-in .5s ease forwards;
}
.link:hover { transform: scale(1.02); background: #f6f6f6; }

.link .icon { display: flex; align-items: center; gap: 10px; }
.link .label { flex: 1; text-align: left; padding-left: 10px; color: #111; }
.link .arrow { font-size: 1.2rem; }

/* Stagger semplice per i link */
.link-list .link-wrapper .link { animation-delay: .45s; }
.link-list > .link:nth-child(2) { animation-delay: .60s; }
.link-list > .link:nth-child(3) { animation-delay: .75s; }
.link-list > .link:nth-child(4) { animation-delay: .90s; }

/* ====== POPUP ====== */
.popup {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  align-items: center; justify-content: center; z-index: 99;
}
.popup-content {
  background: #fff; color: #000;
  padding: 24px; border-radius: 12px; max-width: 320px; text-align: center;

  /* piccolo pop-in quando appare (opzionale, carino) */
  animation: pop-in .25s ease forwards;
}
.button-wrapper { display: flex; gap: 10px; margin-top: 16px; justify-content: center; }
.button {
  padding: 10px 16px; border: none; background: #0077ff; color: #fff;
  border-radius: 8px; cursor: pointer; transition: background .3s ease;
}
.button:hover { background: #005ec2; }
.button.light { background: #ddd; color: #000; }
.button.light:hover { background: #ccc; }

/* ====== ANIMAZIONI KEYFRAMES ====== */
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rise-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ====== RESPONSIVE MOBILE ====== */
@media (max-width: 480px) {
  .santa-hat {
    width: 50px;
    top: -8px;
    left: -15px;
  }
}